Module 1
Visual hierarchy
Decision order, reading paths, and cutting competing focal points before decoration.
← All products
Self-paced course · Six chaptersInstant access
UX and Visual Design Course
Hierarchy, layout, type, interaction states, and design-system thinking — six chapters with HTML/CSS slide decks and a critique/redesign capstone.
What it is
A self-paced course on UX and visual design craft: hierarchy, layout, type and colour, interaction states, design-system thinking, and a critique/redesign capstone — with HTML/CSS slide decks for every chapter.
How it works
Pay once, get instant library access. Work through six written chapters, open the matching slide decks, complete the exercises, and finish with a portfolio-ready brief.
Why it's worth it
You leave with a method and a deliverable — not a certificate — so the next product screen you touch has a clearer reading order, calmer layout, and intentional states.
Built for
Practitioners shipping work, not collecting certificates.
Each chapter ends with exercises. The capstone is a deliverable you can present or implement.
Engineers who own UI decisions and want a sharper visual vocabulary.
PMs reviewing designs who need a clearer critique framework.
Founders shipping product without a dedicated design hire.
Designers refreshing fundamentals with product-shaped exercises.
Curriculum
Six chapters. One critique. Yours to keep.
Module 2
Layout systems and grids
Calm density with an 8pt scale, shared gutters, and intentional grid breaks.
Module 3
Type, colour, and contrast
Type ramps, semantic colour, and contrast that survives accessibility review.
Module 4
Interaction and states
Default through error — feedback that names what happened and what to do next.
Module 5
Design systems thinking
Tokens before components; naming for intent; documenting when not to use a control.
Module 6
Capstone critique
A scoped critique and redesign brief ready to present to a product team.
Chapters & slides
Visual decks for every chapter.
Preview the HTML/CSS teaching slides below. Buyers get the full decks in the library alongside written chapters.
Visual hierarchy is a decision order
Users do not scan evenly. They follow contrast, size, and proximity — in that sequence.
- One primary action per viewport
- Secondary actions quieter
- Decorative detail last
What you get
Chapters, slides, and a deliverable.
Six written chapters with exercises and a capstone brief.
HTML/CSS slide decks for every chapter — open in the library preview.
Templates for hierarchy maps, state matrices, and token inventories.
Lifetime library access — updates included. Download everything as a zip.
Frequently asked
About the course.
- When does it start?
- Whenever you do. Pay once, get instant email access, and start chapter one today. No cohort dates.
- How long does it take?
- Most people finish in four to six weeks at one chapter per week — roughly 3–5 hours per week including exercises and the capstone.
- Is it live or self-paced?
- Self-paced. Written chapters plus HTML/CSS slide decks — no live sessions required.
- Who is this for?
- Builders who ship UI — engineers, PMs, founders — who want a sharper visual and interaction practice. No design-school prerequisite.
- What does it cost?
- One-time purchase — see the pricing page for the current USD price. 14-day refund if you have not used the library.
Get access
Pay once. Start chapter one today.
After checkout you receive an email with a library link and access token. Work through chapters and slides at your own pace.