UID 07 - Illustrazioni, fotografie e motion design con Riccardo Volpato e Luis Felipe Bueno
Source: transcript + two slide decks
Speakers: Riccardo Volpato, Luis Felipe Bueno
Related: UID 07 - Course Map, Art Direction, UI Imagery, Motion Design, Animated Mockup, Micro Interaction
Note: the live practical/tutorial part is intentionally omitted. This note keeps only the conceptual and design-method content.
One Sentence
This lesson shows how UI becomes more expressive and understandable when images, illustration, photography, microinteractions, and motion are treated as design decisions instead of decoration.
Core Thesis
Every visible element in an interface communicates.
That includes:
- typography
- color
- icons
- illustration
- photography
- animation
- transitions
- microinteractions
- layout rhythm
The designer’s job is not only to arrange screens. It is to control the direction of these elements so that the product feels coherent, useful, and appropriate for its target.
Lesson Map
flowchart TD A["Art direction"] --> B["Images in UI"] B --> C["Photography"] B --> D["Illustration"] B --> E["AI image generation"] A --> F["Motion design"] F --> G["Animated mockups"] G --> H["Interactive animation tools"]
Two Parts Of The Lesson
| Part | Speaker | Focus |
|---|---|---|
| Motion design | Luis Felipe Bueno | animated mockups, interface animation, storytelling, prototype communication |
| Micro UI, illustration, photography | Riccardo Volpato | art direction, imagery, photography, illustration, AI image tools |
The two parts are connected by the same idea: UI quality depends on choices that are often considered “secondary”, but that strongly affect perception, clarity, and engagement.
Art Direction In UI
Art Direction means deciding the visual and experiential direction of a product.
In this lesson, art direction controls:
- fonts
- color palettes
- graphic elements
- photography
- illustration
- animation
- microinteractions
- icons
The point is control. If every element comes from a different source or style, the product becomes visually noisy and weak.
Why Visual Direction Matters
Riccardo’s example of a weak brand redesign shows that the problem is not only “ugly visuals”.
The deeper problems are:
- no hierarchy
- no consistency
- no clear target
- too many visual languages
- random photo styles
- random logo treatments
- mixed illustration and image treatments
- lack of decision about what should be communicated
Good visual direction often means reducing the number of visual languages. A cleaner system can be stronger because every image, color, icon, and graphic choice starts to support the same message.
UI Without Images
Not every interface needs photography or illustration.
For example, dashboards, home banking, B2B tools, admin panels, and data-heavy products may not need emotional photography.
But this does not mean there are no image decisions.
Even when there are no photos:
- letters are visual forms
- icons are images
- charts are visual explanations
- lines and dividers shape hierarchy
- empty states need visual tone
- microinteractions affect perception
So the question is not “do I need an image?” The better question is: “which visual elements are carrying meaning here?”
What Images Do In UI
UI Imagery can serve several roles.
| Role | Meaning |
|---|---|
| capture attention | stop the user long enough to notice the content |
| improve usability | explain what to do or where the user is |
| represent complex concepts | turn abstract information into something easier to grasp |
| show the target | let users recognize themselves or their context |
| convey brand values | express tone, quality, personality, and positioning |
| strengthen the interface | make the product feel richer and more memorable |
| differentiate | avoid looking like every competitor |
Images should have a job. If an image does not help attention, comprehension, emotion, usability, or brand meaning, it may only add noise.
Photography In UI
Photography can make an interface feel human, concrete, credible, or aspirational.
Important decisions:
- subject
- target representation
- lighting
- color treatment
- crop
- composition
- background
- realism vs stylization
- relation with interface color
- relation with text placement
For responsive UI, photography is harder than print. A photo may need to work on desktop, tablet, mobile, and large screens. If text overlaps the image, the crop must leave enough safe space across different ratios.
Photography And Target
Photos should speak to the right people.
If users recognize themselves, their context, or their desired identity in the image, they are more likely to stay engaged.
Riccardo’s candy example shows a mismatch: if a product is mostly for children but the imagery only shows cool young adults, the visual direction may be stylish but strategically wrong.
Photography And Brand Values
Photography can carry brand values without explaining them in text.
Examples of values that can be expressed through image treatment:
- lightness
- energy
- comfort
- medical precision
- premium quality
- street culture
- playfulness
- warmth
- trust
The designer should ask: what does this image make the product feel like?
Illustration In UI
Illustration follows many of the same rules as photography.
It should be chosen based on:
- target
- message
- brand tone
- level of originality
- interface context
- consistency with the rest of the system
Stock illustration can be useful, but it often creates generic interfaces. Custom illustration gives a product a stronger identity, but it requires time, budget, and a clear brief.
The key risk is looking like everyone else. A common illustration style can make the interface feel interchangeable.
Infographics
Riccardo points out that infographics can be useful when a product needs images but does not have strong photography or illustration resources.
Good infographics can:
- explain data quickly
- reduce the need for long text
- help users compare information
- make abstract content concrete
- support the interface without relying on stock imagery
For a designer, infographics are powerful because they are visual, useful, and often directly producible with design skills.
AI Image Tools
AI changes the image workflow because designers can generate visual material instead of only searching stock libraries or commissioning shoots.
The lesson mentions tools such as Nano Banana, Midjourney, Ideogram, Adobe Firefly, Stable Diffusion, DALL-E, Krea, Leonardo AI, Canva AI, and others.
The main point is not which tool is best. The main point is that AI image generation still requires Art Direction.
The designer still needs to:
- define the direction
- collect references
- choose the style
- refine prompts
- check the output
- correct mistakes
- judge whether the image fits the product
AI can create impressive images quickly, but it can also produce wrong or unrealistic details. The designer’s eye remains the quality filter.
Motion Design In UI
Luis Felipe Bueno frames Motion Design as a way to imagine, explain, and test interface behavior.
Motion is not only decoration. It can:
- show how an interface behaves
- reveal interaction problems
- help clients understand an idea
- help developers understand intended behavior
- communicate future product directions
- make system status visible
- create a more engaging product experience
Animated Mockups
An Animated Mockup is a video-like representation of how an interface or digital service could behave.
It is useful when static screens are not enough.
Animated mockups help teams:
- identify workflow and design problems
- communicate interaction intent
- reduce the imagination required from clients
- support dialogue between designers and developers
- show cross-device flows
- present future concepts before full implementation is possible
This is especially useful for proposals, internal presentations, product research, and concepts that are ahead of current implementation limits.
Animated Mockup Vs Prototype
| Animated mockup | Prototype |
|---|---|
| usually video-based or timeline-based | interactive and testable |
| good for storytelling and presentation | good for interaction validation |
| can imagine impossible or future behavior | closer to real product constraints |
| often used to align clients and teams | often used to test flows and behavior |
The lesson shows that this gap is becoming smaller. Tools such as Rive and Lottie can make some animations lighter, interactive, and easier to implement, but the practical workflow depends on the project and development context.
Motion As Part Of The Interface
Motion is increasingly part of the UI itself.
Examples:
- animated notifications
- morphing status areas
- loading indicators
- upload progress
- pull-to-refresh feedback
- animated cards
- hover states
- guided transitions
The goal is often feedback. When something moves, the user understands that the system is alive, processing, changing, or responding.
Motion And Trust
Static interfaces can create uncertainty when users do not know whether the system is working.
Motion can reduce anxiety by showing:
- loading
- progress
- completion
- transition
- selection
- error
- active state
This connects to Gulf of Evaluation: users need to understand what happened after they acted.
Motion And Storytelling
Motion can also help tell the story of a product.
Luis’s examples include:
- a car configurator moving across desktop, mobile, and store display contexts
- a heads-up display concept for driving information
- a mobile operating system teaser showing interaction feel and visual effects
The motion is not only showing screens. It is explaining how the experience travels across devices, contexts, and moments.
Working With Developers
Motion can help designers and developers align, but it can also create a gap.
A video mockup may show the desired behavior, but developers still need to rebuild the actual behavior in code. That means motion decisions should be discussed early:
- what is essential?
- what can be simplified?
- what is technically feasible?
- what should be implemented as real interaction?
- what is only for presentation?
Good motion handoff is not only “make it like the video.” It explains timing, states, transitions, triggers, and priorities.
Practical Part Omitted
The later part of the session becomes a live practical walkthrough of an animation tool, including state machines, hover states, toggles, view models, and export questions.
I am not turning that section into notes because the user asked not to include the practical part.
The only conceptual takeaway kept from that section is this:
Interactive animation tools can help turn motion from a passive video reference into something closer to a reusable, responsive, implementable UI component.
Main Takeaways
- Art direction applies to UI, not only to campaigns or brand books.
- Images should have a job: attention, comprehension, emotion, usability, identity, or differentiation.
- Photography needs strategic control over subject, light, crop, target, and brand feeling.
- Illustration can create identity, but generic stock styles can weaken differentiation.
- AI image generation still needs art direction and critical judgment.
- Motion design can clarify behavior, not only decorate the product.
- Animated mockups help teams discuss interactions before implementation.
- Motion can reduce uncertainty by showing system feedback.
- Good motion needs handoff: timing, trigger, state, and implementation priority.
How I Can Use This In My Own Work
When designing a UI:
- decide whether images are needed or whether the interface should stay functional and quiet
- define the role of each image before selecting it
- check whether photography matches the target and the brand values
- avoid generic stock illustration unless it truly fits
- use AI images as drafts or controlled assets, not as automatic final output
- prototype motion when static screens cannot explain behavior
- use animation to show feedback, progress, change, and transitions
- separate presentation motion from production motion
- explain motion clearly during handoff
Personal Study Questions
- What visual elements are carrying meaning in this interface?
- Is this image useful, or only decorative?
- Does the photo show the right target?
- Does the image style match the brand values?
- Would an illustration make the concept clearer than photography?
- Could an infographic explain this better than a paragraph?
- What does the user need to understand after an interaction?
- Does this motion clarify behavior or only add spectacle?
- Which animations are essential for the product, and which are only for presentation?