際際滷

際際滷Share a Scribd company logo

Atomic Design e sviluppo di un Design System

Edoardo Sportelli
Edoardo Sportelli

Seminario all'interno del corso in Comunicazione Visiva e Design delle Interfacce - Laurea magistrale in Teoria e tecnologia della comunicazione presso Universit degli studi di Milano-Bicocca

1 of 178
Downloaded 29 times
Atomic Design e sviluppo di un Design System
Atomic Design e sviluppo di un Design System
Siamo una societ di experience e service design Chi siamo
Siamo un team di ideatori e creatori, designer, ricercatori e sviluppatori front-end Team
Ideiamo e progettiamo esperienze che siano significative e memorabili, e che abbiano un impatto positivo sulla vita delle persone Chi siamo
Edoardo Sportelli UI Designer
Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
How I Learned to Stop Worrying and Love atomic design
Atomic Design
Atomic Design e sviluppo di un Design System
Atomic design 竪 una metodologia creata da Brad Frost composta da cinque distinte fasi che lavorano insieme per creare un sistema di interface design in un modo pi湛 gerarchico e condivisibile. Atomic Design
Do one thing and do it well mentality Atomic Design
Robert Bronze We may undergo a risk 9:13 AM Its okay. Lets not be doomed by these risks. Its better to fail after trying than to sit without trying. 9:13 AM0:07 10:39 AMwe may succeed Not sure of the success 10:39 AM We may undergo a risk 10:39 AM 10:39 AMso what? Robert Bronze 100%4:13 AMVodafone
Atoms Molecules Organismes
Atomi sono elementi UI che non possono essere separati e vengono utilizzati come mattoncini per costruire una interfaccia Atomic Design
Le molecole sono dei gruppi semplici di elementi UI che funzionano insieme se uniti. Atomic Design
Gli organismi sono dei componenti UI relativamente complessi composti da un gruppo di molecole e/o atomi e/o altri organismi Atomic Design
I template sono oggetti che posizionano i componenti nel layout della pagina e articolano la struttura dei contenuti nel design. Atomic Design
Le pagine sono delle rappresentazioni dei templates che mostrano come appare la UI progettata con la presenza di contenuti reali. Atomic Design
Atomic Design un mindset, non una regola. Principio del fare una cosa e farla bene Serve a far s狸 che ogni persona del team e dellorganizzazione abbia consapevolezza del design, anche del dettaglio
Domande?
Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
Creiamo pagine web come se fossero dei quadri. Invece, dovremmo creare accessi facili e ben fatti ai contenuti, che siano agnostici dal device, dalla grandezza dello schermo o dal contesto The Post-PSD Era
Create un Design System, non pagine Brad Frost Atomic Design The Post-PSD Era
The Post-PSD era Componenti, non pagine Il design non 竪 un quadro Soluzioni, non arte
Domande?
Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
Le maggiori sfide intorno alla modularit sono tutte le decisioni che devono essere fatte: quando riutilizzare un modulo e quando progettarne uno nuovo, come rendere i moduli abbastanza distinti, come combinarli, come evitare duplicazioni con i moduli di altri designer e cos狸 via. Modular Design
To create the whole, you need to create the parts of that whole Brad Frost Atomic Design Modular Design
Comportamenti e le azioni degli utenti Modular Design
Comportamenti e le azioni degli utenti Design patterns Modular Design
Esigenza di un nuovo componente. Esiste gi? Soddisfa tutte le esigenze? Usalo Ancora non esiste. Esiste gi qualcosa di simile? Pu嘆 essere modificato per soddisfare anche le nuove esigenze conservando lutilizzo precedente? Fai le modifiche al pattern Disegna una nuova versione Hai snaturato troppo il pattern originale? Disegna un nuovo componente Modular Design
In altre parole: smetti di rompere l'usabilit degli elementi nativi a favore dell'estetica che ai tuoi utenti probabilmente importa circa la met di quanto importa a te... se non del tutto." Sara Soueidan https://twitter.com/sarasoueidan/status/1046768889571553280?s=12 Modular Design
Modular Design
Dai wireframe alla costruzione di un sistema visivo Challenge
Modular design
Modular design
Modular design
+ Modular design
+ Modular design
Modular design
Modular design
Modular design
Modular design
Modular design
Modular design
Modular design
Questo mese scopri le LA NUOVA MOZZARELLE DI BUFALA CAMPANA Questo mese scopri le LA NUOVA MOZZARELLE DI BUFALA CAMPANA Questo mese scopri le LA NUOVA MOZZARELLE DI BUFALA CAMPANA Scopri LA NUOVA MOZZARELLE DI BUFALA CAMPANA Scopri LA NUOVA MOZZARELLE DI BUFALA CAMPANA Modular design
Templates A cura di Modular design
Templates A cura di Modular design
Templates A cura di Modular design
Domande?
Atomic Design e sviluppo di un Design System
Riprogettare lesperienza web di un servizio di food delivery Challenge
Foorban Styleguide
Atomic Design e sviluppo di un Design System
Soisy Styleguide Modular design
Modular design
Modular design Simple things make firm foundations: le cose semplici creano basi solide Capire quando riutilizzare un modulo e quando progettarne uno nuovo Capire come rendere i moduli abbastanza distinti, come combinarli, come evitare duplicazioni
Domande?
Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
Design System
Obiettivi e vantaggi del Design system Linguaggio condiviso per orchestrare il linguaggio del brand Interconnessione tra ruoli abilitando confronto e dialogo tra team Single Source of Truth costruendo un punto di riferimento progettuale Consistenza e familiarit applicando la stessa soluzione allo stesso problema Chiarezza ed efficacia eliminando ambiguit, abilitando le persone a capire con confidenza Design System
Atomic Design e sviluppo di un Design System
Perch辿 un design system per Aeroporto di Bologna? Multi touchpoint web+app+offline Manutenibilit evolutiva Sito internet su larga scala Hub esteso di servizi e prodotti Design System
Design System Styleguide per il sito dellAeroporto di Bologna
Seleziona la lingua e inserisci il bagaglio a mano nel misuratore che calcoler peso e dimensioni del tuo bagaglio a mano. Select your language and insert your bag into the sizer. It will measure weight and size of your hand bag. Seleziona il tasto INSERISCI BOARDING PASS e utilizza il lettore sulla destra per e鍖ettuare la scansione. Select INSERT BOARDING PASS and use the scanner on the right. Se il bagaglio a mano non risulta conforme, sistemalo per evitare inconvenienti. If your cabin bag is non-compliant, please repack it to avoid inconvenience. Seleziona il tasto STAMPA ETICHETTA e applicala al bagaglio a mano. Select PRINT LABEL and stick it on your hand bag. Ora il tuo bagaglio a mano 竪 in forma. Buon viaggio! Now your bag 鍖ts in. Have a nice trip! Convalidare sempre il biglietto alle casse automatiche prima di uscire eccetto Brand inventory Attivit
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9 0 Open Sans: h1 h2 h3 h4 Desktop Aeroporto di Bologna font-size: 64px | line-height: 72px | 400% Aeroporto di Bologna font-size: 48px. | line-height: 64px | 300% Aeroporto di Bologna font-size: 32px | line-height: 40px | 200% Aeroporto di Bologna font-size: 24px | line-height: 32px | 150% Aeroporto di Bologna Aeroporto di Bologna body small font-size: 16px | line-height: 24px | 100% font-size: 12px | line-height: 16px | 75% Mobile Aeroporto di Bolognah1 font-siz Aeroporto di Bolognah2 font-siz Aeroporto di Bologna Aeroporto di Bologna Aeroporto di Bologna Aeroporto di Bologna h3 body h4 small font-siz font-siz font-siz font-s Tipografia
#D3E0EB #548DC0 #73A2CB #A3C1DB #B3CBE1 20 100 80 60 40 Sky #FFF5CC #FFCD00 #FFD733 #FFE166 #FFEB99 20 100 #FAB72D 100 80 60 40 Sun #D0D7DF #12385D #41607D #71889E #A0AFBE 20 100 80 60 40 Night Primari Secondari #3D4147 100 Text #F3F5F8 100 Page Aviation Parking #194F90 General #FF4B00 P4 #B0009B Waitzone #3B7DFF P1-P2 #FF0300 P Express #4AA900 P3 #A2C037 P5 Status Aviation Parking #3D4147 Positive #D62C40 Negative Status Aviation #165F33 Arrivi #12385D Imbarchi #A9262A Check-in Parking Status Colori
elevation 20 blur 70 alpha 50 elevation 20 blur 70 alpha 30 elevation 2 elevation 0 blur 5 blur 0 alpha 0 alpha 0 elevation 0 blur 100 alpha 20 hover item section form base Valore prospettico
Immagini fotografiche
Icone
B A R C E L L O N AB A R C E L L O N A 2 42 4 1 21 2 0 10 1 2 12 1 1 51 5N A P O L IN A P O L I L O N D R AL O N D R A P A R I SP A R I S C A T A N I AC A T A N I A M A D R I DM A D R I D OO 9 9 3 89 9 3 8 1 1 7 2 11 1 7 2 1 R Y 5 5R Y 5 5 F R 9 2 2F R 9 2 2 R Y 5 5R Y 5 5 R Y 5 5R Y 5 5 D E S T I N A Z I O N ED E S T I N A Z I O N E G A TG A T Illustrazioni
Design System Dai componenti alle pagine per il sito dellAeroporto di Bologna
Components inventory Attivit
link link link Bottoni Link BOTTONE BOTTONEPAGA ORA PAGA ORA BOTTONE LINK LINKLINK Call to Action
Form Inserisci il tuo indirizzo email EMAIL es. Visa Visa Mastercard Maestro METODO DI PAGAMENTO info@bologna-airport.it EMAIL infobologna-airport.it EMAIL Lindirizzo email sembra non essere scritto correttamente. | EMAIL Drop-down Select Checkbox 1 Checkbox 2 Radio-button 1 Radio-button 2 Form
Nuovi servizi e gra鍖ca completamente ridisegnata per lapplicazione BLQ Bologna Airport dellAeroporto di Bologna. Tra le novit pi湛 interessanti per i passeggeri: le noti鍖che sullo stato dei voli in tempo reale, attivabili gratuitamente con una semplice spunta sul volo di interesse, e laggiornamento costante sui tempi di attesa ai controlli di sicurezza. Sono state inoltre inserite le sezioni Servizi, che contiene tutti i negozi, i ristoranti, i servizi e la mappa del Terminal, e Trasporti con le informazioni su tutti i collegamenti da/per lAeroporto. Torna allelenco news In una logica di miglioramento della passenger experience, sono stati notevolmente potenziati anche tutti i servizi di e- commerce attraverso larea riservata MyBLQ, che ora consente di prenotare ed acquistare la sosta nei parcheggi dellAeroporto e gli ingressi alla Marconi Lounge e di consultare e modi鍖care le prenotazioni gi fatte. Sono poi confermati i servizi che avevano fatto il successo dellapp precedente: la visualizzazione dello stato di tutti i voli del giorno, compresi quelli gi decollati e con la possibilit di condividerne le informazioni tramite i social media, e la sezione news e contatti per lasciare feedback e contattare lAeroporto nella maniera pi湛 semplice e veloce, tramite modulo online e twitter. Al via la nuova app per iPhone e Android 30/10/2017 00,00 50% Coperto 200 mt PARCHEGGIO SCOPRI Barcellona SCOPRI Amsterdam SCOPRI Capo Verde Tutte le partenze PARTENZE: Aggiornato il 10/10/2017 alle 10:10 DA N属 VOLO ORARIO PREVISTO MUNICH EN8241 13:20 14:00 MUNICH EN8241 13:20 14:00 MUNICH EN8241 13:20 14:00 MUNICH EN8241 13:20 14:00 MUNICH EN8241 13:20 14:00
30/10/2017 Air France e KLM puntano su Bologna 13/11/2017 Bilancio giornata neve I nostri Consigli: Si ricorda che prima di acquistare il biglietto della compagnia di trasporto 竪 necessario veri鍖care che la stessa accetti che il minore di 14 anni viaggi a loro a鍖dato. Per maggiori informazioni visita il sito della Polizia di Stato
EUR Travellers Corporate Investor Relations PARKINGSFLIGHTS TRASPORTS MOREINSIDE BLQ Prenota il tuo parcheggio Tari鍖e scontate su servizi Car Valet Ingresso e uscita dal parcheggio facilitati 20% sull'ingresso in Vip Lounge 10/10/2017 20:30 ENTRATA ORE 18/10/2017 20:30 USCITA ORE CERCA Parcheggi
EUR Travellers Corporate Investor Relations PARKINGSFLIGHTS TRASPORTS MOREINSIDE BLQ Prenota il tuo parcheggio Tari鍖e scontate su servizi Car Valet Ingresso e uscita dal parcheggio facilitati 20% sull'ingresso in Vip Lounge 10/10/2017 20:30 ENTRATA ORE 18/10/2017 20:30 USCITA ORE CERCA 84,00 TOTALE SOSTA Coperto Antistante l'aerostazione PARCHEGGIO Guarda in mappa 5 min. 50% Coperto 200 mt dallaerostazione PARCHEGGIO Guarda in mappa 51,00 TOTALE SOSTA10 min. 60,00 TOTALE SOSTA Scoperto 850 mt dallaerostazione PARCHEGGIO Guarda in mappa 15 min. Scoperto 1,5 chilometri dallaerostazione PARCHEGGIO Guarda in mappa 30,00 TOTALE SOSTA Navetta ogni 20 min. Parcheggi
EUR Travellers Corporate Investor Relations PARKINGSFLIGHTS TRASPORTS MOREINSIDE BLQ Fashion & Style Food & Beverage General stores Motori Shop & Eat Home > Servizi e shopping in Aeroporto > Shop & Eat 1属 PIANO - DOPO LA SECURITY Guarda in mappa SCOPRI ORA APERTO Retail
EUR Travellers Corporate Investor Relations PARKINGSFLIGHTS TRASPORTS MOREINSIDE BLQ Fashion & Style Food & Beverage General stores Motori Shop & Eat Home > Servizi e shopping in Aeroporto > Shop & Eat 1属 PIANO - DOPO LA SECURITY Guarda in mappa SCOPRI ORA APERTO 1属 PIANO - DOPO LA SECURITY Guarda in mappa ORA APERTO 1属 PIANO - DOPO LA SECURITY Guarda in mappa ORA APERTO 1属 PIANO - DOPO LA SECURITY Guarda in mappa ORA APERTO 1属 PIANO - DOPO LA SECURITY Guarda in mappa ORA APERTO 1属 PIANO - DOPO LA SECURITY Guarda in mappa ORA APERTO 1属 PIANO - DOPO LA SECURITY Guarda in mappa ORA APERTO Porta con te i tuoi acquisti! Informiamo i gentili passeggeri che 竪 possibile portare a bordo, in aggiunta ad un bagaglio a mano. Scopri di pi湛 1属 PIANO - DOPO LA SECURITY Guarda in mappa ORA APERTO Retail
Nuovi servizi e gra鍖ca completamente ridisegnata per lapplicazione BLQ Bologna Airport dellAeroporto di Bologna. Tra le novit pi湛 interessanti per i passeggeri: le noti鍖che sullo stato dei voli in tempo reale, attivabili gratuitamente con una semplice spunta sul volo di interesse, e laggiornamento costante sui tempi di attesa ai controlli di sicurezza. Sono state inoltre inserite le sezioni Servizi, che contiene tutti i negozi, i ristoranti, i servizi e la mappa del Terminal, e Trasporti con le informazioni su tutti i collegamenti da/per lAeroporto. Torna allelenco news In una logica di miglioramento della passenger experience, sono stati notevolmente potenziati anche tutti i servizi di e- commerce attraverso larea riservata MyBLQ, che ora consente di prenotare ed acquistare la sosta nei parcheggi dellAeroporto e gli ingressi alla Marconi Lounge e di consultare e modi鍖care le prenotazioni gi fatte. Sono poi confermati i servizi che avevano fatto il successo dellapp precedente: la visualizzazione dello stato di tutti i voli del giorno, compresi quelli gi decollati e con la possibilit di condividerne le informazioni tramite i social media, e la sezione news e contatti per lasciare feedback e contattare lAeroporto nella maniera pi湛 semplice e veloce, tramite modulo online e twitter. La realizzazione di questo nuovo prodotto, sviluppato con codice nativo da Mavigex con la collaborazione di Endurance - Web Solutions per i web services, va incontro ad una domanda del mercato sempre pi湛 attenta alle soluzioni mobile per lacquisto di beni e servizi. Anche un recente studio del Politecnico di Milano ha evidenziato come nel 2016 in Italia i pagamenti digitali innovativi (tramite Pc, tablet, smartphone e Pos contactless) Al via la nuova app per iPhone e Android 30/10/2017 EUR Travellers Corporate Investor Relations PARKINGSFLIGHTS TRASPORTS MOREINSIDE BLQ News Home > Sala stampa > News News
Nuovi servizi e gra鍖ca completamente ridisegnata per lapplicazione BLQ Bologna Airport dellAeroporto di Bologna. Tra le novit pi湛 interessanti per i passeggeri: le noti鍖che sullo stato dei voli in tempo reale, attivabili gratuitamente con una semplice spunta sul volo di interesse, e laggiornamento costante sui tempi di attesa ai controlli di sicurezza. Sono state inoltre inserite le sezioni Servizi, che contiene tutti i negozi, i ristoranti, i servizi e la mappa del Terminal, e Trasporti con le informazioni su tutti i collegamenti da/per lAeroporto. Torna allelenco news In una logica di miglioramento della passenger experience, sono stati notevolmente potenziati anche tutti i servizi di e- commerce attraverso larea riservata MyBLQ, che ora consente di prenotare ed acquistare la sosta nei parcheggi dellAeroporto e gli ingressi alla Marconi Lounge e di consultare e modi鍖care le prenotazioni gi fatte. Sono poi confermati i servizi che avevano fatto il successo dellapp precedente: la visualizzazione dello stato di tutti i voli del giorno, compresi quelli gi decollati e con la possibilit di condividerne le informazioni tramite i social media, e la sezione news e contatti per lasciare feedback e contattare lAeroporto nella maniera pi湛 semplice e veloce, tramite modulo online e twitter. La realizzazione di questo nuovo prodotto, sviluppato con codice nativo da Mavigex con la collaborazione di Endurance - Web Solutions per i web services, va incontro ad una domanda del mercato sempre pi湛 attenta alle soluzioni mobile per lacquisto di beni e servizi. Anche un recente studio del Politecnico di Milano ha evidenziato come nel 2016 in Italia i pagamenti digitali innovativi (tramite Pc, tablet, smartphone e Pos contactless) Al via la nuova app per iPhone e Android 30/10/2017 EUR Travellers Corporate Investor Relations PARKINGSFLIGHTS TRASPORTS MOREINSIDE BLQ News Home > Sala stampa > News News
Percorsi
Percorsi
Design System Pattern library per il sito dellAeroporto di Bologna
Cos竪 una Pattern Library un tool per documentare e condividere i pattern di design. Crea conoscenza condivisa rendendo il design visibile e accessibile a tutto il team. Pattern library
Obiettivi della Pattern library Pattern library
Obiettivi della Pattern library Offre una panoramica delle nostre linee guida per il markup HTML, lo stile CSS e la denominazione delle classi utilizzate Pattern library
Obiettivi della Pattern library Offre una panoramica delle nostre linee guida per il markup HTML, lo stile CSS e la denominazione delle classi utilizzate Codice modulare e scalabile Pattern library
Obiettivi della Pattern library Offre una panoramica delle nostre linee guida per il markup HTML, lo stile CSS e la denominazione delle classi utilizzate Codice modulare e scalabile Rende i progressi trasparenti Pattern library
Obiettivi della Pattern library Offre una panoramica delle nostre linee guida per il markup HTML, lo stile CSS e la denominazione delle classi utilizzate Codice modulare e scalabile Rende i progressi trasparenti Single Source of Truth costruendo un punto di riferimento progettuale Pattern library
Obiettivi della Pattern library Offre una panoramica delle nostre linee guida per il markup HTML, lo stile CSS e la denominazione delle classi utilizzate Codice modulare e scalabile Rende i progressi trasparenti Single Source of Truth costruendo un punto di riferimento progettuale Connessione con team esterni di sviluppo Pattern library
un tool che aiuta a costruire e documentare librerie di componenti web da integrare nel progetto. Cos竪 Fractal Pattern library
Sono porzioni di codice riutilizzabile allinterno del sistema e servono a costruire i blocchi dellinterfaccia di un applicativo. Lo sviluppo per componenti riduce il debito tecnico rendendo il codice riciclabile. Componenti web Pattern library
Pattern library
Pattern library
Pattern library
Pattern library
Fractal
Fractal
Design System Single Source of Truth Confronto e dialogo Consistenza
Domande?
Edoardo Sportelli per Starting a DesignSystem Attivit
Design System Features, Step-by-Step
Prima di iniziare a disegnare o a sviluppare, 竪 necessario che designers e sviluppatori capiscano lo scopo di ogni elemento che creano Alla Kholmatova Language of modular design
Durata 2 giorni Design System workshop
Partecipanti Sviluppo UI, sviluppo Front-end, sviluppo Backend e progettazione UX Design System workshop
Obiettivi Lobiettivo del workshop 竪 stato di iniziare a strutturare una documentazione completa, univoca e mantenibile che organizzi e definisca gli stili e i componenti principali, le loro specifiche e le loro funzioni Design System workshop
Processo Il workshop inaugurava il processo di creazione di un Design System. Questo processo ha previsto una fase di discovery e concepts e una fase di rilascio Design System workshop
Identificazione dei punti chiave e delle criticit discovery e concepts
Definizione dei pattern discovery e concepts
Naming convention discovery e concepts
Una volta che dai un nome ad un oggetto, dai forma al suo futuro. Alla Kholmatova Language of modular design
Piano di rilasci, assegnando a ciascun cluster di elementi un indice di priorit (ad esempio: now, sooner, later, wait) rilascio
Atomic Design e sviluppo di un Design System
Concorderemo un primo piano di rilasci, assegnando a ciascun cluster di elementi un indice di priorit (ad esempio: now, sooner, later, wait) per gli interventi rilevati e una stima del tempo necessario per la realizzazione, sia lato sviluppo UI che sviluppo web.
Atomic Design e sviluppo di un Design System
Starter Kit
Tipografia Colori Bottoni Background Starter Kit
Bottoni Starter Kit
Starter Kit
1. Primary 2. Secondary 3. Tertiary 4. Quaternary Starter Kit
Starter Kit
1. Primary 2. Secondary 3. Tertiary 4. Quaternary Starter Kit
1. Primary 2. Secondary 3. Tertiary 4. Quaternary Starter Kit
1. Primary 2. Secondary 3. Danger 4. Quaternary Starter Kit
Label Label Label Starter Kit
CONFERMA PULSANTE SECONDARIO NORMAL NORMAL Web iOS Android Starter Kit
Label Label Label Label BUTTON BUTTON Web iOS Android Starter Kit
Tipografia
Starter Kit
Big Intestazione 1尊 livello Intestazione 2尊 livello Intestazione 3尊 livello Testo Small Xsmall Starter Kit
Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Starter Kit
Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Starter Kit
Colori discovery e concepts
1. Main palette (colori primari, scala di grigi, messaggi) 2. Widget Starter Kit
1. Main palette (colori primari, scala di grigi, messaggi) 2. Widget Starter Kit
Main colors Primary color, Secondary color Starter Kit
Grey scale Starter Kit
Messages colors Info, Success, Error, Alert Starter Kit
Application Starter Kit
Domande?
DesignSystem Workflow Attivit
Definire un workflow aiuta il team a capire e a definire insieme gli obiettivi, gli strumenti e la definizione di Done per ogni step Nathan Curtis Design System Features, Step-by-Step
Discovery Design Build Documentazione Pubblicazione
Discovery Design Build Documentazione Pubblicazione Workflow Workflow
Bottoni Workflow - Starter Kit Tipografia Colori Background Giugno Luglio Agosto Templates Grids Form Workflow
Design Build Quand 竪 che posso considerare concluso uno step e posso far iniziare la fase successiva? Workflow
A cosa serve questo a fase? Il design finalizza lo stile visivo e la gamma di specifiche, di variazioni, di stati e di esempi dei componenti dell'interfaccia Workflow
Assegnato a UI designer Workflow
Attivit Lavoro di design iterativo, seguendo un flusso costante di produzione di proposte e di richiesta feedback. Workflow
Tool Sketch, Abstract e/o Invision. Workflow
Passa in Done quando Come art director, ho approvato il design finale Come art director e designer, insieme al team del design system, siamo daccordo che le proposte risolvono i problemi di interazione e usabilit ed 竪 pronto alluso in ogni piattaforma. Come sviluppatore, ho un livello sufficiente di stati, variazioni e specifiche per lavora su una build. Workflow
Workshop & Workflow Analisi e aspettative condivise Definition of done Roadmap in base alle priorit
Domande?
Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
Making Design Systems Work In The Real World !
Il team non usa il design system Il cliente non ti supporta Dopo un po, il lavoro sul design system entra in stallo
Il team non usa il Design System !
Incentivi
Atomic Design e sviluppo di un Design System
Conseguenze
TEAM Senza un design system PRODOTTO +++ Nuovi stili +++ Nuovi patterns +++ Nuove idee +++ Nuovi stili +++ Nuovi patterns +++ Nuove idee +++ Nuovi stili +++ Nuovi patterns +++ Nuove idee
Il tuo cliente non ti supporta !
Far vedere quanto la presenza online sia frammentata
Show, dont tell Brad Frost http://atomicdesign.bradfrost.com/chapter-4/#development- is-design
Atomic Design e sviluppo di un Design System
I lavori sul Design System si fermano !
Diventa un Evangelista
Creare e mantenere un design system di successo richiede un'organizzazione Brad Frost http://atomicdesign.bradfrost.com/chapter-4/#development- is-design
Workshop & Workflow Strategia e costanza: Come la casa, pi湛 a lungo lo trascuri, pi湛 dovrai pulire. Rendere visibile l'inconsistenza Intercettare una persona incaricata. Voi?
Domande?
Grazie
Tangible 竪 un marchio di GNV & Partners S.R.L. Viale Emilia, 3009 47822 Santarcangelo di Romagna RN Italy P.IVA 03130760246 R.E.A. 296354

