Javier Fuentes Alonso
Head of Machine Learning
@JavierFnts
Using machine learning to turn
you into a designer
www.uizard.io
The workflow for creating an app or website
user
needs
ideation &
wireframing
UX design prototyping &
user testing
UI design development delivery
www.uizard.io
user
needs
ideation &
wireframing
UX design prototyping &
user testing
UI design development delivery
Expectations
The workflow for creating an app or website
ideation &
wireframing
www.uizard.io
user
needs
development delivery
Reality
prototyping &
user testing
UI design
UX design
The workflow for creating an app or website
ideation &
wireframing
www.uizard.io
user
needs
development delivery
Reality
prototyping &
user testing
UI design
UX design
The workflow for creating an app or website
‍
👩
⚖️
👨
‍
🔬
👩
‍
💻
🤵 👩
‍
🏫
👨
‍
🎓
👨
‍
🎨
👩
‍
💼
Design is a Search Problem
www.uizard.io
[Mike Walsh] (2018)
www.uizard.io
How about leveraging ML to accelerate the
design search and the workflow?
From sketches to a prototype
www.uizard.io
Can we turn wireframe images into functional prototypes?
Machine
Learning
Computer
Vision
Language
Modelling
}
image as input,
can be produced with any software
Vision system for hand drawn sketches
www.uizard.io
How difficult can it be?
Vision system for hand drawn sketches
www.uizard.io
How difficult can it be?
Vision system for hand drawn sketches
www.uizard.io
How difficult can it be?
Vision system for hand drawn sketches
www.uizard.io
How difficult can it be?
Vision system for hand drawn sketches
www.uizard.io
How difficult can it be?
Vision system for hand drawn sketches
www.uizard.io
Line
Vision system for hand drawn sketches
www.uizard.io
Text
Text
Text
Vision system for hand drawn sketches
www.uizard.io
Text
Text group
Vision system for hand drawn sketches
www.uizard.io
Text
Text group
Text
Text group
Vision system for hand drawn sketches
www.uizard.io
Text
Text group
Text
Text group
Icon
Text group
Vision system for hand drawn sketches
www.uizard.io
Text
Text group
Text
Text group
Icon
Text group
Vision system for hand drawn sketches
www.uizard.io
Text
Text group
Text
Text group
Icon
Text group
Vision system for hand drawn sketches
www.uizard.io
Text group
Vision system for hand drawn sketches
www.uizard.io
Text group
Vision system for hand drawn sketches
www.uizard.io
Text group
Vision system for hand drawn sketches
www.uizard.io
Text
Button
Vision system for hand drawn sketches
www.uizard.io
Text
Button
Underline
Vision system for hand drawn sketches
www.uizard.io
Text
Button
Underline
Input field
Input field
Vision system for hand drawn sketches
www.uizard.io
Vision system for hand drawn sketches
www.uizard.io
Vision system for hand drawn sketches
www.uizard.io
Vision system for hand drawn sketches
www.uizard.io
Vision system for hand drawn sketches
www.uizard.io
Vision system for hand drawn sketches
www.uizard.io
Visual representation != semantics
From sketches to a prototype
www.uizard.io
wireframing
low fidelity
prototyping
high fidelity
prototyping
Vision system for hand drawn sketches
www.uizard.io
Expectation Reality
Vision system for hand drawn sketches
www.uizard.io
Expectation Reality
Vision system for hand drawn sketches
www.uizard.io
Expectation Reality
From an image to design
www.uizard.io
Defining “good looking”
www.uizard.io
Defining “good looking”
www.uizard.io
[Laura Adai]
Defining “good looking”
www.uizard.io
Which one is more “good looking”?
[Laura Adai]
Defining “good looking”
www.uizard.io
Really difficult to
define mathematically
Defining “good looking”
www.uizard.io
different concepts
26
Really difficult to
define mathematically
[A Systematic Literature Review of Visual Design Metrics for Graphical User Interfaces] (2020)
Defining “good looking”
www.uizard.io
different metrics
64
different concepts
26
Really difficult to
define mathematically
[A Systematic Literature Review of Visual Design Metrics for Graphical User Interfaces] (2020)
Defining “good looking”
www.uizard.io
0 “good looking” metrics
different metrics
64
different concepts
26
Really difficult to
define mathematically
[A Systematic Literature Review of Visual Design Metrics for Graphical User Interfaces] (2020)
Applying ML to design
www.uizard.io
Or
Text group
Text group
Applying ML to design
www.uizard.io
Or
Applying ML to design
www.uizard.io
www.uizard.io
“ Unlike an algebra problem, [in design] no
solution is the unique correct solution. Instead
many feasible solutions exist that possess
characteristics that are better or worse than
other solutions.”
Dr. John Farris
From an image to UI design
www.uizard.io
UI Design
Previous
delivery
Visual
inspiration
ideation &
wireframing
www.uizard.io
user
needs
development delivery
prototyping &
user testing
UI design
UX design
The workflow for creating an app or website
🤖
🤖
👩
‍
💻
🤵 🤖
👨
‍
🎓
👨
‍
🎨
👩
‍
💼
www.uizard.io
www.uizard.io
The Democratization of Deep Learning
www.uizard.io
2012
AlexNet paper,
implemented in
CUDA
The Democratization of Deep Learning
www.uizard.io
2012
AlexNet paper,
implemented in
CUDA
2015
Release of
Tensorflow
The Democratization of Deep Learning
www.uizard.io
2012
AlexNet paper,
implemented in
CUDA
2015
Release of
Tensorflow
2018
Release of fast.ai
v1
The Democratization of Deep Learning
www.uizard.io
2012
AlexNet paper,
implemented in
CUDA
2015
Release of
Tensorflow
2018
Release of fast.ai
v1
2025
AutoML?
The Democratization of Deep Learning
www.uizard.io
The Democratization of Deep Learning
Expert Mainstream
www.uizard.io
The Democratization of Deep Learning
High learning curve
Hard to use
Low learning curve
Easy to use
Expert Mainstream
www.uizard.io
The Democratization of Deep learning
High learning curve
Hard to use
Low learning curve
Easy to use
Expert Mainstream
“model.fit(data)”
[photos by Jakob Owens and Amy Humphries]
“I will do
backpropagation by
hand”
www.uizard.io
The Democratization of Deep learning
High learning curve
Hard to use
Low learning curve
Easy to use
Expert Mainstream
• PhD
• Data scientist
• ML engineer
• Developer
• Software engineer
• Domain experts
• PhD
For: For:
www.uizard.io
The Democratization of UX Design
ML assisted tool
High learning curve
Hard to use
Low learning curve
Easy to use
www.uizard.io
The technology
does the hard work
The person does
the hard work
High learning curve
Hard to use
Low learning curve
Easy to use
The Democratization of UX Design
ML assisted tool
www.uizard.io
The Democratization of UX Design
• chief of product
• founder
• developer
• engineer
• UX designer
• product manager
• user researcher
• domain expert
• UI designer
• UI designers
For: For:
The technology
does the hard work
The person does
the hard work
High learning curve
Hard to use
Low learning curve
Easy to use
ML assisted tool
ideation &
wireframing
www.uizard.io
user
needs
development delivery
prototyping &
user testing
UI design
UX design
The workflow for creating an app or website
🤖
🤖
👩
‍
💻
🤵 🤖
👨
‍
🎓
👨
‍
🎨
👩
‍
💼
ideation &
wireframing
www.uizard.io
user
needs
development delivery
prototyping &
user testing
UI design
UX design
The workflow for creating an app or website
🤖
🤖
👩
‍
💻
🤵
🤖
👨
‍
🎓
👨
‍
🎨
👩
‍
💼
‍
👩
⚖️
👨
‍
🔬
👩
‍
🏫
Assisted
ideation &
wireframing
www.uizard.io
user
needs
development delivery
prototyping &
user testing
UI design
UX design
The workflow for creating an app or website
🤖
🤖
👩
‍
💻
👩
‍
🏫
🤖
👩
‍
🏫
👩
‍
🏫
👩
‍
💼
👩
‍
🏫
👩
‍
🏫
👩
‍
🏫
Assisted
ideation &
wireframing
www.uizard.io
user
needs
development delivery
prototyping &
user testing
UI design
UX design
The workflow for creating an app or website
🤖
🤖
👩
‍
💻
👩
‍
💻
🤖
👩
‍
💻
👩
‍
💻
👩
‍
💻
👩
‍
💻
👩
‍
💻
👩
‍
💻
Assisted
Accessible design
www.uizard.io
🤖
Accessible design
www.uizard.io
🤖
www.uizard.io
👩
🌍 🖥
⌨️
👩 🤖
Javier Fuentes Alonso
Head of Machine Learning
@JavierFnts
javier@uizard.io
Thank you! 🙂
Questions?

