UI/UX Design Fundamentals

Lesson 1UI vs. UX — a distinction worth getting precise about

These two terms are often used together (“UI/UX”) almost as a single word, but they describe genuinely different concerns:

• •UI (User Interface) — the actual visual design of a digital product: colours, typography, buttons, icons, layout. Everything covered in Levels 1 and 2 of this course lives primarily here.
• •UX (User Experience) — how the product actually feels to use: whether the flow makes sense, whether the user can accomplish their goal without confusion or friction, whether the right information is available at the right moment.

Lesson 2Wireframing — planning structure before style

A wireframe is a deliberately low-fidelity, mostly colourless and unstyled sketch of a screen's layout — boxes, rough text placement, basic buttons — used to plan structure and flow before any visual design decisions (colour, typography, imagery) are made.

• •Use simple grey rectangles for images, plain black text for content, basic rectangles for buttons
• •Deliberately avoid colour, real typography choices, or polished visuals at this stage
• •Focus entirely on: what's on this screen, where is it positioned, and what happens when the user interacts with it

Lesson 3User flows — mapping the path through a product

A user flow maps the sequence of screens a user moves through to accomplish a specific goal — for example: Home screen → Product list → Product detail → Checkout → Confirmation.

Lesson 4Core usability principles

• •Consistency — buttons, icons, and patterns should behave the same way throughout a product; a user shouldn't have to relearn how something works on every new screen (Module 1's repetition principle, applied to interactive behaviour)
• •Feedback — the product should clearly communicate when an action has been received (a button visibly changes when tapped, a loading indicator appears after submitting a form); silence after an action leaves a user uncertain whether anything happened at all
• •Clear navigation — a user should always have a reasonably clear sense of where they are within the product and how to get back to where they were

Lesson 5Prototyping in Figma — making screens clickable

Figma's Prototype tab (alongside the Design tab already used throughout the course) allows separate design frames to be linked together with defined interactions — turning a set of static screens into a clickable, navigable simulation of a working app.

• •Switch to the Prototype tab
• •Select an element (e.g. a button) on one frame
• •Drag the connection point that appears to a second frame — this defines “tapping this button navigates to this screen”
• •Choose the interaction type (e.g. “On Tap”) and transition style
• •Use Present mode to click through the linked screens as an interactive simulation