Vivid Imagery In Modern Web Design

By Steven Snell

By using vivid images designers can draw user’s attention, communicate a message effectively and leave a memorable first impression. Practically all websites use images in their design, but few use vivid images to achieve maximum results. What is a vivid image? A simple definition is an image or photo that is striking, shocking, intriguing, interesting, beautiful or sexy (we’ll be looking at plenty of examples below). It causes a reaction from the senses of visitors that an average image would not.

Words can communicate on their own. Photos can often communicate quicker and in different ways than text. Vivid images used in combination with the right words can be incredibly powerful. These images do more than just play a mere complementary role in the design.

A good starting point for this discussion is to look at the purposes of images in general and why they are used in web design. From there it’s possible to observe the true impact that vivid images can have as opposed to just standard images.

6 Purposes of Images in Web Design

1. Accomplish a More Attractive Look
The most common and obvious reason for using images and pictures in web design is simply to create a more attractive and visually appealing design. While other design elements such as color schemes, typography, spacing and balance play an instrumental role in achieving the desired look, images make a sizable difference as well.

Komodo Media uses imagery heavily to create an attractive and vivid “jungle” atmosphere.

2. To Add Color
Photos and images have a strong ability to add color to a design that may be very plain or basic without the image. A well-chosen photo can complement the color scheme and give it more depth. In some cases a color scheme can be too overwhelming with lots of different colors of text, backgrounds, buttons, navigation, etc., but a picture can add far more variety of color without having the same downfalls.

3. Added Personality
One of the challenges of web design is to create something that visitors will connect with at some level. Photos and images can create a greater sense of personality for the site and can do more for building a connection that just text. We’re used to seeing photos of people on an About page or a Staff page for this reason. Readers connect more with people than they do with text.

Marchand De Trucs uses an attractive imagery in the header of his blog. Result: the image conveys the design a personal note.

4. Branding Purposes
Branding is a priority for most websites, and images are capable of helping to establish the brand of the company by creating a particular vision of the company/website in the minds of visitors. Many images that are used for the purpose of branding will lead the visitor to quickly see the company in a particular light. While text is also useful and essential for branding, images have the ability to communicate a message more quickly and more powerfully.

5. Product Previews
If a website is selling products, images will almost always be included. People like to see what they’re buying, and photos can help to give them more confidence that they are getting what they want.

6. To Catch Attention
Images are often the first thing visitors will notice, so when they are used properly they will lead the visitor to understand what is on the page and to continue reading the text rather than totally distracting them from the text.

How Do Vivid Images Differ from Usual Images?

In many ways vivid images will achieve the same purposes of general images that we just looked at, but they will do so more effectively. Usually images and photos are used to add some life to a page or make it more attractive, while vivid images will often be the focal point of the page. It’s very common when a vivid image is used that it is the only image, or one of very few, on the page in order to keep it as the focal point. Too many strong images on one page will distract the visitor and drown out the message.

It’s very common when a vivid image is used that it is the only image, or one of very few, on the page in order to keep it as the focal point. Example: Mark Jardine uses only one attactive illustration, but uses it effectively. The guitar hero is memorable and looks nicely.

In Web design vivid imagery often builds upon the existing perceptions and associations of visitors. Images and objects that carry some type of meaning can be used to portray a specific message. A few examples:

• Water commonly evokes thoughts or feelings of purity, cleanliness, or freshness.
• Plants and sprouts demonstrate growth and life.
• Light is frequenty used for creativity, ideas, or energy.

Potential Qualities of Vivid Imagery as Compared to Usual Images:

More Powerful

A vivid image that jumps out to the visitor holds a great deal of power in terms of communicating a message and getting attention. The example below from 3000k uses an image of a young plant in a person’s hand to help communicate the message of growth. This is far more powerful than their tagline "Grow: make something worth seeing" would be on its own without being accompanied by the image.

Capture Attention Faster

While images in general will grab the attention of visitors more effectively than text, vivid images will far outperform average images in this way. Eric Benoit uses a picture of an orange to complement his tagline, "Want to squeeze the most out of your website?" In a similar fashion as the 3000k example above, the image and the text work together. In this case, the image of the orange is the first thing visitors will notice.

More Memorable

A vivid, striking image will last in the minds of visitors. Text may be read and forgotten, but a strong image will be remembered. Of course, the goal is also to create the proper association with the memory (for example, we’ve all seen television commercials that stand out to us, but we can’t always remember what product they were promoting).

We Create Logos uses an image of a light bulb to communicate the creativity of their design. Visitors are more likely to remember them in this way than if this image wasn’t used.

Better for Branding

