Principi UI Design con Sketch

Da un workshop dal titolo "Principi UI Design con Sketch"

Transcript

1. Ciro Esposito ACSG - Associazione Culturale Studi Grafici 09 Febbraio 2019, Milano PRINCIPI UI DESIGN CON SKETCH
2. Cosa faccio Docente di Web Design @ABA Catania Head of Design @Metooo Contatti ciroesposito.com twitter.com/cirox Newsletter dispenser.design Ciro Esposito design | teaching Bologna
3. Il design in questi anni è diventato incredibilmente multiforme
4. Il design non è più solo un valore aggiunto, ma quel valore lo crea
5. Senza design e il designer, non c’è innovazione Paola Antonelli Curatrice del dipartimento di Architettura e Design del MoMa di New York
6. Good design is a good business Frank Pick Capo della comunicazione della Metropolitana di Lon- dra all’inizio del Novecento
7. Il Design è un elemento chiave della strategia di un’azienda
8. Fonte: https://techcrunch.com/2017/05/31/here-are-some-reasons-behind-techs-design-shortage/ Rapporto designer/developer
9. Graphic Design (Digital) Product Design Interaction Design User Experience Design User Interface Design Web Design Service Design
10. Editorial Design Advertising Branding Marketing
11. Ciro Esposito UX/UI Designer
12. Ciro Esposito UX/UI Designer
13. User Experience
14. Viviamo quotidianamente esperienze d’uso con brand, prodotti e servizi
15. La UX è applicabile a qualsiasi campo preveda interazioni tra persone e un oggetto o un processo
17. Tesco Homeplus
19. L’esperienza d’uso è ciò che una persona prova quando utilizza un prodotto, un sistema o un servizio
20. PRODOTTO / SERVIZIO
21. UX
22. UI
23. IxD IA CS UI UX
24. Estetica Credibilità Fiducia Armonia Spirito Emozioni Interazioni Reazioni UX Usabilità Funzionalità Individuabilità Prevedibilità
25. Ogni volta che si usa un software, un’app sul telefono o sul computer, un sito web, un check-in in un chiosco all’aeroporto, stai interagendo con un’interfaccia creata da un designer.
26. Il designer dispone o organizza visivamente ciò che appare.
27. Il designer, oggi più che in passato, non si occupa solo di come deve apparire qualcosa, decide anche cosa succede.
28. Presi insieme, l’interfaccia, il comportamento, il contenuto e il flusso formano l’esperienza dell’utente.
29. Forma Industrial Designer Graphic Designer Contenuto Information Architect Copywriter Animatori Sound designer Comportamento Interaction Design
32. Nascita dell’IxD
34. Morte dell’IxD?
36. Elementi dell’IxD
37. Movimento Spazio Tempo Aspetto visivo Consistenza fisica Suono
38. Approcci dell’IxD
39. Design centrato sull’utente (HCD) Design centrato sulle attività Design di sistemi
40. Leggi dell’IxD
41. lawsofux.com
42. Legge di Fitts Il tempo necessario a spostarsi da un punto di partenza a un bersaglio è determinato dalla distanza e dalla dimensione del bersaglio.
43. lawsofux.com
44. Legge di Hick Il tempo impiegato dall’utente a prendere decisioni è determinato dal numero possibile di scelte che si hanno a disposizione.
45. lawsofux.com
46. Legge di Miller Le persone sono in grado di memorizzare le informazioni in blocchi di sette elementi (più o meno due).
47. lawsofux.com
48. Legge di Tesler Nota anche come legge della conservazione della complessità, stabilisce che ogni processo necessità un certo grado di complessità.
49. A sistemi sempre più complessi devono corrispondere interfacce e interazioni sempre più semplici
50. Ricerca Comprensione Test Creazione Validazione Evoluzione
51. Ricerca La ricerca è diventata un elemento fondamentale del processo di progettazione.
52. Comprensione Chi sono i nostri utenti? Quali bisogni hanno? Oggi come risolvono i loro problemi? Quali azioni compiono? Cosa desiderano?
53. Comprensione Cosa cercano? Cosa ricercano? Quali motivazioni li muovono?
54. Obiettivo Comprensione Esplorare Scoprire Empatizzare Cogliere opportunità Definire strategie
55. Metodi per comprendere Interviste Focus Group Osservazione Diari Sondaggi Workshop
56. Creazione Come usano il prodotto/servizio? Quali soluzioni generano risultati migliori? Quali sono i percorsi ottimali?
57. Creazione Quali alternative possono migliorare le performance?
58. Obiettivi Creazione Ideare Informare il progetto Scegliere direzioni Ridurre i rischi Testare
59. Metodi per creare Interviste Test sull’architettura delle informazioni Test di usabilità Test di desiderabilità Design partecipativo
60. Evoluzione Costruire Misurare Apprendere
61. Obiettivi Evoluzione Monitorare Misurare Sperimentare Apprendere Crescere il progetto
62. Metodi per evolvere Analytics Mappe di calore Videoregistrazioni Sondaggi quantitativi Feedback A/B test
63. Design Thinking
64. Desiderability Feasibility Viability
65. Combinare i bisogni delle persone con soluzioni che siano tecnologicamente possibili e sostenibili
66. Si concentra sugli utenti (o clienti) Suggerisce di affidarsi a team interdisciplinari per generare soluzioni innovative Attribuisce un’importanza primaria a ricerche esplorative
67. Il Design Thinking parte dall’osservazione di una situazione problematica, a cui risponde con l’ideazione di una soluzione efficace
68. Empatizzare Definire Ideare Prototipare Testare
71. Design Sprint
72. Lunedì > Mappare Martedì > Schizzare Mercoledì > Decidere Giovedì > Costruire Venerdì > Testare
74. Elementi e attività
75. forma concretezza astrazione scheletro struttura obiettivi strategia
76. concretezza astrazione obiettivi del sito bisogni degli utenti specifiche funzionali requisiti del contenuto interaction design architettura dell’informazione progettazione navigazione progettazione visiva progettazione interfacce
78. 01. Iniziare dai bisogni 02. Fare meno 03. Progettare con i dati 04. Lavorare per rendere tutto semplice 05. Iterare, iterare ancora 06. Costruire per l’inclusione 07. Capire il contesto 08. Costruire servizi digitali, non siti web 09. Essere coerenti, non uniformi 10. Rendere le cose open-source rende le cose migliori
80. UX Design ricerca, wireframe, prototipi UI/Interaction Design Designer Developer Front-End Dev Back-End Database Back-End Dev visual design, grafica, prototipi avanzati, interazioni HTML / CSS / JS SQL, etc… Php, Ruby, JS, etc…
81. Workflow
82. Flusso + Interazioni Design + Prototipo Markup Esecutivo Sviluppo Per il web
83. Flusso + Interazioni Design + Prototipo Markup Esecutivo Sviluppo Per il web Progettazione Esecuzione
84. Per le App Flusso + Interazioni Design + Prototipo Assets Sviluppo
85. Per le App Flusso + Interazioni Design + Prototipo Assets Sviluppo Progettazione Esecuzione
86. La progettazione: Flusso Flusso + Interazioni Flusso + Interazioni Design funzionalità e flussi Wireframe
87. Designer + Developer Pdf con documentazione Elementi interattivi base Flusso: Chi fa e Cosa fa?
88. Flusso: Cosa si usa? Omnigraffle Balsamiq Carta e penna Keynote Sketch Figma Html-Css Adobe XD
89. Design + Prototipo Design Prototipo simulato La progettazione: Design
90. Designer Pdf o immagini di mockup hi-fi Elmenti interattivi avanzati Design: Chi fa e Cosa fa?
91. Design: Cosa si usa? Photoshop Illustrator Sketch Figma Adobe XD
92. Prototipo: Cosa si usa? Sketch Figma Framer Adobe XD InVision MarvelApp WebFlow Html-Css
93. Markup Elementi base Blocchi Pagine Markup esecutivo
94. Front-End Developer HTML-CSS-JS Markup esecutivo: Chi fa e Cosa fa?
95. Markup esecutivo: Cosa si usa? Sublime Text Visual Code WebStorm Github
96. Assets Assets Elementi base Blocchi Pagine
97. Designer File png, guide di stile Assets: Chi fa e Cosa fa?
98. Assets: Cosa si usa? Sketch Cloud Figma Zeplin
99. Landing Page
100. Landing Page Accesso Social Login Registrazione Success Error Content Recupera Password
101. Design System Design System
102. «We don’t design pages, we design systems» Stephen Hay
103. Pattern e pratiche condivise
104. Elementi di base che si combinano per creare un’interfaccia
112. Atomic Design
113. Atomi Molecole Organismi Template Pagine
114. Ciro Esposito design | teaching www.ciroesposito.com me@ciroesposito.com — twitter.com/cirox facebook.com/cirox
115. Eccetto dove diversamente specificato, i contenuti di questa presentazione sono rilasciati sotto Licenza Creative Commons - (CC BY-NC-SA 3.0) Attribuzione - Non commerciale - Condividi allo stesso modo