Product & Technical
UI/UX Design
UX design is research and structure: what people are trying to do and how the product should be organised. UI design is the visual craft on top. Most roles want both, and the research half is what separates a designer from someone who makes attractive screens.
Start here
Take an app you find frustrating and write down exactly what you were trying to do and where it stopped you. That is a usability finding, and it is the whole job in miniature. No design background needed.
Design foundations
The principles that make a screen readable before it is decorated.
RequiredVisual and interaction principles
Most 'bad' designs are not ugly, they are unclear. These principles are what clarity is made of.
Visual and interaction principles
Most 'bad' designs are not ugly, they are unclear. These principles are what clarity is made of.
What to learn
- Hierarchy and contrast
- Alignment and proximity
- Whitespace as a tool
- Consistency
- Affordance and feedback
- Cognitive load
Practice
Next: Typography and colour.
RequiredTypography and colour
The two decisions with the largest effect on whether a product feels professional.
Typography and colour
The two decisions with the largest effect on whether a product feels professional.
What to learn
- Type scale and pairing
- Line length and line height
- Colour systems and semantic colour
- Contrast ratios as a requirement, not a preference
- Designing for both light and dark
Tools
- A contrast checker
Next: The tool.
Tools and craft
One tool, learned well. The industry has largely converged.
RequiredFigma
The default in almost every team you will join, and increasingly the handoff format engineers expect.
Figma
The default in almost every team you will join, and increasingly the handoff format engineers expect.
What to learn
- Frames and auto layout
- Components and variants
- Styles and variables
- Prototyping interactions
- Developer handoff
- Organising a file others can use
Tools
- Figma
Practice
Project
beginnerA screen rebuilt properly
Recreate three screens of an existing product in Figma using components, variants and auto layout, so that changing one component updates all three.
- Figma
You can build a file another designer could pick up and extend.
Next: Research, which is the half that makes you a designer.
Understanding users
The stage that distinguishes UX from decoration, and the one self-taught designers most often skip.
RequiredResearch methods
Without it you are designing for yourself, and you are not the user.
Research methods
Without it you are designing for yourself, and you are not the user.
What to learn
- Interviewing without leading the answer
- Contextual observation
- Surveys and their limits
- Synthesising findings into themes
- Personas and when they are useless
- Journey mapping
Practice
Next: Structure.
RequiredInformation architecture
Most navigation problems are structure problems that no amount of visual design will fix.
Information architecture
Most navigation problems are structure problems that no amount of visual design will fix.
What to learn
- Card sorting
- Navigation patterns
- Labelling in the user's language
- Task flows
- Progressive disclosure
Next: Testing your ideas.
RequiredUsability testing
Five users will reveal most of the serious problems, and watching someone struggle with your design is the fastest learning available.
Usability testing
Five users will reveal most of the serious problems, and watching someone struggle with your design is the fastest learning available.
What to learn
- Writing tasks rather than asking opinions
- Moderating without rescuing
- Observing behaviour over stated preference
- Prioritising findings by severity
- Reporting so the team acts
Project
intermediateA researched redesign
Choose a real product with a usability problem. Interview users, test the current version, redesign a flow, and test the redesign against the original.
- Figma
- A recording tool
You can show that your redesign was better, with evidence rather than an assertion.
Next: Designing for everyone.
Accessibility and systems
What makes design work at scale, and for people who are not you.
RequiredAccessible design
Designing for assistive technology is both an ethical baseline and, in many markets, a legal one. It also makes the design better for everyone.
Accessible design
Designing for assistive technology is both an ethical baseline and, in many markets, a legal one. It also makes the design better for everyone.
What to learn
- WCAG in practice
- Contrast and text sizing
- Focus states, which are usually forgotten
- Not relying on colour alone
- Designing for screen readers
- Touch target sizes
Tools
- Figma accessibility plugins
- A contrast checker
Next: Design systems.
RecommendedDesign systems
How a design stays consistent once more than one person is working on it.
Design systems
How a design stays consistent once more than one person is working on it.
What to learn
- Tokens for colour, type and spacing
- Component libraries
- Documenting usage and intent
- Versioning and adoption
- Working with engineers on implementation
Next: Working with engineers.
RequiredWorking with engineering
A design that cannot be built, or that is built wrongly, has not shipped.
Working with engineering
A design that cannot be built, or that is built wrongly, has not shipped.
What to learn
- Basic understanding of what is cheap and expensive to build
- Specifying states: empty, loading, error, too much data
- Responsive behaviour, specified rather than implied
- Design review and QA of the built result
Practice
Project
advancedA shipped design
Work with a developer, or build it yourself, to take one of your designs to a live product. Then test the built version with users and fix what you find.
- Figma
- The live product
Something you designed is being used, and you have seen where it did not survive implementation.
Where this leads
You do not have to pick one now. These are the directions this path opens up once you are working.
Continue your journey
The paths closest to this one. Skills overlap more than the job titles suggest.
Frontend Development
Build the part of the product people actually touch.
ViewProduct Management
Decide what gets built, why, and what gets cut.
ViewMobile Development
Build apps for the device most people in Ghana use for everything.
ViewTechnical Writing
Explain complex systems so clearly that nobody has to ask.
ViewYou do not have to do this alone
Our programs are free, taught live, and built around the same progression. Join one and work through it alongside other people.