Web Design
ja.guerrag[at}uniandes.edu.co |
@duto_guerra
Slides:http://johnguerra.co/lectures/webDevelopment_spring2020/08_Web_Design/
Class page:http://johnguerra.co/classes/webDevelopment_spring_2020/
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?
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
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=designTypography Matching
- Create enough difference
- e.g. Serif + Sans Serif
- http://fontpair.co/
Advanced combinations
https://www.typography.com/techniques/Color
Color Models
- RGB
- HSB
- CMYK
- https://en.wikipedia.org/wiki/Color_model
Color Space
https://en.wikipedia.org/wiki/Color_space
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
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
https://www.usability.gov/sites/default/files/documents/guidelines_book.pdfEvaluation
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
http://blockbuilder.org/john-guerra/57d31bae7685139cecd731bba9f48090Alternatives
- Mechanical Turk
- Behavior logs
- A/B Testing
- Controlled Experiments
- Expert reviews