UI/UX Design & Prototyping

Most UI/UX courses teach Figma and call it design. This one treats the tool as the easy part. The sequence follows how the work actually happens — understand the user, structure the information, then design the interface, then systematise it, then hand it to an engineer who has to build it. Accessibility and realistic states (empty, loading, error, too much data) are taught as part of the craft rather than as an afterthought, because those are what separate a portfolio piece from a shippable screen.

• Plan and run user interviews and usability tests
• Turn research into personas, journey maps and problem statements
• Structure information architecture and user flows
• Wireframe at low fidelity before committing to visual design
• Build interfaces in Figma using auto layout, components and variants
• Apply typography, spacing, colour and hierarchy deliberately
• Meet WCAG colour-contrast and focus requirements
• Build interactive prototypes and hand off with usable specifications

1. 01Justify every design decision with a user need or a constraint, not a preference
2. 02Produce an information architecture that survives contact with real content
3. 03Build a component library with variants that a team can actually maintain
4. 04Design the unglamorous states — empty, loading, error, overflow — before the happy path is signed off
5. 05Check and fix contrast and focus order rather than assuming a designer's eye is enough
6. 06Present a case study that shows the reasoning, which is what a portfolio is really assessed on