UI Design Foundations: From Zero to First Portfolio Piece
Most people who want to get into UI design spend weeks watching tutorials without ever opening a design tool. This program is structured differently — you start designing on day one.
What this course covers
We go through the core building blocks: grids, spacing systems, color palettes, and typography scales. These are not abstract concepts. You will work with real Figma files and learn why a 4px baseline grid matters when a developer hands off your design.
Who fits this program
People switching from graphic design, front-end development, or a completely unrelated field. No prior experience with UI tools is required. Basic computer literacy is enough to start.
Practical focus over theory
Each module ends with a small project — a login screen, a settings page, a simple dashboard card. By the end of week 6, you have 4 finished screens you built yourself. Not templates. Not copied work.
How feedback works
You submit your work and get written critique from a practicing designer within 48 hours. Comments are specific: not just this looks off but here the contrast ratio drops below 3:1 and here the tap target is under 44px.
Realistic expectations
Six weeks is enough to understand the fundamentals and produce solid beginner work. It is not enough to become a senior designer. Graduates who go on to get junior roles typically spend another 3 to 6 months building their portfolio after finishing the course.
All course materials remain accessible for 12 months after your cohort ends.Learning Program
-
Week 1 — Visual fundamentals
Grids, spacing, alignment. Why these rules exist and when designers break them intentionally.
-
Week 2 — Color and contrast
Building a color system from scratch. WCAG contrast requirements explained through real screen examples.
-
Week 3 — Typography in interfaces
Scale, line height, type pairing. Practical difference between a heading hierarchy that works and one that confuses users.
-
Week 4 — Components and states
Buttons, inputs, cards. Designing hover, focus, error, and disabled states in Figma.
-
Week 5 — Layout and responsive thinking
How screens adapt from desktop to mobile. Auto layout in Figma as a practical tool, not a feature to memorize.
-
Week 6 — Portfolio project
Full screen design with critique session. Preparing your work for a portfolio case study.