Dopo la fase iniziale di ricerca e creazione di ipotesi, ci si prepara a creare i primi prototipi da far provare ai nostri utenti. Ma quanto possiamo iterare se il tempo per costruire prototipi è sempre più breve? È possibile velocizzare la fase di disegno e lavorare più sulla progettazione in cicli brevi? Attraverso questo talk vi mostrerò come progetto e disegno rapidamente dei prototipi con processi e scorciatoie che vi aiuteranno a migliorare il vostro flusso di lavoro.

1. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
Progettareedisegnareinterfaccecon:
carta,matita,Sketch,plugin,AbstracteZeplin
Milano,
Novembre 29 - 30, 2018

2. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
mia-platform.eu thesignof.it
!PaulJesusBenitesRomero
UserExperienceDesigner

3. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
01.
TipologiediDesign:
Sguardoalpassato,presenteefuturo

4. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
4
JohnMaeda
1966
Global Head, Computational Design e
Inclusion da Automattic
01 . T I P O LOG I E D I D ESIGN

5. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
5
MurielCooper
1925 – 1994
Book & Digital Designer, researcher e
educator MIT Press
01 . T I P O LOG I E D I D ESIGN

6. DesignReport
2018
JohnMaeda

7. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
7
LapercezionedelDesignstacambiando?
01 . T I P O LOG I E D I D ESIGN

8. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
801 . T I P O LOG I E D I D ESIGN

9. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
901 . T I P O LOG I E D I D ESIGN

10. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
1001 . T I P O LOG I E D I D ESIGN

11. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
11
ClassicalDesign
“There’s a right way to make what is
perfect, crafted, and complete.”
01 . T I P O LOG I E D I D ESIGN

12. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
1201 . T I P O LOG I E D I D ESIGN
PHILIPPE STARK
ALES SI PS JS JUICY SALIF

13. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
1301 . T I P O LOG I E D I D ESIGN
PAROLE CHIAVE
Estetica,perfezione,intuizione

14. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
14
DesignThinking
“Because execution has outpaced
innovation, and experience matters.”
01 . T I P O LOG I E D I D ESIGN

15. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
1501 . T I P O LOG I E D I D ESIGN
WORKSHOP
DI IDE A GENER ATION
CODESIGN
TR A DESIGNERS E C -LEVEL

16. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
1601 . T I P O LOG I E D I D ESIGN
PAROLE CHIAVE
Collaborazione,ricerca,facilitazione

17. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
17
ComputationalDesign
“Design for billions of individual people
and in real time, is at scale and TBD.”
01 . T I P O LOG I E D I D ESIGN

18. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
1801 . T I P O LOG I E D I D ESIGN
IPHONE XR
APPLE

19. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
1901 . T I P O LOG I E D I D ESIGN
PAROLE CHIAVE
DRY, dati,usabilità

20. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
2001 . T I P O LOG I E D I D ESIGN
💻🧠

21. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
21
Esefossimotuttidesigner?
01 . T I P O LOG I E D I D ESIGN

22. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
2201 . T I P O LOG I E D I D ESIGN
🤯

23. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
02.
ClassicaleComputationalDesign:
breveanalisididuediscipline
TALK PER CODEMOTION 2018 © PAUL JESUS BENITES ROMERO

24. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
24
Classical
Design ≠
02 . CL AS S I CA L E COM P UTATION AL DES IGN
Computational
Design

25. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
25
Classical
Design =
Illustrazione
Graphic Design
Fashion Design
Interior Design
Industrial Design
02 . CL AS S I CA L E COM P UTATION AL DES IGN

26. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
26
Computational
Design =
Visual Design
User Experience Design
Interaction Design
Product Design
UX Engineering
02 . CL AS S I CA L E COM P UTATION AL DES IGN

27. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
2702 . CL AS S I CA L E COM P UTATION AL DES IGN
1/3
Dei designer ha un’istruzione in
ambito ingegneria/informatica

28. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
2802 . CL AS S I CA L E COM P UTATION AL DES IGN
2/5
Designer sono coinvolti nello sviluppo

29. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
29
🤝
02 . CL AS S I CA L E COM P UTATION AL DES IGN

30. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
3002 . CL AS S I CA L E COM P UTATION AL DES IGN
Esistel’esteticanelComputationalDesign?

31. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
31
TEST SP ORTELLO BANCARIO
DI MASA AKI KUROS U
E K AORI K ASHIMUR A
02 . CL AS S I CA L E COM P UTATION AL DES IGN

32. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
32
IPHONE XR
APPLE
02 . CL AS S I CA L E COM P UTATION AL DES IGN

33. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
33
HUMAN INTERFACE G UIDEL INES
APPLE 1987
02 . CL AS S I CA L E COM P UTATION AL DES IGN

34. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
34
HUMAN INTERFACE I OS GUIDELINES
APPLE 2 018
02 . CL AS S I CA L E COM P UTATION AL DES IGN

35. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
3502 . CL AS S I CA L E COM P UTATION AL DES IGN
AtomicDesign

36. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
3602 . CL AS S I CA L E COM P UTATION AL DES IGN
Libreria Componenti
Definisce blocchi usabili
BOT TONE
IMM AGINE
HERO
ARTICOLO
NAVI GAZIONE
GALLERY
LISTA
Styleguide
Definisce stili astratti
COLORE
ICONE
GRGLI A
BR AND
PA DDI NG
M AR GINI
TI P OGR AFIA
Design System
Definisce regole e connessioni
ACCES SIBILITÀ
DIZIONARIO
BASI
MOTION
CO NTE NU TO
I . A .
TAS SONO MI E
CO M BI NAZI O NI Prodotto

37. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
3702 . CL AS S I CA L E COM P UTATION AL DES IGN
Qualistrumentiutilizziamo
percreareunprodotto?

38. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
3802 . CL AS S I CA L E COM P UTATION AL DES IGN
React
JavascriptLibrary
Sass
StyledComponents
Vue
JavascriptFramework

39. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
3902 . CL AS S I CA L E COM P UTATION AL DES IGN
+React AntDesign

40. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
4002 . CL AS S I CA L E COM P UTATION AL DES IGN

41. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
4102 . CL AS S I CA L E COM P UTATION AL DES IGN

42. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
4202 . CL AS S I CA L E COM P UTATION AL DES IGN
Com’èlacollaborazione
nelComputationalDesign?

43. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
43
🎨 💻
02 . CL AS S I CA L E COM P UTATION AL DES IGN

44. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
03.
CasostudioTrenord:
Strumentiemetodicollaborativiutilizzati
TALK PER CODEMOTION 2018 © PAUL JESUS BENITES ROMERO

45. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
4503 . CASO STUDI O TR ENOR D
📄 ✏🤚👀

46. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
46
🗣
03 . CASO STUDI O TR ENOR D

47. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
47
WORKSHOP
DI IDE A GENER ATION
WO RKSHOP
DI IDE A GENER AT ION
03 . CASO STUDI O TR ENOR D

48. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
4803 . CASO STUDI O TR ENOR D

49. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
49
CHIAR A MUZZOLON
UX COPY WRITER
SIMONE MONTALTO
IOS SPECIALIST
PAUL JES U S BENIT ES ROMER O
PRODUCT DESIGNER
FR ANCES CA TA L LE VI
MOBI L E DE V ELOPE R
FEDERICO OLDRINI
MOBILE TECHNICAL LE ADER
DANIEL A FAT TIZZI
PRODUCT OWNER
ANTONIO L A SAL ANDR A
MOBILE SPECIALIST
Team
Trenord
AliasTeamBurton
03 . CASO STUDI O TR ENOR D

50. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
50
Chestrumentiabbiamousato
percreareilayoutecomponenti?
03 . CASO STUDI O TR ENOR D

51. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
5103 . CASO STUDI O TR ENOR D

52. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
52
DOCUMENTO
SKETCH
LIBRERIA
SKETCH
=
03 . CASO STUDI O TR ENOR D

53. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
5303 . CASO STUDI O TR ENOR D

54. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
5403 . CASO STUDI O TR ENOR D

55. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
5503 . CASO STUDI O TR ENOR D

56. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
5603 . CASO STUDI O TR ENOR D

57. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
5703 . CASO STUDI O TR ENOR D

58. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
5803 . CASO STUDI O TR ENOR D

59. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
5903 . CASO STUDI O TR ENOR D
NUCLEOAPP.COM

60. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
60
Qualisonoiverivantaggi?
03 . CASO STUDI O TR ENOR D

61. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
6103 . CASO STUDI O TR ENOR D

62. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
6203 . CASO STUDI O TR ENOR D

63. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
6303 . CASO STUDI O TR ENOR D

64. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
6403 . CASO STUDI O TR ENOR D

65. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
6503 . CASO STUDI O TR ENOR D

66. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
6603 . CASO STUDI O TR ENOR D

67. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
67
SKETCH & IO S COMP ONENT
TES SER A TRENORD 3.0
DET TAGLIO LIVELLO
SKETCH 52.3
03 . CASO STUDI O TR ENOR D

68. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
68
SKETCH & IO S COMP ONENT
TES SER A TRENORD 3.0
DET TAGLIO LIVELLO
SKETCH 52.3
03 . CASO STUDI O TR ENOR D

69. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
6903 . CASO STUDI O TR ENOR D

70. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
70
✅
03 . CASO STUDI O TR ENOR D

71. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
71
Componenti Progetto
Libreria iOS
Libreria Android
Iconografia
MENU SIMB OLI APERTO
SKETCH 52.3
03 . CASO STUDI O TR ENOR D

72. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
7203 . CASO STUDI O TR ENOR D

73. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
7303 . CASO STUDI O TR ENOR D

74. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
74
CHANG E D-TI C K ET-P R ICE
TRENO R D 3.0
CONGR ATUL ATIONS
TRENORD 3.0
QR-CODE
TRENORD 3.0
TICKET-NO-LOGIN
TRENORD 3.0
03 . CASO STUDI O TR ENOR D

75. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
75
Equandosipassaallosviluppo?
03 . CASO STUDI O TR ENOR D

76. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
7603 . CASO STUDI O TR ENOR D

77. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
7703 . CASO STUDI O TR ENOR D

78. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
7803 . CASO STUDI O TR ENOR D

79. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
7903 . CASO STUDI O TR ENOR D

80. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
8003 . CASO STUDI O TR ENOR D

81. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
8103 . CASO STUDI O TR ENOR D

82. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
82
😍
03 . CASO STUDI O TR ENOR D

83. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
83
🔮
03 . CASO STUDI O TR ENOR D

84. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
8403 . CASO STUDI O TR ENOR D

85. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
8503 . CASO STUDI O TR ENOR D
TrenordBeta
iOSeAndroid

86. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
04.
Cheatcodespervelocità:
SketchPlugins,Zeplinebestpractices
TALK PER CODEMOTION 2018 © PAUL JESUS BENITES ROMERO

87. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
8704 . CHE ATC ODES PER VE LOCITÀ
🤥

88. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
88
Sperimentazioni
=
04 . CHE ATC ODES PER VE LOCITÀ

89. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
89
Componentistica
=
04 . CHE ATC ODES PER VE LOCITÀ

90. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
90
SKETCH & IO S COMP ONENT
TES SER A TRENORD 3.0
04 . CHE ATC ODES PER VE LOCITÀ

91. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
91
Acosaserverealmente?
04 . CHE ATC ODES PER VE LOCITÀ

92. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
92
+
04 . CHE ATC ODES PER VE LOCITÀ

93. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
9304 . CHE ATC ODES PER VE LOCITÀ

94. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
9404 . CHE ATC ODES PER VE LOCITÀ

95. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
9504 . CHE ATC ODES PER VE LOCITÀ

96. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
96
Siamonelmondoperfetto?
04 . CHE ATC ODES PER VE LOCITÀ

97. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
97
😂
04 . CHE ATC ODES PER VE LOCITÀ

98. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
98
MusicTribe
Team
04 . CHE ATC ODES PER VE LOCITÀ

99. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
9904 . CHE ATC ODES PER VE LOCITÀ

100. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
10004 . CHE ATC ODES PER VE LOCITÀ

101. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
04 . CHE ATC ODES PER VE LOCITÀ 101

102. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
102
Pluginutiliperevitareilpanico?
04 . CHE ATC ODES PER VE LOCITÀ

103. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
10304 . CHE ATC ODES PER VE LOCITÀ

104. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
104
Per scambiare i simboli all’interno dei progetti
04 . CHE ATC ODES PER VE LOCITÀ

105. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
10504 . CHE ATC ODES PER VE LOCITÀ

106. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
10604 . CHE ATC ODES PER VE LOCITÀ

107. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
107
Per localizzare i simboli all’interno dei progetti
04 . CHE ATC ODES PER VE LOCITÀ

108. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
10804 . CHE ATC ODES PER VE LOCITÀ

109. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
109
Per rinominare i simboli all’interno dei progetti
04 . CHE ATC ODES PER VE LOCITÀ

110. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
11004 . CHE ATC ODES PER VE LOCITÀ

111. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
111
Per ordinare i simboli all’interno dei progetti
04 . CHE ATC ODES PER VE LOCITÀ

112. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
112
TEORIA “BROKEN WINDOW ”
04 . CHE ATC ODES PER VE LOCITÀ

113. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
11304 . CHE ATC ODES PER VE LOCITÀ

114. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
114
🎨 💻
04 . CHE ATC ODES PER VE LOCITÀ

115. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
115
😊 😊
04 . CHE ATC ODES PER VE LOCITÀ

116. CODEMOTION 2018 / PAUL JESUS BENITES ROMERO
🙋3
mia-platform.eu thesignof.it
Grazie!
P.S.Wearehiring!