A Picture is Worth a Thousand Words: Image-Heavy Website Design

A Picture is Worth a Thousand Words: Image-Heavy Website Design

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.

Fitz

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.

Visit Suffolk

Awd Agency

This communications agency uses relatively large images with a transparency that disappears when you hover the mouse over each individual image.

Awd Agency

Cartel Belli

Another communications agency using a grid-style layout with red transparency on mouse-over.

Cartel Belli

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.

Simon Foster Design

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.

Jux

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.

RVLT

Gabs

I wonder if you can guess what this company makes? Even the name is ‘bag’ backwards!

Gabs

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.

Hommard

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.

Arthur Gallan

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!

L'Oreal Color Looks

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.

Cropp

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.

Trama

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.

Etienne Aigner

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.

Lois Jeans

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.

House: Campaign spring 2014

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.

Yvan Rodic

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.

Nicolas Tarier Photography

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.

Bernd Kammerer

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!

Grischek

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..

Rod McClean

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.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.