8 étapes pour bien concevoir votre site

Facilitez l’accès de vos visiteurs aux informations qu’ils recherchent.

C’est l’objectif principal de votre site d’engagement et le moyen le plus simple d’y parvenir est d’avoir un design aéré et bien organisé. Ce billet vous guidera à travers 8 étapes simples pour développer bien concevoir votre site en utilisant le nouvel éditeur d’apparence de Bang the Table.

  1. Planifiez votre contenu
  2. Choisir un modèle
  3. Programmer vos couleurs
  4. Choisir une police
  5. Ajouter facilement l’image de marque
  6. Choisir une image vedette
  7. Créer des coupures visuelles
  8. Prévisualiser et rétroactions

Commencez par consulter ce PDF. Il s’agit d’un dessin simple créé dans l’éditeur d’apparence en suivant ces 8 étapes. Gardez-le ouvert comme référence pendant que vous lisez cet article.

New call-to-action

1. PLANIFIEZ VOTRE CONTENU

Quel est l’objectif de votre site ? Que voulez-vous que vos visiteurs fassent ou sachent ? Un moyen simple de le déterminer est de prendre un morceau de papier et de dresser une liste de la manière dont vous souhaitez que votre contenu soit présenté sur votre page d’accueil. Pensez à vos visiteurs lorsque vous établissez la carte de votre contenu ; ont-ils besoin d’une introduction ? Jusqu’où doivent-ils défiler avant d’atteindre vos projets clés ? Pourquoi sont-ils venus sur votre site ? En plaçant les informations clés en haut de la page, vous aiderez vos visiteurs à naviguer rapidement et facilement sur le site.

Esquissez l’ordre dans lequel vous souhaitez que les éléments soient présentés. Consultez les nouveaux modèles d’EngagementHQ pour vous donner une idée de la façon dont vous pourriez mettre en page votre design (les modèles ne sont que des lignes directrices, ou vous pouvez les modifier selon vos besoins).

Nous avons un large éventail de blocs de contenu qui peuvent être publiés les uns sous les autres pour créer un flux qui fonctionnera pour vous.

Pour plus d’informations sur le développement de votre site en général, lisez notre notre série d’articlesCommencer avec EngagementHQ..


2. CHOISIR UN MODÈLE

Le choix de votre modèle est un moyen facile de commencer à structurer votre page d’accueil et de comprendre les options disponible. N’y passez pas trop de temps puisque vous pouvez modifier les éléments de votre modèle à tout moment, incluant:

  • Ajoutez, supprimez ou déplacez facilement n’importe quelle section
  • Mettre à jour toutes les couleurs et images
  • Restylez l’un des éléments pour mettre en valeur vos informations

Lorsque vous choisissez un modèle, réfléchissez à celui qui comporte certains des blocs que vous souhaitez déjà utiliser. Les modèles sont un excellent moyen d’obtenir des idées sur la façon de structurer votre contenu et d’utiliser la couleur pour mettre en valeur différentes zones de votre site.

Template styles available in Homepage Editor


3. PROGRAMMER VOS COULEURS

Choisissez vos couleurs et respectez-les. Le fait de conserver un schéma de couleurs cohérent permet de relier toutes les pages de votre site entre elles. Dans cet exemple, nous allons choisir deux couleurs : Une couleur de bouton et une couleur neutre. Vous pouvez utiliser le sélecteur de couleurs de l’application pour les sélectionner.

Button Color French

Couleur des boutons

