Les logos adaptatifs et les écrans de petite taille

Logo Weeteam

 

Le plus souvent lors de création d’un site en responsive nous ne faisons pas attention au logo. En général la taille d’un logo diminue proportionnellement selon la résolution de l’écran. Si on parle d’un logo assez simple cela fonctionne parfaitement sinon, s’il s’agit d’un logo qui se compose d’éléments différents (texte, symbole etc) il vaut mieux touver une autre solution. Heureusement nous avons quelques idées.

logo_fruitselect

S’il s’agit de grandes companies normalement elles ont des tutoriels de style. Par exemple l’université de Pennsylvanie a son propre Logo Style Guide. Ici on peut trouver les recomendations pour l’adaptation de logo aux tablettes ou aux smartphones. Ci-dessous deux versions de logo.

Logo_Penn

Evidement on ne voit plus le texte en petits caractères et le texte principal est aligné au milieu.

Penn_logo_adaptif

 

Ainsi la première variante est beaucoup plus pratique.

Bien sûr si vous n’avez pas de tutoriel, guide de style vous pouvez inventer votre solution. Cependant dans ce cas-là il faut être très attentif pour que votre marque reste toujours reconnaissable.

Voici quelques conseils :

  • Diminuer le nombre d’éléments.

Si vous avez un logo décoré de petits détails, vous pouvez tout simplement supprimer certains éléments pour que votre logo soit plus visible sur des petits écrans. Des petits détails peuvent être remplacés par des grands, il est possible de changer une ligne fine par une ligne plus large (ainsi elle sera plus lisible).

Voici un bon exemple de ces transformations faites par la compagnie Argento et son Guide de style.

Chaque fois le logo devient de moins en moins détaillé.

Logo_Argento

  • Déplier le logo horizontalement.

Peut-être c’est la variante la plus simple. Voici un exemple avec le logo de notre agence.

Weeteam_logo_adaptif

  • Aérer votre logo

Si vous avez un texte sur votre logo et qu’il est en petits caractères, vous pouvez le supprimer. Ci-dessous un exemple : l’emblème de National Oceanic and Atmospheric Administration (NOAA, en français l’Agence américaine d’observation océanique et atmosphérique). Premièrement nous voyons beaucoup de texte autour de l’élément principal. En diminuant la taille de ce logo on enleve ce texte. Ensuite s’il s’agit d’un petit picto on supprime également le texte qui se trouve dans l’image. Ainsi le logo reste lisible pour les utilisateurs.

Logo_Noaa

Donc il est possible d’inventer plusieurs variantes pour améliorer votre logo pour qu’il soit parfaitement adaptable pour les petits écrans et reconnaissable pour vos clients.

Expérimentez et vous aurez sûrement un super logo sur votre site ! 🙂

Articles similaires

Affichage en liste ou en tableau pour le design mobile

Il n’est pas facile de choisir le moyen de consulter du contenu pour le design mobile. Les écrans des ordinateurs donnent un large choix. Par contre, les tablettes et appareils mobiles sont plus limitées. L ‘utilisateur ne voit qu’une petite partie ...