Web Design


John Alexis Guerra Gómez


Slides:http://johnguerra.co/lectures/webDevelopment_fall2021/08_Web_Design/

Class page:https://johnguerra.co/classes/webDevelopment_fall_2021/

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
Proximity
The Non-Designer’s Design Book, 4th ed. Robin Williams, Peachpit Press, 2015.

Alignment

  • Do find/make strong line, stick to it
  • Avoid automatic centering
Alignment
The Non-Designer’s Design Book, 4th ed. Robin Williams, Peachpit Press, 2015.

Repetition

  • Do unify by pushing existing consistencies
Repetition
The Non-Designer’s Design Book, 4th ed. Robin Williams, Peachpit Press, 2015.

Contrast

  • If not identical, then very different
  • Avoid similar
Contrast
The Non-Designer’s Design Book, 4th ed. Robin Williams, Peachpit Press, 2015.

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

Layouts

Layout examples

https://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/

Typography

Why Typography matters

By Melissa Gilbert (magicalwords.net)

Font Families

  • Sans Serif
  • Serif
  • Cursive
  • Monospace
  • Others

Good basic course on typography

https://www.codeschool.com/courses/fundamentals-of-design?from_search=design

Typography Matching

Advanced combinations

https://www.typography.com/techniques/

Color

Color Models

Color Space

https://en.wikipedia.org/wiki/Color_space

Color Palettes

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

Tips

Color blindness

https://coolors.co/
Suggested by Daniel Lisko

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
Designing the User Interface: Strategies for Effective Human-Computer Interaction

Research based web design guidelines

https://www.usability.gov/sites/default/files/documents/guidelines_book.pdf

Evaluation

Usability Testing

Brighton Uni Usability Lab

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

http://blockbuilder.org/john-guerra/57d31bae7685139cecd731bba9f48090

Alternatives

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

Next class readings: accessibility

https://www.udacity.com/course/web-accessibility--ud891