Il devrait s’agir d’une couleur forte sur laquelle vous pourriez apposer du texte blanc tout en respectant les normes d’accessibilité. Vous pouvez tester l’accessibilité de la couleur de votre bouton ici : colourcontrast.cc (le code du texte blanc est : #ffffff)

  • Définissez la couleur des boutons dans la section «Styles globaux» pour l’appliquer sur l’ensemble de votre site et créer une cohérence.
  • Vous pouvez également utiliser la couleur des boutons comme arrière-plan pour mettre en évidence les blocs d’information clés.

Couleur neutre

Cela peut être un gris ou une teinte très claire de la couleur de votre bouton. Un gris idéal à utiliser est le code HEX #f5f5f5.
Vous devriez pouvoir mettre du texte noir sur la couleur neutre tout en respectant les normes d’accessibilité :
colourcontrast.cc  (le code de texte noir est #000000)

  • Utilisez votre couleur neutre pour créer des arrière-plans subtils. Cela peut aider à séparer les différentes sections sans que l’une d’entre elles n’apparaisse plus importante qu’une autre. Nous en parlerons plus en détail à l’étape 7 sur la création de ruptures visuelles.

Consultez l’exemple en pdf pour voir comment les couleurs des boutons et les couleurs neutres ont été utilisées.

Neutral vs strong colors

Conseil :  notez les codes de couleur HEX que vous avez choisis et respectez-les. Cela vous fera gagner du temps et rendra votre site plus cohérent. Un code HEX commence par un # et est suivi de 6 caractères. Il est généré par le sélectionneur.


4. CHOISIR UNE POLICE

Changing font

Il est conseillé d’utiliser une seule police de caractères pour l’ensemble de votre projet. Si vous ajoutez une deuxième police à votre site, il pourrait devenir plus chargé. Il sera alors plus difficile pour vos visiteurs de parcourir les zones et de trouver le contenu qu’ils recherchent.
Avec l’éditeur d’apparence, vous pouvez définir le type et la taille de votre police dans les «Styles globaux», pour un impact sur l’ensemble de votre site. Nous avons également inclus des tailles présélectionnées, qui sont choisies de manière à ce que votre police ait une bonne apparence sur les téléphones portables, les ordinateurs de bureau et les tablettes. Vous pouvez les modifier si vous le souhaitez.

Conseil : Si vous avez du mal à choisir, optez pour une police simple «Sans-serif». Cela signifie une police de caractères qui ne présente pas de petites imperfections aux extrémités des lettres. Elle est beaucoup plus facile à lire sur un écran et aidera les visiteurs à digérer votre contenu. Elle a également un aspect propre et moderne.

Font Styles


5. AJOUTER FACILEMENT L’IMAGE DE MARQUE

Vous pouvez charger votre logo dans la barre d’en-tête de votre site en un seul clic. Vous pouvez également ajuster les couleurs de l’en-tête et du pied de page pour qu’elles correspondent à votre marque.
Utilisez un fond d’en-tête blanc pour un effet plus neutre ou vous pouvez utiliser la couleur de votre bouton si vous voulez qu’il se démarque davantage. N’oubliez pas que tous les logos n’ont pas la même apparence sur toutes les couleurs! Voici une règle générale :

  • Utilisez une version blanche ou noire de votre logo sur un en-tête de couleur
  • Utilisez votre logo en couleur sur un en-tête blanc

Votre en-tête et votre pied de page seront placés sur l’ensemble de votre site, vous n’aurez donc à le faire qu’une seule fois !


Changez facilement votre logo avec l’éditeur d’apparence : Pensez à l’aspect de votre logo lorsque vous choisissez la couleur de votre en-tête.


6. CHOISIR UNE IMAGE VEDETTE

Commencez par choisir votre bloc de bannière. Vous pouvez le modifier à tout moment. Pour décider du design à utiliser, pensez à l’expérience de vos visiteurs et l’action que vous voulez qu’ils posent. Voulez-vous qu’ils cliquent sur un bouton et se rendent sur votre projet principal, ou voulez-vous qu’ils lisent une introduction à votre site ? Toute une gamme de modèles sont disponibles pour adapter votre introduction à vos besoins.

Banner French
Une fois que vous avez choisi votre bloc de bannière, vous pouvez choisir une image de vedette – c’est une image qui va donner à votre visiteur une première impression de votre site.

Si possible, trouvez une image avec un peu de la couleur de votre marque. Par exemple, si votre couleur principale est le rouge, une image comportant du rouge vous aidera à faire le lien avec votre marque. Veillez à ce que votre image soit simple et de haute qualité. Si vous en avez trop, votre site risque de sembler désordonné et confus.

Si vous n’avez pas accès à des images de haute qualité, vous pouvez visiter les sites suivants qui offrent des images gratuites et libres de droit: Unsplash, Pexels ou Pixabay. Ne pas copier d’images directement de votre moteur de recherche.

Conseil : Vous pouvez recadrer les images dans l’éditeur pour bien centrer les éléments clés.

Header image french
Ici, la couleur de la marque reprend le rouge dans les balançoires

La mise à jour des images de votre page d’accueil est rapide et facile grâce au nouvel éditeur d’apparence, alors tenez compte de ces points lorsque vous choisissez des images de projet ou d’autres images pour votre site.


7. CRÉER DES COUPURES VISUELLES

Votre page d’accueil comportera probablement différentes sections. Peut-être qu’une section présente des projets et qu’une autre indique vos dates clés. Pour aider votre visiteur à se concentrer sur chaque section séparément, il est conseillé d’utiliser des couleurs de fond pour créer des coupures visuelles indiquant où une section s’arrête et où la section suivante commence.

  • Utilisez la couleur neutre que vous avez choisie plus tôt comme couleur de fond si vous ne voulez pas qu’une section vous semble plus importante qu’une autre.
  • Utilisez la couleur de votre bouton en arrière-plan pour mettre en évidence une section par rapport aux autres.

French visual breaks
Voir notre exemple PDF pour une vue complète de l’utilisation des coupures visuelles.


8. PRÉVISUALISER ET RÉTROACTIONS

Avant de publier, assurez-vous d’examiner votre site. De quoi aura-t-il l’air sur un ordinateur, un téléphone portable ou une tablette ? Vos sections sont-elles encore claires et vos polices sont-elles d’une taille lisible sur tous ces appareils ? Une fois que vous êtes satisfait (mais avant de publier), partagez votre site avec vos collègues et demandez-leur de vous donner un avis clair. Par exemple :

  • Sur quoi voulaient-ils cliquer en premier ?
  • Peuvent-ils lire facilement le contenu sur leur mobile ?
  • Vos titres leur semblent-ils clairs ?
  • Pouvaient-ils trouver facilement l’information qu’ils recherchaient ?

Mobile desktop view
Utilisez l’aperçu de l’éditeur d’apparence pour visualiser votre site en mode tablette, bureau et mobile.

Une fois que vous et vos collègues êtes satisfaits de votre design, publiez-le et mettez-le à la disposition de votre communauté !


Published Date: 17 août 2020 Last modified on septembre 2, 2020

EngagementHQ Logo Gray Mobilisation de votre communauté DEMANDER UNE DÉMO