Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Vivid Imagery In Modern Web Design

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 Link

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 Media1
Komodo Media2 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.

Marchand3
Marchand De Trucs4 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? Link

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.

Mark Jardine5
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 Jardine6 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: Link

More Powerful Link

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

3000k8

Capture Attention Faster Link

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

Eric Benoit10

More Memorable Link

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

We Create Logos12

Better for Branding Link

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

Idea Scale14

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

Digital Base16

Capable of Illustrating a Point Creatively Link

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.

DoxReady

There are a ton of creative portfolio sites out there. Daniel Jimenez17 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)..

Daniel Jiminez18

The Focal Point of the Page Link

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 Studios19 uses a large image of a hand painting in the prime real estate of the page to draw attention to a featured project.

Dreamten Studios20

Different Approaches with Vivid Images Link

Sex Appeal Link

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

Orange Label22

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

James B24

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

Io Silver26

Cut Out from the Background Link

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.

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

No Milk Today28

On the contrary, Thepixelage29 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.

thepixelage

Lighting Effects Link

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 Studio30 uses a clever picture of a watermelon with strong lighting effects on a dark background.

Kavoon31

Combined with Simplicity of Message Link

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? Link

Size Link

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.

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

Shoe Guru33

Quality Link

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 Link

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.

Adit

Colors Link

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.

RedChilli

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

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?

Footnotes Link

  1. 1 http://www.komodomedia.com/
  2. 2 http://www.komodomedia.com
  3. 3 http://www.marchanddetrucs.com/blog/
  4. 4 http://www.marchanddetrucs.com/blog/
  5. 5 http://markjardine.com/
  6. 6 http://markjardine.com/
  7. 7 http://www.3000k.com/
  8. 8 http://www.3000k.com/
  9. 9 http://www.ebenoit.com/
  10. 10 http://www.ebenoit.com/
  11. 11 http://www.wecreatelogos.com/
  12. 12 http://www.wecreatelogos.com/
  13. 13 http://www.ideascale.com/
  14. 14 http://www.ideascale.com/
  15. 15 http://www.digitalbase.eu/
  16. 16 http://www.digitalbase.eu/
  17. 17 http://www.danjim.com.au/index.php?section=1
  18. 18 http://www.danjim.com.au/index.php?section=1
  19. 19 http://www.dreamten.com/
  20. 20 http://www.dreamten.com/
  21. 21 http://www.orangelabel.com/
  22. 22 http://www.orangelabel.com/
  23. 23 http://www.jamesb-dj.co.uk/
  24. 24 http://www.jamesb-dj.co.uk/
  25. 25 http://www.iosilver.co.uk/
  26. 26 http://www.iosilver.co.uk/
  27. 27 http://www.nomilktoday.be/
  28. 28 http://www.nomilktoday.be/
  29. 29 http://www.thepixelage.com/
  30. 30 http://www.kavoon.com/
  31. 31 http://www.kavoon.com/
  32. 32 http://shoeguru.ca/
  33. 33 http://shoeguru.ca/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Steven Snell is a Web designer and blogger. In addition to maintaining his own blog and writing for a number of other top design blogs, he also manages an online shop that offers premium graphic design resources.

  1. 1

    First! :D

    some nice images… means nothing to screen readers.

    0
  2. 2

    Very nice post.

    0
  3. 3

    Imagery can either make or brake a good website design. A great set of inspirational pictures though. Daniel

    0
  4. 4

    All of the sites are so gorgeous. It is unfortunately that screen readers and RSS followers don’t get the opportunity to see the visuals for a site when consuming the information through those formats. Has anyone found a way to extend that branded look of a site to an RSS feed?

    0
  5. 5

    i think one vivid image makes a page more professional, it will look clean, concentrated and of high quality, rather than a page scrammed full with images
    i personally like ShoeGuru the most
    i guess it’s because it seems like an ad of high quality
    this is for me most effective, it just gives an impression of luxury

    0
  6. 6

    STPo [Marchand de Trucs team]

    July 29, 2008 4:39 am

    Thank you guys for mentioning our work!
    Really, really flattered to be shown on SM among these great designs.

    (please notice that the right spelling is “Marchand De Trucs” [with one more space… French is a complicated language!])
    Thanks again =)

    0
  7. 7

    adit shukla

    July 29, 2008 4:58 am

    Holy cow! Thanks for featuring me. It’s an honor to be among these other designs that are so great.

    0
  8. 8

    Yes, they are vivid.

    Yes, most are dreary cliche’s: light bulbs to mean ideas, sprouting plants (in three examples), squeezing in the headline with an orange as the image, a stopwatch, building blocks, a Rubik’s cube. Oh! And that classic from the 40s–girls in skimpy bathing suits.

    Some good design, lots of bad art direction.

    0
  9. 9

    OverZero.it

    July 29, 2008 5:15 am

    Love the 3000K b/w – vivid green contrast!
    Oh, there is a typo in its description (300K)…

    0
  10. 10

    #4JamieO
    check out NetNewsWire

    0
  11. 11

    Greg Washington

    July 29, 2008 5:17 am

    Hierarchy…

    1.) Grid
    2.) Imagery
    3.) Type

    It is pointless to highlight 1 without touching on the importance for the other 2.

    0
  12. 12

    This magazine is such win! Every post trumps the last. Awesome.

    0
  13. 13

    very cool this designers!!!

    0
  14. 14

    @JamieO

    That’s not the point of XML feeds. Go to the site if you like the visuals.

    0
  15. 15

    As always a Smashing post :)

    0
  16. 16

    quite a good post, BUT:

    use sex appeal to capture attention?? you must be kidding me. cheap trick for losers. there are very few cases when showing girls’ bodies isn’t cheap crap. certainly, not those shown above..

    0
  17. 17

    Steven Snell

    July 29, 2008 6:54 am

    Gafroninja,
    You’re right, it means nothing to screen readers, but it can mean something to 99% of your visitors. I’m not saying you should ignore the need to create a site that works well for screen readers, but that doesn’t mean you shouldn’t care about the look of the site.

    Ann,
    I agree that the Shue Guru site/image is very effective. I also like the lighting that’s used behind the picture.

    Greg,
    Very true, they all work together.

    0
  18. 18

    Sorry, but I must say most of the examples are a little trashy. No offense. I also agree with Pepa’s post about the use of sex appeal.

    0
  19. 19

    Everyone and their mother are using that grassy text tutorial

    0
  20. 20

    Yeni Setiawan

    July 29, 2008 7:17 am

    Awesome!
    I think I’m gonna draw something like Mark Jardine’s page :)

    0

↑ Back to top