Sai Kumar Mukthevi
Mentor, Agile Design School
LinkedIn profile of Sai Kumar Mukthevi (opens in a new tab) ↗
Home › Programmes › Advanced UI Design & Design Systems
Advanced UI Design and Design Systems
Stronger interface quality, cleaner screens, confident developer handoff — and design systems with tokens, components and governance that scale across teams.
Overview
About the programme
For designers who want stronger interface quality, cleaner screens and confident developer handoff — plus design systems that scale. Instruction is delivered through live, instructor-led sessions rather than pre-recorded video, with assessment based on project work and a final portfolio review — not attendance.
Key facts
- Duration: 3 months (13 weeks · 156 planned hours), live cohort format
- Weekly: 6 live hours (two studios + one critique/lab) + about 6 hours of independent work
- Projects: an enterprise design-system capstone plus e-commerce, fintech, healthcare and edtech UI studies
- Level: 1+ yr experience
- Fee: ₹55,000 incl. GST (EMI options available)
- Assessment: 5 case studies + live systems defence (70/100 to pass), verifiable certificate ID
- Schedules: Weekday evening, weekend and blended options
Week-by-week syllabus, 14 pages · instant PDF after a 10-second form
Upcoming batches
Next 4 start dates
A new cohort of this programme starts every 15 days, alternating weekday-evening and weekend schedules — so you're never more than two weeks from beginning.
Dates update automatically · Seats per cohort are capped to keep critique quality high · Reserve via a free demo class or counselling call.
Who should join
Built for
- Product and UI designers with 1+ year who want stronger craft
- Design leads inheriting inconsistent screens and messy files
- Front-end developers collaborating on systems
- Solo startup designers who are the design system
Learning outcomes
By graduation you will
- Ship interface work that survives pixel-level inspection
- Architect tokens, components and theming that scale
- Bake accessibility in as a system property
- Hand off to developers with confidence — and documentation they read
- Trace tokens and components from Figma to code, and review AI-generated UI against your system
- Run a design system release: contribution rules, versioning and migration
Tools covered
Figma components, variables & modesDTCG design tokensDev Mode & Code ConnectStorybook literacyContrast, keyboard & screen-reader checksResponsible AI assistants
Curriculum · 2026 edition
What you will learn, week by week
13 weeks, 156 planned hours: 78 live (two 2-hour studios and one 2-hour critique or lab each week) and 78 independent. Each month ends with a review of your work before you move on.
Month 1 · Advanced visual craft
Audit an interface, then sharpen typography, hierarchy, responsive composition, colour and state design through two focused UI studies.
- Week 01Audit and establish a craft baseline
- Week 02Typography and visual hierarchy
- Week 03Responsive composition and content
- Week 04Colour, states and trust
Topics and submissions, weeks 1–4
- Week 01 · Audit and establish a craft baseline. UI inventory; inconsistency mapping; hierarchy; composition; optical alignment; brand expression; references and attribution. Select the enterprise capstone and a bounded workflow. You submit: A baseline audit, prioritised defects and the Case 1 commerce brief.
- Week 02 · Typography and visual hierarchy. Type anatomy and pairing; scales; line length; rhythm; grids; image direction; icon consistency; content density; responsive typographic behaviour. You submit: Case 1 product-detail and cart layouts with a before/after rationale.
- Week 03 · Responsive composition and content. Advanced auto layout; nested structures; sizing and constraints; content-led breakpoints; touch and pointer use; long text; localisation; empty, loading and error states. You submit: A Case 1 responsive prototype, stress tests and three task walkthroughs.
- Week 04 · Colour, states and trust. Semantic colour roles; contrast; status vocabulary; readable charts; focus and selected states; motion restraint. Case 2 payment history and status recovery. You submit: A fintech state matrix, a focused UI study and the first visual foundations for your capstone.
Craft review: Reviewers check hierarchy, readable content, responsive behaviour and state completeness. Screens copied for private practice are never presented as original portfolio work.
Month 2 · Tokens, components and themes
Build a token architecture, reusable component families, light and dark themes, and documentation another designer can use.
- Week 05Design token architecture
- Week 06Component architecture and forms
- Week 07Themes and layout resilience
- Week 08Documentation and contribution
Topics and submissions, weeks 5–8
- Week 05 · Design token architecture. Primitive and semantic layers; selective component tokens; naming; aliasing; collections and modes; spacing and type scales; DTCG format literacy; ownership of token changes. You submit: A token map, light/dark semantic values and a small reviewed exchange sample.
- Week 06 · Component architecture and forms. Variants versus properties; nesting; composition; the slots concept; avoiding combinatorial growth; form groups; validation; content guidance and accessible states. You submit: The Case 3 healthcare form pattern and at least 12 capstone component families.
- Week 07 · Themes and layout resilience. Theme versus product variation; theme inheritance; token overrides; density decisions; responsive patterns; learning content and progress states. You submit: The Case 4 learning interface in light and dark themes, with long-content tests.
- Week 08 · Documentation and contribution. Anatomy; usage; states; behaviour; content; accessibility notes; API mapping; library organisation; publishing and version conventions; requests, review and deprecation. You submit: Component docs, three healthcare task tests, the EdTech review and a contribution proposal.
System review: A reviewer must be able to assemble a new screen from your library and understand the token choices. Every workaround is logged and used to improve discoverability, flexibility and documentation.
Month 3 · Accessibility, delivery and governance
Specify motion and accessible behaviour, map your system to code, review AI-generated UI, plan a release and defend your capstone.
- Week 09Motion and accessible behaviour
- Week 10Developer collaboration and quality
- Week 11AI-assisted workflow and adoption
- Weeks 12–13Validate, document and defend
Topics and submissions, weeks 9–13
- Week 09 · Motion and accessible behaviour. Purposeful transitions; timing and easing; reduced-motion alternatives; keyboard and focus specifications; semantic roles; accessible names; dialog and menu behaviour; a WCAG 2.2 AA target. You submit: A capstone interaction prototype and a manual accessibility test plan.
- Week 10 · Developer collaboration and quality. Dev Mode or annotated handoff; Storybook literacy; component APIs; a Code Connect demonstration; token-to-code traceability; visual regression concepts; design QA. You submit: Map three components and verify one theme change on a supplied coded fixture.
- Week 11 · AI-assisted workflow and adoption. System context for AI; MCP overview; generation constraints; human review; governance roles; release notes; migration; measuring adoption and exceptions. You submit: Compare generated UI against your system; submit QA findings and a release plan.
- Weeks 12–13 · Validate, document and defend. Test the enterprise workflow with three relevant adults; close priority defects; document five studies; rehearse a library walkthrough; reflect on trade-offs; final jury and remediation. You submit: Five case studies, the complete library, an evidence pack and a live systems defence.
Final review: Week 13 adds no new topic: it is reserved for improvements and the jury. Code may be demonstrated or guided, but every student explains the design-to-code mapping and the observed test results.
Five industry case studies
One enterprise design-system capstone runs through all three months; four focused studies show craft and reusable patterns in other domains. They are industry-aligned educational briefs, not client projects.
| Case study | When | What you build |
|---|---|---|
| 1 · E-commerce — product detail to cart | Weeks 1–3 · focused study | Hierarchy, responsive layout and content stress tests. |
| 2 · Fintech — transaction states | Week 4 · focused study | Semantic status colour, clear recovery and complete states. |
| 3 · Healthcare — appointment intake forms | Weeks 6–8 · focused study | Reusable fields, validation and accessible interaction specs. |
| 4 · EdTech — learning workspace | Weeks 7–8 · focused study | Light and dark themes, progress states and resilient content. |
| 5 · Enterprise SaaS — operations console | Weeks 1–13 · capstone | Shared tokens, 12 component families, documentation, QA and governance. |
Why this programme
Three reasons learners choose it
Craft drills weekly
Rebuild challenges that train speed and structure, not just theory.
A real system audit
Your capstone system is audited live by a practising systems lead.
Governance included
Versioning, contribution and adoption — the part most courses skip.
In the studio with
Your mentors on this programme
Like the best professional schools, every course names its instructors. These practitioners lead the studios, critiques and juries for this programme.
P.J. Prudhvi Raj
Mentor, Agile Design School
LinkedIn profile of P.J. Prudhvi Raj (opens in a new tab) ↗
Anantha Shayana. D
Mentor, Agile Design School
LinkedIn profile of Anantha Shayana. D (opens in a new tab) ↗Full bios updating shortly — verify current roles directly on LinkedIn.
Certification & FAQ
A certificate that means something when someone checks it.
You're assessed on your work — not attendance: enterprise capstone 40%, four focused case studies 10% each, and a live systems defence 20%. To pass you need 70/100 overall, at least 60/100 on the capstone, and the final defence. Every graduate receives a certificate with a unique, verifiable ID.
Is this beginner-friendly?
No — you should be comfortable in Figma and have shipped UI. Beginners should start with the Professional Certificate.
How often do batches start?
Every 15 days, alternating evening and weekend cohorts; the next four dates are shown above.
How many hours a week do I need?
About 12 hours: 6 live hours (two 2-hour studios and one 2-hour critique or lab) plus about 6 hours of independent work — 156 planned hours over 13 weeks.
Do I need to code?
No, but you'll leave speaking component-API fluently with developers, and your handoff files will show it.
What exactly is assessed?
Five case studies and a live systems defence: the enterprise capstone counts for 40%, the four focused studies 10% each, and a 15-minute system walkthrough with questions 20%. Reviews in weeks 4, 8 and 12 give you written feedback before the final defence.
Will this help me at my current job immediately?
Yes — token architecture, component documentation and governance transfer directly to your day job. The capstone uses a mentor-provided demo product, or your company's product if you have permission to use it.
Does the certificate mention design systems specifically?
Yes — the credential names the specialisation, is audit-assessed, and carries a verifiable ID.
Can I pay the fee in instalments?
Yes — EMI options are available on the ₹55,000 fee, and GST invoices are issued for employer-sponsored seats.
The only way to know if this is right for you is to sit in on a class.
No pressure, no hard sell — a live 45-minute session where you meet a mentor, see how a critique actually works, and ask every question about the curriculum, the batch, and your own starting point.
Book Your Free Demo ClassA live 45-minute session · No pressure, no hard sell
Book a free demo class
A live 45-minute studio session for Advanced UI Design & Design Systems. Fill this in and our admissions team will call you within one business day.