Free UI UX design course

UI/UX Fundamentals

Free UI UX design course — self-paced lessons on users, structure, and screens you can actually ship.

Free
Beginner
About 8 hours
11 modules · 44 lessons

For beginners, developers, and marketers. Self-paced on this page — no account or payment.

Start first lesson View syllabus

Process

01
Discover
Stakeholder interviews, competitor analysis, and user research (the empathy step).
02
Define
User persona, empathy map, and research docs so the problem is agreed.
03
Ideate
Information architecture, flow charts, and the user journey.
04
Prototype
Wireframes or layouts that show how the product will function.
05
Test
Try the prototype with real people, then change the work from feedback.

Jakob Nielsen’s heuristics

The checklist for testing.

01Visibility of system status. Show loading, saved, error, and the next step.
02Match between system and the real world. Use the user’s words and order, not jargon.
03User control and freedom. Undo, back, and cancel. Do not trap people.
04Consistency and standards. Same action, same look, same place.
05Error prevention. Stop mistakes before they happen.
06Recognition rather than recall. Show options. Do not make people remember.
07Flexibility and efficiency of use. Shortcuts for frequent users, a clear path for beginners.
08Aesthetic and minimalist design. Cut anything that does not help the task.
09Help users recognize, diagnose, and recover from errors. Plain language: what went wrong and how to fix it.
10Help and documentation. Searchable, task-focused help when the UI is not enough.

Syllabus

Course path

Work the modules in order. Each phase builds on the last — from stakeholder research through a portfolio case study, then visual UI and Figma.

Modules: 11
Lessons: 44
Level: Beginner
Pace: 8 hours

Start first lesson Jump to modules

Start

1 module

4 of 4 lessons ready to read
Start module
1. 1.1What UX is20 minUX is how someone experiences a product — their needs, values, abilities, and limits. Big products win when that experience works.
2. 1.2The UX design process20 minDesign thinking in five stages: discover, define, ideate, prototype, and test — then the step list for a new mobile app.
3. 1.3UX deliverables and design steps20 minThe documents and sketches that make up a UX portfolio — and how to keep them consistent so the work looks professional.
4. 1.4Exercise: pick a topic and interview stakeholders20 minChoose a mobile-app idea, build domain knowledge, and write a stakeholder interview document you will use for the rest of the course.

Discover

2 modules

4 of 4 lessons ready to read
Start module
1. 2.1What competitor research is15 minCompare apps and websites to learn strengths, gaps, and where your product can stand in the market.
2. 2.2How to run a competitor analysis25 minKeep goals in view, list direct and indirect competitors, then analyse, summarise, and build a comparison table.
3. 2.3Experience mapping20 minRecord feelings, experiences, and expectations at each stage of using a competitor app.
4. 2.4Exercise: competitor report and experience map20 minBuild a competitor research table and an experience map for your app topic from Module 1.
4 of 4 lessons ready to read
Start module
1. 3.1Types of user research15 minInterviews for a small audience, field studies for a medium one, surveys for a large one — use more than one method when you can.
2. 3.2Preparing a questionnaire20 minCover process, pain points, and wishlist — and rewrite leading or binary questions into clearer ones.
3. 3.3Findings and key insights20 minSummarise what users said, then name the insight that links their motivation to your business goal.
4. 3.4Exercise: run light user research25 minCollect survey answers, run two short interviews, and write a findings summary with one key insight.

Define

1 module

4 of 4 lessons ready to read
Start module
1. 4.1User persona20 minA fictional character built from research that represents most potential users — so you design in their shoes, not your own.
2. 4.2Empathy map20 minFour quadrants — said, did, thought, and felt — to organise what you learned about the person.
3. 4.3Customer journey map20 minMap the path to a goal stage by stage — delights to keep, opportunities to improve.
4. 4.4Exercise: persona, empathy, journey20 minMake a persona, empathy map, and customer journey map for your app using Module 3 research.

Ideate

2 modules

4 of 4 lessons ready to read
Start module
1. 5.1Why information architecture matters20 minGood IA makes products and services easy to find. Easy to find makes the app usable — and usability drives UX.
2. 5.2Guidelines and card sorting20 minBuild bottom-up, keep choices mindless, then sort and label cards into a navigation diagram.
3. 5.3Navigation systems and gestures20 minPersistent chrome, hierarchical menus, adaptive suggestions, search/sort/filter — plus common touch gestures.
4. 5.4Exercise: card sort and IA diagram20 minSort cards for your app, label the groups, and draw an IA / navigation diagram.
4 of 4 lessons ready to read
Start module
1. 6.1User flow charts20 minMap how someone moves through the app — usually onboarding or login, browsing via your IA, and payment.
2. 6.2Wireframe fidelity levels20 minLow, medium, and high fidelity — what detail belongs at each stage, and why you start rough.
3. 6.3Mobile low-fidelity wireframes20 minSketch phone screens as blocks for the main flow — home, list, detail, cart, and checkout.
4. 6.4Exercise: flow chart and LF wireframes20 minDraw a user flow chart for your app, then low-fidelity wireframes for the main path.

