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

COMMENT OPTIMISER LES IMAGES POUR GOOGLE PAGESPEED

 

Si vous avez un site c’est sûr que vous avez déjà utilisé Google PageSpeed. Cet outil en ligne vous fournit un rapport très détaillé concernant la productivité de votre page Web. Le plus souvent les propriétaires des sites comprennent qu’il faut optimiser le contenu graphique.

Plus les photos sont petites, plus vite le site se charge. Moins d’images -> moins de traffic -> le site fonctionne mieux. Les visiteurs du site ne sont pas obligés d’attendre pendant que le site se charge et tout le monde est content.
Dans cet article nous avons sélectionné les outils principaux pour l’optimisation de contenu graphique. Читать дальше...