Usare i Design System - Un approccio Frameworkless per la tua Web Application
4 likes1,013 views
Il documento discute l'importanza dei design system nello sviluppo di applicazioni digitali, presentando un approccio frameworkless. Viene analizzato come un design system possa migliorare la coerenza e l'efficacia del design, fornendo un linguaggio comune tra i membri del team. Inoltre, si sottolinea il ruolo dei design pattern e dei principi di design per guidare le decisioni progettuali.
![5. Struttura dei contenuti: elementi
50
Lista documenti contabili
➔ Data
➔ Numero
➔ Destinatario
➔ Causale
➔ Imponibile
➔ Anticipo
➔ Stato
➔ Riporta in bozze
➔ Accetta preventivo
➔ [...]](https://image.slidesharecdn.com/workshopcssday19-190318080043/85/Usare-i-Design-System-Un-approccio-Frameworkless-per-la-tua-Web-Application-50-320.jpg)
![5. Struttura dei contenuti: gerarchia
51
Lista documenti contabili
➔ Data
➔ Numero
➔ Destinatario
➔ Causale
➔ Imponibile
➔ Anticipo (solo per preventivo)
➔ Stato
➔ Azioni
◆ Riporta in bozze (solo per preventivo)
◆ Accetta preventivo (solo per preventivo)
◆ Incasso (solo fattura)
◆ [...]](https://image.slidesharecdn.com/workshopcssday19-190318080043/85/Usare-i-Design-System-Un-approccio-Frameworkless-per-la-tua-Web-Application-51-320.jpg)
![<html>
[...]
<body>
<mydesignsystem-input-currency
name="valore-bonifico" num="889271"
label="valore
bonifico"></mydesignsystem-input-curr
ency>
</body>
</html>
import InputCurrency from
"./InputCurrency/InputCurrency";
window.customElements.define(
"mydesignsystem-input-currency",
InputCurrency
);
WebComponents: Esempio
74](https://image.slidesharecdn.com/workshopcssday19-190318080043/85/Usare-i-Design-System-Un-approccio-Frameworkless-per-la-tua-Web-Application-74-320.jpg)
![class InputCurrency extends HTMLElement {
static get observedAttributes () { [ // attributi osserbabili ] }
connectedCallback () {
// render
// bind events
}
attributeChangedCallback (name) { //... sync my template }
}
WebComponents: Esempio
75](https://image.slidesharecdn.com/workshopcssday19-190318080043/85/Usare-i-Design-System-Un-approccio-Frameworkless-per-la-tua-Web-Application-75-320.jpg)
Usare i Design System - Un approccio Frameworkless per la tua Web Application
- 1. Usare i Design System Un approccio Frameworkless per sviluppare la tua Single Page Application 1
- 2. WE DEVELOP DIGITAL PROJECT TOGETHER WITH YOU. 2
- 3. OUR ideato e extrategy ora sono Flowing: una community inclusiva di persone che condividono passione per l’innovazione e bisogno costante di evoluzione. Abbiamo cocreato insieme questa nuova realtà, e insieme a chi condivide i nostri valori continuiamo a farla crescere giorno per giorno. PEOPLE 3
- 4. Alessandro Violini Interaction Designer Interface Developer Drummer & Retro-Computer collector @violo CSSDay19 - Faenza Antonio Dell’Ava Frontend Developer Background in UX loves cycling @creativecaos
- 6. Vocabolario 6 Design System Pattern Percettivi margini tipografia palette di colori navigazione iconografia form layout CTA principi di design governance parametri e regole d’uso comuni linguaggio condiviso Pattern Funzionali styleguide componenti (pattern library)
- 7. Pattern Funzionali Sono i design pattern che descrivono soluzioni relative a problemi funzionali dell’interfaccia come menu, bottoni, form, actionbar, etc etc Componente un implementazione di un design pattern Sinonimi 7 Pattern Library una lista organizzata di componenti con relativa documentiazione Design Pattern Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem.” — Christopher Alexander
- 8. Pattern Percettivi Le qualità “senza nome” che caratterizzano esteticamente il design system. La loro somma definisce l’individualità del prodotto. Styleguide l’implementazione dei pattern percettivi Sinonimi 8
- 9. Vocabolario è la rappresentazione dell’uso corretto delle parole in un dato momento storico Linguaggio è un sistema di comunicazione tra “parlanti” in cui il significato e l’uso delle parole è definito e condiviso ed è espressione di una cultura comune. Un frase scritta da un parlante, quando letta da un altro- anche in un luogo e un momento diverso - avrà lo stesso significato. Definizioni 9 Letteratura è un’istanza d’uso del linguaggio derivata dalla cultura condivisa sul significato e l’uso delle parole. Con un linguaggio condiviso un testo può essere scritto da più persone come se avessero un’unica mente. Pattern Library Design System Interfaccia
- 10. Design System ≠ Pattern Library Linguaggio ≠ Vocabolario 10
- 11. Perché un Design System? 11
- 12. Un Design System è un insieme interconnesso di pattern e di pratiche condivise organizzate in modo da raggiungere lo scopo del prodotto digitale. Pattern = elementi ripetuti e combinati per comporre l’interfaccia Pratiche = modo in cui vengono usati i pattern Che cos’è un Design System 12
- 13. Non è una styleguide Non è un pattern-library Non è un lavoro da Designer Non è UX Non è una checklist di cose da fare Cosa NON è un Design System 13
- 14. Business Model Personas o Proto-Personas Jobs to be done User Journey User Interface Che informazioni servono per un Design System? 14
- 15. Perché ci permette di realizzare un prodotto sano aiutandoci ogni volta a prendere micro e macro decisioni sane in funzione degli obiettivi di business e tenendo conto delle esigenze degli utenti. Perché un Design System? 15
- 16. L’interazione delle parti del nostro design è ciò che influisce sull’emotività dell’esperienza del nostro utente. Un linguaggio comune in tutto il team è fonte di allineamento. Mappare lo stato componentistico del nostro software ne permette una buona manutenzione. Perché un Design System? 16
- 17. Esiste qualche scorciatoia? 17 Design System Pattern Percettivi Material Design? Principi di Design Governance Parametri e regole d’uso comuni Linguaggio Condiviso Pattern Funzionali Custom Variables?
- 18. 1- I Principi 18
- 19. Il principio è un concetto, un enunciato che sta alla base di un ragionamento. Non è una regola ma sono l’insieme dei principi a funzionare come una mappa che orientano le tue scelte. Cos’è un principio? 19
- 20. Perché è tramite i principi che ci assicureremo che la nostra progettazione rispetti gli scopi del prodotto. Perché i principi in un Design System? 20
- 21. Vengono definiti da tutto il team. Sono in genere da 3 a 5 con le seguenti caratteristiche: - Autentici e genuini - Pratici e applicabili - Con un chiaro punto di vista - Facilmente ricordabili I principi di un Design System 21
- 22. I principi non devono essere generici o scontati. Devono orientarti su qualcosa ed è importante che non dia adito ad interpretazioni diverse nel team. Esempio errato: “funzionale” Esempio corretto: “non un pixel in più a quelli richiesti per la funzionalità” 1 - Autentici e genuini 22
- 23. I principi devono comunicarvi una strada o una scelta. Pensalo come un consiglio, e non solo come un termine giusto. Esempio errato: “completezza” Esempio corretto: “mostrare tutte le opzioni piuttosto che dare una direzione” 2 - Pratici e applicabili 23
- 24. I principi devono aiutarci a definire priorità ed equilibrio anche se a volte ci sono situazioni conflittuali. Esempio errato: “completezza e piacevolezza” Esempio corretto: “Seguire le seguenti priorità: prima completezza delle informazioni di contesto poi piacevolezza estetica” 3 - Con un chiaro punto di vista 24
- 25. Se un team non ricorda i principi probabilmente sono migliorabili. Vanno usati spesso, resi visibili, utilizzati per feedback e perché no creati acronimi per ricordarli meglio. Esempio d’uso errato: non fare mai riferimento ai principi nelle discussioni Esempio d’uso corretto: stampo i principi su fogli A4 che ci accompagnano in ogni confronto 4 - Facilmente ricordabili 25
- 26. Esercizio: Completa la lista dei Principi Sulla base dello scenario dell’applicazione a cui stai lavorando ipotizza altri principi che guideranno il design system. ➔ ricorda, le basi per per formulare un principio utile sono: ◆ deve “servire” l’obiettivo del software ◆ deve fornire un principio pratico e applicabile sulla UI ◆ deve essere facilmente ricordabile ◆ deve dare un punto di vista preciso ➔ la “prova del 9” è chiedersi “il contrario del mio principio potrebbe essere valido per un altro design system?” Template slide 4:3 Tipografia e colori 26
- 27. Parametri e regole d’uso comuni & Governance 27
- 28. 28 Parametri e regole d’uso comuni Integrato Restrittivo Modulare Flessibile
- 29. 29 Design System: Governance ➔ Quale è il team? Livello di delega? ➔ Quali sono gli strumenti? ➔ Come si rendono visibili i risultati? Canali? ➔ Quali sono i riti?
- 30. 30
- 31. 31
- 33. Un Design Pattern rappresenta una soluzione progettuale generale ad un problema ricorrente. - Christopher Alexander - Cos’è un Design Pattern 33
- 34. Ogni Design Pattern descrive un problema ricorrente nel nostro scenario e di conseguenza anche il nucleo della soluzione a tale problema. Per questo è utilizzabile milioni di volte senza mai applicarlo allo stesso identico modo. Cos’è un Design Pattern 34
- 35. L’elenco dei Design Pattern definiscono la Pattern Library della nostra applicazione. Più Design Pattern interconnessi tra loro definiscono il Design Language della nostra applicazione. I Design Pattern nel Design System 35
- 36. I Pattern Funzionali sono i blocchi tangibili dell'interfaccia. Il loro scopo è quello di abilitare o incoraggiare determinati comportamenti degli utenti. I Pattern Funzionali 36
- 37. Il Pattern evolve ma il comportamento rimane lo stesso. Definire quali sono i pattern e a quale scopo servono aiuta a non generare duplicati e ci permette di evolverli insieme al nostro software. I Pattern Funzionali 37
- 38. I Pattern Percettivi sono l’essenza estetica del nostro elemento. Essi sono sempre presenti anche in un componente puramente funzionale. I Pattern Percettivi 38
- 39. Anche se sono lo strato più esterno, i Pattern Percettivi funzionano bene quando vivono nel core del brand ed evolvono con il prodotto. Il Pattern Percettivo per eccellenza è quello che caratterizza e differenzia il nostro prodotto. I Pattern Percettivi 39
- 40. Carta e matita Sketch (https://www.sketchapp.com/) Invision (https://www.invisionapp.com/) Adobe XD (https://www.adobe.com/it/products/xd.html) Figma (https://www.figma.com/) ... Tool per i Design Pattern 40
- 42. Come definire i design pattern? ➔ Interface inventory ( http://bradfrost.com/blog/post/interface-inventory/ ) ➔ Processo induttivo da UI+User Journey ai Pattern (design driven) ➔ Va fatto periodicamente e dopo aver progettato (bene) l’interfaccia ➔ devono essere presenti: frontenders, designers, persone che si occupano di copy (4/ 8p) ➔ L’outcome che ci aspettiamo è una lista di pattern standardizzabili sotto forma di schizzi ➔ Il processo è più importante del risultato 42
- 43. 1. Identificare l’area di analisi 43 Identificare un segmento della user journey che corrisponda a una delle macro-attività da sostenere Fatturazione
- 44. 2. Dividere l’attività analizzata in azioni 44 visualizza la lista dei preventivi emessi
- 45. 2. Dividere l’attività in azioni: esercizio A partire dall UI della tua applicazione “tagga” (con un post it) ogni azione presente in ogni schermata che sostiene il comportamento della schermata ➔ esempi concreti: ◆ filtra la lista dei fascicoli ◆ condivide l’articolo ◆ fotografa l’andamento finanziario di un portafoglio cliente ◆ cambia la modalità di visualizzazione dei look ➔ ogni azione ha per soggetto implicito la parte di interfaccia taggata 45
- 46. 3. Raggruppare gli elementi per scopo 46 presenta un overview di un elemento ➔ raggruppare gli elementi che sostengono azioni analoghe (svolgono la stessa funzione) ➔ il livello di granularità degli elementi raggruppati deve essere il medesimo, non avremo un elemento atomico come “bottone” nello stesso gruppo di “elenca i fascicoli” ➔ siete voi a dover decidere i grado di specificità del gruppo
- 47. 3. Raggruppare gli elementi per scopo: esercizio Raggruppa tutti gli elementi che sostengono la stessa azione ➔ esempi concreti di gruppo: ◆ elenca i fascicoli ◆ cerca articoli ◆ naviga nell’applicazione (menu) ◆ triggera un’azione ➔ il livello di granularità degli elementi raggruppati deve essere il medesimo, non avremo un elemento atomico come “bottone” nello stesso gruppo di “elenca i fascicoli” ➔ siete voi a dover decidere i grado di specificità del gruppo ➔ cose che “appaiono” diverse potrebbero stare nello stesso gruppo ➔ la discussione è il vero obiettivo! 47
- 48. 4. Definisci i pattern 48 genericospecifico lista fascicoli lista preventivi lista fattura lista fascicoli lista documenti fiscali lista content block “Se modifico le fatture voglio che si modifichino anche i preventivi?”
- 49. 4. Definisci i pattern: esercizio Definisci i Pattern: ➔ Ogni pattern può essere più specifico o più generico ➔ esempi: ◆ lista fascicoli E lista preventivi VS lista generica ◆ lista radio E vista articoli VS lista generica ◆ primary menu E tabs VS menu generico ◆ header E action bar VS header with actions generica ➔ la “prova del 9” quando uniamo due pattern in uno è “quando modifico A voglio che cambi anche B?” ➔ Considera che ogni pattern potrà avere delle varianti 49
- 50. 5. Struttura dei contenuti: elementi 50 Lista documenti contabili ➔ Data ➔ Numero ➔ Destinatario ➔ Causale ➔ Imponibile ➔ Anticipo ➔ Stato ➔ Riporta in bozze ➔ Accetta preventivo ➔ [...]
- 51. 5. Struttura dei contenuti: gerarchia 51 Lista documenti contabili ➔ Data ➔ Numero ➔ Destinatario ➔ Causale ➔ Imponibile ➔ Anticipo (solo per preventivo) ➔ Stato ➔ Azioni ◆ Riporta in bozze (solo per preventivo) ◆ Accetta preventivo (solo per preventivo) ◆ Incasso (solo fattura) ◆ [...]
- 52. Azioni 5. Struttura dei contenuti: wireframe & varianti 52 Data Numero Destinatario Causale Imponibile Stato Riporta in bozze Accetta Rifiuta Lista documenti contabili: variante preventivo AzioniData Numero Destinatario Causale Imponibile Stato Storna Incasso Lista documenti contabili: variante fattura anticipo Fattura
- 53. 5. Struttura dei contenuti: esercizio Struttura dei contenuti: ➔ elenca per ogni pattern gli elementi (immagini, testo, titolo, meta, etc etc) di contenuto ➔ determina la loro gerarchia e gli eventuali elementi varianti e/o opzionali ➔ Definisci con un wireframe la struttura visuale del pattern ➔ Definisci eventuali varianti della struttura visuale 53
- 54. 6. Naming: esercizio Naming: ➔ definisci un nome per ogni pattern che rifletta il suo grado di specificità ➔ esempi: ◆ grado di specificità alto: Lista Preventivi ◆ grado di specificità medio: Lista Documenti Contabili ◆ grado di specificità basso: Lista 54
- 55. Pattern Library: sviluppo e manutenzione 55
- 56. La Pattern Library è uno strumento per documentare e condividere i Design Pattern. Cos’è una Pattern Library 56
- 57. Ordine alfabetico, gerarchico o per funzionalità. L’importante è che sia fatta come è abituato a pensare il team. Struttura di una Pattern Library 57
- 58. Organizzazione ideale minima: nome scopo esempio di codice (snippet) varianti Struttura di una Pattern Library 58
- 59. Se utile è possibile aggiungere anche: versioning membri del team pattern correlati dos e don’t Struttura di una Pattern Library 59
- 60. Esiste ma non viene usata Viene usata solo da una parte del team Anti-pattern di una Pattern Library 60
- 61. Condividete il modo in cui farlo. O siete rigidi e disciplinati nell’accettare nuovi componenti e avete un sistema che vi aiuta a capire se il pattern esiste già e/o se potete modificarlo oppure inserite un nuovo pattern solo se è stato riusato almeno “n” volte. Update di una Pattern Library 61
- 62. OOCSS Atomic Design BEM Scrivere un componente 62
- 63. Separa la struttura dalla skin Separa il contenuto dal contenitore Scrivere un componente - OOCSS 63
- 64. Scrivere un componente - Atomic Design 64
- 65. Blocco Elemento Modificatore Scrivere un componente - BEM 65
- 66. .nav_menu{ height:$nav-menu-height; background-color:$nav_menu-bg-color; &__list{ list-style:none; &__item{ float:left; height:40px; text-transform:uppercase; font-size:18px; padding-top:18px; text-align:center; &--active{ border-bottom: 3px solid $nav-menu-hover-color; } } } } Esempio BEM 66
- 67. Frontify (https://frontify.com/) PatternLab (https://patternlab.io/) Fractal (http://www.fractal-design.com/) Storybook (https://storybook.js.org/) KSS (http://warpspire.com/kss/) Tool per Pattern Library 67
- 68. Esercizio: Implementa il Componente Progettato ➔ Utilizza il repository del tuo scenario di applicazione: ◆ ius maior: https://github.com/adellava/ius-maior-design-system-sketch ◆ day: https://github.com/Violo/day-design-system-sketch ◆ banca soldo https://github.com/Violo/bancasoldo-design-system-sketch ◆ modatrendy42 https://github.com/Violo/modatrendy42-design-system-sketch ➔ Fare una fork, clonare il repo, seguire il readme Template slide 4:3 Tipografia e colori 68
- 69. Architetture Frameworkless per i Design System 69
- 70. Cosa significa frameworkless? https://github.com/frameworkless-movement/manifesto 70
- 71. Alternative allo sviluppo dei Componenti 71 ➔ Usare un framework UI ◆ Integrato con il framework di front-end (es. material UI) ◆ Integrabile con il framework di front-end (es. Bootstrap) ◆ CSS only (es. Bulma) ➔ Scrivere i componenti con il framework di front-end + CSS ➔ Web Components ◆ molto costosi ◆ web standard
- 72. Quando utilizzarli 72 quanto il componente è centrale nella consegna del valore? specificitàdelcomponente web components
- 74. <html> [...] <body> <mydesignsystem-input-currency name="valore-bonifico" num="889271" label="valore bonifico"></mydesignsystem-input-curr ency> </body> </html> import InputCurrency from "./InputCurrency/InputCurrency"; window.customElements.define( "mydesignsystem-input-currency", InputCurrency ); WebComponents: Esempio 74
- 75. class InputCurrency extends HTMLElement { static get observedAttributes () { [ // attributi osserbabili ] } connectedCallback () { // render // bind events } attributeChangedCallback (name) { //... sync my template } } WebComponents: Esempio 75
- 76. const emitChangeValue = (element) => { const event = new window.CustomEvent("value-change", { detail: () => Number.parseFloat(element.value), bubbles: true }); element.dispatchEvent(event); }; WebComponents: Esempio 76
- 77. Esercizio: Implementa il Componente dotato di Comportamento Utilizza questo repository come esempio: ➔ simple-web-components-with-manipulation https://github.com/adellava/simple-web-components-with-manipulation Template slide 4:3 Tipografia e colori 77
- 78. Conclusioni 78
- 80. Alessandro Violini Antonio Dell’Ava @violo - @creativecaos Grazie 80