Test

1 module

4 of 4 lessons ready to read
Start module
1. 7.1User journey with wireframes20 minWalk your low-fidelity screens as a journey — what the person does, feels, and needs at each step.
2. 7.2What usability means15 minUsability is how people understand and use things — effectiveness, efficiency, engagement, error tolerance, and ease of learning.
3. 7.3User research vs user testing25 minResearch finds the problem; testing finds where people get stuck on your prototype — when, how, and what to ask.
4. 7.4Exercise: journey and testing summary20 minMake a user journey on your LF wireframes, run a short test, and fill a summary table.

Case study

1 module

4 of 4 lessons ready to read
Start module
1. 8.1What a UX case study is15 minA case study is a story of your design work — text and images that show skill and thinking to recruiters.
2. 8.2Case study structure20 minFollow the UX process sequence — from app intro through testing — so every artefact connects.
3. 8.3Layout tips for the deck15 minWide canvas, calm margins, one sans-serif family, one colour — then publish somewhere public if you want.
4. 8.4Exercise: assemble your UX case study20 minBuild one connected case study from your Module 1 deliverables — intro through test actions.

Visual UI

2 modules

4 of 4 lessons ready to read
Start module
1. 9.1Layout, spacing, and alignment20 minUse a simple spacing scale, align to a grid, and keep related items close.
2. 9.2Typography that reads20 minLimit fonts, set clear sizes, and keep line length and contrast easy to read.
3. 9.3Colour, contrast, and states25 minDefault, hover, focus, disabled, error, and success must look different. Colour alone is not enough.
4. 9.4Hierarchy and reusable components25 minOne main action per screen. Reuse buttons, inputs, and cards so the product feels like one system.
4 of 4 lessons ready to read
Start module
1. 10.1Frames, auto layout, and components25 minBuild screens that grow with content. Turn repeated pieces into components early.
2. 10.2Prototyping a click-through20 minLink the happy path so someone else can click through without you explaining.
3. 10.3Naming, variants, and handoff20 minName layers, use variants for states, and give developers what they need to build.
4. 10.4Exercise: rebuild a simple screen25 minRebuild one wireframe in Figma with auto layout, a component, and a prototype link.

Review

1 module

4 of 4 lessons ready to read
Start module
1. 11.1Heuristic review20 minWalk your flow against Nielsen’s 10 heuristics and write what to fix first.
2. 11.2Accessibility that ships20 minContrast, text size, labels, focus, and keyboard use. Ship these basics even on a first project.
3. 11.3Giving and taking critique15 minTalk about the user and the task, not taste. Ask for the next decision.
4. 11.4Capstone: refine your case study30 minExtend your UX case study with heuristic findings, an accessibility check, and one clear before/after.

A free Figma account is enough for later modules. There is no certificate or live class. All tracks

Process

Discover

Define

Ideate

Prototype

Test

Jakob Nielsen’s heuristics

Course path

014 lessons · 80 minIntroduction to UXWhat UX is, why it matters, the design-thinking process, the deliverables you will build, and how to start with a stakeholder interview.–

024 lessons · 80 minDiscovery: competitor researchLearn what already exists: competitor research, analysis parameters, experience maps, and a short report for your app.+

034 lessons · 80 minDiscovery: user researchQuestionnaires and interviews: pick methods by audience size, ask better questions, and turn answers into findings and a key insight.+

044 lessons · 80 minDefine: persona, empathy, journeyTurn research into a persona, an empathy map, and a customer journey map so the whole team designs for the same person.+

054 lessons · 80 minIdeate: information architectureOrganise content from user needs, sort cards into navigation, label clearly, and pick the right navigation system.+

064 lessons · 80 minIdeate: flows and wireframesChart the path through onboarding, information architecture, and payment — then sketch low-fidelity screens.+

074 lessons · 80 minTest: journey, usability, testingConnect wireframes into a user journey, learn what usability means, and test low-fidelity prototypes with real people.+

084 lessons · 70 minUX case study presentationTurn your Discover → Test work into one story for a portfolio — sequence, simplicity, and presentation tips.+

094 lessons · 90 minVisual UI fundamentalsDesign: make the interface readable, scannable, and consistent before you chase a visual style.+

104 lessons · 90 minFigma workflowDesign in Figma: move the same thinking into a file you can prototype and share.+

114 lessons · 85 minUsability, accessibility, and a case studyTesting: check the work with Nielsen’s heuristics, then explain it as a small case study.+