More Related Content

Atomic Design e sviluppo di un Design System

  • 1. Atomic Design e sviluppo di un Design System
  • 3. Siamo una societ di experience e service design Chi siamo
  • 4. Siamo un team di ideatori e creatori, designer, ricercatori e sviluppatori front-end Team
  • 5. Ideiamo e progettiamo esperienze che siano significative e memorabili, e che abbiano un impatto positivo sulla vita delle persone Chi siamo
  • 7. Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
  • 8. Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
  • 9. How I Learned to Stop Worrying and Love atomic design
  • 12. Atomic design 竪 una metodologia creata da Brad Frost composta da cinque distinte fasi che lavorano insieme per creare un sistema di interface design in un modo pi湛 gerarchico e condivisibile. Atomic Design
  • 13. Do one thing and do it well mentality Atomic Design
  • 14. Robert Bronze We may undergo a risk 9:13 AM Its okay. Lets not be doomed by these risks. Its better to fail after trying than to sit without trying. 9:13 AM0:07 10:39 AMwe may succeed Not sure of the success 10:39 AM We may undergo a risk 10:39 AM 10:39 AMso what? Robert Bronze 100%4:13 AMVodafone
  • 16. Atomi sono elementi UI che non possono essere separati e vengono utilizzati come mattoncini per costruire una interfaccia Atomic Design
  • 17. Le molecole sono dei gruppi semplici di elementi UI che funzionano insieme se uniti. Atomic Design
  • 18. Gli organismi sono dei componenti UI relativamente complessi composti da un gruppo di molecole e/o atomi e/o altri organismi Atomic Design
  • 19. I template sono oggetti che posizionano i componenti nel layout della pagina e articolano la struttura dei contenuti nel design. Atomic Design
  • 20. Le pagine sono delle rappresentazioni dei templates che mostrano come appare la UI progettata con la presenza di contenuti reali. Atomic Design
  • 21. Atomic Design un mindset, non una regola. Principio del fare una cosa e farla bene Serve a far s狸 che ogni persona del team e dellorganizzazione abbia consapevolezza del design, anche del dettaglio
  • 23. Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
  • 24. Creiamo pagine web come se fossero dei quadri. Invece, dovremmo creare accessi facili e ben fatti ai contenuti, che siano agnostici dal device, dalla grandezza dello schermo o dal contesto The Post-PSD Era
  • 25. Create un Design System, non pagine Brad Frost Atomic Design The Post-PSD Era
  • 26. The Post-PSD era Componenti, non pagine Il design non 竪 un quadro Soluzioni, non arte
  • 28. Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
  • 29. Le maggiori sfide intorno alla modularit sono tutte le decisioni che devono essere fatte: quando riutilizzare un modulo e quando progettarne uno nuovo, come rendere i moduli abbastanza distinti, come combinarli, come evitare duplicazioni con i moduli di altri designer e cos狸 via. Modular Design
  • 30. To create the whole, you need to create the parts of that whole Brad Frost Atomic Design Modular Design
  • 31. Comportamenti e le azioni degli utenti Modular Design
  • 32. Comportamenti e le azioni degli utenti Design patterns Modular Design
  • 33. Esigenza di un nuovo componente. Esiste gi? Soddisfa tutte le esigenze? Usalo Ancora non esiste. Esiste gi qualcosa di simile? Pu嘆 essere modificato per soddisfare anche le nuove esigenze conservando lutilizzo precedente? Fai le modifiche al pattern Disegna una nuova versione Hai snaturato troppo il pattern originale? Disegna un nuovo componente Modular Design
  • 34. In altre parole: smetti di rompere l'usabilit degli elementi nativi a favore dell'estetica che ai tuoi utenti probabilmente importa circa la met di quanto importa a te... se non del tutto." Sara Soueidan https://twitter.com/sarasoueidan/status/1046768889571553280?s=12 Modular Design
  • 36. Dai wireframe alla costruzione di un sistema visivo Challenge
  • 49. Questo mese scopri le LA NUOVA MOZZARELLE DI BUFALA CAMPANA Questo mese scopri le LA NUOVA MOZZARELLE DI BUFALA CAMPANA Questo mese scopri le LA NUOVA MOZZARELLE DI BUFALA CAMPANA Scopri LA NUOVA MOZZARELLE DI BUFALA CAMPANA Scopri LA NUOVA MOZZARELLE DI BUFALA CAMPANA Modular design
  • 55. Riprogettare lesperienza web di un servizio di food delivery Challenge
  • 60. Modular design Simple things make firm foundations: le cose semplici creano basi solide Capire quando riutilizzare un modulo e quando progettarne uno nuovo Capire come rendere i moduli abbastanza distinti, come combinarli, come evitare duplicazioni
  • 62. Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
  • 64. Obiettivi e vantaggi del Design system Linguaggio condiviso per orchestrare il linguaggio del brand Interconnessione tra ruoli abilitando confronto e dialogo tra team Single Source of Truth costruendo un punto di riferimento progettuale Consistenza e familiarit applicando la stessa soluzione allo stesso problema Chiarezza ed efficacia eliminando ambiguit, abilitando le persone a capire con confidenza Design System
  • 66. Perch辿 un design system per Aeroporto di Bologna? Multi touchpoint web+app+offline Manutenibilit evolutiva Sito internet su larga scala Hub esteso di servizi e prodotti Design System
  • 67. Design System Styleguide per il sito dellAeroporto di Bologna
  • 68. Seleziona la lingua e inserisci il bagaglio a mano nel misuratore che calcoler peso e dimensioni del tuo bagaglio a mano. Select your language and insert your bag into the sizer. It will measure weight and size of your hand bag. Seleziona il tasto INSERISCI BOARDING PASS e utilizza il lettore sulla destra per e鍖ettuare la scansione. Select INSERT BOARDING PASS and use the scanner on the right. Se il bagaglio a mano non risulta conforme, sistemalo per evitare inconvenienti. If your cabin bag is non-compliant, please repack it to avoid inconvenience. Seleziona il tasto STAMPA ETICHETTA e applicala al bagaglio a mano. Select PRINT LABEL and stick it on your hand bag. Ora il tuo bagaglio a mano 竪 in forma. Buon viaggio! Now your bag 鍖ts in. Have a nice trip! Convalidare sempre il biglietto alle casse automatiche prima di uscire eccetto Brand inventory Attivit
  • 69. Aa a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9 0 Open Sans: h1 h2 h3 h4 Desktop Aeroporto di Bologna font-size: 64px | line-height: 72px | 400% Aeroporto di Bologna font-size: 48px. | line-height: 64px | 300% Aeroporto di Bologna font-size: 32px | line-height: 40px | 200% Aeroporto di Bologna font-size: 24px | line-height: 32px | 150% Aeroporto di Bologna Aeroporto di Bologna body small font-size: 16px | line-height: 24px | 100% font-size: 12px | line-height: 16px | 75% Mobile Aeroporto di Bolognah1 font-siz Aeroporto di Bolognah2 font-siz Aeroporto di Bologna Aeroporto di Bologna Aeroporto di Bologna Aeroporto di Bologna h3 body h4 small font-siz font-siz font-siz font-s Tipografia
  • 70. #D3E0EB #548DC0 #73A2CB #A3C1DB #B3CBE1 20 100 80 60 40 Sky #FFF5CC #FFCD00 #FFD733 #FFE166 #FFEB99 20 100 #FAB72D 100 80 60 40 Sun #D0D7DF #12385D #41607D #71889E #A0AFBE 20 100 80 60 40 Night Primari Secondari #3D4147 100 Text #F3F5F8 100 Page Aviation Parking #194F90 General #FF4B00 P4 #B0009B Waitzone #3B7DFF P1-P2 #FF0300 P Express #4AA900 P3 #A2C037 P5 Status Aviation Parking #3D4147 Positive #D62C40 Negative Status Aviation #165F33 Arrivi #12385D Imbarchi #A9262A Check-in Parking Status Colori
  • 73. Icone
  • 74. B A R C E L L O N AB A R C E L L O N A 2 42 4 1 21 2 0 10 1 2 12 1 1 51 5N A P O L IN A P O L I L O N D R AL O N D R A P A R I SP A R I S C A T A N I AC A T A N I A M A D R I DM A D R I D OO 9 9 3 89 9 3 8 1 1 7 2 11 1 7 2 1 R Y 5 5R Y 5 5 F R 9 2 2F R 9 2 2 R Y 5 5R Y 5 5 R Y 5 5R Y 5 5 D E S T I N A Z I O N ED E S T I N A Z I O N E G A TG A T Illustrazioni
  • 75. Design System Dai componenti alle pagine per il sito dellAeroporto di Bologna
  • 77. link link link Bottoni Link BOTTONE BOTTONEPAGA ORA PAGA ORA BOTTONE LINK LINKLINK Call to Action
  • 78. Form Inserisci il tuo indirizzo email EMAIL es. Visa Visa Mastercard Maestro METODO DI PAGAMENTO info@bologna-airport.it EMAIL infobologna-airport.it EMAIL Lindirizzo email sembra non essere scritto correttamente. | EMAIL Drop-down Select Checkbox 1 Checkbox 2 Radio-button 1 Radio-button 2 Form
  • 79. Nuovi servizi e gra鍖ca completamente ridisegnata per lapplicazione BLQ Bologna Airport dellAeroporto di Bologna. Tra le novit pi湛 interessanti per i passeggeri: le noti鍖che sullo stato dei voli in tempo reale, attivabili gratuitamente con una semplice spunta sul volo di interesse, e laggiornamento costante sui tempi di attesa ai controlli di sicurezza. Sono state inoltre inserite le sezioni Servizi, che contiene tutti i negozi, i ristoranti, i servizi e la mappa del Terminal, e Trasporti con le informazioni su tutti i collegamenti da/per lAeroporto. Torna allelenco news In una logica di miglioramento della passenger experience, sono stati notevolmente potenziati anche tutti i servizi di e- commerce attraverso larea riservata MyBLQ, che ora consente di prenotare ed acquistare la sosta nei parcheggi dellAeroporto e gli ingressi alla Marconi Lounge e di consultare e modi鍖care le prenotazioni gi fatte. Sono poi confermati i servizi che avevano fatto il successo dellapp precedente: la visualizzazione dello stato di tutti i voli del giorno, compresi quelli gi decollati e con la possibilit di condividerne le informazioni tramite i social media, e la sezione news e contatti per lasciare feedback e contattare lAeroporto nella maniera pi湛 semplice e veloce, tramite modulo online e twitter. Al via la nuova app per iPhone e Android 30/10/2017 00,00 50% Coperto 200 mt PARCHEGGIO SCOPRI Barcellona SCOPRI Amsterdam SCOPRI Capo Verde Tutte le partenze PARTENZE: Aggiornato il 10/10/2017 alle 10:10 DA N属 VOLO ORARIO PREVISTO MUNICH EN8241 13:20 14:00 MUNICH EN8241 13:20 14:00 MUNICH EN8241 13:20 14:00 MUNICH EN8241 13:20 14:00 MUNICH EN8241 13:20 14:00
  • 80. 30/10/2017 Air France e KLM puntano su Bologna 13/11/2017 Bilancio giornata neve I nostri Consigli: Si ricorda che prima di acquistare il biglietto della compagnia di trasporto 竪 necessario veri鍖care che la stessa accetti che il minore di 14 anni viaggi a loro a鍖dato. Per maggiori informazioni visita il sito della Polizia di Stato
  • 81. EUR Travellers Corporate Investor Relations PARKINGSFLIGHTS TRASPORTS MOREINSIDE BLQ Prenota il tuo parcheggio Tari鍖e scontate su servizi Car Valet Ingresso e uscita dal parcheggio facilitati 20% sull'ingresso in Vip Lounge 10/10/2017 20:30 ENTRATA ORE 18/10/2017 20:30 USCITA ORE CERCA Parcheggi
  • 82. EUR Travellers Corporate Investor Relations PARKINGSFLIGHTS TRASPORTS MOREINSIDE BLQ Prenota il tuo parcheggio Tari鍖e scontate su servizi Car Valet Ingresso e uscita dal parcheggio facilitati 20% sull'ingresso in Vip Lounge 10/10/2017 20:30 ENTRATA ORE 18/10/2017 20:30 USCITA ORE CERCA 84,00 TOTALE SOSTA Coperto Antistante l'aerostazione PARCHEGGIO Guarda in mappa 5 min. 50% Coperto 200 mt dallaerostazione PARCHEGGIO Guarda in mappa 51,00 TOTALE SOSTA10 min. 60,00 TOTALE SOSTA Scoperto 850 mt dallaerostazione PARCHEGGIO Guarda in mappa 15 min. Scoperto 1,5 chilometri dallaerostazione PARCHEGGIO Guarda in mappa 30,00 TOTALE SOSTA Navetta ogni 20 min. Parcheggi
  • 83. EUR Travellers Corporate Investor Relations PARKINGSFLIGHTS TRASPORTS MOREINSIDE BLQ Fashion & Style Food & Beverage General stores Motori Shop & Eat Home > Servizi e shopping in Aeroporto > Shop & Eat 1属 PIANO - DOPO LA SECURITY Guarda in mappa SCOPRI ORA APERTO Retail
  • 84. EUR Travellers Corporate Investor Relations PARKINGSFLIGHTS TRASPORTS MOREINSIDE BLQ Fashion & Style Food & Beverage General stores Motori Shop & Eat Home > Servizi e shopping in Aeroporto > Shop & Eat 1属 PIANO - DOPO LA SECURITY Guarda in mappa SCOPRI ORA APERTO 1属 PIANO - DOPO LA SECURITY Guarda in mappa ORA APERTO 1属 PIANO - DOPO LA SECURITY Guarda in mappa ORA APERTO 1属 PIANO - DOPO LA SECURITY Guarda in mappa ORA APERTO 1属 PIANO - DOPO LA SECURITY Guarda in mappa ORA APERTO 1属 PIANO - DOPO LA SECURITY Guarda in mappa ORA APERTO 1属 PIANO - DOPO LA SECURITY Guarda in mappa ORA APERTO Porta con te i tuoi acquisti! Informiamo i gentili passeggeri che 竪 possibile portare a bordo, in aggiunta ad un bagaglio a mano. Scopri di pi湛 1属 PIANO - DOPO LA SECURITY Guarda in mappa ORA APERTO Retail
  • 85. Nuovi servizi e gra鍖ca completamente ridisegnata per lapplicazione BLQ Bologna Airport dellAeroporto di Bologna. Tra le novit pi湛 interessanti per i passeggeri: le noti鍖che sullo stato dei voli in tempo reale, attivabili gratuitamente con una semplice spunta sul volo di interesse, e laggiornamento costante sui tempi di attesa ai controlli di sicurezza. Sono state inoltre inserite le sezioni Servizi, che contiene tutti i negozi, i ristoranti, i servizi e la mappa del Terminal, e Trasporti con le informazioni su tutti i collegamenti da/per lAeroporto. Torna allelenco news In una logica di miglioramento della passenger experience, sono stati notevolmente potenziati anche tutti i servizi di e- commerce attraverso larea riservata MyBLQ, che ora consente di prenotare ed acquistare la sosta nei parcheggi dellAeroporto e gli ingressi alla Marconi Lounge e di consultare e modi鍖care le prenotazioni gi fatte. Sono poi confermati i servizi che avevano fatto il successo dellapp precedente: la visualizzazione dello stato di tutti i voli del giorno, compresi quelli gi decollati e con la possibilit di condividerne le informazioni tramite i social media, e la sezione news e contatti per lasciare feedback e contattare lAeroporto nella maniera pi湛 semplice e veloce, tramite modulo online e twitter. La realizzazione di questo nuovo prodotto, sviluppato con codice nativo da Mavigex con la collaborazione di Endurance - Web Solutions per i web services, va incontro ad una domanda del mercato sempre pi湛 attenta alle soluzioni mobile per lacquisto di beni e servizi. Anche un recente studio del Politecnico di Milano ha evidenziato come nel 2016 in Italia i pagamenti digitali innovativi (tramite Pc, tablet, smartphone e Pos contactless) Al via la nuova app per iPhone e Android 30/10/2017 EUR Travellers Corporate Investor Relations PARKINGSFLIGHTS TRASPORTS MOREINSIDE BLQ News Home > Sala stampa > News News
  • 86. Nuovi servizi e gra鍖ca completamente ridisegnata per lapplicazione BLQ Bologna Airport dellAeroporto di Bologna. Tra le novit pi湛 interessanti per i passeggeri: le noti鍖che sullo stato dei voli in tempo reale, attivabili gratuitamente con una semplice spunta sul volo di interesse, e laggiornamento costante sui tempi di attesa ai controlli di sicurezza. Sono state inoltre inserite le sezioni Servizi, che contiene tutti i negozi, i ristoranti, i servizi e la mappa del Terminal, e Trasporti con le informazioni su tutti i collegamenti da/per lAeroporto. Torna allelenco news In una logica di miglioramento della passenger experience, sono stati notevolmente potenziati anche tutti i servizi di e- commerce attraverso larea riservata MyBLQ, che ora consente di prenotare ed acquistare la sosta nei parcheggi dellAeroporto e gli ingressi alla Marconi Lounge e di consultare e modi鍖care le prenotazioni gi fatte. Sono poi confermati i servizi che avevano fatto il successo dellapp precedente: la visualizzazione dello stato di tutti i voli del giorno, compresi quelli gi decollati e con la possibilit di condividerne le informazioni tramite i social media, e la sezione news e contatti per lasciare feedback e contattare lAeroporto nella maniera pi湛 semplice e veloce, tramite modulo online e twitter. La realizzazione di questo nuovo prodotto, sviluppato con codice nativo da Mavigex con la collaborazione di Endurance - Web Solutions per i web services, va incontro ad una domanda del mercato sempre pi湛 attenta alle soluzioni mobile per lacquisto di beni e servizi. Anche un recente studio del Politecnico di Milano ha evidenziato come nel 2016 in Italia i pagamenti digitali innovativi (tramite Pc, tablet, smartphone e Pos contactless) Al via la nuova app per iPhone e Android 30/10/2017 EUR Travellers Corporate Investor Relations PARKINGSFLIGHTS TRASPORTS MOREINSIDE BLQ News Home > Sala stampa > News News
  • 89. Design System Pattern library per il sito dellAeroporto di Bologna
  • 90. Cos竪 una Pattern Library un tool per documentare e condividere i pattern di design. Crea conoscenza condivisa rendendo il design visibile e accessibile a tutto il team. Pattern library
  • 92. Obiettivi della Pattern library Offre una panoramica delle nostre linee guida per il markup HTML, lo stile CSS e la denominazione delle classi utilizzate Pattern library
  • 93. Obiettivi della Pattern library Offre una panoramica delle nostre linee guida per il markup HTML, lo stile CSS e la denominazione delle classi utilizzate Codice modulare e scalabile Pattern library
  • 94. Obiettivi della Pattern library Offre una panoramica delle nostre linee guida per il markup HTML, lo stile CSS e la denominazione delle classi utilizzate Codice modulare e scalabile Rende i progressi trasparenti Pattern library
  • 95. Obiettivi della Pattern library Offre una panoramica delle nostre linee guida per il markup HTML, lo stile CSS e la denominazione delle classi utilizzate Codice modulare e scalabile Rende i progressi trasparenti Single Source of Truth costruendo un punto di riferimento progettuale Pattern library
  • 96. Obiettivi della Pattern library Offre una panoramica delle nostre linee guida per il markup HTML, lo stile CSS e la denominazione delle classi utilizzate Codice modulare e scalabile Rende i progressi trasparenti Single Source of Truth costruendo un punto di riferimento progettuale Connessione con team esterni di sviluppo Pattern library
  • 97. un tool che aiuta a costruire e documentare librerie di componenti web da integrare nel progetto. Cos竪 Fractal Pattern library
  • 98. Sono porzioni di codice riutilizzabile allinterno del sistema e servono a costruire i blocchi dellinterfaccia di un applicativo. Lo sviluppo per componenti riduce il debito tecnico rendendo il codice riciclabile. Componenti web Pattern library
  • 105. Design System Single Source of Truth Confronto e dialogo Consistenza
  • 107. Edoardo Sportelli per Starting a DesignSystem Attivit
  • 109. Prima di iniziare a disegnare o a sviluppare, 竪 necessario che designers e sviluppatori capiscano lo scopo di ogni elemento che creano Alla Kholmatova Language of modular design
  • 111. Partecipanti Sviluppo UI, sviluppo Front-end, sviluppo Backend e progettazione UX Design System workshop
  • 112. Obiettivi Lobiettivo del workshop 竪 stato di iniziare a strutturare una documentazione completa, univoca e mantenibile che organizzi e definisca gli stili e i componenti principali, le loro specifiche e le loro funzioni Design System workshop
  • 113. Processo Il workshop inaugurava il processo di creazione di un Design System. Questo processo ha previsto una fase di discovery e concepts e una fase di rilascio Design System workshop
  • 114. Identificazione dei punti chiave e delle criticit discovery e concepts
  • 117. Una volta che dai un nome ad un oggetto, dai forma al suo futuro. Alla Kholmatova Language of modular design
  • 118. Piano di rilasci, assegnando a ciascun cluster di elementi un indice di priorit (ad esempio: now, sooner, later, wait) rilascio
  • 120. Concorderemo un primo piano di rilasci, assegnando a ciascun cluster di elementi un indice di priorit (ad esempio: now, sooner, later, wait) per gli interventi rilevati e una stima del tempo necessario per la realizzazione, sia lato sviluppo UI che sviluppo web.
  • 123. Tipografia Colori Bottoni Background Starter Kit
  • 126. 1. Primary 2. Secondary 3. Tertiary 4. Quaternary Starter Kit
  • 128. 1. Primary 2. Secondary 3. Tertiary 4. Quaternary Starter Kit
  • 129. 1. Primary 2. Secondary 3. Tertiary 4. Quaternary Starter Kit
  • 130. 1. Primary 2. Secondary 3. Danger 4. Quaternary Starter Kit
  • 136. Big Intestazione 1尊 livello Intestazione 2尊 livello Intestazione 3尊 livello Testo Small Xsmall Starter Kit
  • 137. Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Starter Kit
  • 138. Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Starter Kit
  • 140. 1. Main palette (colori primari, scala di grigi, messaggi) 2. Widget Starter Kit
  • 141. 1. Main palette (colori primari, scala di grigi, messaggi) 2. Widget Starter Kit
  • 142. Main colors Primary color, Secondary color Starter Kit
  • 144. Messages colors Info, Success, Error, Alert Starter Kit
  • 148. Definire un workflow aiuta il team a capire e a definire insieme gli obiettivi, gli strumenti e la definizione di Done per ogni step Nathan Curtis Design System Features, Step-by-Step
  • 149. Discovery Design Build Documentazione Pubblicazione
  • 151. Bottoni Workflow - Starter Kit Tipografia Colori Background Giugno Luglio Agosto Templates Grids Form Workflow
  • 152. Design Build Quand 竪 che posso considerare concluso uno step e posso far iniziare la fase successiva? Workflow
  • 153. A cosa serve questo a fase? Il design finalizza lo stile visivo e la gamma di specifiche, di variazioni, di stati e di esempi dei componenti dell'interfaccia Workflow
  • 155. Attivit Lavoro di design iterativo, seguendo un flusso costante di produzione di proposte e di richiesta feedback. Workflow
  • 156. Tool Sketch, Abstract e/o Invision. Workflow
  • 157. Passa in Done quando Come art director, ho approvato il design finale Come art director e designer, insieme al team del design system, siamo daccordo che le proposte risolvono i problemi di interazione e usabilit ed 竪 pronto alluso in ogni piattaforma. Come sviluppatore, ho un livello sufficiente di stati, variazioni e specifiche per lavora su una build. Workflow
  • 158. Workshop & Workflow Analisi e aspettative condivise Definition of done Roadmap in base alle priorit
  • 160. Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
  • 161. Making Design Systems Work In The Real World !
  • 162. Il team non usa il design system Il cliente non ti supporta Dopo un po, il lavoro sul design system entra in stallo
  • 163. Il team non usa il Design System !
  • 167. TEAM Senza un design system PRODOTTO +++ Nuovi stili +++ Nuovi patterns +++ Nuove idee +++ Nuovi stili +++ Nuovi patterns +++ Nuove idee +++ Nuovi stili +++ Nuovi patterns +++ Nuove idee
  • 168. Il tuo cliente non ti supporta !
  • 169. Far vedere quanto la presenza online sia frammentata
  • 170. Show, dont tell Brad Frost http://atomicdesign.bradfrost.com/chapter-4/#development- is-design
  • 172. I lavori sul Design System si fermano !
  • 174. Creare e mantenere un design system di successo richiede un'organizzazione Brad Frost http://atomicdesign.bradfrost.com/chapter-4/#development- is-design
  • 175. Workshop & Workflow Strategia e costanza: Come la casa, pi湛 a lungo lo trascuri, pi湛 dovrai pulire. Rendere visibile l'inconsistenza Intercettare una persona incaricata. Voi?
  • 177. Grazie
  • 178. Tangible 竪 un marchio di GNV & Partners S.R.L. Viale Emilia, 3009 47822 Santarcangelo di Romagna RN Italy P.IVA 03130760246 R.E.A. 296354