Good design isn't about talent you're born with — it's a set of principles and tools you can learn like any other skill. This track covers the visual foundations (color, type, layout) and the UX thinking (how real people use a screen) behind every app and website you like using.
Mentor TipCollect 10 designs you genuinely admire before you start designing your own — training your eye is step zero.
The Roadmap
01
Design FoundationsThe principles behind every good design
Before opening any design tool, understand the handful of principles that separate a cluttered design from a clear one.
01
Color theoryBuilding a palette with intention, the way this very site uses cream, pink, and orange.
02
TypographyPairing a display font with a body font, and setting a clear size hierarchy.
03
Layout & grid systemsAligning elements to an invisible grid so a page feels ordered, not random.
04
Visual hierarchyGuiding a viewer's eye to what matters most, first.
Practice ProjectRedesign a single boring flyer or poster using a defined color palette and a clear hierarchy.
02
Tools of the TradeFigma and Canva, hands-on
Principles matter more than tools, but you do need to get comfortable in the software the industry actually uses.
01
Figma basicsFrames, shapes, text, and components — the standard tool for UI design.
02
Canva for quick graphicsFast social and marketing graphics when you don't need pixel-level control.
03
Building a mini style guideDefine your own colors, fonts, and button styles as reusable components.
04
Practice paletteRecreate a small piece of a real site's UI to train your eye.
Practice ProjectBuild a one-page style guide in Figma: your color palette, type scale, and three button states.
03
UX PrinciplesDesigning for real people, not just pixels
UX is about how something works, not just how it looks. This phase introduces the thinking behind usable products.
01
User research basicsSimple ways to learn what real users actually need before designing anything.
02
WireframingSketching a screen's structure in low fidelity before adding visual polish.
03
Usability heuristicsA checklist of principles that make any interface easier to use.
04
Accessibility in designContrast, tap-target size, and designing for users with different abilities.
Practice ProjectWireframe a 3-screen flow for a simple app idea — sketch first, then build in Figma.
04
Portfolio ProjectsDesign work you can show
Employers and clients want to see real projects with your reasoning behind them, not just pretty screens.
01
Redesign a real screenPick an app or site you use and redesign one screen with a clear rationale.
02
Design a 3-screen mobile flowOnboarding, main screen, and one action flow, fully designed in Figma.
03
Write a short case studyProblem, process, and outcome — in plain language.
04
Get feedbackShare your work with peers or mentors and revise based on real critique.
Practice ProjectAssemble a 2-project portfolio page (can be built with the HTML/CSS skills from Module 01) showcasing your redesign and your mobile flow.
Free Video Courses
Curated, highly-rated, and free — pick whichever teaching style matches how you learn best.