IdeaScale’s tagline is "Where ideas come to life." The image of the light bulb portrays the creative aspect and the plant represents the growth and life, which works well with their tagline for branding.

Digital Base uses an image of Lego-type blocks to go along with their tagline "Building your digital future."

Capable of Illustrating a Point Creatively

Standard images make a page more friendly and more attractive, but vivid images are able to do the same while communicating a message. In many cases they illustrate the main point of a website or page. In the first example below, DoxReady uses a well-chosen image of a hand and a stopwatch to complement their tagline "Start saving time and money today." While you can easily read those words and get the message, the picture certainly reinforces their point.

There are a ton of creative portfolio sites out there. Daniel Jimenez attempts to distinguish himself with the headline "Still or Sparking… Refreshing, Natural & Vital Design." The bottle of water communicates the message of refreshing and natural (and he put his name on the bottle, which is a nice touch to help visitors remember him)..

The Focal Point of the Page

In some instances the image is the main element that the rest of the page is built around. When an image is intended to have a strong impact it will often be placed prominently in the page. Dreamten Studios uses a large image of a hand painting in the prime real estate of the page to draw attention to a featured project.

Different Approaches with Vivid Images

Sex Appeal

One of the most common and most effective uses of vivid images in web design is to use sex appeal to capture attention. The right picture of a woman will immediately grab the attention of most male visitors.

Orange Label uses a picture of a woman in a bikini accompanied by the text, "We know what attracts your customers." The picture certainly catches the attention of most visitors and proves their point by using sex appeal to attract attention.

British D.J. James B also uses a woman in a bikini.

Io Silver sells jewelry and they use some sex appeal while showing one of their necklaces.

Cut Out from the Background

Many examples of vivid images that you have seen in this post, as well as throughout the internet in general, have been removed from the background. This is a common technique that can improve the look of the image, make it stand out more, make it fit with the color and style of the page, and create a clear message with less distractions.

Nomilktoday slightly cuts out from the background. However, sometimes even this small effect is enough to make a logo stand out and attract users’ attetntion.

On the contrary, Thepixelage uses a strong cutout image of a Rubik’s Cube. This image is much more powerful and effective than it would be if it were sitting in a standard photo rather the interacting with the rest of the page.

Lighting Effects

Lighting and shadows are often used to create a more striking image. This can be done by a photographer while shooting a photo or by editing with Photoshop or a similar program. Either way it can accomplish the same goal.

Kavoon Web Design Studio uses a clever picture of a watermelon with strong lighting effects on a dark background.

Combined with Simplicity of Message

Some of the most effective uses of images and photos (and many from this post) are done in combination with a simple message. With short attention spans of visitors and the need to establish a particular message quickly, a strong, attention-grabbing image can work very well with a short, simple, and clear message. Ideally the message and the image complement each other and work together to create the impression with the visitor.

What Impacts the Success of the Imagery?

Size

Images and photos that are intended to quickly leave an impression will generally be larger in size and a more substantial part of the design. Large images are sometimes used almost exclusively with very little text on a page to create a message. Smaller images will typically have a harder time creating some of the same results.

ShoeGuru uses a huge image of a shoe, which has a completely different effect than a smaller version of the same image would have if it were surrounded by a lot of test and some other images.

Quality

The quality of the photo or image is always going to play a factor as well. Higher quality images will be much more effective than those of average quality. Whether it’s photography, digital art, or a combination of both, high quality is essential. Looking back through the examples in the post, the quality is consistently high.

Simplicity

When the goal is to quickly create a strong impression with visitors, simplicity is the key. With too much going on the visitors will be distracted and the image will not have the same impact. The simplicity is a factor in terms of the image itself and also in terms of the design outside of the image. The most effective images will present a clear message with little chance of being missed by visitors.

Adit Shukla uses vivid imagery as the background image for the overall layout. Due to the simplicity of the theme, the design doesn’t look overcrowded and appears to be simple, even although there a numer of navigation options and a variety of different design elements.

Colors

Colors are capable of having a very significant impact on visitors’ perception of the design. However, when using colorful images, you need to make sure that you use the right ones. Blue, red and green are most attractive colors among men and women. Women don’t like brown, orange and purple most, while men feel uncomfortable with brown, purple and pink.

RedChilli uses the color red very powerfully. The vivid image in the middle of the page is memorable, attractive and informative. And this is what effective design is all about.

How Do You Feel About Imagery’s Impact on Design?

What stands out to you when you look at the use of photos and images across the web? Are there strategies or techniques that you find to be particularly effective?

About the Author

Steven Snell is a web designer and freelance blogger. He recently launched DesignM.ag, which includes his articles on design and freelancing, community news, and a design gallery.