Vivid Imagery In Modern Web Design

Advertisement

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

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:

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

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

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

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

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

DoxReady18

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

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

Dreamten Studios22

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 Label23 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 Label24

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

James B26

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

Io Silver28

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.

Nomilktoday29 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 Today30

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

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

Kavoon33

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.

ShoeGuru34 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 Guru35

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

Adit37

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.

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

RedChilli39

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?

Footnotes

  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://doxready.com/
  18. 18 http://doxready.com/
  19. 19 http://www.danjim.com.au/index.php?section=1
  20. 20 http://www.danjim.com.au/index.php?section=1
  21. 21 http://www.dreamten.com/
  22. 22 http://www.dreamten.com/
  23. 23 http://www.orangelabel.com/
  24. 24 http://www.orangelabel.com/
  25. 25 http://www.jamesb-dj.co.uk/
  26. 26 http://www.jamesb-dj.co.uk/
  27. 27 http://www.iosilver.co.uk/
  28. 28 http://www.iosilver.co.uk/
  29. 29 http://www.nomilktoday.be/
  30. 30 http://www.nomilktoday.be/
  31. 31 http://www.thepixelage.com/
  32. 32 http://www.kavoon.com/
  33. 33 http://www.kavoon.com/
  34. 34 http://shoeguru.ca/
  35. 35 http://shoeguru.ca/
  36. 36 http://aditshukla.com/blog
  37. 37 http://aditshukla.com/blog
  38. 38 http://www.redchilli.com/
  39. 39 http://www.redchilli.com/

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

Advertising
  1. 1

    You made a point here, images (speaical) means a lot to readers.. really nice post.

    0
  2. 52

    Redchilli is one my favourites the monocromatic use and bright red branding – awesome. Great post!!!

    0
  3. 103

    then should we use nice words?

    but anyway another great article

    0
  4. 154

    Yes the images are quiet nice but the sites themselves were put together brilliantly…..
    One of the most amazing posts!
    I love Smashing Magazine!

    0
  5. 205

    very interesting article

    i think you mean surrounded by a lot of text.. not test for shoeguru

    0
  6. 256

    So will spelling.

    0
  7. 307

    Me gusto este post!!!

    0
  8. 358

    Thanks so much smashing mag for the feature of Komodo Media. You guys rock!

    0
  9. 409

    These rock, such good quality design

    0
  10. 460

    Yes, some sites have brilliant design ideas

    0
  11. 511

    the greatest post this year (4me)

    0
  12. 562

    Hi Steven,
    great post. Where did you find the data about color and man and woman feeling ?

    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.

    Thank’s

    0
  13. 613

    Vitaly Friedman & Sven Lennartz

    August 12, 2008 5:23 am

    @Mogmog (#63): this part was edited by the editorial team. Here is the source: http://www.metacolor.de/farben/lieblingsfarben.htm (in German)

    0
  14. 664

    Hi Smashing Mag!

    Thank you for featuring us. We’ve been visiting your site for a year and never thought we would be featured here! That’s so cool! Was busy with our sendcube product that we didn’t even notice, you’ve been sending hundreds of visitors to our site.

    cheers and more smashing sites!

    0
  15. 715

    Nice! I have a random collection of concert posters I did when I lived in DC: http://flickr.com/photos/squaremachine/sets/72157600240614307/

    0
  16. 766

    Some people mention that a few of the websites clearly use tutorials that are really quite fashionable at present time, and have used them in such a way that they actually make their blog/site memorable.

    Those that disprove of using a tutorial to learn a tool is a fool, as we all have to learn somewhere, and the fact someone has taken that knowledge and created something special deserves the recognition?
    Maybe these people actually provided the tutorials found on the web? who knows.

    Very inspiring designs in my eyes, and would like to see myself among them one day.

    E-Scaping

    0
  17. 817

    What you are doing makes reality out the communication & branding process…very impressed

    0
  18. 868

    I agree that a picture can tell a thousand words. Problem is that Google doesn’t hear the story when it is told only in pictures. I love a minimalist site with a few great images but Google rankings discourage people from doing this. Many jewelry sites like mine are forced to put key text in place to garner rankings. It is a shame because you lose a lot of the imagery.

    0
  19. 919

    im speechless. this. is truly a great tutorial..

    it helps.. me a lot.. incase of my situation im totally new at field of web designing…thanks..

    0
  20. 970

    Some if these images are truly amazing. They make you stop what you’re doing and just look. Very inspirational post. Thanks a lot.

    0

↑ Back to top