Dossier : Notre vision du web design

La Création visuelle d'un site internet repose sur un ensemble de points clefs qui structurent, caractérisent et enrichissent votre identité visuelle initiale.

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.

webdesign

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.