Level 6
UI Design
Designing the surface people touch
Interfaces, components, layout, states, interaction and responsive behaviour — where visual fundamentals meet software.
By the end of this track you can
- →Design a component with every state accounted for
- →Build responsive layouts that hold up across devices
- →Apply typography and colour inside a functioning interface
- →Use motion to explain rather than decorate
What Is an Interface?
8 minAn interface is the surface where a person and a system meet to exchange intent, translating human purpose into machine operations and machine state back into something a person can read.
Components
8 minA component is a reusable interface part with a defined appearance, behavior, and contract, built once so that people and teams stop relearning and rebuilding the same thing.
Interface Layout
8 minLayout is the arrangement of interface components in space, using grids, spacing scales, alignment, and grouping to make structure visible before anyone reads a single word.
Typography in Interfaces
8 minInterface typography sets text that must stay legible across unknown screens, sizes and user settings, where every font choice carries a real performance and accessibility cost.
Color in Interfaces
8 minIn interfaces color is a functional signal carrying state, status and hierarchy, governed by contrast requirements and expressed through semantic tokens rather than raw values.
Interaction Basics
9 minInteraction design is the loop of input and feedback between a person and a system, governed by affordances, timing, target size and the freedom to undo a mistake.
Component States
8 minA component is never one picture but a family of conditions — default, hover, focus, pressed, disabled, loading, error, empty — each of which has to be designed deliberately.
Responsive Design
8 minThe practice of building layouts that adapt to the conditions they are viewed in, rather than assuming a single fixed canvas, screen size, input method, or connection.
Next track
Product Design