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.

1. +
RESPONSIVE DESIGN
Dall’identità al web
DIGITAL DESIGN THINKING.

2. UX Design & Usability

3. UX Design & Usability
+
DIGITAL DESIGN THINKING.
Ciao.
Oggi parliamo
di Responsive Design.

4. UX Design & Usability
Google decide di penalizzare i siti
che non sono mobile-friendly.
21 aprile 2015
Mobilegeddon

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. 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. UX Design & UsabilityUX Design & Usability
Contesto d’uso
e livello di attenzione

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. UX Design & Usability
I device preferiti come second screen

10. UX Design & Usability
+
DIGITAL DESIGN THINKING.
BBeneeee.
Ora parliamo di grafica.

11. UX Design & Usability

12. UX Design & Usability

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. UX Design & Usability
Scomme o che non ricordate
la sequenza colori del vecchio logo Google?

15. UX Design & Usability
: )

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. UX Design & UsabilityBēhance Review 2015

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. 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. UX Design & UsabilityUX Design & Usability
— Responsive Logo Project, Joe Harrison

21. +
BREAK POINT!
Cosa saranno mai
DIGITAL DESIGN THINKING.

22. UX Design & UsabilityUX Design & Usability

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. UX Design & UsabilityUX Design & Usability

25. “
UX Design & Usability
Se sei preoccupato della risoluzione
del prossimo iPhone per le tue app
hai un problema più grosso.
— Unknown.

26. UX Design & Usability
Mobile First o no?
Dal più complicato al più ricco e viceversa

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. 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. +
WARNING!
Questa è un po’ nerd.
DIGITAL DESIGN THINKING.

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. 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. +
APP DESIGN
SVILUPPATORI E DESIGNER. INSIEME. GIURO.
DIGITAL DESIGN THINKING.

33. UX DESIGN & USABILITY

34. http://www. visualdesignthinking.it

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. UX Design & Usability
Thank you for your attention