Readings discussion

• questions?

Random Questions

• Tell me one important component of web design
• What is typography matching
• What is usability
• What is consistency in web design?

Basic Design Principles

Basic Design Principles

• Proximity
• Alignment
• Repetition
• Contrast

Proximity

• Do group related items together
• Avoid equal whitespace between unrelated

Alignment

• Do find/make strong line, stick to it
• Avoid automatic centering

Repetition

• Do unify by pushing existing consistencies

Contrast

• If not identical, then very different
• Avoid similar

Web Design Fundamentals

or the very basics of it

Precedence and placement

• What do you want users to do first?
• What are your goals/users?

Airbnb

• What are their goals?
• What are their users?
https://www.airbnb.com/

Layouts

• Use hierarchies
• Use the grid
• Manage spacing
• Align and distribute
• Understanding visual hierarchy in web design

Layout examples

Typography

Why Typography matters

Font Families

• Sans Serif
• Serif
• Cursive
• Monospace
• Others

Good basic course on typography

Typography Matching

• Create enough difference
• e.g. Serif + Sans Serif
• http://fontpair.co/

Advanced combinations

Color

Color Models

• RGB
• HSB
• CMYK
• https://en.wikipedia.org/wiki/Color_model

Color Palettes

• Complementary colors
• Homogeneous colors
• Triads
• Analogous
• Monochromatic
• Adobe Color CC

Tips

• Create enough contrast
• Be consistent
• Use nature as inspiration
• Color theory intro for web design

Color blindness

8 golden rules of design

• Strive for consistency
• Cater for universal usability
• Offer informative feedback
• Design dialogs to yield closure
• Prevent errors
• Permit easy reversal of actions
• Support internal locus of control
• Reduce short-term memory load

Research based web design guidelines

Evaluation

Usability Testing

Usability Testing preparation

• Create a task list
• Get a consent form
• Plan the questions
• Run the test on yourself
• Open non-biased call for participants

Usability Testing steps

• Consent
• User is not being tested
• Try not to bias the user
• Ask user to think aloud
• Post-study survey

Likert Scale

What do you think?

• Strongly disagree
• disagree
• ok
• agree
• Strongly agree

More about likert scales

• Can be 3, 5, 7 or more responses
• Continuous or Discrete
• Middle response is the balance

How to visualize Likert Scale results

Alternatives

• Mechanical Turk
• Behavior logs
• A/B Testing
• Controlled Experiments
• Expert reviews

Next class readings: accessibility