20 Examples of Effective Image Usage in Web Design

By / Jul 9, 2012 / Inspiration
shares

Images can play a huge role in a web design. They can be used as a large background image that sets the tone for the whole site, or they can appear in the form of thumbnails in a grid. However you end up using images, great care and thought should be put into composition, layout, and style. For this post, we’ve gathered a collection of sites that are great examples of how images should be used in web design.

VANMOOF

Photo Usage in Web Design

Identity Print

Photo Usage in Web Design

Lotta Nieminen

Photo Usage in Web Design

S.E.H Kelly

Photo Usage in Web Design

Ismael Burciaga

Photo Usage in Web Design

humaan

Photo Usage in Web Design

iamalwayshungry

Photo Usage in Web Design

Bicikli Fumic

Photo Usage in Web Design

kiinnostus.fi/autokuume

Photo Usage in Web Design

connect

Photo Usage in Web Design

The Nomad Hotel

Photo Usage in Web Design

JP74

Photo Usage in Web Design

Mint Museum

Photo Usage in Web Design

Wythe Hotel

Photo Usage in Web Design

Artist of the Year

Photo Usage in Web Design

MoMA – Cindy Sherman

Photo Usage in Web Design

Coocci

Photo Usage in Web Design

Reaching Quiet

Photo Usage in Web Design

saught

Photo Usage in Web Design

aibee

Photo Usage in Web Design

The Best Designs
Awwwards
CSS Design Awards

About the Author

Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr

12 Comments

  1. Chris Devlin
    July 9, 2012

    Attractive collection of sites using images in that i really love the site “Wythe Hotel” which the image used is very attractive to the visitors, it tends to go further into the site. I am gonna use one of the style from the above collections to my site…. :)

    Reply
    • Roland
      July 9, 2012

      Hi Chris! Any tutorials out there on how to create such Image based websites!?
      Many thanks!

      Reply
  2. Lukas Zitnik
    July 9, 2012

    Yes, in Web Design its truth – images, images, images …

    Reply
  3. Design Turnpike
    July 9, 2012

    Agreed – on my site I’ve found the more images I add, the more sales come in!

    Reply
  4. Alvin Web Studio
    July 9, 2012

    Thanks Gisele, I’ve always find some good images to use in my design.

    I’ve used most of them as a background though, this will sure broaden my mind :)

    Appreciate your effort!

    Reply
  5. Jay Rana
    July 10, 2012

    nice design..

    Reply
  6. Chris
    July 10, 2012

    Hey,

    Thank your for the great collection!

    Here is another website with an effective background-image:

    http://pealfestival.com/

    Reply
  7. aledesign.it – Creative Graphic
    July 10, 2012

    All site are great…very nice design… I like in particular way “Coocci” So cool! Thanks for sharing!

    Reply
  8. Paul Weston
    July 11, 2012

    Thought this was a great article and a very inspiring collection when it comes to the use of images in websites. The way we use images is very important and the variety of sites you have included will act as a great resource for me for when it comes to the design of my sites. I liked all the sites you have included but the one that stood out for me was thekiinnostus.fi/autokuume site. I love the use of images and the simple layout of the site really makes you focus on the content. Mix this with the techniques as you scroll down and the site really has that wow factor. Great article and I look forward to more like this from yourself.

    Reply
  9. Webmastericons
    July 12, 2012

    Great collection of websites. I especially like the “Lotta Nieminen” site. The neutral backgrounds really help to bring out the pictures on the site. Thanks.

    Reply
  10. Ross Johnson
    July 12, 2012

    Nice to see some attention to the use of “the right” imagery. If you have done any research into cognitive psychology you will know we have measurable physical reactions to the images we see. All too often people use images haphazardly to “fill space” while being completely unaware of the implications.

    Reply
  11. Christina Cruz
    July 25, 2012

    These are some great examples. Images in website design is extremely important because if customers can see what you offer they are more likely going to buy it. I have come across some sites though that do not quite know how to include a decent picture on there page.

    Reply

Leave a Reply