User Interface / User Experience
12 week Course Curriculum
Here’s a 3month UI/UX Design curriculum structured with weekly topics, monthly tests, assignments, and projects aligned to current industry standards (Figma, user research, design systems, and prototyping).
Assumptions :
4–5 hours per day, 5 day weeks → 12 weeks ≈ 3 months.
Tools :
Figma (or Framer/Adobe XD), Miro/Whimsical, and basic HTML/CSS for handoff.
Outcome :
UI/UX Designer / Product Designer roles.
Overall Assessment Plan Weekly assignments :
Weekly assignments: 2–3 small design tasks (Figma files + documentation). Monthly tests: 1hour mix of theory + short design exercise (e.g., improve a given UI).
Monthly projects: Endtoend product prototypes (research → wireframes → highfi → presentation).
Month 1 – Fundamentals of UI & UX (Weeks 1–4)
weeks & Topics | Daily Work (4-5) hours | Assignments | Milestones |
|---|---|---|---|
week 1 : Design thinking & UX basics | User personas, empathy maps, problem definition, design process (Discover → Design → Validate). | 1) Create flows for a task (e.g., signup → onboarding); 2) Lowfi screens for a feature | Project 1: “Wireframe & Flow Prototype” – Complete flows for a simple app (e.g., diary app, expense tracker) in Figma (wireframes + clickable prototype). |
week 2 : UI fundamentals | Layout & grids, typography hierarchy, color systems, spacing, visual hierarchy, mobile vs desktop. | 1) Rebuild 3 app screens in Figma; 2) Component library for buttons | Figma file with reusable components. |
week 3 : Figma basics | Frames, components, variants, autolayout, constraints, basic prototyping. | 1) Redesign a mobile screen for clarity; 2) Style tile for a brand. | Design system cheat sheet (colors, fonts, spacing). |
week 4 : Wireframing & information architecture | Lowfi wireframes, sitemaps, user flows, task flows, Monthly Test 1 (UI/UX theory + wireframe). | 1) Create 2 personas for a real app; 2) Empathy map for a target user | Short quiz on UX concepts |
Month 2 – Interaction Design & Visual Systems (Weeks 5–8)
Weeks & Topics | Daily work (4-5) hours | Assignments | Milestones |
|---|---|---|---|
week 5 : Interaction design | Microinteractions, transitions, feedback states, error handling, accessibility basics | 1) Design 3 states for a form (normal, error, success); 2) Microinteraction spec. | Interaction spec sheet. |
week 6 : Visual design & branding | Mood boards, design systems, component libraries, darkmode adaptation, iconography. | 1) Create a microbrand identity; 2) Convert your system into a Figma library | Style guide PDF + Figma link |
week 7 : Highfidelity UI | Responsive design (mobile + desktop), card layouts, lists, modals, navigation patterns. | 1) Redesign 3 existing screens into highfi; 2) Mobilefirst portfolio layout. | Checklist for responsive design. |
week 8 : Advanced prototyping & handoff | Autolayout, constraints, responsive dimensions, prototype conditions, developer handoff basics; Monthly Test 2 (interaction + visual design). | 1) Build a multiscreen prototype with overlays; 2) Export assets + specs for a dev. | Project 2: “HighFi Product Prototype” – Design a complete product (e.g., ecommerce category page + product details + cart) with handoff specs and interactive prototype. |
Month 3 – Research, Systems & Product Design (Weeks 9–12)
Weeks & Topics | Daily work (4-5) hours | Assignments | Milestones |
|---|---|---|---|
week 09 : UX research & usability | Surveys, interviews, usability testing basics, card sorting, heuristic evaluation | 1) Plan a 5question survey; 2) Heuristic evaluation of a live app. | Research report template. |
week 10 : Design systems & scalability | Tokens (color, typography, spacing), component states, responsive breakpoints, documentation | 1) Build a mini design system (buttons, inputs, cards); 2) Document variants. | Design system doc (Figma + Notion/Markdown). |
week 11 : Product design workflow | From brief → research → sketches → wireframes → prototype → feedback → iteration; versioning, collaboration. | 1) Iterate a screen based on “feedback”; 2) Version comparison | Portfoliostyle casestudy outline. |
week 12 : Capstone & presentation | Endtoend product case study (research → flows → UI → prototype → presentation), Final Test (short design challenge + critique). | 1) Polish case study; 2) Prepare 10slide deck | Project 3: “Full Product Case Study” – A selfcontained project (e.g., fintech app, learning platform) with: user research summary, flows, wireframes, highfi UI, prototype, and short designdecision document |
