UID 07 - Course Map
This note connects the main lessons of the User Interface Design course.
Parent: Design
Lesson Order
- UID 07 - Introduzione al corso
- UID 07 - Intro alla user interface con Mirko Santangelo
- UID 07 - Case studies and best practices con Elisabetta Balconi
- UID 07 - Atomic Design, Design Token & Design System con Francesco Improta
- UID 07 - Principi e strumenti per l’accessibilità con Marianna Cerato
- UID 07 - Illustrazioni, fotografie e motion design con Riccardo Volpato e Luis Felipe Bueno
Big Picture
The lessons build one learning path:
flowchart TD A["Course foundation"] --> B["Designer role today"] B --> C["Professional UI workflow"] B --> E["Tools, AI, systems"] C --> F["Style tiles, design principles, prototypes"] E --> G["Design systems, tokens, documentation"] G --> H["Accessibility, WCAG, testing"] F --> I["Images, art direction, motion"]
What Each Lesson Gives Me
| Lesson | Main role | What I should remember |
|---|---|---|
| UID 07 - Introduzione al corso | foundation | UI translates UX, business, technology, and visual language into usable interfaces |
| UID 07 - Intro alla user interface con Mirko Santangelo | mindset and tools | the designer today needs taste, AI/tool fluency, systems thinking, and process |
| UID 07 - Case studies and best practices con Elisabetta Balconi | professional method | UI is not painted UX; use learning, style tiles, design principles, exploration, prototyping, and documentation |
| UID 07 - Atomic Design, Design Token & Design System con Francesco Improta | system thinking | design systems turn repeated interface decisions into tokens, components, documentation, and governance |
| UID 07 - Principi e strumenti per l’accessibilità con Marianna Cerato | accessibility practice | accessibility is a design framework involving autonomy, law, WCAG, assistive technology, handoff, and testing |
| UID 07 - Illustrazioni, fotografie e motion design con Riccardo Volpato e Luis Felipe Bueno | expressive UI details | images, photography, illustration, and motion must support meaning, usability, brand values, and interaction feedback |
Core Concepts
- User Interface Design
- User Experience Design
- UX-driven UI
- Design System
- Design Tokens
- Atomic Design
- Interface Inventory
- Design System Governance
- Accessibility
- WCAG
- Assistive Technology
- Accessibility Testing
- Cognitive Accessibility
- AI for Design
- Style Tile
- Art Direction
- UI Imagery
- Design Principles
- Prototype
- Motion Design
- Animated Mockup
- Stakeholder Presentation
Main Framework
For this course, UI design can be understood as a sequence:
- Understand the brief.
- Understand users and business goals.
- Translate UX structure into interface needs.
- Define direction through references, moodboards, and style tiles.
- Create design principles.
- Explore visual and interaction possibilities.
- Prototype important behaviors.
- Build high-fidelity screens and flows.
- Define image, illustration, and motion direction.
- Extract components and rules.
- Define tokens, patterns, and reusable components.
- Document and govern the system.
- Design for accessibility from the beginning.
- Test with tools and real people.
- Present the reasoning.
Personal Study Questions
- What is the difference between UX output and UI decision?
- Which screens need the clearest hierarchy in a UI project?
- What references should I collect before starting a visual direction?
- Which design principles should guide a UI project?
- What should be prototyped instead of shown as a static screen?
- How can I explain each design choice to a stakeholder?
- Which interface decisions should become tokens or reusable components?
- Who maintains the system after the first design pass?
- Which users or contexts could my interface accidentally exclude?
- Which accessibility checks should happen before handoff?
- What job does each image or animation do?
- Which motion details need to be prototyped because static screens cannot explain them?