More Related Content

PDF
UI2code : A Neural Machine Translator to Bootstrap Mobile GUI Implementation
PPTX
SANJU PPT 2_Presentation Mini Project.pptx
PDF
TechEvent 2019: Artificial Intelligence in Dev & Ops; Martin Luckow - Trivadis
PDF
UX STRAT Online 2021 Presentation by Adilakshmi Veerubhotla, IBM
PDF
What are machines learning? How might that impact design?
PDF
UX and Machine Learning
PDF
How Deep Learning Changes the Design Process #NEXT17
PPTX
Tackling Challenges in Computer Vision
UI2code : A Neural Machine Translator to Bootstrap Mobile GUI Implementation
SANJU PPT 2_Presentation Mini Project.pptx
TechEvent 2019: Artificial Intelligence in Dev & Ops; Martin Luckow - Trivadis
UX STRAT Online 2021 Presentation by Adilakshmi Veerubhotla, IBM
What are machines learning? How might that impact design?
UX and Machine Learning
How Deep Learning Changes the Design Process #NEXT17
Tackling Challenges in Computer Vision

Similar to Javier Fuentes Alonso (Uizard) – Using machine learning to turn you into a designer (20)

PPTX
Tackling Challenges in Computer Vision
PPTX
Ritcha R
PDF
UX Beers - A Story about product management at uman.ai - Jasper Verplanken
PPTX
2018 11 14 Artificial Intelligence and Machine Learning in Azure
PDF
Machine Learning-Based Prototyping of Graphical User Interfaces for Mobile Apps
PPTX
[SHORT] Verganti, Vendraminelli Iansiti 2021 JPIM 37(3) Innov & Design in AI ...
PPTX
[SHORT] Verganti, Vendraminelli Iansiti 2021 JPIM 37(3) Innov & Design in AI ...
PDF
Nadia Piet - Design Thinking for AI
PDF
“Deep Learning on Mobile Devices,” a Presentation from Siddha Ganju
PDF
AI/ML-Innovation-2019
PDF
Opportunities and Pitfalls of Prototyping with Artificial Intelligence berl...
PDF
Core ML and Computer Vision
PDF
Siddha Ganju, NVIDIA. Deep Learning for Mobile
PDF
Siddha Ganju. Deep learning on mobile
PDF
Yury Vetrov — Algorithm-Driven Design
PDF
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
PPTX
Artificial intelligence
PDF
Design UX for AI
PPTX
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
PDF
Ai and Design: When, Why and How? - Morgenbooster
Tackling Challenges in Computer Vision
Ritcha R
UX Beers - A Story about product management at uman.ai - Jasper Verplanken
2018 11 14 Artificial Intelligence and Machine Learning in Azure
Machine Learning-Based Prototyping of Graphical User Interfaces for Mobile Apps
[SHORT] Verganti, Vendraminelli Iansiti 2021 JPIM 37(3) Innov & Design in AI ...
[SHORT] Verganti, Vendraminelli Iansiti 2021 JPIM 37(3) Innov & Design in AI ...
Nadia Piet - Design Thinking for AI
“Deep Learning on Mobile Devices,” a Presentation from Siddha Ganju
AI/ML-Innovation-2019
Opportunities and Pitfalls of Prototyping with Artificial Intelligence berl...
Core ML and Computer Vision
Siddha Ganju, NVIDIA. Deep Learning for Mobile
Siddha Ganju. Deep learning on mobile
Yury Vetrov — Algorithm-Driven Design
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Artificial intelligence
Design UX for AI
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Ai and Design: When, Why and How? - Morgenbooster
Ad

