20 Examples of Effective Image Usage in Web Design

By / Jul 9, 2012 / Inspiration

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

  • http://www.forixwebdesign.com/ Chris Devlin

    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…. :)

    • Roland

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

  • http://www.zitnikcreative.cz/en Lukas Zitnik

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

  • http://www.designturnpike.com Design Turnpike

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

  • http://www.alvinnguyen.net Alvin Web Studio

    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!

  • http://www.mascotsoftwaresystems.com Jay Rana

    nice design..

  • Chris

    Hey,

    Thank your for the great collection!

    Here is another website with an effective background-image:

    http://pealfestival.com/

  • http://www.aledesign.it/ad_adv.html aledesign.it – Creative Graphic

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

  • http://www.webtemplates-creare.com/ Paul Weston

    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.

  • http://www.webmastericons.com Webmastericons

    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.

  • http://3.7designs.co Ross Johnson

    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.

  • http://taglinegroup.com Christina Cruz

    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.