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 topShare on Twitter

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

    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

    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

    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

    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

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

    0
  21. 21

    cool

    0
  22. 22

    @Pepa

    Sex appeal works though. I’m sure many consider it a cheap trick but it would be ignorant not to mention it as a way of drawing attention.

    1
  23. 23

    Very interesting article, thank you.

    0
  24. 24

    Interesting.

    Seems to me these sites are looking like a traditional magazine layout. Great to see refreshing design being tested.

    Wonder how many translates in to client’s website?

    0
  25. 25

    Great post, Smashing! This study on vivid imagery really showcases the power of placement, continuance, isolation, contrast, and proportion for establishing emphasis in design. I do agree that the inclusion of “sex appeal” is a little on the trashy side, but sex appeal sells, and is often an important undertone in advertising. Think about all the commercials of luxury cars under silky sheets, slo-mo videos of juice being splashed into a glass, or strawberries being dropped into chocolate. All of those visuals are about creating lust/desire in the same way as the images of the scantily dressed women above. It’s a touchy subject, but you can’t argue that it’s not a part of design.

    0
  26. 26

    thanks for featuring our work (the lego blocks).

    In fact we are a development/webdesign agency, and wanted to use “construction blocks” to compare the service we offer to an architect / construction firm. You could call it cliché, but it gives the visitor an instant impression that we “create stuff”.

    0
  27. 27

    Really nice stuff. Back in my day the web was sometimes a eye sore to look at, everything just really cheesy and horribly executed. These days it’s amazing the quality and stunning imagery that is being produced on the web. We’ve come a long way :)

    0
  28. 28

    Great post, but shouldn’t it be ‘3000k’? not 300k ;)

    0
  29. 29

    Nice post. Makes me wish I could design like that.

    0
  30. 30

    Like it or not, sex DOES sell. It is in our nature.

    0
  31. 31

    This is fantastic! Thanks so much.

    0
  32. 32

    Gafroninja,

    You may have a point.

    For a screen reader may linger a bit longer on a vivid picture.

    But, what guarantees do you have that this type of reader will still read your content after studying your vivid image?

    0
  33. 33

    Thanks for the link (ioSilver) done a year or so ago for my now ex girlfriend ;)

    0
  34. 34

    great! good job!

    0
  35. 35

    I agree with those who have mentioned that sex appeal is questionable. I’ve personally never used it in my work, but in my opinion it’s a case-by-case issue. It may do a great job in some situations of grabbing attention and conveying the right message.

    Sorry for the 3000K typo.

    Digital Base,
    I like it. It gets the message across instantly.

    0
  36. 36

    I hate it when people will say that “first”. It’s so douchey.

    1
  37. 37

    Thank you guys, it’s great to be mentioned on your magazine!!! Wow!!!! Gracias!!!!!!!
    Really nice post as well!

    0
  38. 38

    Sex appeal is no cheaper than humans are drawn to it because of what we find attractive deep inside. To dismiss our fascination is to belittle our wonderful selves.

    0
  39. 39

    Good designs and too true.

    0
  40. 40

    I’m chuffed to have finally made it into a Smashing Magazine article (James B).

    Many thanks, and congrats to all others too – some fine examples of work.

    James

    0
  41. 41

    About the sex appeal issue: just because it works, doesn’t make it right.
    And it might not even work that well: these images only affect (most?) men. They make many women feel uncomfortable as they realize they’re once again used as objects, mere decoration, rather than individuals.
    I don’t think alienating 50% of your visitors is a very good design decision.

    0
  42. 42

    andreas dilaveris

    July 29, 2008 11:54 pm

    At least 2 of the websites showcased above have based their ‘vivid’ imagery on popular online photoshop tutorials, making little or absolutely no creative alterations in the process. As they are small indie sites it’s not worth calling them out (it is a funny coincidence though, that they would both find their way into this list of examples, taking into consideration the shear number of sites outthere in the wild). Since this piece discusses the use of imagery from a design perspective, it’s worth pointing out that originality, should at the very least, be the intended starting point of a design piece. As the author states

    These images do more than just play a mere complementary role in the design

    In some case that role isn’t necessarily positive.

    0
  43. 43

    I think Thepixelage is the best example to me as it utilizes the basic concept of a “creative solution”. Many times I see web designers simply use an image search engine for a concept, and then just smack it down on the page saying “There! This emphasizes my point!” The way most of these examples utilize conceptual imagery appeals to my eye much more than just simply having a nice picture on a page.

    Thanks Smashing!

    0
  44. 44

    Maaike..unless you have a rack and you speak from experience, your opinion is useless!

    0
  45. 45

    Great post, great examples. I especially like the almost-monochromatic designs with the pictures providing strong color accents (3000k and RedChilli). And I just love the creativity of Komodo and Adit Shukla.

    @Maaike: Please, do not assume that each and every woman is offended by the use of feminine imagery/sex appeal. In fact, I think a lot of women don’t mind at all and don’t think of it as an exploitation. In a way, you can think of it as quite flattering: judging from the diffusion of this attention-catching technique, we women are one of the most appealing things on earth! :D

    I think, if it’s used with taste, beauty can be appealing to everyone, men and women, in different ways of course. Just notice this: women’s magazines are filled with commercials for perfumes, make-up or fashion which usually portray oh-so-beautful women, scantily dressed and hinting sensuality. For a man, this may be appealing because he just likes it (an instinct, I may call it?). For a woman, it can be commercially appealing because the product hints that she could be like the model that men admire. This is just my hypothesis obviously.

    0
  46. 46

    What a nice post! Very interesting !

    And thank you very much for posting my website, close to amazing works!

    It is a honour,

    Smashing long life!

    0
  47. 47

    Great write-up Mr. Snell, man your posts are popping up just about everywhere.
    This one was t-t-t–tasty! :)

    0
  48. 48

    As good as this looks my take is to go in the completely different direction with my own homepage, to use zero images for the layout and just rely on CSS and XHTML. Probably because my site is primarily a gallery and I don’t want the pictures to sort of blend into, or pale against the background. Also, it loads much faster and is a billion times slicker. >:3

    0
  49. 49

    Hinduismnet.com

    July 30, 2008 10:20 pm

    Most of the ad agency designed sites use images to the most. Art directors who jumped from Print to Web usually carry their print style to web. Anyways, as usual a well thought about post.

    0
  50. 50

    Very useful post……..

    0
  51. 51

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

    0
  52. 52

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

    0
  53. 53

    then should we use nice words?

    but anyway another great article

    0
  54. 54

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

    very interesting article

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

    0
  56. 56

    So will spelling.

    0
  57. 57

    Me gusto este post!!!

    0
  58. 58

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

    0
  59. 59

    These rock, such good quality design

    0
  60. 60

    Yes, some sites have brilliant design ideas

    0
  61. 61

    the greatest post this year (4me)

    0
  62. 62

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

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

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

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

    0
  66. 66

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

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

    0
  68. 68

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

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

    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