Le design d’un site web se compose d’éléments d’ « aspect » qui sont les couleurs, la typographie, les visuels et la structure de mise en page. Le design est aussi composé d’éléments dynamiques qui peuvent changer selon les pages consultées.
Sur la base d’une référence récente, le site Synergence, dans les quelques lignes qui suivent, nous centrons le propos sur les seuls éléments constituants de l’aspect – tels qu’ils pourraient apparaitre à plat sur une impression.
Nous décrivons des choix que xiligroup a fait préalablement à leur mise en application.
1) Le style
L’agence Synergence a un positionnement affirmé – qui traite des dossiers selon une sensibilité qui pourrait se décrire comme alternative, militante. Sur le web, un visiteur peut être un client potentiel (une entreprise, un institutionnel). Par la présence d’informations originales et documentées publiées dans les pages du site, une autre typologie de visiteurs peut venir s’intéresser au site comme des particuliers ou des étudiants à la recherche d’informations. Synergence diffuse des informations qui, dans la réalité, se communiquent en s’affranchissant des artifices publicitaires et marketing. De fait, pour appuyer ce positionnement, nous avons tenté de rapprocher l’aspect du site avec des codes graphiques de la presse d’information. Photos résolument noir et blanc, introductions d’articles, mise en page en colonnes. Nous avons traité cette interface afin de permettre un accès rapide aux informations, une mise en page claire et aérée.
2) Les couleurs
En s’inspirant de la plaquette et des éléments fournis, deux couleurs dominantes ont été isolées : le rouge et le gris. Dans la plaquette papier récente, le rouge et le gris sont des pantones que nous nous sommes permis de réinterpréter afin d’obtenir la meilleure qualité d’affichage sur des écrans TFT ou LCD, Mac ou Windows. L’arrière-plan est un gris très léger qui permet de mieux faire ressortir les blancs des photos N&B et aussi d’accentuer la ressemblance avec un support papier. Sous l’entête rouge contenant le logo, une bande grise « utile » contient selon les pages des informations mises en avant. Qu’il s’agisse d’un simple titre comme pour le résultat d’une recherche ou pour la mise en vedette de réalisations marquantes dans la section portefolio.
3) La structure
La structure générale du site est fixe afin de garantir l’homogénéité de l’ensemble des pages. Ceci permet aussi d’éviter un rafraichissement des pages lors de la navigation, d’où un gain de confort lors de la consultation du site. Le menu se trouve sur la droite pour deux raisons. Des études ont prouvé qu’un menu se trouvant sur la droite est un peu plus lisible que s’il est placé à gauche de la page. Seconde raison, cette position donne une touche plus « moderne ».
– La page d’accueil est la plus structurée du site. Elle inclut trois lancements pour trois articles importants, un article principal, deux lancements d’articles présentés en deux colonnes. Elle doit donner envie d’en savoir plus.
– Les pages elles-mêmes présentent le contenu de manière claire avec en en-tête une bannère photographique et un repérage rubrique/sous-rubrique/article qui permet de repérer la rubrique dans laquelle on se trouve.
– Les pages de portefolio intègrent un mini-slideshow automatique permettant de présenter chaque case-study de manière homogène et facile à mettre en place.
Le design des éléments dynamiques et de la structure sera abordé prochainement dans le cadre d’une autre réalisation récente.
Gérald M.
Novembre 2007
