Personal tools
Responsive web design... ma non dimentichiamoci del logo!

Responsive logo design

Sep 03, 2014

Responsive web design... ma non dimentichiamoci del logo!

Sfruttiamo davvero tutto il potenziale del responsive web design per i loghi? Come risulterebbero quelli dei brand più famosi, se fossero responsive?

Nei siti web responsive l’aspetto dell’header, del menu di navigazione o dei contenuti cambia in base alle dimensioni dello schermo. Tuttavia, si tende a non modificare i loghi: semplicemente si riducono o si espandono per adattarsi allo schermo.

A volte manca uno studio vero e proprio sull’aspetto responsive del logo, che definisca come debba essere il logo in base alle diverse dimensioni del dispositivo. Eppure il logo è il simbolo più potente del marchio di un brand.

Come dicevo, semplicemente ridurre o ampliare un logo secondo il suo contesto non è sempre la soluzione migliore.

Potrebbe essere necessario aggiungere dettagli nel logo man mano che la capacità del dispositivo aumenta o, al contrario, rendere minimale il suo aspetto se le dimensioni della finestra diminuiscono.  

Un ottimo esempio ci viene fornito da un progetto di studio di Joe Harrison sulla creazione di loghi responsive per i grandi marchi.

Questo progetto mostra come loghi delle marche più popolari possono essere efficacemente riprodotti in maniera responsive. Se aprite la pagina e ridimensionate il browser vedrete i loghi che si aggiornano dinamicamente in base alle dimensioni dello schermo. Via via che le dimensioni del browser si riducono, ognuno di questi loghi passa attraverso una sequenza di breakpoint e, ad ogni breakpoint, il logo viene modificato, rimanendo però fedele al marchio originario.

Loghi - FullscreenLoghi - TabletLoghi - Mobile

Vediamo come esempio il logo Chanel. Inizialmente il marchio è circondato di un cerchio e il testo del logo si trova nella linea sottostante. Al primo breakpoint le dimensioni del logo si riducono sia per il testo che per il marchio. Ad un secondo breakpoint il testo del logo viene posizionato a fianco del marchio, e viene eliminata l’iniziale “C”. All’ultimo breakpoint rimane solo il marchio del logo.

Ora tocca a noi progettare un logo responsive

Adottiamo un approccio mobile-first, iniziando a progettare il logo per un dispositivo mobile, che poi verrà scalato per adattarsi a schermi più grandi. Definiamo due ipotetici breakpoint in cui cambiare l’aspetto del logo. Questi breakpoint sono realizzabili mediante delle semplici media queries.

Logo per mobile

Inizialmente il logo sarà piccolo abbastanza per adattarsi a un dispositivo mobile. In questa versione decido di mostrare solo il marchio.

Primo breakpoint
Logo per mobile landscapeIn questa versione mostriamo sia il marchio del logo che il testo, allineati su una singola linea. Tutte le regole CSS che definiscono l'attuale aspetto del logo andranno definite in una media query simile:

@media only screen and (min-width: 480px) {
...
}

Ciò significa che il logo apparirà così per finestre con una larghezza maggiore o pari a 480px, ad esempio ruotando in orizzontale lo schermo del nostro dispositivo mobile.

Secondo breakpoint
Logo per fullscreenLe dimensioni del marchio e del testo del logo aumentano. Il testo del logo occupa più linee. Sono state usate le proprietà CSS3 text-shadow e box-shadow. La media query per questo breakpoint potrebbe essere simile a questa:

@media only screen and (min-width: 600px) {
...
}

Ciò significa che il logo apparirà così per finestre con una larghezza maggiore o pari a 600px, ad esempio sui tablet.

Le possibilità per adattare il nostro logo sono tantissime, il responsive web design ha un grandissimo potenziale, a volte poco utilizzato. Potremmo fare di più, incominciando proprio dai loghi!

Filed under: , ,
comments powered by Disqus