Logos responsive : Comment adapter votre logo pour les petits écrans ?
Logos responsive : Comment adapter votre logo pour les petits écrans ? 1
Logos responsive : Comment adapter votre logo pour les petits écrans ? 2
Logos responsive : Comment adapter votre logo pour les petits écrans ? 3
Logos responsive : Comment adapter votre logo pour les petits écrans ? 4

Logos responsive : Comment adapter votre logo pour les petits écrans ?

Logos responsive : Comment adapter votre logo pour les petits écrans ?

L'expérience le prouve ; les logos sont très souvent négligés au moment de la conception d'un site en Responsive Design. Dans la majeure partie des cas, la taille du logo est naturellement réduite pour s'adapter à l'espace qui lui est alloué.
Si votre logo est d'une forme rectangulaire simple et épurée, cette approche fonctionne à merveille et suffit en elle-même. Mais si la composition ou les proportions de votre logo diffèrent, la réduction de sa taille pour l'adapter aux petits formats d'écran peut rendre méconnaissables certains détails ou rendre illisibles les polices de caractère.
Heureusement, ceci n'est pas une fatalité !

Charte graphique et identité de marque

Les chartes graphiques bien définies proposent souvent différentes variantes d'un logo. De forme horizontale ou verticale, avec ou sans l'annotation de la marque … des versions alternatives du logo peuvent être conçues, dans le strict respect de l'identité de marque de votre entreprise, pour s'adapter au mieux aux contraintes de taille imposées.
L'exemple de l'université américaine de Pennsylvanie est emblématique. La charte graphique a été étudiée pour proposer un logo alternatif de l'université qui s'utilise sur les espaces plus petits.
Sur cette version, le logotype a été retiré tandis que la marque a été élargie pour s'adapter à la hauteur de l'écran.

En comparant le rendu visuel de ces deux versions de logos intégrées dans un header de petite taille (320 px),  il est clair que le format plus petit (situé en bas) se révèle plus lisible et moins encombrant.
 
En l'absence de logos alternatifs dans votre charte graphique, des ajustements spécifiques de votre logo doivent être opérés pour répondre aux contraintes des petits écrans. D'aucuns rechignent à modifier l'identité de marque de leur entreprise et se montrent récalcitrants à l'idée de modifier leur logo. Pourtant, effectuer des ajustements mineurs pour faire face aux contraintes d'espace n'entame en rien l'identité de marque de votre entreprise.
Voici quelques conseils pour adapter votre logo au Responsive Web design

La réduction des détails

Les marques qui s'identifient avec des logos comportant des niveaux de détails complexes se font rares. Dans ce cas, la réduction du niveau de détails peut grandement améliorer la lisibilité du logo sur les petites tailles d'affichage. Par exemple, les formes détaillées peuvent être aplanies tandis que les traits fins peuvent être épaissis.
Le logo Argento illustre parfaitement cette méthode.

A chaque taille réduite de la version du logo initial, le niveau de détail diminue progressivement, ce qui améliore grandement la lisibilité de la marque sur toutes les tailles d'affichage.
 

Basculer de la version verticale à la version horizontale

Cette technique est de loin la plus simple et la plus utilisée pour adapter un logo aux différentes contraintes de taille. Très souvent, la marque est déplacée du dessus du logo sur le côté.

Le logo Case-Mate illustre parfaitement cette méthode.

 

La soustraction incrémentale

Cette méthode se révèle particulièrement bénéfique pour les logos qui comprennent des caractéristiques de petite taille.
Un retrait progressif des éléments de dimensions réduites peut être particulièrement efficace à mesure que l'écran se rétrécit.  
L'emblème du National Oceanic and Atmospheric Administration (NOAA) en est le parfait exemple.

Sur la version originale, beaucoup de textes encerclent l'emblème principal du logo. Las, ce contenu est illisible sur les plus petits formats d'écran.
Idéalement, ce logo de taille réduite devrait être édulcoré du contenu externe, tandis qu'une version plus minimaliste du logo ne comporterait aucun contenu. Pour chacune de ces variantes, l'identité de marque de la NOAA est préservée.

Au regard des contraintes imposées par les écrans d'aujourd'hui, la création de logos alternatifs prend une importance grandissante. Génération internet vous accompagne pour créer votre charte graphique qui répond aux contraintes imposées par le Web design Responsive.

Plus d'actualités

À lire également

26 idées pour le footer de votre
Pourquoi un Web Design sur mesur
20 exemples de navigations de si

Ils nous font confiance