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.

Responsive Design: dall'identità al web

801 views

Published on

Il responsive design è un concetto relativamente nuovo, ma è figlio di idee che conosciamo bene: le declinazioni e l'adattamento di un prodotto al contesto d'uso. In queste slide affrontiamo il punto di vista progettuale, prima che tecnico sul RWD e il web, a partire dal branding.

Published in: Internet

Responsive Design: dall'identità al web

  1. 1. + RESPONSIVE DESIGN
 Dall’identità al web DIGITAL DESIGN THINKING.
  2. 2. UX Design & Usability
  3. 3. UX Design & Usability + DIGITAL DESIGN THINKING. Ciao. 
 Oggi parliamo di Responsive Design.
  4. 4. UX Design & Usability Google decide di penalizzare i siti che non sono mobile-friendly. 21 aprile 2015 Mobilegeddon
  5. 5. UX Design & Usability Responsive non è una cosa nuova. È quello che avete sempre fatto: declinazioni. Penalizzare chi non le fa sul web è l’unica buona novità. Chemmefrega a me? Io mica faccio i siti.
  6. 6. UX Design & Usability Responsive significa costringerci a pensare come un brand debba essere adattato ai vari contesti, piattaforme e anche device. Torniamo a progettare Pensare non solo al look & feel
  7. 7. UX Design & UsabilityUX Design & Usability Contesto d’uso e livello di attenzione
  8. 8. UX Design & Usability Il contesto influenza l’uso e l’esperienza del prodotto, rendendoci più ciechi ad alcuni dettagli. E questo sta accadendo sempre più spesso. In metropolitana, o sul divano In ogni caso, stiamo facendo altro
  9. 9. UX Design & Usability I device preferiti come second screen
  10. 10. UX Design & Usability + DIGITAL DESIGN THINKING. BBeneeee. Ora parliamo di grafica.
  11. 11. UX Design & Usability
  12. 12. UX Design & Usability
  13. 13. UX Design & Usability L'avvento del responsive ha creato un ambiente di lavoro nuovo, in cui è molto più comodo per noi designer ammorbidire il controllo sugli assets. Responsive Branding Soluzioni proge uali flessibili
  14. 14. UX Design & Usability Scomme o che non ricordate la sequenza colori del vecchio logo Google?
  15. 15. UX Design & Usability : )
  16. 16. “ UX Design & Usability Our brains, it seems, may be hard-wired to focus on new experiences, relying on memory for repetition. For all intents and purposes our brains are caching experiences to free up processing power. — UCLA Research Studio, The Verge
  17. 17. UX Design & UsabilityBēhance Review 2015
  18. 18. UX Design & Usability Abbracciando un approccio versatile per tutto, branding, tipografia, colore, logo, possiamo massimizzare il riconoscimento del marchio e il coinvolgimento del pubblico. Facciamoci riconoscere Versatili e previdenti
  19. 19. UX Design & Usability Il logo, sul web, viene solitamente ristretto per adattarsi all'interno dello spazio disponibile. Questo può rendere i dettagli più minuti irriconoscibili e i caratteri illeggibili. Per fortuna, nessuno ci obbliga a lavorare in questo modo : ) Loghi Responsive Per non farli più prendere a bastonate sul web
  20. 20. UX Design & UsabilityUX Design & Usability — Responsive Logo Project, Joe Harrison
  21. 21. + BREAK POINT! Cosa saranno mai DIGITAL DESIGN THINKING.
  22. 22. UX Design & UsabilityUX Design & Usability
  23. 23. UX Design & Usability Dal momento che i layout devono adattarsi alla frammentazione delle dimensioni bisogna avere dei riferimenti di massima su cui progettare gli scarti da un tipo di approccio, all’altro. I punti di “rottura” Quando passo da Desktop a Tablet a Smartphone a…?
  24. 24. UX Design & UsabilityUX Design & Usability
  25. 25. “ UX Design & Usability Se sei preoccupato della risoluzione del prossimo iPhone per le tue app hai un problema più grosso. — Unknown.
  26. 26. UX Design & Usability Mobile First o no? Dal più complicato al più ricco e viceversa
  27. 27. UX Design & Usability Si ragiona in termini additivi basandosi sul constraint più ampio possibile per fissare gli elementi necessari, fino ad arricchire il design. Progressive enhancement
  28. 28. UX Design & Usability Viceversa si parte dal progetto più completo e mano a mano si valutano le disposizioni e gli elementi che possono essere nascosti o spostati sul layout. Graceful degradation
  29. 29. + WARNING!
 Questa è un po’ nerd. DIGITAL DESIGN THINKING.
  30. 30. UX Design & Usability Letteralmente stringere la finestra del browser, o usando i developer tools fissandoci sui break point principali per agire direttamente sul codice HTML/CSS da riportare poi sul progetto finale. Responsive in-browser! Come lo facciamo noi
  31. 31. UX Design & Usability Referenze Se volete per approfondire l’argomento e capire come fare, di seguito alcuni link utili : ) — Is it time to embrace responsive branding?, Webdesigner Depot — Responsive logos tips, Viget — Rethinking responsive svg, Smashing Magazine
  32. 32. + APP DESIGN
 SVILUPPATORI E DESIGNER. INSIEME. GIURO. DIGITAL DESIGN THINKING.
  33. 33. UX DESIGN & USABILITY
  34. 34. http://www. visualdesignthinking.it
  35. 35. UX DESIGN & USABILITY WE CREATE MEANINGFUL INTERACTIONS THAT ARE LOVED BY YOUR CUSTOMERS AND ADD REAL VALUE. REALLY. WE GIVE A VOICE AND A FACE TO YOUR BRAND.
  36. 36. UX Design & Usability Thank you for your attention

×