Responsive Design: dall'identità al web

+

RESPONSIVE DESIGN Dall’identità al web

DIGITAL DESIGN THINKING.

UX Design & Usability


+


Ciao. Oggi parliamo di Responsive Design.


Google decide di penalizzare i siti che non sono mobile-friendly.

21 aprile 2015Mobilegeddon


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.


Responsive significa costringerci a pensare come un brand debba essere adattato ai vari contesti, piattaforme e anche device.

Torniamo a progettarePensare non solo al look & feel

UX Design & UsabilityUX Design & Usability

Contesto d’uso e livello di attenzione


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 divanoIn ogni caso, stiamo facendo altro


I device preferiti come second screen


+


BBeneeee. Ora parliamo di grafica.


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 BrandingSoluzioni proge!uali flessibili


Scomme!o che non ricordate la sequenza colori del vecchio logo Google?


: )

“


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

http://www.theverge.com/2015/3/11/8188859/apple-logo-drawing-study-shows-poor-memory

UX Design & UsabilityBēhance Review 2015


Abbracciando un approccio versatile per tutto, branding, tipografia, colore, logo, possiamo massimizzare il riconoscimento del marchio e il coinvolgimento del pubblico.

Facciamoci riconoscereVersatili e previdenti


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 ResponsivePer non farli più prendere a bastonate sul web


— Responsive Logo Project, Joe Harrison

http://www.theverge.com/2015/3/11/8188859/apple-logo-drawing-study-shows-poor-memory

+

BREAK POINT! Cosa saranno mai



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…?

“


Se sei preoccupato della risoluzione del prossimo iPhone per le tue app hai un problema più grosso.

— Unknown.


Mobile First o no?

Dal più complicato al più ricco e viceversa


Si ragiona in termini additivi basandosi sul constraint più ampio possibile per fissare gli elementi necessari, fino ad arricchire il design.

Progressive enhancement


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

+

WARNING! Questa è un po’ nerd.



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


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

http://www.webdesignerdepot.com/2015/03/is-it-time-to-embrace-responsive-branding/

http://viget.com/inspire/responsive-logos-part-1-tips-for-adapting-logos-for-small-screens

http://www.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/

+

APP DESIGN SVILUPPATORI E DESIGNER. INSIEME. GIURO.


UX DESIGN & USABILITY

http://www. visualdesignthinking.it

http://visualdesignthinking

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.


Thank you for your attention

Responsive Design: dall'identità al web

Internet

Transcript of Responsive Design: dall'identità al web