This document provides guidance on key web design principles such as:
- Using simplicity, clarity and focus in design and writing.
- Applying design techniques like alignment, proximity and use of white space.
- Considering typography, color schemes, layout and use of multimedia.
- Testing designs through usability studies and across browsers to ensure quality user experience.
11. Actionable Lessons from
Eyetracking Studies
Users initially look at the top
left and upper portion of the
page before moving down
and to the right.
12. A headline has less than a second of a site
visitor’s attention. White space is good.
21. Concept - Wireframes
• Similar to
storyboarding
• Define the basic
architecture
• What’s most
important?
22. HOME PAGE
NAVIGATION
CANDIDATES/ FINANCING MESSAGING
LOGO TRANSPARENT POLITICS, A DISTRICT
ISSUES LINK TO FINANCING LINK TO MESSAGING
LINK TO HOMEPAGE CITIZEN MEDIA PROJECT LINK TO
LINK TO C/I PAGE PAGE PAGE
DISTRICT PAGE
CANDIDATE CANDIDATE
BLOG UPDATES POMBO IMAGE MCNERNY
LINK TO BLOG
LATEST POSTS, SELECTED BY
LINK TO C/I PAGE IMAGE
ADMINISTRATOR MAP LINK TO C/I PAGE
LINK TO DISTRICT PAGE
HEADLINE LINK TO POSTING
VIDEO STILL IMAGE
LINK TO VIDEO LINK TO
CLIP IMAGE
MEDIA UPDATES
ROTATING IMAGES, VIDEO STILLS
VIDEO
OUTSIDE NEWS FEEDS IMAGE STILL
ROTATING HEADLINES LINK TO LINK TO
IMAGE VIDEO CLIP
FOOTER LINK TO ABOUT PAGE * LINK TO CITMEDIA PAGE * LINK TO SUGGESTIONS EMAIL FORM * LINK TO CONTACT US EMAIL FORM
23. Wireframes
• Should NOT look pretty
• NO thought to color, graphics, fonts
• Visio, OmniGraffle, Illustrator, index cards
24. Working with Color
• Palettes should be comfortable
• Use high contrast for text, but avoid highest
contrast
• White text on black OK for large elements,
but fatiguing for longer passages
73. Alignment & Spacing
• Major elements - align edges to one another
• Leave some breathing room, but watch for
uncomfortably open spaces
• Elements should have some visual connection to
another element on the page/screen
• Don’t over-use centering
107. Serif Sans
More readable More scannable
- body text - headlines / signage
Very small print Small print easier to
hard to read read
Traditional Modern
111. Common Web Fonts
Constraint: Fonts commonly installed
on users’ computers
112. Type Hierarchy
• Contrast made for a
reason
• Signal another level of
information
• Similar ‘levels’ or kinds
of information should
receive the same type
treatment
113. Keeping it Simple
• Will focus the reader’s
attention on other visual
elements of your page
• Will help the reader
process your page
138. Convert PSD designs to HTML
• Do it by hand (requires skills worth having)
• Use a service such as PSD2HTML (human)
• Use software such as SiteGrinder (auto)
139. Web Design Resources
• So many out there, but here are a couple:
• Web Design References bit.ly/designreferences
• Awesome collection of tools bit.ly/designtools1
• Smashing Mag: smashingmagazine.com
• And of course kdmc.berkeley.edu
143. User Testing
• Formal - Hire a firm
• Informal - Ask friends to perform tasks
• Videotape, blind mirrors
• Morae software techsmith.com/morae
• loop11.com
144. Browser Testing
• Test on both Windows and Mac
• Test on multiple browsers
• Test at several resolutions
• Know your audience (if possible)
• What screen size do they have?
• Do they have broadband?
145. Does My Site Suck?
bit.ly/site-suck
• Our pages take more than four
seconds to load
• It takes longer than four
seconds for the man from Mars
to understand what our site is
about.
• Our site makes visitors register
before they can enter.
• I don't know if our site looks
the same in the major browsers.
146. Does My Site Suck?
bit.ly/site-suck
• Our site uses pop-up windows
• We don't analyze our log files.
• We never conduct user testing.
• Our site uses scrolling, blinking,
fading, or moving text.
• Our site has lots of dead links.
• Lots more at URL above.
Notes de l'éditeur
Balancing act b/w info overload and simplicity. Everyone wants a piece of the homepage action. Every design decision is weighed against business needs.
Everyone wants their stuff on the homepage. You have to represent the whole pub, but simplicity has to win.
Yahoo couldn’t help but cram every part of their business onto the homepage. Google resisted valiantly.
People don’t read pages, they scan.
Everyone’s in a hurry. People don’t need to read everything. We’re good at scanning
Looks around feverishly for anything that is:
A) Vaguely interesting ... B) Clickable
Finds a halfway-decent match, and click If it doesn’t pan out, clicks the Back button and tries again
... and how do we know they do this?
Users initially look at the top left and upper portion of the page before moving down and to the right.
A headline has less than a second of a site visitor's attention. ... White space is good.
Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
Lists hold reader attention longer. Bigger images get more attention.
Ideal line length for human eye/best comprehension is around 420px
Navigation tools work better when placed at the top of the page.
Users initially look at the top left and upper portion of the page before moving down and to the right.
A headline has less than a second of a site visitor's attention. ... White space is good.
Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
Lists hold reader attention longer. Bigger images get more attention.
Ideal line length for human eye/best comprehension is around 420px
Navigation tools work better when placed at the top of the page.
Users initially look at the top left and upper portion of the page before moving down and to the right.
A headline has less than a second of a site visitor's attention. ... White space is good.
Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
Lists hold reader attention longer. Bigger images get more attention.
Ideal line length for human eye/best comprehension is around 420px
Navigation tools work better when placed at the top of the page.
Users initially look at the top left and upper portion of the page before moving down and to the right.
A headline has less than a second of a site visitor's attention. ... White space is good.
Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
Lists hold reader attention longer. Bigger images get more attention.
Ideal line length for human eye/best comprehension is around 420px
Navigation tools work better when placed at the top of the page.
Users initially look at the top left and upper portion of the page before moving down and to the right.
A headline has less than a second of a site visitor's attention. ... White space is good.
Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
Lists hold reader attention longer. Bigger images get more attention.
Ideal line length for human eye/best comprehension is around 420px
Navigation tools work better when placed at the top of the page.
Users initially look at the top left and upper portion of the page before moving down and to the right.
A headline has less than a second of a site visitor's attention. ... White space is good.
Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
Lists hold reader attention longer. Bigger images get more attention.
Ideal line length for human eye/best comprehension is around 420px
Navigation tools work better when placed at the top of the page.
Users initially look at the top left and upper portion of the page before moving down and to the right.
A headline has less than a second of a site visitor's attention. ... White space is good.
Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
Lists hold reader attention longer. Bigger images get more attention.
Ideal line length for human eye/best comprehension is around 420px
Navigation tools work better when placed at the top of the page.
Users initially look at the top left and upper portion of the page before moving down and to the right.
A headline has less than a second of a site visitor's attention. ... White space is good.
Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
Lists hold reader attention longer. Bigger images get more attention.
Ideal line length for human eye/best comprehension is around 420px
Navigation tools work better when placed at the top of the page.
Users initially look at the top left and upper portion of the page before moving down and to the right.
A headline has less than a second of a site visitor's attention. ... White space is good.
Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
Lists hold reader attention longer. Bigger images get more attention.
Ideal line length for human eye/best comprehension is around 420px
Navigation tools work better when placed at the top of the page.
Users initially look at the top left and upper portion of the page before moving down and to the right.
A headline has less than a second of a site visitor's attention. ... White space is good.
Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
Lists hold reader attention longer. Bigger images get more attention.
Ideal line length for human eye/best comprehension is around 420px
Navigation tools work better when placed at the top of the page.
De Vinci’s “Man Inscribed In A Circle”
The Birth of Venus (Botticelli)
Mondrian’s Composition with Red, Yellow and Blue
What’s with this?
Elements should have some visual connection to another element on the page/screen.
Major elements - align edges to one another
Elements should have some visual connection to another element on the page/screen.
Major elements - align edges to one another
Elements should have some visual connection to another element on the page/screen.
Major elements - align edges to one another
Leave some breathing room, but watch for uncomfortably open spaces
White space used judiciously can be comfortable.
Don’t over-use centering
Subway stop in Coimbra, Portugal
Where am I? How did I get here? Be direct ... Simplify and streamline
Be consistent!
Never use bold, italic, cap, small caps, or script on large amounts of body text.
Tiny fonts drive people nuts. Simplify ... Be consistent!
Don’t over-do it with font changes
Small type encourages reading, while larger type promotes lighter scanning. -Eyetrack
Links should be obvious
Differentiate visited and unvisited links
I can’t see numbers in these images.
We stop “seeing” our own sites. We assume others have the same browsers, OSes, bandwidth we do.
We become color blind.