1. No one trusts an ugly website
How to improve your website’s credibility by
improving its design
Robyn Bragg — Nonlinear Creations

2. People can’t
help
judging
by appearances

3. To be credible
a website needs to
look professional
well-designed
and polished.

4. We find that people quickly evaluate a site by
visual design alone. When designing your site,
pay attention to layout, typography, images,
consistency issues, and more.
— Web Credibility Project, Stanford University
credibility.stanford.edu

5. Like dressing up for a job
interview, putting your
best design foot forward
makes a good first
impression

6. Would you
trust this site
with your
credit card
information?

7. What makes your website feel credible?
Consistency
- Does the look and feel of the website match your
stated brand values?
- Are the visual elements internally consistent?
Good, up-to-date design
- Garish or dated designs feel amateur and cheap
- Good design doesn’t have to be flashy or trendy

8. Is your website consistent with the rest of
your branding?
• Users will want reassurance that they are in the right
place
• If the branding is significantly different in style and
quality to your printed materials or to the image you
put forward (e.g. high-end) users may start to distrust
you.

9. Your overall design should be internally
consistent
• Consistent overall tone/mood
• Unified visual style
• Consistent colour palette
• Use of one or two fonts
• Establishment of a consistent approach to
photography or illustration

10. Which is the more reputable site?
An exercise…

11. Which site feels more reputable?

12. Which site feels more reputable?

13. Which site feels more reputable?

14. BEFORE
Changing your design can totally change
your first impression
AFTER

15. Case Study: Uglytub.com
Let’s examine what makes a website
look untrustworthy

16. Does this
site feel
trustworthy?

17. Pick a visual tone & style
A mishmash of visual approaches
gives a site an amateur feeling.
Let’s take a look at some inconsitencies…

18. Serious HumourousOR
Image style
IllustrationOR

19. Image fills the frame Image is cut out on a
white background
Image is also distorted:
never a good idea!
OR
Image style

20. Text overlaid on image Text above imageOR
How do text & images work together?

21. Be consistent in font use
Too many fonts and font styles can be confusing and distracting.
Pick one font and use it consistently

22. Fonts – pick one and stick to it
Recommendations
• Select 1-2 fonts
(maximum 2 – one for headings one for body text)
• Use different weights/colours/sizes and case
(e.g. all caps vs. sentence case) to create an
information hierarchy
• Do not center align text – this makes it difficult
for users to scan
There are at least 4 fonts being used:

23. All caps
White on black
Blue on white
Left aligned
OR
Use consistent heading & body text styles
Black on white
Centered
OR

24. Make sure people know where to click
Be consistent with the colour and style of links and buttons.

25. Purple
Beveled
Square corners
Yellow
Rounded corners
Drop shadow
OR
Pick a consistent button btyle
Grey
Rounded corners
Gradient
OR

26. Have a consistent link style
• It is essential for users to know
what is “clickable” on the
website. As web design moves
towards a more minimal
approach, colour becomes one
of the primary cue for users
• A colour should be reserved for
links and other interactive
elements that is not used in any
other way on the site
Would you know which of these is clickable?

27. Alignment. Alignment. Alignment.
Working to a grid and ensuring that elements are well aligned and well
organized will make your webiste feel neat and polished.

28. Alignment & Spacing
• Inconsistent and tight spacing
makes a site feel “uncomfortable”
or “amateur” to users.
• Use consistent alignment to a
base grid throughout the site.
• Allow whitespace and breathing
room between elements, in
particular, between text and other
visual elements (lines, boxes etc.)
Everything on the
page should align
to an underlying
grid structure

29. Whitespace. A designer’s best friend
Look at any high-end brand’s website. Look at how much space
doesn’t have anything in it.
Add whitespace, and then add some more.

30. Whitespace

31. Colour. The days of web-safe colours are
long gone.
Pick colours for consistency, sophistication and usability.

32. Choose a colour palette stick to it
Do these colours work together?
• Don’t have too much variety — Make
sure that all the colours feel like they
come from the same “families”
• Tone — Is the palette consistent with
your corporate culture? Neutrals, subtle
variations and calmer colours create a
more sophisticated and trustworthy feel
• Usability — The lime green tone is vivid
and “vibrates” on the eye, causing
legibility problems and eyestrain

33. A better colour palette
Link/button
colour
Visited link/
button hover
colour

34. When choosing a colour palette…
• Make sure the colours relate to each other (e.g. they feel like they go together)
• Ensure that the palette has enough range in colours/values to serve your
purpose, but don’t go overboard.
• Make sure your colours can support:
- Links (should use a unique, dedicated colour)
- Buttons
- Call out/emphasis boxes
- Headings
- Backgrounds etc.

35. When choosing a colour palette (cont’d)
• Chose more muted colours for text or backgrounds. Extremely vivid
and/or pale colours can be hard for users to read
Text Text Text Text
• Vivid colours can certainly be used, if done carefully, however they
should be balanced with more neutral colours to prevent the design
from becoming garish
• Always keep accessibility in mind, visually challenged users need strong
contrast in text for legibility – Check out this great tool for testing
accessibility of test colours: jxnblk.com/colorable/demos/text

36. Oh, and content helps too.
Obviously your content will go a long way to establish your credibility
as well, but if not presented with a baseline of good design, users may
not get far enough to read it.