ImportanceUsers form their 1st impression of your website in
SECONDS
When users know what they want, they want to find it quickly
Distracted multi-tasking users need to find their place back
Reading is USUALLY the primary task of a web page
Studies show that visually pleasing interfaces are easier to learn
TOP 51.EASY TO READ
Content organization drives visual organization
2.EASY TO NAVIGATE (page and website)
3.EASY TO FIND (skimming)
4.FAMILIAR (consistent across pages)
5.FAST
Layout StylesGRID or BOX model
an adjustable grid (layout changes for content)
Does not mean it changes to the user, this is from printing
Example: classified ads, yearbook photos, comics
Template
rigid, fill-in-the-blank approach
Commonly used
ProximityA Gestalt principle
Grouping or locating things near each other
People tend to think things that are close are related
red, orange
tan, brown
green, light green
red, orange, tan, brown, green, light green
Proximity in ReadingNewspaper columns
Line spacing and visual line width (column width)
Wider lines are more difficult to read
Sequences of articles on a page or in multiple page spans (print)
Images with text
Images near the text are expected to be connected (often are not)
Dan’s Clothing Store Bad
checkout
closeout on pink socks
email us
july specials
kid’s clothes
mens clothes
open an account
sale on rainwear
special sizes
store locations
your account status
women’s clothes
Dan’s Clothing Store Good
women’s clothes
men’s clothes
kids clothes
july specials
sale on rainwear
closeout on pink socks
store locations
store hours
open an account
your account status
checkout
email us
AlignmentA Gestalt principle
Minimize the number of broken lines
Broken line items appear to stick out
Notes:
Center alignment on text is unpredictable
and causes
many broken “tracing” lines
Text alignmentHorizontal
left, right, center (aka left justified, right justified)
justified
dyslexia can have troubles with the slightly altered spacing
Consistency•On the web, users might think they
changed websites
• large changes might take more bandwidth
•keep navigation’s position on pages
•builds user familiarity
ContrastContrast is similar to Gestalt’s similarity
Generally contrast is used with size and color
Low contrast between items makes them harder to separate
Can be used sparingly to subtly group items.
ContrastNot just a setting on your monitor
Level of visual difference
Color (black on white or white on green)
Size (BOLD text, large headings)
Shape (triangle vs circle)
Draws attention, Highlights separation
Can indicates grouping as well (low contrast)
WhitespaceOften whitespace overlooked and shunned
“whitespace” or “negative space”
Anti-content (anti-matter exists)
ZERO does exist, it represents nothing (its null not undefined)
Saves busy looking layouts ( busy → zebra stripes)
whitespace can be a guide for the eyes
AnimationGets attention (most the time)
Distracts the eyes/attention
Peripheral animation can distract users
aka Divine Proportion
Pythagoreans discovered it
Math ratio common in nature’s proportions
1:1.62
An irrational number: phi or Φ
Φ = (1+√5) ÷ 2
Golden Ratio
Rule of 3rds
Based upon the golden ratio ( 1.6 ≈ 1+⅔ )
Dividing the layout into multiples of ⅓
Segments can use ⅔ or could be ⅙
This slide uses the rule
Photography, video, film, page layout
Top Related