UID 07 - Intro alla user interface con Mirko Santangelo
Source: transcript Part 1 + Part 2
Speaker: Mirko Santangelo
Related: UID 07 - Course Map, UID 07 - Introduzione al corso, UID 07 - Case studies and best practices con Elisabetta Balconi
One Sentence
Mirko’s lesson explains what it means to be a designer today: a designer must combine taste, tools, AI, process, business understanding, technical awareness, and system thinking to create interfaces that are both functional and expressive.
Core Thesis
The designer’s role is changing because technology is changing. AI, no-code tools, Figma ecosystems, and new production workflows make it easier to generate things, but harder to know what is worth generating.
The value of the designer moves toward:
- framing the problem
- choosing the right direction
- building taste
- evaluating output
- connecting brand, product, and technology
- creating scalable systems
- communicating decisions
Knowing tools is necessary, but not sufficient.
Historical Parallel: Early Internet and AI
Mirko compares the current AI moment to the early 2000s internet explosion.
The point of the comparison:
| Early 2000s internet | Current AI moment |
|---|---|
| new digital possibilities | new generative possibilities |
| new professional roles | changing designer roles |
| fast experimentation | fast prototyping and production |
| unstable market language | unstable tool landscape |
| designers had to adapt | designers need to reposition again |
The conclusion is not that design is disappearing. The conclusion is that design work is expanding and shifting.
UI, UX, Product, Brand: Boundaries Are Blurring
Older role distinctions were clearer:
- UI designer
- UX designer
- visual designer
- motion designer
- product designer
- researcher
Mirko argues that these borders are now less rigid. A designer may need to move across:
- strategy
- brand
- interface
- motion
- content
- prototyping
- AI prompting
- technical handoff
- design systems
This does not mean everyone becomes expert in everything. It means designers need enough awareness to collaborate and make informed decisions.
The Skill Problem
Mirko separates two kinds of skill, but expands the meaning of both.
Hard Skills
Hard skills are not only software skills.
They include:
- using Figma
- building layouts
- understanding grids
- understanding type systems
- working with components
- using AI tools
- prototyping
- reading and shaping product structure
- understanding enough code to talk with developers
- knowing how web products are built
Tools become easier over time, so the deeper hard skill is the ability to use tools to make ideas real.
Soft Skills
Soft skills become more important when tools become easier.
They include:
- presenting work
- defending decisions
- communicating with clients
- collaborating with teams
- leading a project
- reading business needs
- handling uncertainty
- building trust with stakeholders
The designer who can produce work but cannot explain it will struggle professionally.
AI and the Designer’s New Value
AI can generate, suggest, modify, and accelerate. But it does not automatically create good design.
The designer still needs:
- taste
- judgment
- direction
- cultural awareness
- user awareness
- business awareness
- ability to edit
- ability to choose
AI changes the workflow from manual production to iterative direction.
Basic AI workflow:
- Describe the idea.
- Generate a result.
- Evaluate the result.
- Refine the prompt or direction.
- Combine outputs with design judgment.
The important skill is not only prompting. It is knowing what a good result is.
Related: AI for Design
Tool Landscape
Mirko presents tools as part of the contemporary designer’s environment. Each tool supports a different layer of work.
| Tool / area | What it is useful for | Design value |
|---|---|---|
| Figma | interface design, components, team libraries, prototypes | main UI/product design environment |
| Notion | knowledge, business/project management, references | organized project memory |
| Webflow | no-code web publishing | closer bridge between design and implementation |
| Spline | accessible 3D creation | faster spatial/interactive exploration |
| Midjourney | visual generation | mood, image direction, visual experimentation |
| Figma AI / AI prototyping tools | fast UI experiments | turning descriptions into rough prototypes |
| AI image manipulation tools | modifying visuals | faster art direction exploration |
The lesson is not saying every designer must master every tool. The real point is to understand what each tool changes in the design process.
Figma as a Work System
Figma is not just a drawing tool.
In Mirko’s workflow, it can contain:
- project boards
- templates
- team resources
- moodboards
- components
- variables
- design systems
- responsive behavior
- design documentation
- developer handoff
- prototypes
This makes Figma a shared workspace for design decisions.
Notion as a Design Memory
Mirko uses Notion as an organized project and knowledge space.
Possible uses:
- collect references
- store brand information
- manage agency/business material
- organize prompts and AI outputs
- create moodboards
- maintain project context
This connects to the idea of a “second brain”, but with AI the retrieval and reuse of knowledge can become faster.
Webflow and No-Code Development
Webflow is presented as a tool that allows designers or no-code developers to publish websites without traditional full-code workflows.
Why it matters:
- designers can understand implementation better
- visual ideas can become real faster
- small teams can ship more directly
- design and build become closer
Related: Front web development, HTML, CSS, JavaScript
Spline and 3D
Spline is described as a more accessible 3D tool compared with complex software such as Blender.
It is useful when a project needs:
- 3D objects
- interactive 3D visuals
- spatial scenes
- web integration
- visual experimentation
The broader point: designers now have access to media formats that previously required more specialized production.
Midjourney and Visual Generation
Midjourney is used as an example of high-quality visual generation.
It can help with:
- mood exploration
- image direction
- campaign visual ideas
- fast visual alternatives
- early concept testing
But AI images still need direction. The designer must decide whether the output supports the project.
Trend Awareness
Mirko argues that designers must understand trends without becoming slaves to them.
Trend awareness helps answer:
- What feels contemporary?
- What feels outdated?
- What quality level is expected?
- What are competitors doing?
- What styles are overused?
- What direction fits the market?
Being current is part of professional relevance.
Possible Designer Directions
Mirko describes different professional directions.
| Direction | Focus | Strength | Risk |
|---|---|---|---|
| Experimental designer | expressive websites, motion, 3D, new visuals | strong originality | may be less scalable |
| Brand/elevated designer | image, visual identity, campaigns, premium experience | strong expression | can become surface-only |
| Corporate/product designer | products, systems, enterprise UI, SaaS | strong market demand and budget | requires technical/system understanding |
The corporate/product area may seem less spectacular visually, but it has major business demand and often larger budgets.
Design Is Not Only Screens
Mirko stresses that design no longer lives only inside standard screens.
A designer may work on:
- websites
- apps
- product systems
- dashboards
- AI interfaces
- 3D web scenes
- brand systems
- content systems
- interactive experiences
- tools for internal teams
The question becomes: what problem does this design solve, and who is willing to pay for that solution?
Market Awareness
A designer needs to understand not only what they like, but what the market needs.
Useful questions:
- Which design skills are companies asking for?
- Which problems are clients paying to solve?
- What work is becoming automated?
- What work still requires human judgment?
- Which skill gives me a competitive advantage?
This connects design learning to professional positioning.
Agency Process Overview
The second part of Mirko’s lesson explains how a project can move through an agency process.
High-level process:
- Deep Dive
- Research and references
- Moodboard
- Creative direction
- Sitemap
- Wireframe
- UI design
- Component system
- Design System
- Documentation and handoff
The process combines creativity and structure.
Deep Dive
The deep dive is the first discovery phase.
It is used to understand:
- the client
- the product
- the business goal
- the audience
- competitors
- constraints
- what the client already knows
- what the client does not know yet
Typical outputs:
- notes
- questions
- first requirements
- stakeholder alignment
- problem framing
Moodboard and Creative Direction
The moodboard defines taste, atmosphere, and quality direction.
A good moodboard can include:
- websites
- products
- photography
- typography
- brand examples
- motion references
- cultural references
- interface examples
It does not need to include only UI references. Sometimes a product or image from another field communicates the right feeling better than a website.
The moodboard solves the problem of shared taste.
Sitemap
The sitemap maps the structure of the digital product or website.
It answers:
- What pages exist?
- What is each page for?
- What content belongs there?
- What user path is expected?
- What business goal does each area support?
The sitemap is strategic. It is about information and flow before visual design.
Wireframe
Wireframes solve structure and function.
They help define:
- hierarchy
- page blocks
- content order
- user flow
- functional behavior
- layout logic
Wireframes are not final visual design. They are a way to think through the interface structure.
Moodboard vs Wireframe
| Tool | Main problem solved |
|---|---|
| Moodboard | What should this feel like? |
| Sitemap | How is the experience organized? |
| Wireframe | How does the page or flow work? |
| UI design | How does it become visible, usable, and expressive? |
This separation helps avoid confusing taste problems with structure problems.
Beauty and Function
One of Mirko’s strongest arguments is that beautiful design and functional design are not opposites.
Bad excuse:
It is functional, so it cannot be beautiful.
Better approach:
| Functional layer | Creative layer |
|---|---|
| layout | visual rhythm |
| hierarchy | brand expression |
| usability | emotion |
| components | craft |
| content structure | storytelling |
| system rules | variation |
Strong UI combines both.
Design System Thinking
A Design System is not only a collection of buttons.
It is an architecture that allows a brand, product, or organization to scale design.
It can include:
- colors
- typography
- spacing
- grids
- components
- variants
- responsive behavior
- themes
- documentation
- interaction rules
- brand rules
The design system helps different teams produce consistent work.
Components and Variants
In Figma, components can support variation.
Examples:
- different layouts
- optional elements
- text size changes
- responsive states
- dark mode
- mobile versions
- content variations
- different column counts
Good components are flexible without becoming chaotic.
Themes and Variables
Mirko mentions examples like dark mode and different thematic versions.
The point is that a system can support:
- brand variations
- campaign variations
- product variations
- different screen sizes
- different modes
This requires structured variables and component logic.
Handoff to Developers
A designer does not always need to be a developer, but should understand enough technical structure to collaborate.
Handoff should include:
- text sizes for desktop and mobile
- spacing rules
- grid structure
- responsive behavior
- component states
- color variables
- interaction rules
- documentation
Related: JavaScript, TypeScript, React, Tailwind CSS, JSX
Quick Wins
When entering an existing design system or product, Mirko suggests looking for quick wins.
Quick wins are small changes that create visible value quickly.
Before building a large system, ask:
- What is the biggest repeated pain?
- Is this a design system problem or documentation problem?
- Which fix helps the team fastest?
- What can be improved without redesigning everything?
- What is realistic for the team?
Team Continuity
In agency work, a person who enters a project often stays with it.
Why this matters:
- they know the client
- they know the scope
- they know past decisions
- they understand constraints
- they can explain tradeoffs
- they reduce knowledge loss
Design work depends heavily on project memory.
Practical Framework From the Lesson
When starting a UI project:
- Understand the client and market.
- Define the problem.
- Collect references with purpose.
- Align on taste through moodboards.
- Map structure through sitemap/wireframe.
- Explore visual directions.
- Build screens and flows.
- Turn repeated elements into components.
- Organize components into a system.
- Document behavior and handoff.
- Iterate with feedback.
My Study Notes
For my own UI learning:
- I should not learn tools as isolated software.
- I should learn how tools support thinking and production.
- Figma is useful not only for screens, but for systems.
- AI can help me explore, but I need taste to choose.
- Design systems are valuable because they scale decisions.
- I need to practice explaining why a design works.
Questions for Myself
- Which professional direction interests me most: experimental, brand, or product/corporate?
- What is my weakest hard skill right now?
- What is my weakest soft skill right now?
- Can I build a mini design system for a small UI exercise?
- Can I explain a UI decision using business, user, and technical reasoning?
- Which tools should I learn now, and which can wait?
Key Vocabulary
| Term | Meaning |
|---|---|
| Deep Dive | discovery phase to understand client, context, and problem |
| Moodboard | visual reference tool for shared taste and direction |
| Sitemap | high-level structure of pages and content |
| Wireframe | low-fidelity structure of a page or flow |
| Design System | scalable architecture of design rules and components |
| Quick Wins | small improvements that create fast value |
| No-Code Development | building digital products with tools like Webflow |