Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progettare esperienze per emozionare. La transizione dalla UX alla UI.

464 views

Published on

Roberto Falcone - Lead UX Designer di Musement - si è soffermato sugli aspetti legati allo User Interface Design (UI Design) come parte del processo di UX Design che si occupa prettamente degli aspetti legati alla presentazione visuale di un prodotto digitale.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Progettare esperienze per emozionare. La transizione dalla UX alla UI.

  1. 1. 2 Roberto Falcone, aka “Bob”, è uno User Experience Designer con un background ibrido allʼincrocio tra tecnologia, design, psicologia e business. Negli anni ho lavorato per diverse agenzie creative e studi di design, dove ho seguito progetti strategici di design per startup e clienti internazionali di alto profilo. 
 Attualmente lavoro in Musement, start-up che ha l’ambizione di rivoluzionare il settore travel, dove seguo e coordino tutte le fasi del processo di User Experience Design. robertofalcone // Ex designer di Sketchin // Collaboratore @ PoliDesign // Insegnante @ TAG Innovation School // Membro della giuria @ CSS Design Awards // Fondatore di UXers LA TRANSIZIONE DALLA UX ALLA UIE X P L O R E T A L K S
  2. 2. 3E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  3. 3. Significativo Piacevole Conveniente Usabile Disponibile Funzionale 4E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  4. 4. 5E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI Lo UI design consiste quindi nel livello di comunicazione visiva composto da: declinazione del logo, palette colori, tipografia, icone, illustrazioni, contributi video, animazioni, immagini sottoposte a trattamento fotografico. Lo UI design (acronimo di User Interface design) è una parte del processo di UX design che si occupa prettamente degli aspetti legati presentazione visuale di un prodotto digitale.
  5. 5. 6 Comunicare correttamente i valori dell’identità aziendale NARRAZIONE Guidare l’utente all’interno dell’interfaccia evidenziando contenuti ed elementi interattivi FUNZIONE UI DE
 SIGN
 E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI Rispettare i limiti e e opportunità tecnologiche INTEROPERABILITÀ
  6. 6. 7E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  7. 7. 8 In che modo è possibile trasmettere i valori e l’identità di un brand all’interno di una UI? TOPIC #1 LA TRANSIZIONE DALLA UX ALLA UIE X P L O R E T A L K S
  8. 8. 9E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI È un modello di rappresentazione dell’identità di un brand, che parte dal presupposto che un prodotto o servizio deve rappresentare le idee esclusive e i valori dell’identità del brand stesso. È rappresentato come un prisma a sei facce, ognuna della quale descrive una sfaccettatura diversa che il brand intende trasmettere e di cui una UI deve farsi ambasciatrice. PRISMA DI KAPFERER brand
  9. 9. 1 0E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  10. 10. 1 1E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  11. 11. 1 2E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  12. 12. 1 3E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  13. 13. 1 4E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  14. 14. 1 5E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  15. 15. 1 6 Quali sono le strategie da adottare per ottenere sempre coerenza e consistenza di una UI su tutti i dispositivi di fruizione? TOPIC #2 LA TRANSIZIONE DALLA UX ALLA UIE X P L O R E T A L K S
  16. 16. 1 7LA TRANSIZIONE DALLA UX ALLA UI DESIGN SYSTEM E X P L O R E T A L K S
  17. 17. E X P L O R E T A L K S DE-
 VICES FRAG- ME-
 NTATION LA TRANSIZIONE DALLA UX ALLA UI 1 8
  18. 18. 1 9E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI COLORI GRIGLIE TIPOGRAFIA UI COMPONENTS UITOOLKIT
  19. 19. 2 0E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  20. 20. 2 1E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  21. 21. 2 2 Stephen Hay We are no longer designing pages, we are now designing complex systems of components. LA TRANSIZIONE DALLA UX ALLA UIE X P L O R E T A L K S Principal UX Design Lead @catawiki
  22. 22. 2 3E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI ATOMICDESIGN
  23. 23. 2 4E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI ATOMI Gli atomi sono le unità mimime che costituiscono i blocchi di materia. Nel caso delle User Interface sono ad esempio i tag, le label, gli input o un bottone.
  24. 24. 2 5E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  25. 25. 2 6E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI MOLECOLE Le molecole sono gruppi di atomi e sono la più piccola unità fondamentale di un insieme di elementi. Le molecole posseggono delle loro peculiari proprietà e sono le unità base del design system.
  26. 26. 2 7E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI ORGANISMI Gli organismi possono consistere in uno o più tipi diversi di molecole. La transizione da molecole a organismi organizza la creazione di componenti portabili, ricusabili e autonomi.
  27. 27. 2 8E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI ECOSISTEMI Gli ecosistemi (o template) consistono di gruppi di organismi che lavorano assieme per dare vita ai diversi layout di pagina.
  28. 28. 2 9E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI AMBIENTI Gli ambienti (o pagine) sono specifiche istanze degli ecosistemi e formano il livello più alto di astrazione delle interfacce.
  29. 29. 3 0E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  30. 30. LonelyPlanet E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI 3 1
  31. 31. 3 2LA TRANSIZIONE DALLA UX ALLA UI CASE
 STUDIES E X P L O R E T A L K S
  32. 32. 3 3E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI GOOGLE
 MATERIAL
 DESIGN LANGUAGE Il material design un linguaggio visuale con cui Google assicura coerenza e riconoscibilità visivi ad ogni prodotto digitale che compone la sua galassia.
  33. 33. 3 4E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI GOOGLE
 MATERIAL
 DESIGN UI TOOLKIT
  34. 34. 3 5E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI SPOTIFY GLUE La frammentazione delle interfacce che Spotify ha dovuto fronteggiare ad un certo punto della sua vertiginosa crescita, è stata evitata grazie alla progettazione di un design language chiamato GLUE (Global Language for a Unified Experience).
  35. 35. 3 6E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI SPOTIFY GLUE PRINCIPLES GLUE oggi documenta stili, componenti e pattern ed è accessibile ad ognuno all’interno dell’azienda. Il processo di redesign di Spotify attraverso GLUE è iniziato attraverso la definizione di alcuni principi guida che hanno allineato le diverse influenze di design all’interno del team e si sono fatti portatori delle diverse vision dei team aziendali.
  36. 36. 3 7E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  37. 37. 3 8 Il nuovo progetto di riprogettazione dell’identità visiva di AirBnb è uno degli esempi più significativi degli ultimi anni di costruzione di un design language efficace, riconoscibile e scalabile. I valori del brand sono ottimamente rappresentati su tutti gli artefatti digitali e non. NEW AIRBNB BRANDING E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI
  38. 38. 4 2 G R A Z I E LA TRANSIZIONE DALLA UX ALLA UI robertofalcone bob@robertofalcone.it E X P L O R E T A L K S

×