Using images to tell a story is nothing new, the expression ‘Use a picture. It’s worth a thousand words.’ appeared in a 1911 newspaper article. So we have known for a long time that pictures can get the point across easily and comprehensibly, and this has been used and abused in the surge of infographics that have been created in recent years.
It is no different in the world of web design. For industries such as photography, fashion, designers (of all things), and many more, the best way to express yourself in as little space as possible is usually by creating an image-heavy site. In today’s article we have gathered a selection of such sites, and have tried to show how designers and developers approach this style of design in different ways.
Image-Heavy Website Design
Fitz
This is the portfolio site of a post-production and retouching freelancer. He says everything with images that are covered with a dark transparency showing the link title on mouseover. The layout is a little different in that the grid style is not symmetrical.
Visit Suffolk
This is the official tourist information site for the county of Suffolk in the UK. It has been hailed as a ‘brave’ design, and is very different to just about every other tourist information site. Very busy, very black and yellow, but very organized with the white border around all images.
Awd Agency
This communications agency uses relatively large images with a transparency that disappears when you hover the mouse over each individual image.
Cartel Belli
Another communications agency using a grid-style layout with red transparency on mouse-over.
Simon Foster Design
This front-end web designer uses large images and very little text. He employs large blocks of different colors as you scroll down the page, and hand-drawn images. The only down side of this design is that there is nothing to indicate where the links will lead you.
Jux
This is a new sharing site that has a collection of images on the landing page. Unusually, the images are in full color until you hover the mouse over one image, then all the others have a transparency leaving the one you have hovered over in full view.
RVLT
The image heavy layout of this page is a little different. It uses a grid style layout of rectangular images, but then there are a few with white backgrounds that don’t appear to be part of the grid. Another interesting thing about this home page is that if you refresh the page, the layout will be different.
Gabs
I wonder if you can guess what this company makes? Even the name is ‘bag’ backwards!
Hommard
Another fashion site with a grid style layout to present its images. Not all of the images are links, but the ones that are acquire a thin white border on mouse over.
Arthur Gallan
Here is a different approach to presenting images. All these guys are animated, and three of them walk off and back on the screen.
L’Oreal Color Looks
This full screen of thumbnail images is actually a screen of slideshows. Hovering over the images will select a strip of 5, and clicking on it will open a slideshow of larger images. This site definitely says it all with pictures!
Cropp
This fashion site uses a slide show at the top, with a grid-style layout below it. The transparency on mouse-over is very interesting – each image has a different colored transparency with a zig-zag lined pattern that is animated.
Trama
This site uses alternate images and solid blocks of color with minimal text on its grid-style layout. That baby is animated, it looks more like a cinemagraph than a video clip.
Etienne Aigner
This site has a minimal appearance although it is image-heavy. Next to each of the images is a close-up of one item from the image. As you scroll down the page there is a video and a slide show.
Lois Jeans
This grid-style layout uses different colored transparencies on each image on mouse-over. There is also a solid block of the same color at the bottom of each image with white text.
House: Campaign spring 2014
This site has so little text on it that I couldn’t really find out what it’s all about! It is obviously owned by the couple in the images, and there are videos of house music by different artists on the site. When you land on the home page there are four vertical images – hovering over any one of them puts a colored transparency over it and expands the rest of the page into that single image.
Yvan Rodic
This is the portfolio site of Yvan Rodic who is a traveler, photographer or both. Each row of images on the landing page is a selection of photographs from a visited city, and the tag in the top right corner shows the city, its latitude and longitude and a date. Clicking on any of the images will take you to the exhaustive collection of photographs from that city.
Nicolas Tarier Photography
This portfolio simply displays a gallery in a grid-style layout. Hovering over any image will put a transparency on it, showing the title of the photograph in a hollow box, and clicking on it will take you to the full size image.
Bernd Kammerer
Another photographer’s portfolio site… but I have to ask: Is that really his name? If so, he obviously felt he had no choice but to go into photography! The images have a black label that slides up on mouse-over, and the red circles change to white on mouse-over.
Grischek
This site’s landing page just has an awful lot of thumbnail images on it and it’s logo in the center. Hovering over the thumbnails will expand and light up one or more of the images. I am sure that G in the center of the logo is 3D… so if you have them, get your specs on!
Rod McClean
The images on this site are all skewed, and hovering over them makes them rectangular. Some have a very fast moving slide show on mouse-over..
Conclusion
Most of the above sites, as you will have seen, are in the industries and trades mentioned in the introduction (photography, fashion, designing), however, there are some that are not, and that are in trades that you wouldn’t necessarily associate with image-heavy sites.
Do you like landing on pages that have lots of pictures and not much text? Do you think they are easy to navigate in general? Have you designed or developed such a site?
Please share your opinions and links with us in the comments section below.
A Picture is Worth a Thousand Words: Image-Heavy Website Design
Geen opmerkingen:
Een reactie posten