UI & Digital Product Design

Applying graphic design to interfaces: systems, states and spacing.

Video tutorialTrack course · Envato Tuts+

Graphic Design Full Course for Beginners

Speed

0.75x1x1.25x1.5x2x

Skip intro Next lesson

Watch 00:00 · 2 checkpoints Watch on YouTube More on this topic

Transcript & captions .txt

11/11

1. 00:00UI & Digital Product Design. Applying graphic design to interfaces: systems, states and spacing.
2. 00:05UI design is graphic design with behaviour.
3. 00:10Every element has states, every value must scale, and consistency is enforced through tokens rather than taste.
4. 00:17Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 — never arbitrary pixel values.
5. 00:25Design tokens: colour, radius, shadow and spacing as named variables.
6. 00:30Component states: default, hover, focus, active, disabled, loading, error, empty.
7. 00:35Touch targets: minimum 44x44 px.
8. 00:40Mobile first: design the 390px width before the 1440px one.
9. 00:45Accessibility: visible focus rings, 4.5:1 text contrast, semantic structure.
10. 00:50Tokens over magic numbers (css): :root {…
11. 00:55Note: If a designer and a developer disagree about a value, the token is missing. Name it and the argument disappears.

UI design is graphic design with behaviour. Every element has states, every value must scale, and consistency is enforced through tokens rather than taste.

• Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 — never arbitrary pixel values.
• Design tokens: colour, radius, shadow and spacing as named variables.
• Component states: default, hover, focus, active, disabled, loading, error, empty.
• Touch targets: minimum 44x44 px.
• Mobile first: design the 390px width before the 1440px one.
• Accessibility: visible focus rings, 4.5:1 text contrast, semantic structure.

:root {
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius: 12px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-2: 0 10px 30px -10px rgb(0 0 0 / .5);
}
.card { padding: var(--space-6); border-radius: var(--radius); box-shadow: var(--shadow-2); }