Design Pt. 2
“Indifference towards people and the reality in which they live is actually the one and only cardinal sin in design.”
Objectives!
- Discuss the best practices of UI design
- Identify effective use of visual hierarchy, whitespace, and weight
- Use color theory to choose color palettes for projects
- Explain how typography can contribute to or hinder the user's experience
- Discuss reset.css and normalize.css
UI
User Interface (UI) Design focuses on anticipating user needs and ensuring that the interface has elements that are easy to access, understand, and facilitate those actions.
UI design brings together concepts from interaction design, visual design, and information architecture.
UI Best Practices
Know your users.
UI Best Practices
Keep it simple.
UI Best Practices
Communicate.
Do you appreciate it when a shopping website gives you a confirmation that your $200 purchase went through?
Do you appreciate it when a long article has headers that visually break up the content and tell you what content is important?
Visual Hierarchy
Read through this and form a sentence using your own words.
Visual Hierarchy
Create visual hierarchy by using:
- Headers (weight/size)
- Whitespace
- Color/texture
Visual Hierarchy
Scavenger hunt:
- Good example of visual hierarchy
- Bad example of visual hierarchy
👯 Talk to your neighbor
Color Theory
The Kardashian Method
Typography
Reset.css vs. Normalize.css
👯 Pair up, each person reads one. Then turn and tell each other about your type of css file
Review
⬜️:
What does UI stand for?
🤔:
What are some best practices in UI design?
⬜️:
What are some tools you can use to establish visual hierarchy?
🖐:
What role does color play in the user perceiving your app?
⬜️:
Draw a "T" in both serif and sans-serif. (please label)
🤔:
Be ready to describe normalize.css or reset.css
Design Principles
By Valerie Kraucunas
