Dossier : Notre vision du web design

1. La définition de l’identité graphique générale

Prenant racine sur les bases de l’identité visuelle de votre marque, la première étape clef d’une charte graphique est de définir les lignes de l’identité digitale de celle-ci :étude du logotype, de sa typographie, de son pictogramme, travail sur les formes, compréhension du style, de l’impact visuel, des limites de transformations de rendus en vue de son d’intégration graphique.

Nous définissons ainsi la place du logotype dans le site, l’utilisation de rappel de l’identité visuelle via des pictogrammes (background, footer, …), le choix d’un jeu de typographies web respectant l’équilibre de l’identité, mais adaptée au titrage, à l’affichage de textes web (que ce soit sous forme d’images ou de typographies html5) mais aussi et surtout le choix de jeux de couleurs qui jouent un rôle de plus en plus clef avec l’arrivé du CSS3 (fond, blocs, titrage, textes, liens, effet hover, active).

2. La structure des contenus graphiques

Une fois l’identité visuelle définie, le développement de la structure du site prend place avec l’analyse des contenus. L’architecture des blocs du site “wireframes” est clef pour établir l’emplacement de chaque bloc de contenu du site et faire en sorte que chaque information bénéficie de la place qu’elle mérite, avec la meilleur visibilité possible et en évitant une surcharge d’information .

Cette mise en place de la structure permet aussi de réfléchir sur l’adaptabilité du site au responsive design, offrant une visibilité sur l’organisation des blocs de contenus en fonction de la largeur / hauteur de l’écran de l’utilisateur. Elle est nécessaire aussi bien dans la mise en place d’un site “centré à largeur fixe” que dans le cas d’un site “plein écran à largeur variable”. Elle est surtout essentielle dans la mise en place d’applications Web et Mobile.

3. L’habillage graphique

Après la validation précise de la structure du site, la créativité reprend le pas : la charte graphique doit prendre vie, s’enrichir de formes, de couleurs, de perspectives, de contenus graphiques, de contrastes, … . A partir de l’identité digitale définie, l’habillage graphique pourrait paraitre simple mais c’est bien ici une étape déterminante.

Sa mise en place vient confirmer l’ensemble des décisions prisent en amont et la vision du webdesigner doit prendre en compte autant les impératifs d’ergonomie, de respect de l’identité de marque que la juste nécessité de créer visuellement une charte esthétique, constituée d’impacts visuels aiguillant l’internaute d’un bout à l’autre du site vers l’objectif défini, (qu’il soit le lecture d’un contenu, un formulaire ou l’achat d’un produit). Cette étape sera aussi clef dans le choix des contenus graphiques à produire ou à acheter (illustrations, photomontages, 3D, …), ceux ci apporteront le caractère qui différenciera la charte graphique de tout autre site.

4. Le peaufinage graphique

Enfin, il est important de donner du caractère à une charte graphique. Sa richesse résultera du souci du détail. Il est important, une fois l’ensemble graphique défini, de reprendre chaque élément graphique réalisé et de lui apporter une attention particulière, que ce soit les puces de listes, les encadrements de blocs, de tableaux, … L’habillage graphique de chaque élément doit être analysé en cohérence avec l’ensemble de la charte graphique.

Ces 4 étapes clefs dans la création d’une charte graphique web ne sont pas figées. Certains projets nécessitent de privilégier la créativité ou la technique en amont de toute structure. Celles-ci deviendront alors le fils conducteur de la réalisation de la charte. Ces étapes ne sont pas non plus figées dans le temps, ou interconnectées, elles peuvent chacune lever des questions remettant en cause un choix arrêté au bénéfice du projet. Dans tous les cas, les questions que posent les problématiques d’identité, d’ergonomie, d’habillage et d’impact visuel restent à répondre afin de garantir l’efficacité que mérite toute communication digitale.