Cahier des charges du webdesign : parcours des bonnes pratiques

Accueil - Création de site internet - bonnes pratiques du web design

web design practices

Sur Internet, personne ne lit vraiment. Les internautes souhaitent surtout trouver au plus vite les informations dont ils veulent avoir en regardant à la va-vite le contenu d’une page. La conception d’un site Internet devra alors être simple et attractive. C'est pourquoi il est essentiel de tenir compte de l’importance du design.

Cet article est destiné à parcourir les bonnes pratiques du webdesign et vous aider à déterminer la façon de les présenter dans le cahier des charges que vous rédigerez lors de la création de votre site internet.

A.La charte graphique

1. Qu’est-ce qu’une charte graphique ?

La charte graphique, c’est un document précieux qui rassemble toutes les règles sur lesquelles est ou sera fondée l’identité visuelle de votre entreprise. En clair, elle va servir de fil conducteur à toux ceux qui vont réaliser un support de communication pour vous, y compris l’agence web à qui vous allez confier la conception de votre site web.

Ainsi,

  • il y aura une cohérence graphique entre tous vos supports : entête de lettre et facture, carte de visite, flyer, enseigne, textile, éventuellement véhicule, signature e-mail, etc. Sans oublier le site internet bien sûr.

  • Les internautes, les clients et les fournisseurs reconnaitront en un coup d’œil qu’il s’agit de vous, de votre site ou d’un document que vous avez émis, car ils ont déjà gravé votre identité graphique dans leur mémoire.

2. Logo explicite

Le logo et la manière dont on l’utilise occupent une place importante dans la charte graphique. Sur un site internet, il s’agit ni plus ni moins du premier élément que le visiteur regarde. Un logo efficace est généralement simple, original, facile à identifier, reflétant l’esprit et les spécificités de votre entreprise. Alors, soyez-en fier, mettez-le en avant, en haut de la page. Une pratique très courante : cliquer dessus devrait ramener l’internaute sur la page d’accueil.

Le logo est la première chose que les internautes regardent. Il représente l’image globale de l’entreprise en reflétant ses valeurs et ses mérites. Pour ce faire, le logo doit être mis en évidence et placé en haut de la page. À noter que le logo n’est pas seulement indispensable pour l’optimisation de la qualité visuelle. Il joue également un rôle important pour perfectionner la qualité de la navigation en améliorant l’expérience des visiteurs. De ce fait, il est important de veiller à ce que le logo puisse renvoyer automatiquement les internautes vers la page d’accueil du site.

3. Code couleur

La couleur a une influence qui dépasse l’apparence du site et l’image de votre société. Elle crée une atmosphère, permet de structurer le contenu, etc. Toutefois, gardez en tête que le but est de permettre au visiteur de retenir et reconnaitre facilement vos couleurs.   Bien que les nuances soient infinies, mieux vaut oublier les sept couleurs de l’arc-en-ciel ! Contentez-vous de quelques-unes qui seront également adaptées à vos différents supports (voiture, impression t-shirt, etc.)

4. Éléments visuels

Icônes personnalisées, illustrations, mascotte, photos… Ce type d’éléments peut être utilisé par une entreprise pour renforcer son identité visuelle en plus du logo. Pour faire en sorte que dans l’esprit des internautes ces éléments graphiques reflètent votre image, pensez à uniformiser leur utilisation à travers la charte graphique. Quant au moyen le plus simple de les associer facilement à votre entreprise, c’est tout simplement de les afficher régulièrement.

5. Police

Le choix de la typographie n’est pas à prendre à la légère. Chaque police d’écriture a son caractère. Selon votre cible, et le message que vous souhaitez faire passer, vous choisirez certainement une typographie plutôt qu’une autre. Sélectionner différentes tailles et formes permet d’ajouter du relief et de hiérarchiser votre contenu. Toutefois, il est essentiel de veiller au confort du lecteur.

B. Le design du site

1. Type de design

Même si vous avez entièrement confiance en votre agence web, au lieu de lui donner carte blanche, vous pourriez lui souffler quelques idées sur le type de design qui correspond à vos envies et vos besoins. Voici les dernières tendances en matière de web design :

  • Le minimaliste, pour aller droit au but. C’est le genre de site web où l’on affiche peu d’éléments, mais le peu qui figure correspond à l’essentiel, ce que l’internaute recherche, et ce qu’il a besoin de retenir.

  • Le flat design, intuitif avant tout. Il s’agit d’offrir une interface épurée avec des couleurs vives et des objets sans texture : flat !

  • L’illustratif, pour donner vie à un site internet. Les illustrations, animations et dessins de bandes dessinées sont une manière créative et originale de vous présenter.

  • La vidéo, épargnez-lui les longues phrases et invitez l’internaute à visionner une vidéo. Avec une belle séquence pertinente, c’est toujours plus attrayant et donc, plus efficace !

  • Le typography design. Dites-le avec des mots écrits dans des polices minutieusement choisies. Murmurer, se rebeller, attendrir, s’affirmer, séduire… Ce type de design s’appuie sur les personnalités de chaque typographie pour attirer l’œil et faire passer un message.

  • Le concept one-page classique et compact, mais efficace pour charmer l’internaute pressé. Tout le contenu tient donc sur une seule page. Toutefois, cela ne convient pas à tous les sites internet

