Recettage site web : checklist avant mise en ligne
Le recettage d’un site web est une étape importante qui garantit que votre site internet répond aux objectifs et aux spécifications...
Votre entreprise évolue et vous réfléchissez à changer votre charte graphique ? Vous vous posez la question de savoir si une seule charte graphique suffit pour l’ensemble de vos projets web et print ? Dans cet article, nous allons vous expliquer ce qu’est une charte graphique et pourquoi il est très important de bien distinguer le web du print.
La définition d’une charte graphique est simple : c’est un ensemble de règles qui régissent la communication graphique d’une entreprise. Elle regroupe donc l’intégralité des supports de communication, comme la carte de visite, les goodies (Print), mais aussi le logo, le design du site web ou encore une application mobile (Web). Avoir une charte graphique au sein d’une entreprise, c’est garantir une cohérence dans la communication entre tous les supports.
Comme vous avez pu le constater, une charte graphique peut être séparée en deux grandes parties :
Nous reviendrons plus tard dans cet article sur ces deux types de charte graphique.
Pour les entreprises de toute taille, l’identité graphique est ultra-importante car elle contribue à l’image mais aussi à la notoriété de la marque. Par exemple, si je vous parle de McDonald’s, je suis persuadé que 99% d’entre vous connaissent le logo et les couleurs dominantes.
Mais alors, quelles sont les principales raisons qui poussent les entreprises à changer leur identité graphique ?
Tout d’abord, abordons le plus important, les cibles. Ce sont évidemment les personnes que vous cherchez à atteindre absolument, pas tous les moyens. Cependant, ces cibles peuvent légèrement évoluer, voir totalement.
Un logo peut être très bien accueilli par un certain type de personne, beaucoup moins par d’autres. C’est pourquoi il est capital de connaître ses cibles sur le bout des doigts avant d’entamer une quelconque refonte graphique. Prenez en compte leur valeur, leur parcours mais aussi les motivations qui les pousseraient à se rendre chez vous. Ces facteurs sont à prendre en compte pour véhiculer le bon message aux bonnes personnes.
Si vos cibles évoluent, c’est probablement que vos produits également. Même si une entreprise garde une côte très importante, l’évolution de ses produits peut conduire à un changement radical dans la charte graphique de l’entreprise. Ces changements vont susciter un nouvel intérêt et permettre un repositionnement par rapport aux principaux concurrents.
Imaginez une marque créée il y a 50 ans avoir toujours le même logo ? Probablement que la grande majorité des gens trouveraient ça un peu « ringard », et ils auraient raison. Dans le monde contemporain, une image trop « figée » n’est pas très bon signe, à moins que ce soit un choix parfaitement assumé par votre marque.
En modifiant son logo ou sa charte graphique dans son entièreté, vous envoyez un message comme quoi vous êtes parfaitement conscient des évolutions qui se déroulent autour de vous. Vos clients sont des personnes d’aujourd’hui et non d’il y a 50 ans. En instiguant une refonte graphique, cela ne dénaturera pas votre entreprise. Cela montrera simplement que vous entamez une nouvelle dynamique, plus en phase avec les attentes d’aujourd’hui.
Une charte graphique web est un document qui définit un ensemble de règles à respecter lors de la création ou de la refonte d’un site web. L’objectif est d’être cohérent sur toutes les pages du site, quel que soit le support, mais aussi de faciliter la navigation et la compréhension du site web par les internautes.
Voici les principaux éléments que l’on retrouve dans une charte graphique web :
Le « Print » désigne toute conception (généralement effectuée sur ordinateur) dont la forme finale est destinée à être imprimée. On peut y trouver des brochures, des dépliants, des autocollants, des couvertures de livres, des affiches, des cartes de visite et même des t-shirts !
Comme pour le web, une charte graphique print est également un document qui vise à respecter les règles graphiques émises par l’entreprise. On y retrouve :
Vous vous posez probablement la question de savoir pourquoi ne pas simplement utiliser une charte graphique print pour la refonte de votre site web ? Nous avons déjà commencé à répondre à la question, mais voici quelques précisions.
Vous entendrez souvent parler de résolution en utilisant deux termes : DPI (dots per inch) ou PPI (pixels per inch). Beaucoup de gens les utilisent à tort de manière interchangeable, mais il s’agit en réalité de deux choses différentes.
Le DPI entre en jeu dans le processus d’impression proprement dit : il s’agit de la densité des points d’encre imprimés sur un pouce de surface d’impression. Un équipement réglé pour imprimer à un DPI plus élevé produira une reproduction d’image de meilleure qualité. Mais, contrairement au PPI, le DPI n’a rien à voir avec la taille d’une impression. Il est lié aux capacités de l’équipement d’impression utilisé, ce que la plupart des concepteurs ne peuvent pas contrôler. En outre, le DPI n’est pas pertinent pour la conception de sites Web, car il concerne spécifiquement la façon dont l’encre est imprimée sur une surface.
Les éléments tels que les boutons, les liens, les effets de survol de la souris, les formulaires ou les sondages, les vidéos et autres fonctions interactives doivent fonctionner correctement. Il n’y a pas de moyen plus rapide de perdre un utilisateur que lorsque quelque chose ne fonctionne pas comme prévu. La conception Web se distingue de la conception imprimée par le fait que cette qualité interactive et dynamique exige souvent une certaine forme d’effort de la part de l’utilisateur, comme cliquer, taper, etc.
Dans le cas du Print, la taille de la surface d’impression est l’un des facteurs les plus déterminants de la façon dont le concepteur utilisera cet espace – quels éléments de conception seront utilisés, la quantité et la taille du texte, etc. Bien qu’il existe des tailles standard pour de nombreux projets (lettres, cartes de visite, affiches, photos), les possibilités sont pratiquement illimitées, car le papier et les autres surfaces d’impression peuvent être découpés dans n’importe quelle taille ou forme.
Pour le web, la « taille » est plus abstraite. Les tailles auxquelles les créations sont visualisées ont tendance à être limitées à un certain nombre d’appareils actuellement disponibles – des écrans d’ordinateur et des ordinateurs portables aux tablettes et aux smartphones, mais ce contenu devrait idéalement s’adapter à tous les appareils. Cette adaptabilité, connue sous le nom de « responsive design« , est de plus en plus demandée à mesure que les habitudes de navigation sur le web évoluent vers plus de mobilité.
Si vous avez déjà acheté ou téléchargé une police gratuite pour un projet de conception, vous avez probablement remarqué qu’il existe deux catégories de polices : les polices de bureau et les polices Web. En général, les polices de bureau sont concédées sous licence à un seul utilisateur qui peut les installer sur son ordinateur et les utiliser de diverses manières.
Les polices Web, quant à elles, ont été créées et optimisées spécifiquement pour être utilisées sur des sites Web, à l’aide de CSS. Les choix des designers en matière de polices Web étaient auparavant assez limités, mais des ressources comme Google Fonts (gratuit) et TypeKit (options gratuites limitées, sinon abonnement payant) sont en train de changer la donne.
Outre les ressources que les graphistes utilisent pour gérer la typographie, les approches de la disposition des caractères diffèrent selon qu’il s’agit de projets Print ou Web. Pour le print, en dehors des meilleures pratiques communes, tout est permis – l’approche dépend largement des projets spécifiques, et les designers ont un contrôle total sur l’apparence de la typographie.
Pour le web, en revanche, la priorité est donnée aux polices qui s’affichent proprement et sont faciles à lire. Les designers ont moins de contrôle sur la façon dont les polices s’affichent sur les différents appareils. C’est pourquoi le contenu Web comporte souvent de courts paragraphes de texte et un espacement généreux entre les lignes.
Désormais, à travers les quelques différences que nous venons de lister, comprenez-vous mieux pourquoi une charte graphique print ne suffit pas pour un projet web ?
La charte graphique est un document technique concentré sur l’aspect visuel de la communication d’une entreprise. Elle inclut des directives précises sur le logo, la palette de couleurs, la typographie, et d’autres éléments graphiques. Son objectif est d’assurer une
cohérence visuelle à travers tous les supports, du contenu web aux impressions.
Le brand book est un guide plus complet qui englobe la charte graphique tout en ajoutant des dimensions supplémentaires à l’identité de l’entreprise. Il inclut non seulement les aspects visuels comme la charte graphique, mais aussi le ton de la communication, les valeurs de l’entreprise, et la manière dont elle souhaite être perçue par son public. Le brand book sert de référence globale pour toutes les initiatives de marque, du design au marketing.
Cette suite est essentielle pour les professionnels de la communication graphique. Avec des outils comme Photoshop et Illustrator, elle permet une création de logo précise, une gestion approfondie des couleurs, et offre une vaste gamme de typographies. Elle est idéale pour les entreprises souhaitant une charte graphique sophistiquée et un design de contenu riche en détail.
Très accessible, Canva est parfait pour les entreprises et les individus débutant dans la création graphique. Sa facilité d’utilisation et ses nombreux modèles prêts à l’emploi permettent de créer rapidement des éléments de charte graphique, des logos aux couleurs et typographies variées, adaptés particulièrement pour le contenu web.
Spécialisé dans le design UX/UI, Sketch est un outil de choix pour les entreprises axées sur le web. Il permet une manipulation précise de la taille et de la disposition des éléments, offrant des fonctionnalités avancées pour la création de typographies et de designs adaptatifs.
GIMP est une alternative gratuite offrant des fonctionnalités similaires à Photoshop. Il est particulièrement utile pour les petites entreprises ou les indépendants cherchant à manipuler des images, ajuster des polices et des couleurs sans investir dans des logiciels coûteux.
Figma est un outil de design collaboratif en ligne, très apprécié pour sa facilité d’utilisation et sa flexibilité. Il permet aux équipes de travailler ensemble en temps réel sur la création de chartes graphiques, intégrant des éléments tels que les logos, les couleurs, et la typographie. C’est une excellente option pour les entreprises cherchant à impliquer plusieurs intervenants dans le processus de design.
Le recettage d’un site web est une étape importante qui garantit que votre site internet répond aux objectifs et aux spécifications...
L’importance d’une charte graphique pour votre marque Créer une charte graphique est indispensable pour établir une identité visuelle cohérente et reconnaissable....
En 2024, près de 70% des recherches en ligne sont effectuées sur des appareils mobiles, comparé à environ 30% sur desktop....
Optimisez votre stratégie digitale grâce à des solutions personnalisées. Notre expertise en refonte de site vous accompagne pour atteindre vos objectifs avec efficacité et innovation. Profitez d’un accompagnement sur-mesure pour faire de votre présence en ligne un véritable atout.