Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Atomic Design e sviluppo di un Design System

576 vues

Publié le

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

Publié dans : Design
  • Yes you are right. There are many research paper writing services available now. But almost services are fake and illegal. Only a genuine service will treat their customer with quality research papers. ⇒ www.HelpWriting.net ⇐
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Atomic Design e sviluppo di un Design System

  1. 1. Atomic Design e sviluppo di un Design System
  2. 2. Siamo una società di experience e service design Chi siamo
  3. 3. Siamo un team di ideatori e creatori, designer, ricercatori e sviluppatori front-end Team
  4. 4. Ideiamo e progettiamo esperienze che siano significative e memorabili, 
 e che abbiano un impatto positivo sulla vita delle persone Chi siamo
  5. 5. Edoardo Sportelli UI Designer
  6. 6. Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
  7. 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. 8. How I Learned to Stop Worrying and Love atomic design
  9. 9. Atomic Design
  10. 10. 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
  11. 11. Do one thing and do it well mentality Atomic Design
  12. 12. 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
  13. 13. Atoms Molecules Organismes
  14. 14. Atomi sono elementi UI che non possono essere separati e vengono utilizzati come mattoncini per costruire una interfaccia Atomic Design
  15. 15. Le molecole sono dei gruppi semplici di elementi UI che funzionano insieme se uniti. Atomic Design
  16. 16. Gli organismi sono dei componenti UI relativamente complessi composti da un gruppo di molecole e/o atomi e/o altri organismi Atomic Design
  17. 17. I template sono oggetti che posizionano i componenti nel layout della pagina e articolano la struttura dei contenuti nel design. Atomic Design
  18. 18. Le pagine sono delle rappresentazioni dei templates che mostrano come appare la UI progettata con la presenza di contenuti reali. Atomic Design
  19. 19. 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 dell’organizzazione abbia consapevolezza del design, anche del dettaglio
  20. 20. Domande?
  21. 21. Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
  22. 22. 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
  23. 23. “Create un Design System, non pagine” Brad Frost Atomic Design The Post-PSD Era
  24. 24. The Post-PSD era • Componenti, non pagine • Il design non è un quadro • Soluzioni, non arte
  25. 25. Domande?
  26. 26. Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
  27. 27. 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
  28. 28. “To create the whole, you need to create the parts of that whole” Brad Frost Atomic Design Modular Design
  29. 29. Comportamenti e le azioni degli utenti Modular Design
  30. 30. Comportamenti e le azioni degli utenti Design patterns Modular Design
  31. 31. 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 l’utilizzo precedente? Fai le modifiche al pattern Disegna una nuova versione Hai snaturato troppo il pattern originale? Disegna un nuovo componente Modular Design
  32. 32. “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
  33. 33. Modular Design
  34. 34. Dai wireframe alla costruzione di un sistema visivo Challenge
  35. 35. Modular design
  36. 36. Modular design
  37. 37. Modular design
  38. 38. + Modular design
  39. 39. + Modular design
  40. 40. Modular design
  41. 41. Modular design
  42. 42. Modular design
  43. 43. Modular design
  44. 44. Modular design
  45. 45. Modular design
  46. 46. Modular design
  47. 47. 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
  48. 48. Templates A cura di Modular design
  49. 49. Templates A cura di Modular design
  50. 50. Templates A cura di Modular design
  51. 51. Domande?
  52. 52. Riprogettare l’esperienza web di un servizio di food delivery Challenge
  53. 53. Foorban Styleguide
  54. 54. Soisy Styleguide Modular design
  55. 55. Modular design
  56. 56. 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
  57. 57. Domande?
  58. 58. Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
  59. 59. Design System
  60. 60. 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
  61. 61. 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
  62. 62. Design System
 Styleguide per il sito dell’Aeroporto di Bologna
  63. 63. 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 effettuare 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 fits in. Have a nice trip! Convalidare sempre il biglietto alle casse automatiche prima di uscire eccetto Brand inventory Attività
  64. 64. 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
  65. 65. #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
  66. 66. 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
  67. 67. Immagini fotografiche
  68. 68. Icone
  69. 69. 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
  70. 70. Design System
 Dai componenti alle pagine per il sito dell’Aeroporto di Bologna
  71. 71. Components inventory Attività
  72. 72. link → link →link → Bottoni Link BOTTONE BOTTONEPAGA ORA PAGA ORA BOTTONE LINK LINKLINK Call to Action
  73. 73. Form Inserisci il tuo indirizzo email EMAIL es. Visa Visa Mastercard Maestro METODO DI PAGAMENTO info@bologna-airport.it EMAIL infobologna-airport.it EMAIL • L’indirizzo email sembra non essere scritto correttamente. | EMAIL Drop-down Select Checkbox 1 Checkbox 2 Radio-button 1 Radio-button 2 Form
  74. 74. Nuovi servizi e grafica completamente ridisegnata per l’applicazione ‘BLQ – Bologna Airport’ dell’Aeroporto di Bologna. Tra le novità più interessanti per i passeggeri: le notifiche sullo stato dei voli in tempo reale, attivabili gratuitamente con una semplice spunta sul volo di interesse, e l’aggiornamento 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 l’Aeroporto. ← Torna all’elenco news In una logica di miglioramento della passenger experience, sono stati notevolmente potenziati anche tutti i servizi di e- commerce attraverso l’area riservata “MyBLQ”, che ora consente di prenotare ed acquistare la sosta nei parcheggi dell’Aeroporto e gli ingressi alla Marconi Lounge e di consultare e modificare le prenotazioni già fatte. Sono poi confermati i servizi che avevano fatto il successo dell’app 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 l’Aeroporto 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
  75. 75. 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 verificare che la stessa accetti che il minore di 14 anni viaggi a loro affidato. Per maggiori informazioni visita il sito della Polizia di Stato →
  76. 76. € EUR Travellers Corporate Investor Relations PARKINGSFLIGHTS TRASPORTS MOREINSIDE BLQ Prenota il tuo parcheggio Tariffe 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
  77. 77. € EUR Travellers Corporate Investor Relations PARKINGSFLIGHTS TRASPORTS MOREINSIDE BLQ Prenota il tuo parcheggio Tariffe 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 dall’aerostazione PARCHEGGIO Guarda in mappa € 51,00 TOTALE SOSTA10 min. € 60,00 TOTALE SOSTA Scoperto 850 mt dall’aerostazione PARCHEGGIO Guarda in mappa 15 min. Scoperto 1,5 chilometri dall’aerostazione PARCHEGGIO Guarda in mappa € 30,00 TOTALE SOSTA Navetta ogni 20 min. Parcheggi
  78. 78. € 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
  79. 79. € 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
  80. 80. Nuovi servizi e grafica completamente ridisegnata per l’applicazione ‘BLQ – Bologna Airport’ dell’Aeroporto di Bologna. Tra le novità più interessanti per i passeggeri: le notifiche sullo stato dei voli in tempo reale, attivabili gratuitamente con una semplice spunta sul volo di interesse, e l’aggiornamento 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 l’Aeroporto. ← Torna all’elenco news In una logica di miglioramento della passenger experience, sono stati notevolmente potenziati anche tutti i servizi di e- commerce attraverso l’area riservata “MyBLQ”, che ora consente di prenotare ed acquistare la sosta nei parcheggi dell’Aeroporto e gli ingressi alla Marconi Lounge e di consultare e modificare le prenotazioni già fatte. Sono poi confermati i servizi che avevano fatto il successo dell’app 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 l’Aeroporto 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 l’acquisto 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
  81. 81. Nuovi servizi e grafica completamente ridisegnata per l’applicazione ‘BLQ – Bologna Airport’ dell’Aeroporto di Bologna. Tra le novità più interessanti per i passeggeri: le notifiche sullo stato dei voli in tempo reale, attivabili gratuitamente con una semplice spunta sul volo di interesse, e l’aggiornamento 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 l’Aeroporto. ← Torna all’elenco news In una logica di miglioramento della passenger experience, sono stati notevolmente potenziati anche tutti i servizi di e- commerce attraverso l’area riservata “MyBLQ”, che ora consente di prenotare ed acquistare la sosta nei parcheggi dell’Aeroporto e gli ingressi alla Marconi Lounge e di consultare e modificare le prenotazioni già fatte. Sono poi confermati i servizi che avevano fatto il successo dell’app 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 l’Aeroporto 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 l’acquisto 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
  82. 82. Percorsi
  83. 83. Percorsi
  84. 84. Design System
 Pattern library per il sito dell’Aeroporto di Bologna
  85. 85. 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
  86. 86. Obiettivi della Pattern library Pattern library
  87. 87. 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
  88. 88. 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
  89. 89. 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
  90. 90. 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
  91. 91. 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
  92. 92. È un tool che aiuta a costruire e documentare librerie di componenti web da integrare nel progetto. Cos’è Fractal Pattern library
  93. 93. Sono porzioni di codice riutilizzabile all’interno del sistema e servono a costruire i blocchi dell’interfaccia di un applicativo. Lo sviluppo per componenti riduce il debito tecnico rendendo il codice riciclabile. Componenti web Pattern library
  94. 94. Pattern library
  95. 95. Pattern library
  96. 96. Pattern library
  97. 97. Pattern library
  98. 98. Fractal
  99. 99. Fractal
  100. 100. Design System • Single Source of Truth • Confronto e dialogo • Consistenza
  101. 101. Domande?
  102. 102. Edoardo Sportelli per Starting a Design System Attività
  103. 103. Design System Features, Step-by-Step
  104. 104. “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
  105. 105. Durata 2 giorni Design System workshop
  106. 106. Partecipanti Sviluppo UI, sviluppo Front-end, sviluppo Backend e progettazione UX Design System workshop
  107. 107. Obiettivi L’obiettivo 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
  108. 108. 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
  109. 109. Identificazione dei punti chiave e delle criticità discovery e concepts
  110. 110. Definizione dei pattern discovery e concepts
  111. 111. Naming convention discovery e concepts
  112. 112. “Una volta che dai un nome ad un oggetto, dai forma al suo futuro.” Alla Kholmatova Language of modular design
  113. 113. Piano di rilasci, assegnando a ciascun cluster di elementi un indice di priorità (ad esempio: now, sooner, later, wait) rilascio
  114. 114. 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.
  115. 115. Starter Kit
  116. 116. • Tipografia • Colori • Bottoni • Background Starter Kit
  117. 117. Bottoni Starter Kit
  118. 118. Starter Kit
  119. 119. 1. Primary 2. Secondary 3. Tertiary 4. Quaternary Starter Kit
  120. 120. Starter Kit
  121. 121. 1. Primary 2. Secondary 3. Tertiary 4. Quaternary Starter Kit
  122. 122. 1. Primary 2. Secondary 3. Tertiary 4. Quaternary Starter Kit
  123. 123. 1. Primary 2. Secondary 3. Danger 4. Quaternary Starter Kit
  124. 124. Label Label Label Starter Kit
  125. 125. CONFERMA PULSANTE SECONDARIO NORMAL NORMAL Web iOS Android Starter Kit
  126. 126. Label Label Label Label BUTTON BUTTON Web iOS Android Starter Kit
  127. 127. Tipografia
  128. 128. Starter Kit
  129. 129. • Big • Intestazione 1º livello • Intestazione 2º livello • Intestazione 3º livello • Testo • Small • Xsmall Starter Kit
  130. 130. 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
  131. 131. 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
  132. 132. Colori discovery e concepts
  133. 133. 1. Main palette (colori primari, scala di grigi, messaggi) 2. Widget Starter Kit
  134. 134. 1. Main palette (colori primari, scala di grigi, messaggi) 2. Widget Starter Kit
  135. 135. Main colors Primary color, Secondary color Starter Kit
  136. 136. Grey scale Starter Kit
  137. 137. Messages colors Info, Success, Error, Alert Starter Kit
  138. 138. Application Starter Kit
  139. 139. Domande?
  140. 140. Design System Workflow Attività
  141. 141. 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
  142. 142. • Discovery • Design • Build • Documentazione • Pubblicazione
  143. 143. Discovery Design Build Documentazione Pubblicazione Workflow Workflow
  144. 144. Bottoni Workflow - Starter Kit Tipografia Colori Background Giugno Luglio Agosto Templates Grids Form Workflow
  145. 145. Design Build Quand è che posso considerare concluso uno step e posso far iniziare la fase successiva? Workflow
  146. 146. 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
  147. 147. Assegnato a UI designer Workflow
  148. 148. Attività Lavoro di design iterativo, seguendo un flusso costante di produzione di proposte e di richiesta feedback. Workflow
  149. 149. Tool Sketch, Abstract e/o Invision. Workflow
  150. 150. Passa in Done quando
 • Come art director, ho approvato il design finale • Come art director e designer, insieme al team del design system, siamo d’accordo che le proposte risolvono i problemi di interazione e usabilità ed è pronto all’uso in ogni piattaforma. • Come sviluppatore, ho un livello sufficiente di stati, variazioni e specifiche per lavora su una build. Workflow
  151. 151. Workshop & Workflow • Analisi e aspettative condivise • Definition of done • Roadmap in base alle priorità
  152. 152. Domande?
  153. 153. Atomc Design. Ricapitoliamo. The Post-PSD era. Componenti, non pagine Modular Design, applicato. Design System. Workshop & Workflow Design System, nel mondo reale ! La lezione
  154. 154. Making Design Systems Work In The Real World !
  155. 155. • Il team non usa il design system • Il cliente non ti supporta • Dopo un po’, il lavoro sul design system entra in stallo
  156. 156. Il team non usa il Design System !
  157. 157. Incentivi
  158. 158. Conseguenze
  159. 159. TEAM Senza un design system PRODOTTO +++ Nuovi stili +++ Nuovi patterns +++ Nuove idee +++ Nuovi stili +++ Nuovi patterns +++ Nuove idee +++ Nuovi stili +++ Nuovi patterns +++ Nuove idee
  160. 160. Il tuo cliente non ti supporta !
  161. 161. Far vedere quanto la presenza online sia frammentata
  162. 162. “Show, don’t tell” Brad Frost http://atomicdesign.bradfrost.com/chapter-4/#development- is-design
  163. 163. I lavori sul Design System si fermano !
  164. 164. Diventa un Evangelista
  165. 165. “Creare e mantenere un design system di successo richiede un'organizzazione” Brad Frost http://atomicdesign.bradfrost.com/chapter-4/#development- is-design
  166. 166. 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?
  167. 167. Domande?
  168. 168. Grazie
  169. 169. 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

×