C'est l'objectif principal de votre site d'engagement et le moyen le plus simple d'y parvenir est d'avoir un design propre et bien organisé. Ce article vous guidera à travers 8 étapes simples pour développer un site bien conçu en utilisant le nouvel Éditeur d'Apparence de Bang the Table.
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 une feuille de papier et de faire 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.
Précisez l'ordre dans lequel vous souhaitez que les articles 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, vous pouvez donc tout y changer). Nous disposons d'un large éventail de blocs qui peuvent être empilés pour créer un flux qui répondra à vos objectifs.
Pour plus d'informations sur le développement de votre site global, lisez notre collection d'articles Commencer avec EngagementHQ
2. Choose a template
Le choix de votre modèle n'est qu'un moyen facile de commencer à structurer votre page d'accueil. Mais n'insistez pas, vous pouvez modifier les éléments de votre modèle à tout moment :
Ajoutez, supprimez ou déplacez facilement n'importe quelle section
Mettre à jour toutes les couleurs et images
Modifiez 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 parties de votre site.
3. Définissez votre palette de couleurs
Choisissez vos couleurs et continuez à les utiliser. La cohérence des couleurs 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 choisir.
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 du bouton dans la section "Styles globaux" pour qu'elle s'applique à l'ensemble de votre site et qu'elle soit cohérente.
Vous pouvez également utiliser la couleur du bouton comme fond pour mettre en évidence les zones d'information clés.
Neutral Color
Il peut s'agir d'un gris ou d'une teinte très claire de la couleur de votre bouton. Un bon gris à 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 pauses visuelles.
Conseil : Notez les codes HEX de la couleur que vous avez choisie 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. Choisissez une police
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 commencer à se sentir un peu distrait. 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 », ce qui permettra de les utiliser 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 minuscules extensions 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.
5. Ajouter facilement une 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 image de marque :
Utilisez un fond d'en-tête blanc pour un effet plus neutre ou utilisez la couleur de votre bouton si vous souhaitez qu'il se distingue davantage. N'oubliez pas que tous les logos n'ont pas la même apparence sur toutes les couleurs, c'est donc 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. Choisissez une image de la bannière
Commencez par choisir votre bloc de bannière, vous pouvez le modifier à tout moment. Pour décider du dessin du bloc à utiliser, pensez d'abord à ce que vous souhaitez que vos visiteurs fassent. 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 ? Il existe toute une gamme de modèles qui s'adaptent à vos idées.
Une fois que vous avez choisi votre bloc de bannière, vous pouvez choisir une image de la bannière - c'est une image de déclaration qui va donner à votre visiteur une première impression de votre site.
Si possible, trouvez une photo 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 vous sembler désordonné et confus.
Si vous n'avez pas accès à une imagerie de haute qualité, vous pouvez télécharger des images gratuites à l'adresse suivante Unsplash, Pexels ou Pixabay.
Conseil : vous pouvez recadrer les images dans l'éditeur pour bien centrer les éléments clés.
La mise à jour des images de votre page d'accueil est rapide et facile grâce au nouvel éditeur d'apparence. Tenez donc compte de ces points lorsque vous choisissez des images de projet ou d'autres images pour votre site.
7. Créer des ruptures 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 pauses visuelles », qui indiquent 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 semble plus importante qu'une autre.
Utilisez la couleur de l'arrière-plan pour le boutons, afin de mettre en évidence une section par rapport aux autres.
Consultez notre exemple PDF pour une vue complète de l'utilisation de « ruptures visuelles »
8. Prévisualisation et retour d'information
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 ?
Utilisez l'aperçu de l'éditeur d'apparence pour afficher 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é !
Le nouvel éditeur d'apparence de EngagementHQ est un outil de conception puissant. Il vous aidera à créer un beau site pour interagir facilement avec vos participants.
Pour activer l'Appearance Editor sur votre site, veuillez contacter l'équipe d'assistance par chat ou par e-mail à l'adresse support@engagementhq.com.