More from Codiax (20)

PDF
Dr. Laura Kerber (NASA’s Jet Propulsion Laboratory) – Exploring Caves on the ...
PDF
Costas Voliotis (CodeWeTrust) – An AI-driven approach to source code evaluation
PDF
Dr. Lobna Karoui (Fortune 500) – Disruption, empathy & Trust for sustainable ...
PDF
Luka Postružin (Superbet) – ‘From zero to hero’ in early life customer segmen...
PDF
Gema Parreno Piqueras (Apium Hub) – Videogames and Interactive Narrative Cont...
PDF
Janos Puskas (Accenture) – Azure IoT Reference Architecture for enterprise Io...
PDF
Adria Recasens, DeepMind – Multi-modal self-supervised learning from videos
PDF
Roelof Pieters (Overstory) – Tackling Forest Fires and Deforestation with Sat...
PDF
Emeli Dral (Evidently AI) – Analyze it: production monitoring for machine lea...
PDF
Matthias Feys (ML6) – Bias in ML: A Technical Intro
PDF
Christophe Tallec, Hello Tomorrow – Solving our next decade challenges throug...
PDF
Sean Holden (University of Cambridge) - Proving Theorems_ Still A Major Test ...
PDF
Olga Afanasjeva (GoodAI) - Towards general artificial intelligence for common...
PDF
Maciej Marek (Philip Morris International) - The Tools of The Trade
PDF
Joanna Bryson (University of Bath) - Intelligence by Design_ Systems engineer...
PDF
Jakub Langr (University of Oxford) - Overview of Generative Adversarial Netwo...
PDF
Jakub Bartoszek (Samsung Electronics) - Hardware Security in Connected World
PDF
Jair Ribeiro - Defining a Successful Artificial Intelligence Strategy for you...
PDF
Cindy Spelt (Zoom In Zoom Out) - How to beat the face recognition challenges?
PDF
Alexey Borisenko (Cisco) - Creating IoT solution using LoRaWAN Network Server
Dr. Laura Kerber (NASA’s Jet Propulsion Laboratory) – Exploring Caves on the ...
Costas Voliotis (CodeWeTrust) – An AI-driven approach to source code evaluation
Dr. Lobna Karoui (Fortune 500) – Disruption, empathy & Trust for sustainable ...
Luka Postružin (Superbet) – ‘From zero to hero’ in early life customer segmen...
Gema Parreno Piqueras (Apium Hub) – Videogames and Interactive Narrative Cont...
Janos Puskas (Accenture) – Azure IoT Reference Architecture for enterprise Io...
Adria Recasens, DeepMind – Multi-modal self-supervised learning from videos
Roelof Pieters (Overstory) – Tackling Forest Fires and Deforestation with Sat...
Emeli Dral (Evidently AI) – Analyze it: production monitoring for machine lea...
Matthias Feys (ML6) – Bias in ML: A Technical Intro
Christophe Tallec, Hello Tomorrow – Solving our next decade challenges throug...
Sean Holden (University of Cambridge) - Proving Theorems_ Still A Major Test ...
Olga Afanasjeva (GoodAI) - Towards general artificial intelligence for common...
Maciej Marek (Philip Morris International) - The Tools of The Trade
Joanna Bryson (University of Bath) - Intelligence by Design_ Systems engineer...
Jakub Langr (University of Oxford) - Overview of Generative Adversarial Netwo...
Jakub Bartoszek (Samsung Electronics) - Hardware Security in Connected World
Jair Ribeiro - Defining a Successful Artificial Intelligence Strategy for you...
Cindy Spelt (Zoom In Zoom Out) - How to beat the face recognition challenges?
Alexey Borisenko (Cisco) - Creating IoT solution using LoRaWAN Network Server
Ad

