20 Examples of Effective Image Usage in Web Design
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
Identity Print
Lotta Nieminen
S.E.H Kelly
Ismael Burciaga
humaan
iamalwayshungry
Bicikli Fumic
kiinnostus.fi/autokuume
connect
The Nomad Hotel
JP74
Mint Museum
Wythe Hotel
Artist of the Year
MoMA – Cindy Sherman
Coocci
Reaching Quiet
saught
aibee
The Best Designs
Awwwards
CSS Design Awards
About the Author
I love communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr
Related Posts
Here's some other articles that you will definitely find useful.
18 Websites that Take Scrolling to the Next Level
Inspiring Type in Package Design
Flat Design Inspiration
21 Beautiful Examples of Using White in Web Design
23 Examples of Flat Web Design
12 comments
Chris Devlin
July 9, 2012Attractive 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
July 9, 2012Hi Chris! Any tutorials out there on how to create such Image based websites!?
Many thanks!
Lukas Zitnik
July 9, 2012Yes, in Web Design its truth – images, images, images …
Design Turnpike
July 9, 2012Agreed – on my site I’ve found the more images I add, the more sales come in!
Alvin Web Studio
July 9, 2012Thanks 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!
Jay Rana
July 10, 2012nice design..
Chris
July 10, 2012Hey,
Thank your for the great collection!
Here is another website with an effective background-image:
http://pealfestival.com/
aledesign.it - Creative Graphic
July 10, 2012All site are great…very nice design… I like in particular way “Coocci” So cool! Thanks for sharing!
Paul Weston
July 11, 2012Thought 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.
Webmastericons
July 12, 2012Great collection of websites. I especially like the “Lotta Nieminen” site. The neutral backgrounds really help to bring out the pictures on the site. Thanks.
Ross Johnson
July 12, 2012Nice 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.
Christina Cruz
July 25, 2012These 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.