Visual design will make you money

  1. Causes better orientation on your website
  2. People will remeber you more
  3. It supports perception of your brand
  4. Visual design evokes right emotions
  5. It has effect on your conversions

But it is not the only and most important thing!

1/
You should
like your website!

Your opinion on visual design has nearly no impact on your website performance. Neither has opinion of your visual designer.

Do you like your website? That's good! You will be eager to work with your designer again. But it has nothing to do with performance.

Visual design is based on solid understanding of your business and visitors
not as an eruption of creativity of your designer

Visual design is not art, but a tool that enhances your website performance. It is based on user research and context of your business. Opinions won't make you more money. It is better to discuss facts and their implications on design.

2/
But websites should
be modern!

Your visual designer will take care of it. Visual designers are the only ones that will think about trends when looking on your website.

People are seeking content
not visual design!

Trends do not have much impact on website performance. And "old" websites may be percieved more trustworthy.

3/
Website must respect
visual design principles

There is huge visual design theory that can help you lower the risk of website failure. It is pitty, that not many visual designers know about it.

  • 80/20 Rule
  • Aesthetic-Usability Effect
  • Affordance
  • Attractivenes Bias
  • Cathedral Effect
  • Chunking
  • Closure
  • Consistency
  • Contrast
  • Feedback Loop
  • Fitt's Law
  • Framing
  • Gestalt Rules
  • Golden Ratio
  • Hick's Law
  • Horror Vacui
  • Inverted Pyramid
  • Mental Model
  • Ockham's Razor
  • Picture Superiority Effect
  • Priming
  • Signal-to-Noise Ratio
  • Threat Detection
  • Visibility

When is website percieved as "nice"?

There is strong correlation between first and long-lasting impression. First impression takes about 50 ms.

Conclusion for your website

  1. Clear hierarchy
  2. Strong visual design
  3. Simplicity and cleanliness
  4. Speed (still) counts

Declare clear visual priorities
signal-to-noise ratio can kill your performance

Noone reads unreadable text

People scan on the web a lot. We have to ease their job as much as we can, or they simply won't read anything.

White text on black background is read 32 % slower than black on white

Line lenght should be around 75 letters on desktop, 35-50 on mobile. Which of those paragraphs is easier to read?

Leading 1.5 /
about 45 letters on row
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat enim nec arcu elementum maximus. Mauris dapibus sem nec nisl sollicitudin, ut tincidunt enim ultricies. Pellentesque consequat lacinia lacinia. Donec vel dictum purus. Aliquam tincidunt dui eget lacus dictum, id luctus mauris pharetra. Quisque quis pharetra ex.
Leading 1.0 /
about 80 letters on row
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat enim nec arcu elementum maximus. Mauris dapibus sem nec nisl sollicitudin, ut tincidunt enim ultricies. Pellentesque consequat lacinia lacinia. Donec vel dictum purus. Aliquam tincidunt dui eget lacus dictum, id luctus mauris pharetra. Quisque quis pharetra ex. Praesent dapibus blandit nulla sed viverra. Donec interdum convallis lacus hendrerit bibendum. Nulla accumsan diam vitae dui volutpat, cursus dignissim risus mattis. Etiam rhoncus est eu ante faucibus vehicula. Praesent ornare ullamcorper elit, at cursus dolor dignissim non. Phasellus eu diam sed arcu pulvinar ornare porttitor vitae lacus. Proin ullamcorper felis sit amet ipsum elementum consequat. Quisque mattis posuere massa. Nunc suscipit iaculis lobortis. Integer tincidunt mauris ut turpis convallis eleifend. Cras lacus tortor, elementum quis malesuada vel, accumsan pharetra neque. Mauris quis convallis sapien. Phasellus elementum lacus quis turpis elementum, et finibus ante luctus. Quisque ultricies viverra turpis eget volutpat. Donec in pharetra odio, eu tincidunt massa. Maecenas quis molestie ex.

Rows shouldn't look like separate lines in the list neither should be really close to one another. CSS Line height values around 1.5 on desktop and 1.8 on mobile should be ok for most circumstances.

Both x-height and structure of letters influence legibility

Lower case is better than upper case - we are used to read them more, so it is easier. Is this sentence readable for you?

Worst case scenario? Whole paragraph in upper case. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at faucibus risus. Sed ullamcorper arcu vel ex dapibus, in pretium velit luctus. Praesent egestas neque ut erat rutrum ultricies eu in lectus. Vivamus aliquet dolor ut mi cursus convallis. Cras rutrum, urna ac ornare porttitor, lorem elit viverra dui, et aliquam dolor quam at nulla. Nullam vel mi venenatis, iaculis odio at, vulputate enim. Nam id erat urna. Duis et nunc mattis, laoreet mauris vel, sagittis tellus. Fusce a gravida purus.

4/
Website must respect
web design principles

Ads are annoying for most people and so they tend to ignore anything that looks like an ad.

Ad = rectangular shape different from website background. People ignore them.

The only thing worser than
banner is automatic carousel.
People won't see
any of your messages
And you will kill the most
important space on your website
1 2 2

Stock Photos

Stock Photos are cheap way to reduce confidence. And people tend to ignore them. Just get a photographer.

Is there any difference in label aligment?

Top aligned label is perfect for desktop and mobile websites.
Left/right aligned label costs little less vertical space, but it is not suitable for mobile experience.
Label inside input is not a good idea for any longer form. People tend to forget what are they filling in.

5/
Forget opinions
and test your design today!

We have already said that opinions do not count. How can we objectively evaluate our designs? You can test visitors perceptions!

Five second test

  1. Helps you understand first impression
  2. Show your design to someone from your audience for 5 sec
  3. Hide it again and ask what does she remember

Card evaluation

  1. Show your website someone from your audience
  2. Give him cards with different atributes
  3. Let him decide what suits him best for your website (and talk with him afterwards)

6/
Measure your website properly
or you won't find anything in the long run.

It is not possible to calculate influence of your visual design without looking into your analytics.

On next redesign:

Ask your designer: "Why is it here?" and
"How will this help my business?"
Think about readability and
legibility of your website
Get rid of all (rotating) banners
and smiling stock photo guys
Does that hyper-super-duper modern
design really support your brand?
Show your website to real people
from your target group. Test it today!
Do not only launch your website.
Measure its real impact.

Spread the word