際際滷

際際滷Share a Scribd company logo

Se non hai paura di questa potenza, fatti avanti! - Design System e Wordpress

Francesco Acerbi
Francesco Acerbi

Avevi mai notato che in Daitarn 3 竪 presente un design system? E che Haran Benjo 竪 (anche) un designer? Ecco allora un dialogo serale tra mecha e progettazione.

1 of 53
Download to read offline
Se non hai paura di questa potenza, fatti avanti! Un dialogo serale tra mecha e progettazione. Treviso WordPress Meetup 23 Maggio 2019
Treviso WordPress Meetup 23 Maggio 2019 Francesco Acerbi 1. Designer @TSW 2. Membro del board allargato di Architecta 3. Organizzatore degli incontri dellUX Book Club Veneto 2 3 COSE SU DI ME :
Daitarn 3 1. Dispone di un sacco di armi, tra cui lAttacco Solare 2. alto 120 metri 3. Ha una sua mimica facciale 3 3 COSE SU DI LUI : Treviso WordPress Meetup 23 Maggio 2019
4Treviso WordPress Meetup 23 Maggio 2019
Voi? 1. Che lavoro fate? 2. Quanto sapete su WordPress e su Daitarn 3? 3. Conoscete il tema della serata? 5 3 COSE SU DI VOI: Treviso WordPress Meetup 23 Maggio 2019
Treviso WordPress Meetup 23 Maggio 2019 Di cosa parleremo stasera: 6 Design System (DS) Design Principles Design Pattern Pattern Library WordPress
Design System: il tema della serata E che ci azzecca Daitarn 3? E WordPress? Design System
8 Design System di Alla Kholmato www.designsystemsbook.com Tutto inizia da questo libro: Treviso WordPress Meetup 23 Maggio 2019
Treviso WordPress Meetup 23 Maggio 2019 Cos竪 un Design System? 9 un insieme di pattern connessi e pratiche condivise (practices), coerentemente organizzati per raggiungere lo scopo di un prodotto digitale, in modo armonico. 竪 una supercazzola?
10Treviso WordPress Meetup 23 Maggio 2019 primo esempio: atlassian.design
Treviso WordPress Meetup 23 Maggio 2019 Perch竪 un Design System? 1. Tante piattaforme 2. Diverse persone coinvolte 3. Troppe soluzioni diverse 4. Aggiornamenti ed evoluzioni prodotti / brand 5. Per evitare debiti 11
Treviso WordPress Meetup 23 Maggio 2019 Bene鍖ci di un Design System 1. Brand: consistenza e riconoscibilit 2. User: chiarezza e semplicit 3. Business: ef鍖cienza e risparmio 12
13Treviso WordPress Meetup 23 Maggio 2019 secondo esempio: polaris.shopify.com
Treviso WordPress Meetup 23 Maggio 2019 Cera bisogno di un altro nome? Con tutti i nomi che ci sono gi, non bastava chiamare il DS ... ...brand guidelines? ...design library? 14
Treviso WordPress Meetup 23 Maggio 2019 Design System 1. Ha principi ben de鍖niti 2. Utilizza dei pattern correlati 3. Usa un linguaggio condiviso nel team Il tutto organizzato per raggiungere uno scopo (di un prodotto digitale)... 15 3 COSE SU DI LUI :
Treviso WordPress Meetup 23 Maggio 2019 Daitarn 3 1. Ha principi ben de鍖niti 2. Utilizza dei pattern 3. Usa un linguaggio condiviso nel team Il tutto organizzato per raggiungere uno scopo ... 16 ALTRE 3 COSE SU DI LUI :
Design Principles: senza un buon pilota un robot 竪 solo metallo Design Principles
Treviso WordPress Meetup 23 Maggio 2019 Cosa sono i Design Principles 18 Sono delle linee guida che riassumono lessenza del concetto di buon design per un brand e/o per un prodotto, con le spiegazioni di come supportarlo, raggiungerlo e diffonderlo. Cosa signi鍖ca per la mia azienda/il mio prodotto un buon design?
Treviso WordPress Meetup 23 Maggio 2019 Airbnb, Design Principles: Uni鍖ed, Universal, Iconic, Conversational 19 https://airbnb.design/the-way-we-build/
Treviso WordPress Meetup 23 Maggio 2019 Gutemberg, Design Principles: Create a post and page building experience that makes it easy to create rich post layouts. 20 https://developer.wordpress.org/block-editor/contributors/design/
21Treviso WordPress Meetup 23 Maggio 2019 1. Ha principi ben de鍖niti il mio obiettivo 竪 di uccidere il maggior numero di meganoidi possibile cit. Haran Banjo
22Treviso WordPress Meetup 23 Maggio 2019 1. Ha principi ben de鍖niti man over machine (l'uomo 竪 superiore alla macchina)
Design Pattern: dai la cera, togli la cera, dai la cera, togli la cera... Design Pattern
Treviso WordPress Meetup 23 Maggio 2019 Cosa sono i Design Pattern? 24 Lunione dei pattern forma il linguaggio dellinterfaccia. Sono elementi di uninterfaccia che possono essere applicati e utilizzati pi湛 volte per risolvere uno speci鍖co problema di design, soddisfare una necessit dellutente o evocare unemozione.
Treviso WordPress Meetup 23 Maggio 2019 Alcuni esempi: Bottoni Input text Men湛 Icone Tipogra鍖a Colori 25 Pattern funzionali (FUNCTIONAL PATTERNS) Pattern estetici (PERCEPTUAL PATTERNS)
Treviso WordPress Meetup 23 Maggio 2019 Pattern funzionali Sono i blocchi reali dellinterfaccia 26
Treviso WordPress Meetup 23 Maggio 2019 Pattern estetici lestetica, trasmette emozione. 27
Treviso WordPress Meetup 23 Maggio 2019 Pattern estetici lestetica, trasmette emozione. 28
Treviso WordPress Meetup 23 Maggio 2019 Pattern estetici 29
Treviso WordPress Meetup 23 Maggio 2019 Come scegliere lo stile? Per entrambe le tipologie di pattern ci sono delle regole base: 1. Dominio del prodotto 2. Brand 3. Piattaforma 30
31Treviso WordPress Meetup 23 Maggio 2019 2. Utilizza dei pattern ...Quali sono secondo voi?
32Treviso WordPress Meetup 23 Maggio 2019
33Treviso WordPress Meetup 23 Maggio 2019 funzionalit + estetica = design language
34Treviso WordPress Meetup 23 Maggio 2019 terzo esempio: style.eurostar.com
Pattern Library: uno strumento condiviso per scon鍖ggere i Meganoidi Pattern Library
Treviso WordPress Meetup 23 Maggio 2019 Che cos竪 una Design Library? 36 Una design library non 竪 un design system, non 竪 una style guide. un tool per acquisire, raccogliere e condividere i pattern e le linee guida per usarli.
37Treviso WordPress Meetup 23 Maggio 2019 quarto esempio: carbondesignsystem.com
Treviso WordPress Meetup 23 Maggio 2019 Design Library: tutto facile? Non 竪 un Design System, 竪 un tool Non aggiusta la cattiva progettazione Deve esserci armonia tra i pattern Ci vuole af鍖atamento nel team Deve essere sempre aggiornata ...uccide la creativit? 38
39Treviso WordPress Meetup 23 Maggio 2019 3. Usa un linguaggio condiviso nel team Vediamo alcuni esempi
40Treviso WordPress Meetup 23 Maggio 2019
41Treviso WordPress Meetup 23 Maggio 2019 Daitarn 3 竪 una Design Library!
WordPress: la potenza di un tool al servizio dellumanit WordPress
Treviso WordPress Meetup 23 Maggio 2019 Come WordPress ci pu嘆 aiutare? WordPress 竪 un tool e ci permette di poter realizzare una Design Library. 43
Treviso WordPress Meetup 23 Maggio 2019 Dove WordPress ci pu嘆 aiutare? Fare un check della situazione De鍖nire i Design Principles De鍖nire e rendere standard i Design Pattern Realizzare una Pattern Library Preparare gli elementi da utilizzare 44 WordPress
45Treviso WordPress Meetup 23 Maggio 2019 quinto esempio: sipgatedesign.com
46Treviso WordPress Meetup 23 Maggio 2019
Treviso WordPress Meetup 23 Maggio 2019 Da dove partire Realizzate / Scegliete un tema semplice, concentratevi sui contenuti. Alcuni esempi: 47 Tema di WordPress per la Pubblica Amministrazione https://github.com/italia/design-wordpress-theme McLuhan By Anders Nor辿n: https://wordpress.org/themes/mcluhan/ Argon Design System (Free Design System for Bootstrap 4) https://www.creative-tim.com/product/argon-design-system
Un riassunto della serata Finisce cos狸, questa favola breve se ne va...
Treviso WordPress Meetup 23 Maggio 2019 Di cosa abbiamo parlato: 50 Design System (DS) Design Principles Design Pattern Pattern Library WordPress
Treviso WordPress Meetup 23 Maggio 2019 Promemoria su un Design System Un Design System non consiste solo in un insieme di pattern, ma anche di tecniche e pratiche per creare, unire, condividere ed evolvere questi pattern. 51
Treviso WordPress Meetup 23 Maggio 2019 Alcuni consigli Libro: Design System di Alla Kholmato Libro: Modular Web Design di Nathan Curtis Libro: Atomic Design by Brad Frost App: Sketch Pattern library: www.welie.com - A Pattern Library for Interaction Design Design system: Google, Medium, Siti aziende 52
53Treviso WordPress Meetup 23 Maggio 2019 La storia continua: non basta un Attacco Solare per chiudere largomento Questo 竪 solo un buon inizio, Daitarn 3 ha chiuso la serie in 40 episodi ゃャ continua.
Grazie! hello@francescoacerbi.it Treviso WordPress Meetup 23 Maggio 2019 LinkedIn DOMANDE?

More Related Content

Se non hai paura di questa potenza, fatti avanti! - Design System e Wordpress

  • 1. Se non hai paura di questa potenza, fatti avanti! Un dialogo serale tra mecha e progettazione. Treviso WordPress Meetup 23 Maggio 2019
  • 2. Treviso WordPress Meetup 23 Maggio 2019 Francesco Acerbi 1. Designer @TSW 2. Membro del board allargato di Architecta 3. Organizzatore degli incontri dellUX Book Club Veneto 2 3 COSE SU DI ME :
  • 3. Daitarn 3 1. Dispone di un sacco di armi, tra cui lAttacco Solare 2. alto 120 metri 3. Ha una sua mimica facciale 3 3 COSE SU DI LUI : Treviso WordPress Meetup 23 Maggio 2019
  • 4. 4Treviso WordPress Meetup 23 Maggio 2019
  • 5. Voi? 1. Che lavoro fate? 2. Quanto sapete su WordPress e su Daitarn 3? 3. Conoscete il tema della serata? 5 3 COSE SU DI VOI: Treviso WordPress Meetup 23 Maggio 2019
  • 6. Treviso WordPress Meetup 23 Maggio 2019 Di cosa parleremo stasera: 6 Design System (DS) Design Principles Design Pattern Pattern Library WordPress
  • 7. Design System: il tema della serata E che ci azzecca Daitarn 3? E WordPress? Design System
  • 8. 8 Design System di Alla Kholmato www.designsystemsbook.com Tutto inizia da questo libro: Treviso WordPress Meetup 23 Maggio 2019
  • 9. Treviso WordPress Meetup 23 Maggio 2019 Cos竪 un Design System? 9 un insieme di pattern connessi e pratiche condivise (practices), coerentemente organizzati per raggiungere lo scopo di un prodotto digitale, in modo armonico. 竪 una supercazzola?
  • 10. 10Treviso WordPress Meetup 23 Maggio 2019 primo esempio: atlassian.design
  • 11. Treviso WordPress Meetup 23 Maggio 2019 Perch竪 un Design System? 1. Tante piattaforme 2. Diverse persone coinvolte 3. Troppe soluzioni diverse 4. Aggiornamenti ed evoluzioni prodotti / brand 5. Per evitare debiti 11
  • 12. Treviso WordPress Meetup 23 Maggio 2019 Bene鍖ci di un Design System 1. Brand: consistenza e riconoscibilit 2. User: chiarezza e semplicit 3. Business: ef鍖cienza e risparmio 12
  • 13. 13Treviso WordPress Meetup 23 Maggio 2019 secondo esempio: polaris.shopify.com
  • 14. Treviso WordPress Meetup 23 Maggio 2019 Cera bisogno di un altro nome? Con tutti i nomi che ci sono gi, non bastava chiamare il DS ... ...brand guidelines? ...design library? 14
  • 15. Treviso WordPress Meetup 23 Maggio 2019 Design System 1. Ha principi ben de鍖niti 2. Utilizza dei pattern correlati 3. Usa un linguaggio condiviso nel team Il tutto organizzato per raggiungere uno scopo (di un prodotto digitale)... 15 3 COSE SU DI LUI :
  • 16. Treviso WordPress Meetup 23 Maggio 2019 Daitarn 3 1. Ha principi ben de鍖niti 2. Utilizza dei pattern 3. Usa un linguaggio condiviso nel team Il tutto organizzato per raggiungere uno scopo ... 16 ALTRE 3 COSE SU DI LUI :
  • 17. Design Principles: senza un buon pilota un robot 竪 solo metallo Design Principles
  • 18. Treviso WordPress Meetup 23 Maggio 2019 Cosa sono i Design Principles 18 Sono delle linee guida che riassumono lessenza del concetto di buon design per un brand e/o per un prodotto, con le spiegazioni di come supportarlo, raggiungerlo e diffonderlo. Cosa signi鍖ca per la mia azienda/il mio prodotto un buon design?
  • 19. Treviso WordPress Meetup 23 Maggio 2019 Airbnb, Design Principles: Uni鍖ed, Universal, Iconic, Conversational 19 https://airbnb.design/the-way-we-build/
  • 20. Treviso WordPress Meetup 23 Maggio 2019 Gutemberg, Design Principles: Create a post and page building experience that makes it easy to create rich post layouts. 20 https://developer.wordpress.org/block-editor/contributors/design/
  • 21. 21Treviso WordPress Meetup 23 Maggio 2019 1. Ha principi ben de鍖niti il mio obiettivo 竪 di uccidere il maggior numero di meganoidi possibile cit. Haran Banjo
  • 22. 22Treviso WordPress Meetup 23 Maggio 2019 1. Ha principi ben de鍖niti man over machine (l'uomo 竪 superiore alla macchina)
  • 23. Design Pattern: dai la cera, togli la cera, dai la cera, togli la cera... Design Pattern
  • 24. Treviso WordPress Meetup 23 Maggio 2019 Cosa sono i Design Pattern? 24 Lunione dei pattern forma il linguaggio dellinterfaccia. Sono elementi di uninterfaccia che possono essere applicati e utilizzati pi湛 volte per risolvere uno speci鍖co problema di design, soddisfare una necessit dellutente o evocare unemozione.
  • 25. Treviso WordPress Meetup 23 Maggio 2019 Alcuni esempi: Bottoni Input text Men湛 Icone Tipogra鍖a Colori 25 Pattern funzionali (FUNCTIONAL PATTERNS) Pattern estetici (PERCEPTUAL PATTERNS)
  • 26. Treviso WordPress Meetup 23 Maggio 2019 Pattern funzionali Sono i blocchi reali dellinterfaccia 26
  • 27. Treviso WordPress Meetup 23 Maggio 2019 Pattern estetici lestetica, trasmette emozione. 27
  • 28. Treviso WordPress Meetup 23 Maggio 2019 Pattern estetici lestetica, trasmette emozione. 28
  • 29. Treviso WordPress Meetup 23 Maggio 2019 Pattern estetici 29
  • 30. Treviso WordPress Meetup 23 Maggio 2019 Come scegliere lo stile? Per entrambe le tipologie di pattern ci sono delle regole base: 1. Dominio del prodotto 2. Brand 3. Piattaforma 30
  • 31. 31Treviso WordPress Meetup 23 Maggio 2019 2. Utilizza dei pattern ...Quali sono secondo voi?
  • 32. 32Treviso WordPress Meetup 23 Maggio 2019
  • 33. 33Treviso WordPress Meetup 23 Maggio 2019 funzionalit + estetica = design language
  • 34. 34Treviso WordPress Meetup 23 Maggio 2019 terzo esempio: style.eurostar.com
  • 35. Pattern Library: uno strumento condiviso per scon鍖ggere i Meganoidi Pattern Library
  • 36. Treviso WordPress Meetup 23 Maggio 2019 Che cos竪 una Design Library? 36 Una design library non 竪 un design system, non 竪 una style guide. un tool per acquisire, raccogliere e condividere i pattern e le linee guida per usarli.
  • 37. 37Treviso WordPress Meetup 23 Maggio 2019 quarto esempio: carbondesignsystem.com
  • 38. Treviso WordPress Meetup 23 Maggio 2019 Design Library: tutto facile? Non 竪 un Design System, 竪 un tool Non aggiusta la cattiva progettazione Deve esserci armonia tra i pattern Ci vuole af鍖atamento nel team Deve essere sempre aggiornata ...uccide la creativit? 38
  • 39. 39Treviso WordPress Meetup 23 Maggio 2019 3. Usa un linguaggio condiviso nel team Vediamo alcuni esempi
  • 40. 40Treviso WordPress Meetup 23 Maggio 2019
  • 41. 41Treviso WordPress Meetup 23 Maggio 2019 Daitarn 3 竪 una Design Library!
  • 42. WordPress: la potenza di un tool al servizio dellumanit WordPress
  • 43. Treviso WordPress Meetup 23 Maggio 2019 Come WordPress ci pu嘆 aiutare? WordPress 竪 un tool e ci permette di poter realizzare una Design Library. 43
  • 44. Treviso WordPress Meetup 23 Maggio 2019 Dove WordPress ci pu嘆 aiutare? Fare un check della situazione De鍖nire i Design Principles De鍖nire e rendere standard i Design Pattern Realizzare una Pattern Library Preparare gli elementi da utilizzare 44 WordPress
  • 45. 45Treviso WordPress Meetup 23 Maggio 2019 quinto esempio: sipgatedesign.com
  • 46. 46Treviso WordPress Meetup 23 Maggio 2019
  • 47. Treviso WordPress Meetup 23 Maggio 2019 Da dove partire Realizzate / Scegliete un tema semplice, concentratevi sui contenuti. Alcuni esempi: 47 Tema di WordPress per la Pubblica Amministrazione https://github.com/italia/design-wordpress-theme McLuhan By Anders Nor辿n: https://wordpress.org/themes/mcluhan/ Argon Design System (Free Design System for Bootstrap 4) https://www.creative-tim.com/product/argon-design-system
  • 48. Un riassunto della serata Finisce cos狸, questa favola breve se ne va...
  • 49. Treviso WordPress Meetup 23 Maggio 2019 Di cosa abbiamo parlato: 50 Design System (DS) Design Principles Design Pattern Pattern Library WordPress
  • 50. Treviso WordPress Meetup 23 Maggio 2019 Promemoria su un Design System Un Design System non consiste solo in un insieme di pattern, ma anche di tecniche e pratiche per creare, unire, condividere ed evolvere questi pattern. 51
  • 51. Treviso WordPress Meetup 23 Maggio 2019 Alcuni consigli Libro: Design System di Alla Kholmato Libro: Modular Web Design di Nathan Curtis Libro: Atomic Design by Brad Frost App: Sketch Pattern library: www.welie.com - A Pattern Library for Interaction Design Design system: Google, Medium, Siti aziende 52
  • 52. 53Treviso WordPress Meetup 23 Maggio 2019 La storia continua: non basta un Attacco Solare per chiudere largomento Questo 竪 solo un buon inizio, Daitarn 3 ha chiuso la serie in 40 episodi ゃャ continua.