Intégrer son identité visuelle sur son site web en 4 étapes
Que vous créez votre site web seul.e ou que vous fassiez appel à un.e prestataire, il vous faudra décider des axes créatifs majeurs pour l’aspect et l’univers de celui-ci. Voici 4 étapes incontournables pour décliner votre identité visuelle sur votre site internet.
Intégrer son identité sur un support papier VS sur une page web : quelques différences
Une page internet ne se parcoure par de la même façon qu’une brochure ou un flyer.
D’abord, parce qu’on ne découvre pas forcément son contenu dans un sens précis. Un.e internaute peut tomber sur votre site via sa page d’accueil, ou une page produit, une photo, ou la section « à propos ».
Votre identité visuelle doit donc être présente sur chaque page de votre site de façon cohérente. Mais on doit également comprendre rapidement sur quel genre de site on se trouve.
Ensuite, il faut prendre en compte que le format de lecture change en fonction de l’appareil utilisé par un visiteur. Mobile, tablette, ordinateur grand écran ou portable à la résolution plus réduite ?
Il faudra donc adapter votre mise en page et le design du site pour anticiper son aspect aux yeux de l’internaute. Ce qui peut nécessiter quelques concessions de design pour obtenir un affichage optimisé.
Enfin, l’interaction avec le site est différente d’un support papier : on scrolle, on clique, on parcoure le contenu très rapidement. Il est donc important de créer un dynamisme visuel pour arrêter l’œil du visiteur et l’inciter à continuer la lecture.
L’information doit être claire, succincte et précise, afin que l’internaute trouve rapidement ce qu’il cherche sur le site.
Étape 1 : Choisir les formats les plus adaptés de votre logo
Où placer votre logo sur le site ?
Votre logo doit être placé à des endroits stratégiques sur votre site internet. Généralement, le header (en haut, avec le menu) et le footer (tout en bas de votre site).
Il faut donc choisir les versions les plus adaptées de votre logo pour garantir sa lisibilité. On essaiera par exemple de ne pas avoir une entête de site trop haute afin de ne pas empiéter sur le contenu du site. Sélectionnez par exemple la déclinaison allongée ou simplifiée de votre logo.
Pour le pied-de-page, vous pouvez intégrer la version complète de votre logo ou sa version pictogramme. L’espace est plus libre car le footer d’un site peut être assez haut, en fonction des informations et des liens que vous allez y faire apparaître.
Pour en savoir plus sur les déclinaisons de votre logo...
Vous pouvez lire l'article suivant qui détaille l'ensemble des fichiers qui doivent vous être livrés quand vous faites créer un logo par un graphiste.
Ne pas oublier le favicon du site !
C’est la petite vignette ronde qui s’affiche à côté du nom d’une page ouverte sur internet. À la base, il sert à l’internaute pour identifier rapidement votre site dans sa barre de favoris, d’où la contraction des mots favorite et icon. Cela permet aussi de repérer rapidement un site parmi plusieurs dizaines d’onglets ouverts simultanément -hello à celles et ceux qui se reconnaissent ;)-.
Le favicon se télécharge dans un format image carré très petit (16×16 pixels, 32×32 ou 96×96). On privilégie donc là encore une déclinaison minimaliste du logo.
Si celle-ci ne convient pas, vous pouvez en créer un en reprenant les couleurs de votre logo et pourquoi pas, les initiales de votre nom de marque. L’important est juste que l’on associe à votre marque pour l’identifier rapidement.
Étape 2 : Décliner les couleurs de votre univers sur une page web
Créez un code couleur pour votre site internet
Si vous possédez déjà une palette de couleurs pour votre identité visuelle, c’est parfait ! Il s’agit surtout de sélectionner les plus appropriées pour la mise en page et le design du site.
Je vous conseille donc d’attribuer un rôle aux couleurs de cette palette que vous veillerez à conserver sur toutes les pages du site.
Concrètement, reprenez vos couleurs principales (celle du logo généralement) et associez-les avec quelques couleurs supplémentaires. Par exemple, une couleur d’accentuation pour les appels à action ou les liens hypertextes, une teinte plus neutre pour des encarts d’information ou un arrière plan, etc.
Sur votre site, la couleur va apporter clarté et dynamisme à votre contenu. Elle doit être utilisée plus comme un outil de lecture que comme un élément purement « décoratif ». N’hésitez donc pas à vous limiter dans le nombre de couleurs à utiliser afin de garder une cohérence sur vos pages. Le plus important est de guider la lecture de celles-ci et non pas de surcharger le rendu visuel.
Vérifiez les contrastes et la luminosité des couleurs
Pensez ensuite à vérifier que les couleurs fonctionnent entre elles et sur tous les supports (ordinateur, mobile…). En effet, le rendu visuel peut différer d’un écran à l’autre en fonction de sa résolution ou sa luminosité. Il existe aussi des paramètres pour réduire la lumière bleue qui peut jaunir quelque peu les couleurs.
D’ailleurs, de plus en plus d’applications, d’appareils ou de navigateurs proposent une option dark mode, qui permet un affichage sombre. C’est pourquoi sur certains constructeurs de site, vous pouvez paramétrer directement un thème de couleurs claires et un thème de couleurs sombres. Mieux vaut les paramétrer si vous voulez contrôler l’apparence de votre site jusqu’au bout.
Vous trouverez des sites gratuits pour générer des palettes de couleurs ou bien vérifier leurs contrastes entre elles dans l’onglet « Ressources >> Outils gratuits » du site.
Si vous n'avez pas encore de palette de couleurs pour votre identité visuelle...
Vous trouverez des idées et des conseils pour en créer une dans un article dédié à ce sujet !
Étape 3 : Quelle(s) typographie(s) pour votre site web ?
Prévoyez une police compatible avec le web
Auparavant, on retrouvait les mêmes polices d’écriture sur les sites internet : les polices dites web safe. Leur nombre était très limité et on les voyait donc partout.
Elles avaient cependant l’avantage d’être pré-installées sur tous les périphériques et systèmes d’exploitation. Et s’affichaient donc correctement sur tous les supports et navigateurs.
Aujourd’hui, on peut tout à fait personnaliser les polices d’écriture sur un site web. Mais cela ne veut pas dire qu’elles soient toutes adaptées pour cet usage.
En effet, si vous importez une police d’écriture personnalisée sur votre site internet, vous ne pouvez pas être sûre qu’elle s’affichera parfaitement sur le navigateur d’un.e internaute. Pour cela, il faut que son navigateur charge les éléments de la police, et parfois ce n’est pas possible : paramètres de sécurité, faible connexion, chargement lent, etc.
La meilleure solution pour éviter ce problème est d’utiliser des polices web fonts. À la différence des polices web safe, celles-ci sont hébergées directement sur votre serveur local ou par la plateforme qui les fournit. Les plus connues proviennent de Google Fonts. Vous pouvez y trouver des centaines et des centaines de polices téléchargeables gratuitement, et parfaitement adaptées pour un usage web.
Vous pouvez bien-sûr utiliser ces polices pour votre identité visuelle, car elles ne sont pas limitées à un usage digital.
N’hésitez pas à définir une nouvelle police web, utilisée spécialement pour votre site internet. Elle peut être similaire à celle de votre identité visuelle, ou non. L’important est d’assurer une expérience optimale pour les visiteurs de votre site.
Vous pouvez intégrer votre propre police, mais par précaution, pensez à paramétrer une police de substitution. Elle s’affichera si le téléchargement de la vôtre n’est pas possible pour une quelconque raison.
Avoir sous le coude une police de secours type Arial, ou Tahoma, qui sont installées sur tous les périphériques, est utile pour contrôler l’apparence de vos contenus dans toutes les situations.
Bien utiliser les polices sur vos pages web
Là encore, il s’agit de créer un fil rouge entre toutes les pages du site. Définissez à l’avance l’apparence de vos titres, des paragraphes standards ou d’accentuation, la forme de vos boutons, etc. Et tenez-vous à cette grille pour pour que votre contenu soit hiérarchisé et donc facilement reconnaissable.
Un autre point important concerne l’interlignage, c’est à dire l’espacement entre vos lignes de paragraphes, vos titres, etc.
Sur un site web, un interlignage aéré va faciliter la lecture. De la même façon, veillez à garder des marges suffisantes autour de vos paragraphes et à « découper » le contenu en petites portions. Des colonnes moins larges sont plus agréables à lire car l’œil n’a pas à parcourir toute la largueur de l’écran.
Enfin, keep it simple ! Sur le web, mieux vaut rester sobre et efficace. Pour vos textes, privilégiez une police sans sérif qui seront bien plus adaptée pour une lecture sur écran.
Les polices sérif peuvent être utilisées, mais privilégiez-les pour les titres ou les petites bulles d’informations courtes.
- Certaines plateformes vous aident à trouver des combinaisons ou des inspirations de typographies pour ton site internet, par exemple : Web Font Inspiration ou Type Inspiration.
- Vous pouvez aussi vous inspirer de sites qui vous plaisent ou que vous trouvez bien faits. Des extensions sur Chrome permettent de savoir quelle police a été utilisée sur une page web.
Étape 4 : Intégrer son identité à travers un habillage pertinent
Les éléments de base ont été définis, il s'agit maintenant de donner vie à votre site avec des éléments visuels ! Cette dernière partie va vraiment permettre de décliner votre univers graphique sur votre site, et le rendre plus personnel.
Les icônes, éléments visuels indispensables
Les icônes permettent de guider la lecture en arrêtant le regard sur des éléments visuels. Mais aussi, d’assimiler rapidement une information, grâce à l’association visuel / mot.
Grâce à eux, on peut par exemple repérer très facilement :
- les catégories de services ou de produits que vous proposez,
- les réseaux sociaux sur lesquels on peut retrouver votre entreprise,
- les moyens de paiement disponibles, etc.
Vous pouvez également associer une icône à un bouton pour apporter un complément d’information qui incitera le visiteur à cliquer dessus.
Par exemple, si vous créez un bouton « contact », associé à un icône mail, on sait que l’on sera redirigé vers un formulaire de contact ou une adresse de messagerie, et non pas un numéro de téléphone ou une adresse. À vous de jauger si c’est nécessaire, et de veiller à être clair.e dans la formulation des appels à actions.
Vous pouvez utiliser des icônes fournies par votre constructeur de site, ou importez les vôtres. Pour ça, tu peux faire une sélection sur plateformes d’icônes. Assurez-vous qu’elles aient un style graphique similaire, et que celui-ci matche avec votre identité visuelle.
Le mieux reste évidemment de faire créer vos propres pictogrammes qui correspondent à votre secteur d’activité. Vous vous assurerez alors d’avoir des icônes précis et personnalisés pour décliner votre identité visuelle simplement !
Mon dernier conseil concernant les icônes, c’est évidemment de les utiliser de façon stratégique. Un icône sera d’autant plus efficace s’il apporte quelque chose à la compréhension du contenu. Il est donc inutile d’en placer à tout bout de champ sur vos pages au risque de minimiser leur impact visuel.
Les autres éléments illustrants : photos, illustrations, motifs...
Là encore, si vous n’avez pas d’illustrations ou de photos personnalisées, vous pouvez trouver votre bonheur sur des banques d’images.
Voici quelques conseils pour faire une sélection pertinente :
- Définissez des critères de recherches concernant le style des photographies ou des illustrations (ex : couleurs pastels, ambiance rétro, dessin à main levé, noir et blanc…)
- Si vous n’avez pas de budget pour acheter des licences, focalisez-vous sur les plateformes gratuites mais pensez bien à citer leur provenance quand vous les intégrer sur votre site
- Veillez à les choisir de bonne qualité, et dans des formats adaptés au web : JPEG, PNG ou SVG
- Redimensionnez-les pour réduire leur poids et leur chargement : vous pouvez le faire avant de les importer sur le site, ou grâce à des extensions prévues pour ça.
La question reste de savoir comment et où intégrer des images sur votre site ?
Définissez d’abord les éléments illustrants qui apportent une information ou de la valeur à l’internaute.
- Sur une page à propos, une belle photo de vous ou de votre équipe sera appréciée, car cela met en confiance un potentiel client de mettre un visage sur un nom.
- Si vous créez un site marchant, des photos produits seront évidemment recherchées par le visiteur car il veut voir ce qu’il achète.
Vous pouvez intégrer les images de différentes façons : tout simplement à côté du texte, mais aussi en arrière plan, ou en jouant avec la transparence.
Si vous ajoutez du texte par dessus une image, fais juste attention à ce qu’il reste parfaitement lisible. Ajustez la transparence ou ajoutez un encart de couleur sous le texte, choisissez une photo/illustration épurée pour mettre le texte en valeur.
Il faut aussi faire attention à leur taille d’affichage. Une image trop petite avec moult détails n’est pas forcément pertinente pour un affichage mobile. Trop grande, elle peut manger l’espace sur l’affichage de l’écran au détriment du contenu qui est peut-être plus important. Trop petit, elle n’apportera peut-être pas grand chose, surtout sur un écran mobile.
Laissez parler votre imagination, et déclinez votre univers à travers les différentes pages de votre site ! L'important est de garder une cohérence visuelle pour faciliter la lecture de son contenu et aider un visiteur à trouver l'information qu'il souhaite.
N'hésitez pas à vous créer une charte graphique web où vous rassemblez les règles d'apparence pour tous les éléments de votre site. Ainsi, vous pourrez vous y référer quand vous le développerez ou créerez de nouvelles pages.