Sur Internet, les personnes qui prennent le temps de lire toutes les informations d’un site web sont rares. Les internautes souhaitent surtout trouver au plus vite des informations pertinentes, en regardant rapidement le contenu d’une page. La conception d’un site Internet devra alors être simple et attractive. C’est pourquoi il est essentiel d’avoir recours au webdesign.

Dans cet article, nous présentons toutes les bonnes pratiques du webdesign pour vous aider à construire le cahier des charges de la création de votre site internet.

Table des matières

La charte graphique

Qu’est-ce qu’une charte graphique en webdesign ?

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

Par conséquent :

  • Il y aura une cohérence graphique entre tous vos supports : Site Internet, réseaux sociaux, entête de lettres et factures, carte de visite, flyers, enseignes, textile, véhicules, signature e-mail, etc.
  • Les internautes, les clients et les fournisseurs reconnaitront votre marque en un coup d’œil, car ils ont connaissent votre identité graphique.

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.

Le logo est la première chose que les internautes regardent. Il représente l’image et les valeurs de l’entreprise.

À noter que le logo n’est pas seulement indispensable pour l’optimisation de la qualité visuelle d’un site. 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.

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 et permet de structurer le contenu. 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.)

Éléments visuels du webdesign

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.

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 transmettre, 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.

capture-decran-2021-02-19-a-19-00-52
MyStudioFactory
Paris , France
4.5 - 10 recommandations
BrandingDéveloppement mobile & AppWeb DesignLogiciels Création de Site WebProduct Design
Découvrir l’agencearrow_forward
capture-decran-2021-02-19-a-18-47-18
ERA2140
Paris, France
4.5 - 15 recommandations
Stratégie DigitaleDéveloppement mobile & AppWeb DesignLogiciels Création de Site WebProduct Design
Découvrir l’agencearrow_forward
capture-decran-2020-06-26-a-12-05-06
Bfast-Développement
Vibraye, France
0 - 0 recommandation
Content MarketingStratégie DigitaleDéveloppement webDéveloppement mobile & AppWeb DesignLogiciels Création de Site Web
Découvrir l’agencearrow_forward
capture-decran-2020-06-26-a-10-28-35
Agence Paprika
Poisy, France
0 - 0 recommandation
BrandingStratégie DigitaleDéveloppement webWeb DesignDesign Graphique
Découvrir l’agencearrow_forward
anadore
Anadore
Paris, France
5/5 - 1 recommandation
Développement webWeb DesignLogiciels Création de Site WebDesign Graphique
Découvrir l’agencearrow_forward
meet
WECOMEET
Paris, France
5/5 - 9 recommandations
Content MarketingBrandingWeb DesignLogiciels Création de Site WebDesign GraphiqueMarketing
Découvrir l’agencearrow_forward
zee
Zee Group
Paris, France
5/5 - 21 recommandations
Content MarketingBrandingStratégie DigitaleDesign GraphiqueE-commerce SoftwareCreative & Design
Découvrir l’agencearrow_forward
pari
Imagine Communication
Paris, France
5/5 - 9 recommandations
Content MarketingBrandingEvenementielStratégie DigitaleDéveloppement webWeb DesignLogiciels Création de Site WebProduct DesignDesign GraphiqueE-commerce SoftwareMarketing
Découvrir l’agencearrow_forward
bigger
Biggerband
Paris, France
5/5 - 3 recommandations
Content MarketingBrandingEvenementielEmailingWeb DesignLogiciels Création de Site WebDesign Graphique
Découvrir l’agencearrow_forward
creat
Dynamic Creative
Aix-en-Provence, France
5/5 - 4 recommandations
BrandingEvenementielStratégie DigitaleDéveloppement webWeb DesignLogiciels Création de Site WebDesign GraphiqueE-commerce Software
Découvrir l’agencearrow_forward
nosy
NOSYWEB DIGITAL
Paris, France
5/5 - 6 recommandations
Content MarketingMobile & App DesignEvenementielStratégie DigitaleWeb DesignE-commerce SoftwareMarketing
Découvrir l’agencearrow_forward
prot
KERN-IT
Brussels, Belgium
5/5 - 4 recommandations
BrandingWeb DesignLogiciels Création de Site WebDesign Graphique
Découvrir l’agencearrow_forward
ag
Alinoa
Braine-le-Château, Belgium
5/5 - 7 recommandations
Content MarketingStratégie DigitaleWeb DesignLogiciels Création de Site WebDesign GraphiqueE-commerce Software
Découvrir l’agencearrow_forward
mirum1
Mirum Belgium
Auderghem, Belgium
5/5 - 0 recommandation
Content MarketingBrandingMarketing AutomationStratégie DigitaleWeb Design
Découvrir l’agencearrow_forward
first
ID FIRST
Pont-a-Celles, Belgium
5/5 - 0 recommandation
BrandingStratégie DigitaleWeb DesignDesign Graphique
Découvrir l’agencearrow_forward
zee-group-illustration
Zee Group
Paris, France
4.5 - 15 recommandations
E-commerce SoftwareCreative & DesignWeb & Software Development
Découvrir l’agencearrow_forward
capital-panache-illustration
Capital Panache
Brussels, Belgique
5 - 7 recommandations
E-commerce SoftwareCreative & DesignWeb & Software Development
Découvrir l’agencearrow_forward

Le webdesign d’un site

Types de webdesign

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 y 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.
  • 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 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.

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 existe plusieurs modèles, conçus pour les interfaces web. Des axes verticaux et/ou horizontaux composent la grille. 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.

Un entête astucieux

Les internautes n’aiment vraiment pas à attendre 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.

Élaborer le CTA (Call To Action)

Le CTA, traduit en français « appel à action », est 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 voient. Les manipulations proposées sont choisies par le webdesigner. Cela peut être l’inscription à la newsletter, la création de contact, l’ajout au panier ou l’encouragement à liker par exemple.

Moteur de recherche

L’importance du webdesign ne se résume pas à 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.

Maquettes de pages

maquette de pages refonte

Qu’est-ce qu’une maquette en webdesign ?

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 :

  • l’arborescence du site, c’est-à-dire l’organisation de celui-ci.
  • 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 alignés.

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

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.

Nous vous en disons plus dans notre article où nous expliquons comment créer la maquette d’un site web.

L’exécutant de votre webdesign

Il existe différents exécutants du design d’un projet web. Les questions récurrentes sont :

  • Faut-il faire appel à une agence de communication/marketing ?
  • Faire appel à un freelance ou même réaliser la refonte du webdesign par soi-même ?

Chacune de ces pistes a des avantages et inconvénients.

Même si faire appel à un professionnel demande du budget, on est certain d’avoir un travail d’expert. Par exemple, les agences ont toute une équipe de métiers du web comprenant graphique et web designer. Elles auront donc une grande créativité tout en pouvant s’adapter à votre budget. De plus, une agence pourra aussi vous proposer des services en référencement naturel (SEO).