2. Utilisation de la grille

Avant toute chose la grille est la base des bonnes pratiques dans le domaine du webdesign. Tout bon webdesigner doit être conscient du fait qu’un excellent esprit créatif n’est pas suffisant pour créer un site professionnel. Un template bien structuré peut en faire toute la différence afin de rendre plus facile le parcours de l’œil sur la page. La grille procure alors un véritable confort de lecture pour les internautes.

webdesign-grille

Faciliter le parcours des yeux sur la page web, rendre la lecture plus agréable, telle est le but de l’utilisation d’une grille. Il en existe plusieurs modèles conçus pour les interfaces web. Les grilles sont composées d’axes verticaux ou horizontaux ou bien, les deux à la fois. Pour structurer le contenu, des intervalles appelés « gouttières » espacent les axes. Les marges qui sont sur les deux côtés, éventuellement en haut et en bas, sont les parties réfléchies pour que l’internaute ne soit pas déstabilisé par les bords de l’écran.

3. Un entête astucieux

Les internautes n’aiment vraiment pas à attendre un certain moment avant de pouvoir accéder aux informations. Offrir une possibilité de consulter les pages sur la longueur est alors perçue comme une solution parfaite. En quelques coups de roulette de souris, les internautes ont accès à toutes les informations. De même, la fixation de l’entête du site prive les internautes des longs trajets de retour vers le haut de page. Ce qui ne peut être qu’une bonne chose.

4. Faire jouer le CTA (Call To Action)

Le CTA, traduit en français sous le terme de « appel à action » est par définition une fonctionnalité visant à inciter les visiteurs à exécuter diverses manipulations proposées par le site. Généralement, ces actions sont affichées en boutons qui sont placés de manière stratégique pour être sûrs que les internautes les perçoivent. Les manipulations proposées sont particulièrement choisies par le webdesigner à savoir l’inscription à la newsletter, la création de contact, l’ajout au panier ou l’encouragement à liker.

5. Moteur de recherche

L’importance du design du design ne se résume pas seulement à simplifier la lecture des contenus et des informations. Elle consiste également à inviter les visiteurs à rester le maximum de temps sur le site et de les inciter à toujours y revenir. Intégrer un moteur de recherche dans le site permet alors aux internautes de trouver et d’accéder facilement aux informations qu’ils souhaitent avoir.

C. Maquettes de pages

maquette de pages

1. Qu’est-ce qu’une maquette de page ?

Le « wireframing » ou maquettage du site est une étape essentielle dans l’établissement du cahier des charges du web design. Les maquettes de page sont en quelque sorte une esquisse qui permet de visualiser schématiquement :

  • l’arborescence du site, c’est-à-dire comment il est organisé

  • l’interface graphique avec les interactivités et l’ergonomie.

L’objectif est de mettre en place le fil conducteur des étapes de conception, afin que tous les intervenants : vous, l’agence web ou les webdesigners et développeurs, soient en phase.

2. Maquette fonctionnelle

La maquette fonctionnelle, connue également sous le terme de « wireframe », est la tâche la plus élémentaire qui marque le début de la création d’un site. Elle consiste à disposer, organiser sur une page en noir et blanc les différents éléments et principaux contenus de la page web. Balsamiq fait partie des logiciels de maquette fonctionnelle les plus connus.

Vous entendrez probablement parler de :

  • mock-up, c’est la maquette fonctionnelle en taille réelle

  • zoning, c’est un genre de maquette composée uniquement de blocs de contenu

3. Maquette graphique

C’est l’étape qui suit la maquette fonctionnelle. Elle permet d’apporter plus de détails à l’aspect du site : couleur, logo, forme, quelques textes, etc. Généralement, la maquette graphique est réalisée avec les logiciels de graphisme comme Adobe Photoshop ou Illustrator.

Par Nicolas Finet

Découvrez les 5 agences les plus adaptées à votre entreprise

Lancez votre projet

Répondez à quelques questions sur votre entreprise, vos objectifs et postez votre projet en une minute.

Notre expert prend le relais

Notre expert analyse votre besoin, écrit un briefing anonyme, sélectionne & contacte les agences pertinentes.

Les agences se présentent

Si elles sont intéressées, les agences envoyent un message expliquant pourquoi elles sont pertinentes.

Trouver mon agence