Afin de réaliser une bonne refonte graphique, il est important de bien identifier ce qui fait l’identité visuelle de votre site. Tous les éléments visibles de votre marque, liée à votre activité, comme les couleurs, les formes, l’apparence finale de votre structure actuelle graphique forment l’identité de votre marque : ce par quoi elle est reconnaissable d’entre mille.
Perfectionner son identité visuelle
Pour éviter de complètement désorienter l’internaute, il faut tenter de garder certaines pratiques de l’ancien site. Il peut s’agir des couleurs, de l’environnement graphique ou simplement d’un plan de site assez similaire. L’univers graphique, quoique amélioré, doit posséder quelques similitudes avec l’ancienne interface du site. C’est une bonne pratique pour permettre à l’utilisateur de rapidement se retrouver dans un endroit qui lui semblera familier. L’idée est de lui fournir un espace aussi agréable qu’usuel.
Les anciennes versions de Facebook proposaient déjà des déclinaisons de charte graphique à partir du fameux bleu #44619D : ainsi, changer cette couleur reviendrait à bouleverser les habitudes des utilisateurs de ce réseau social. Cet ensemble de couleurs se retrouve à chaque nouvelle version du site. Bien évidemment, l’interface est sans cesse revisitée et les teintes ne sont pas exactement les mêmes, les icônes changent, etc., mais une certaine linéarité persiste. Facebook s’est créé une véritable identité. Et les lecteurs habitués restent capables d’avoir un usage optimal de l’interface.
La question de l’évolution du logo peut devenir essentielle. On peut choisir de le faire évoluer lors d’une refonte pour en modifier le message ou pour sublimer sa simplicité. On peut en contrepartie choisir de le conserver pour transmettre les mêmes valeurs au nouveau design créé. Dans tous les cas, il convient de réfléchir à ce qu’apporte le logo actuel et à ce qu’une évolution de celui-ci pourrait apporter. Encore une fois, l’idée n’est pas de bouleverser totalement le design de la marque : cela pourra donner l’impression qu’il s’agit d’une nouvelle entité et ce n’est absolument pas le but recherché par les graphistes.
Il faut faire une étude de l’existant et du contexte dans lequel évolue le logo avant de décider de totalement le modifier : Starbucks, par exemple, a au fil des années proposé un logo assez proche du précédent pour aujourd’hui lui préférer une version totalement épurée.
Plusieurs questions interviennent au cours de l’élaboration d’une refonte comme le précise l’excellent article Art Direction and Design écrit par Dan Mall figurant sur le site A List Apart : Est-ce-que les couleurs choisies s’adaptent correctement à la marque ? Est-ce-que les couleurs choisies vont bien ensemble, ne créent-elles pas un sentiment d’inconfort au lecteur ? N’est-il pas préférable de privilégier des couleurs web-safe ?
Les couleurs dites web-safe constituent une palette des 216 couleurs ayant la même apparence quel que soit l’ordinateur ou le système d’exploitation de l’internaute.
Mettre en place une véritable structure typographique
D’un point de vue typographique, on peut laisser libre cours à toutes les fantaisies mais il apparaît essentiel de favoriser la facilité de lecture. La police choisie ne doit pas fatiguer l’œil du visiteur et doit convenir à tous types d’âge et de vision.
De manière générale, dans le monde du Web, on opte donc pour une police traditionnelle pour le texte global telles que les polices Arial, Tahoma, Verdana, Helvetica, etc. Ces polices sont dites « sans sérif ». Une police sans sérif est une police qui ne possède pas de sérifs, comme son nom l’indique. Les sérifs sont les petites césures situées à la fin des contours des lettres en typographie. Les polices sans sérif procurent à un texte son caractère neutre. C’est d’ailleurs la raison pour laquelle elles sont généralement utilisées pour le corps de texte. Elles ont aussi l’avantage de garantir une apparence similaire quelle que soit la résolution de l’écran de l’internaute.
Pour les titres, les citations ou les emphases, d’autres familles de polices apparaissent : semi-serifs, monospaced, script, etc.. Elles sont complètement soumises au choix du designer : l’empattement typographique n’est alors plus pris en compte.
Un autre point à ne pas négliger : lorsqu’il s’agit de polices complètement originales telles que les polices Museo Slab ou Capsuula, il faut savoir que pour permettre à tous les internautes d’apprécier la lecture des caractères, il faut absolument « installer » ces polices. On utilise alors l’attribut @font-face en CSS afin qu’elles soient rendues disponibles pour les ordinateurs qui n’en sont pas équipés. Cette installation nécessite plusieurs types de fichiers (TrueType .ttf, OpenType .oft, Embedded OpenType .eot pour Internet Explorer et/ou Scalable Vector Graphics .svg). Il n’est pas recommandé de faire un usage trop important de ces polices originales car plus celles-ci seront nombreuses, plus le chargement des pages pour l’utilisateur d’un site sera long.