Atomic Design _ HYPEBANG
•
0 likes•153 views
Ho curato un workshop sul design system e in particolare su Atomic Design. Ho usato Sketch per creare librerie e simboli condivisi e ho mostrato diverse tecniche e plug-in per creare uno ui kit di base e migliorare il workflow.
More Related Content
Similar to Atomic Design _ HYPEBANG
Similar to Atomic Design _ HYPEBANG (20)
Atomic Design _ HYPEBANG
- 2. DESIGN SYSTEM Salviamo il mondo un bottone alla volta ATOMIC DESIGN
- 3. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO Progetto Ogni giorno progettiamo applicazioni e servizi. Spesso il risultato finale non corrisponde al nostro design e veniamo spesso influenzati dai trend del momento rimettendo in discussione il lavoro fatto.
- 4. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO Fedeli alla linea! Le app che progettiamo hanno cura per i dettagli e per l’esperienza e questo costa moooooooolto tempo. Progettiamo per una moltitudine di dispositivi che cresce e si diversifica. Comunicare poi con gli sviluppatori non è sempre immediato. Inoltre, le scelte che facciamo spesso non vengono condivise dai nostri clienti.
- 5. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO Progettiamo Semplicità
- 6. Gestiamo Complessità DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO
- 7. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO La consistenza è essenziale per ridurre il carico cognitivo della nostra interfaccia e serve all’utente per creare familiarità. Consistenza
- 8. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO Usare un linguaggio e dei pattern di interazioni coerenti aiuta gli utenti a non dover capire cosa devono fare per usare una funzionalità. Ogni nuovo grado di libertà nel progetto dovrebbe essere collegato all’esperienza generale e dovrebbe aggiungere valore. Quando un utente non capisce la vostra interfaccia SMETTE di usarla! Don’t make me think!
- 9. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO IL LINGUAGGIO Uno dei problemi principali dello sviluppo di un progetto è parlare la stessa lingua ma anche farsi capire.
- 10. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO Cos’è l'Atomic Design? Una metodologia per creare consistenza nelle interfacce L’Atomic design è una metodologia composta da 5 differenti fasi, utile per creare un sistema di interfacce in maniera gerarchica Brad Frost nel 2013
- 11. L’Atomic Design è un modello mentale che ci aiuta a pensare alle nostre interfacce come un insieme consistente e allo stesso tempo come una libreria di componenti DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO
- 12. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO ATOMI ORGANISMIMOLECOLE TEMPLATE PAGINE
- 13. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO Astratto Concreto ATOMI ORGANISMIMOLECOLE TEMPLATE PAGINE
- 14. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO Nell’Atomic Design gli atomi sono gli elementi fondamentali che comprendono tutta l’interfaccia. Questi atomi comprendono componenti HTML come tipografia, palette colori, input, bottoni e altri elementi che non possono essere suddivisi ulteriormente senza cessare di essere funzionali. ICON LABEL INPUT BUTTON CERCA
- 15. Le molecole sono semplici gruppi di elementi d'interfaccia che funzionano uniti. La combinazione di due atomi crea quindi una molecola. Il risultato e riutilizzabile come componente all’interno della nostra interfaccia. Le molecole includono componenti come: campi form, tabelle dati, ecc. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO FORM DI RICERCA CERCA VAI
- 16. Gli organismi sono dei componenti più o meno complessi. Possono essere composti da gruppi di molecole e/o atomi e/o altri organismi. Un header, ad esempio, può essere composto da un logo, una navigazione primaria e un search form. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO MENU CERCA CONTATTI VAIHOME CHI SIAMO PORTFOLIO
- 17. I templates sono costituiti dall'insieme dei nostri atomi, molecole e organismi. Formano la prima idea di scheletro della pagina. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO CERCA CONTATTI VAI VAI HOME CHI SIAMO PORTFOLIO
- 18. CERCA CONTATTI VAI VAI HOME CHI SIAMO PORTFOLIO Le pagine sono dei templates riempiti di contenuto reale, come immagini, testi, elementi grafici, advertising, ecc. Questo ci aiuta a capire, e a far capire, come la pagina si comporterà con il contenuto reale. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO CERCA CONTATTI VAI VAI HOME CHI SIAMO PORTFOLIO HELLO Pictures In The Sky A gentleman from New York discovered what he calls an “oversight” on the part of 99.9% of all marketers that allows him to get otherwise paid-for advertising at Google as well as all other search engines that allow sponsored ads. And no, nothing about his “secret” is illegal – nor does it require that you know someone on the “inside” at Google, Yahoo, MSN, Overture and others. Travel Health Useful Medical Information For Good Health Be
- 19. DESIGN SYSTEM ///// ATOMIC DESIGN MAURIZIO SCHIFANO Vantaggi Uno dei vantaggi più grandi è la facilità di creare interfacce partendo da concetti astratti, al fine di concretizzare un'esperienza per l'utente finale. È importante capire che l'Atomic Design può essere applicato a tutte le interfacce, non solo a quelle web o alle APPS.
- 20. COME ON! TIME IS MONEY, MONEY IS POWER, POWER IS PIZZA, PIZZA IS KNOWLEGE! LET’S GO!