Extras & Tools
Choosing Images For Your Site
Consistency across a range of images
Ensuring that images are styled consistently can help to give your entire site a considered and professional appearance. Below we will explore some ways to achieve this using a e-commerce stores to demonstrate the key concepts.
Images spanning a wide variety of subjects can be grouped together visually with a consistent use of color (and/or lighting).
Above: By far, the most popular way web designers achieve consistency when displaying a variety of products is to "cut them out" (also referred to as "die-cutting" which is a term borrowed from the print vernacular for trimming paper to a specified shape) and then displaying them on a white background. This has several advantages, not least of which is the ability to add to an array of products over time or via several locations with no visual markers to differentiate these factors. As shown above, the Terrain gardening supplies store displays all of their products on a white background.
Above: Of course, the background needn't be white - as shown in this screenshot from the Astier de Villatte website.
Above: To create a cohesive directory of team members for its website, Digital Media Stockholm shot (or post-processed in image-editing software) the photographs in black & white and did away with any background detail. This can be a very effective way to make disparate-looking portraits come together to emphasize the collective nature of a group of people.
The same setting or backdrop creates both visual and psychological consistency by evoking a singular place and/or time.
Above: The Restoration Hardware website takes a different approach, not using a singular color as in the products above but rather using a consistent backdrop to provide consistency.
Above: Here is another example from the Anthropologie website, showing that a simple backdrop setting can help to give a range of products both personality and polish.
Less tangible than color and context, but no less important, is a consistent approach to mood.
Above: This example is from an online stationery store called Present and Correct. Although each backdrop is different, the playful composition and props provides a consistently light-hearted mood throughout.