Recently uploaded (20)

PPT
Galois Field Theory of Risk: A Perspective, Protocol, and Mathematical Backgr...
PPTX
Benefits of Physical activity for teenagers.pptx
PPTX
MicrosoftCybserSecurityReferenceArchitecture-April-2025.pptx
PDF
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
DOCX
search engine optimization ppt fir known well about this
PPT
What is a Computer? Input Devices /output devices
PPTX
Custom Battery Pack Design Considerations for Performance and Safety
PDF
Developing a website for English-speaking practice to English as a foreign la...
PDF
Five Habits of High-Impact Board Members
PPTX
Chapter 5: Probability Theory and Statistics
PDF
Flame analysis and combustion estimation using large language and vision assi...
PDF
sustainability-14-14877-v2.pddhzftheheeeee
PDF
TrustArc Webinar - Click, Consent, Trust: Winning the Privacy Game
PPT
Module 1.ppt Iot fundamentals and Architecture
PDF
Enhancing emotion recognition model for a student engagement use case through...
PPTX
2018-HIPAA-Renewal-Training for executives
PDF
A comparative study of natural language inference in Swahili using monolingua...
PPTX
The various Industrial Revolutions .pptx
PDF
How ambidextrous entrepreneurial leaders react to the artificial intelligence...
PPTX
Final SEM Unit 1 for mit wpu at pune .pptx
Galois Field Theory of Risk: A Perspective, Protocol, and Mathematical Backgr...
Benefits of Physical activity for teenagers.pptx
MicrosoftCybserSecurityReferenceArchitecture-April-2025.pptx
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
search engine optimization ppt fir known well about this
What is a Computer? Input Devices /output devices
Custom Battery Pack Design Considerations for Performance and Safety
Developing a website for English-speaking practice to English as a foreign la...
Five Habits of High-Impact Board Members
Chapter 5: Probability Theory and Statistics
Flame analysis and combustion estimation using large language and vision assi...
sustainability-14-14877-v2.pddhzftheheeeee
TrustArc Webinar - Click, Consent, Trust: Winning the Privacy Game
Module 1.ppt Iot fundamentals and Architecture
Enhancing emotion recognition model for a student engagement use case through...
2018-HIPAA-Renewal-Training for executives
A comparative study of natural language inference in Swahili using monolingua...
The various Industrial Revolutions .pptx
How ambidextrous entrepreneurial leaders react to the artificial intelligence...
Final SEM Unit 1 for mit wpu at pune .pptx

Javier Fuentes Alonso (Uizard) – Using machine learning to turn you into a designer