UI Design
UI01 - UI Hierarchy
Complexity
Junior
Timeframe
1h
Summary
You should understand UI hiearchies.
Skill Breakdown
You should understand how to create a visual hierarchy (i.e. emphasize important elements and deemphasize other elements) by:
- using size
- using font weight
- using colors
- using contrast
You should understand the concept of primary/secondary/tertiary actions and how this affects design choices.
You should understand when to use and when not to use labels.
Required Resources
- Hierarchy is Everything, Refactoring UI
Optional Resources
There are no optional resources for this skill.
UI02 - UI Layout and Spacing
Complexity
Junior
Timeframe
1h
Summary
You should understand UI layout and spacing.
Skill Breakdown
You should understand how to find the right amount of whitespace by adding a lot whitespace first and then removing whitespace step by step.
You should understand the importance of a spacing and sizing system and how to create one.
You should understand that you don't need to fill everything and just give elements the space they actually need.
You should understand when to use grids and when not to use grids.
You should understand that relative sizing doesn't always work.
You should understand what ambiguous spacing is and how to avoid it.
Required Resources
- Layout and Spacing, Refactoring UI
Optional Resources
There are no optional resources for this skill.
UI03 - UI Text Design
Complexity
Junior
Timeframe
1h
Summary
You should understand UI text design.
Skill Breakdown
You should understand the importance of type scales and how to create one.
You should understand how to choose a good font.
You should understand how to choose a good line length and line height.
You should understand when to use which alignment.
Required Resources
- Designing Text, Refactoring UI
Optional Resources
There are no optional resources for this skill.
UI04 - UI Colors
Complexity
Junior
Timeframe
1h
Summary
You should understand UI colors.
Skill Breakdown
You should understand the RGB and HSV color systems and why HSV is generally superior.
You should understand how to manipulate hue, saturation and value of a HSV color to achieve desired outcomes.
You should understand how to structure a good color palette:
- shades of grey
- primary colors
- accent colors
You should understand that color should be used to support information, not as the only means of design.
Required Resources
- Working with Color, Refactoring UI
Optional Resources
There are no optional resources for this skill.
UI05 - UI Depth
Complexity
Junior
Timeframe
1h
Summary
You should understand UI depth.
Skill Breakdown
You should understand how to create depth by emulating a light source:
- raised elements
- inset elements
You should understand how to use shadows to convey elevation.
You should understand how to create layers by overlapping elements.
Required Resources
- Creating Depth, Refactoring UI
Optional Resources
There are no optional resources for this skill.
UI06 - UI Images
Complexity
Junior
Timeframe
1h
Summary
You should understand UI depth.
Skill Breakdown
You should understand how to adapt background images to your site.
You should understand when it's a bad idea to scale up/down icons and images.
You should understand how to deal with images created by users.
Required Resources
- Working with Images, Refactoring UI
Optional Resources
There are no optional resources for this skill.