www.codiax.co

1. Javier Fuentes Alonso
Head of Machine Learning
@JavierFnts
Using machine learning to turn
you into a designer

2. www.uizard.io
The workflow for creating an app or website
user
needs
ideation &
wireframing
UX design prototyping &
user testing
UI design development delivery

3. 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

4. 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

5. 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
‍
👩
⚖️
👨
‍
🔬
👩
‍
💻
🤵 👩
‍
🏫
👨
‍
🎓
👨
‍
🎨
👩
‍
💼

6. Design is a Search Problem
www.uizard.io
[Mike Walsh] (2018)

7. www.uizard.io
How about leveraging ML to accelerate the
design search and the workflow?

8. 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

9. Vision system for hand drawn sketches
www.uizard.io
How difficult can it be?

10. Vision system for hand drawn sketches
www.uizard.io
How difficult can it be?

11. Vision system for hand drawn sketches
www.uizard.io
How difficult can it be?

12. Vision system for hand drawn sketches
www.uizard.io
How difficult can it be?

13. Vision system for hand drawn sketches
www.uizard.io
How difficult can it be?

14. Vision system for hand drawn sketches
www.uizard.io
Line

15. Vision system for hand drawn sketches
www.uizard.io
Text
Text
Text

16. Vision system for hand drawn sketches
www.uizard.io
Text
Text group

17. Vision system for hand drawn sketches
www.uizard.io
Text
Text group
Text
Text group

18. Vision system for hand drawn sketches
www.uizard.io
Text
Text group
Text
Text group
Icon
Text group

19. Vision system for hand drawn sketches
www.uizard.io
Text
Text group
Text
Text group
Icon
Text group

20. Vision system for hand drawn sketches
www.uizard.io
Text
Text group
Text
Text group
Icon
Text group

21. Vision system for hand drawn sketches
www.uizard.io
Text group

22. Vision system for hand drawn sketches
www.uizard.io
Text group

23. Vision system for hand drawn sketches
www.uizard.io
Text group

24. Vision system for hand drawn sketches
www.uizard.io
Text
Button

25. Vision system for hand drawn sketches
www.uizard.io
Text
Button
Underline

26. Vision system for hand drawn sketches
www.uizard.io
Text
Button
Underline
Input field
Input field

27. Vision system for hand drawn sketches
www.uizard.io

28. Vision system for hand drawn sketches
www.uizard.io

29. Vision system for hand drawn sketches
www.uizard.io

30. Vision system for hand drawn sketches
www.uizard.io

31. Vision system for hand drawn sketches
www.uizard.io

32. Vision system for hand drawn sketches
www.uizard.io
Visual representation != semantics

33. From sketches to a prototype
www.uizard.io
wireframing
low fidelity
prototyping
high fidelity
prototyping

34. Vision system for hand drawn sketches
www.uizard.io
Expectation Reality

35. Vision system for hand drawn sketches
www.uizard.io
Expectation Reality

36. Vision system for hand drawn sketches
www.uizard.io
Expectation Reality

37. From an image to design
www.uizard.io

38. Defining “good looking”
www.uizard.io

39. Defining “good looking”
www.uizard.io
[Laura Adai]

40. Defining “good looking”
www.uizard.io
Which one is more “good looking”?
[Laura Adai]

41. Defining “good looking”
www.uizard.io
Really difficult to
define mathematically

42. 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)

43. 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)

44. 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)

45. Applying ML to design
www.uizard.io
Or
Text group
Text group

46. Applying ML to design
www.uizard.io
Or

47. Applying ML to design
www.uizard.io

48. 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

49. From an image to UI design
www.uizard.io
UI Design
Previous
delivery
Visual
inspiration

50. ideation &
wireframing
www.uizard.io
user
needs
development delivery
prototyping &
user testing
UI design
UX design
The workflow for creating an app or website
🤖
🤖
👩
‍
💻
🤵 🤖
👨
‍
🎓
👨
‍
🎨
👩
‍
💼

51. www.uizard.io

52. www.uizard.io
The Democratization of Deep Learning

53. www.uizard.io
2012
AlexNet paper,
implemented in
CUDA
The Democratization of Deep Learning

54. www.uizard.io
2012
AlexNet paper,
implemented in
CUDA
2015
Release of
Tensorflow
The Democratization of Deep Learning

55. www.uizard.io
2012
AlexNet paper,
implemented in
CUDA
2015
Release of
Tensorflow
2018
Release of fast.ai
v1
The Democratization of Deep Learning

56. 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

57. www.uizard.io
The Democratization of Deep Learning
Expert Mainstream

58. www.uizard.io
The Democratization of Deep Learning
High learning curve
Hard to use
Low learning curve
Easy to use
Expert Mainstream

59. 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”

60. 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:

61. www.uizard.io
The Democratization of UX Design
ML assisted tool
High learning curve
Hard to use
Low learning curve
Easy to use

62. 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

63. 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

64. ideation &
wireframing
www.uizard.io
user
needs
development delivery
prototyping &
user testing
UI design
UX design
The workflow for creating an app or website
🤖
🤖
👩
‍
💻
🤵 🤖
👨
‍
🎓
👨
‍
🎨
👩
‍
💼

65. 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

66. 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

67. 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

68. Accessible design
www.uizard.io
🤖

69. Accessible design
www.uizard.io
🤖

70. www.uizard.io
👩
🌍 🖥
⌨️
👩 🤖

71. Javier Fuentes Alonso
Head of Machine Learning
@JavierFnts
javier@uizard.io
Thank you! 🙂
Questions?