Définissez une charte graphique
Pour qu’un site fasse pro, il faut que son design soit cohérent sur toutes les pages. C’est la raison pour laquelle on se repose généralement sur une charte graphique qui va définir les polices de caractères, les couleurs, les versions de logos, etc., à utiliser sur tous les supports de communication d’une marque.
Dans notre cas, nous ne disposons pas d’une charte graphique. Nous allons donc définir nous-mêmes les bases graphiques de notre marque : logo, couleurs, polices de caractères.
Trouvez une inspiration
Comme vous n'êtes à priori pas graphiste, je vous invite à chercher des sites d’inspiration pour vous aider à définir une identité cohérente. Il ne s’agit bien sûr pas de copier-coller des designs existants, mais de s’inspirer d’associations de couleurs, de typographies, etc.
Par exemple, les bons sites d'inspiration que sont https://dribbble.com, http://collectui.com, ou même de nombreux comptes Instagram orientés UI et design.
Nous avions en tête une inspiration de type décalé avec un univers pastel mais fun, et nous avons trouvé une image d’inspiration sur Pinterest qui colle à cette atmosphère et qui contient même une image de banane ! Cliquez ici pour voir l'image sur Pinterest. Cette image d’inspiration va nous guider dans les choix graphiques à venir.
Définissez une palette de couleurs
Utilisez un service comme http://paletton.com/ ou http://colormind.io/ pour créer votre palette de couleurs manuellement ou, plus simple encore, partez d’une image d’inspiration dont l’atmosphère vous plaît pour générer automatiquement une palette de couleurs avec https://www.canva.com/color-palette/.
L’outil Color Palette de Canva nous génère automatiquement la palette de couleurs suivante à partir de notre image :
C’est la palette que nous allons respecter pour la suite !
Choisissez des polices de caractères
Le choix des polices de caractères a tendance à être négligé, alors que c’est peut-être l’aspect le plus important de la charte graphique.
Les sites utilisent de plus en plus les typos gratuites disponibles sur Google Fonts (ce que nous allons faire ici), mais choisir une police premium peut beaucoup apporter au design d’un site ; nous vous conseillons donc de ne pas oublier cette option !
Il y aurait donc beaucoup à dire sur le choix d’une typo, mais cela n’est pas le sujet ici. Nous allons donc arbitrairement partir sur :
la police Abezee en graisse regular (400) pour les titres de page, afin de donner un côté un peu décalé tout en restant élégant ;
la police Open Sans (un grand classique du webdesign !) pour le corps de page.
Choisissez un master visuel
Le master visuel va être l’image qui va représenter la marque et que l’on utilisera en priorité sur les supports de communication.
Certains sites proposent de belles photos utilisables gratuitement. C’est en particulier le cas de unsplash.fr sur lequel nous avons retrouvé la photo de banane contenue dans le visuel d’inspiration choisi.
Nous allons utiliser cette image (légèrement modifiée par nos soins) comme master visuel pour notre marque :
Créez un logo
Vous pouvez chercher des icônes gratuites sur https://fr.freepik.com et créer votre logo gratuitement sur les sites comme snappa.com ou canva.com (attention, la version gratuite est très limitée), qui proposent des interfaces très simples pour créer des visuels en ligne.
Afin de contrebalancer le côté déjà assez fun du nom et de l’ambiance choisis, nous avons décidé de créer un logo reposant sur la couleur “dark khaki” de notre palette, accompagnée d’une police plutôt sérieuse et premium.
Voici la création que nous allons utiliser pour notre site (attention, le texte est en blanc sur fond blanc) :
Paramétrez les options du thème en fonction de votre charte
Maintenant que nous avons défini notre direction graphique, nous allons pouvoir l’implémenter dans notre thème.
Pour cela, rendez-vous dans le customizer. Pour rappel, depuis le dashboard WordPress, allez dans Apparence >> Personnaliser. Comme vous pouvez le constater, il y a beaucoup plus d’options qu’avec le thème par défaut que nous utilisions en début de cours ! Mais pas d’inquiétude, on se les approprie rapidement à l’usage.
Désactivez les styles par défaut d’Elementor
Elementor propose par défaut de gérer les styles de façon centralisée, mais ces styles ne s’appliquent qu’aux contenus créés avec Elementor. Nous conseillons donc de désactiver cette fonctionnalité pour tout gérer au même endroit, c’est-à-dire dans les paramètres du thème ou dans Color Palette si vous l’utilisez. Pour cela, rendez-vous depuis le dashboard WordPress dans Elementor >> Réglages, et cochez les checkbox :
Désactiver les couleurs par défaut.
Désactiver les polices par défaut.
Configurez le logo
La première chose que nous allons faire est d’ajouter notre logo. Cliquez “En-tête” >> “Logo” >> “Changer le logo” >> “Téléverser des fichiers”. Sélectionnez votre logo en local et téléversez-le.
Faites de même dans la section “Logo Retina”. Cette section est dédiée aux écrans “retina” ayant une meilleure définition que les écrans classiques. Il faut donc si possible téléverser une image faisant le double (en pixels) de la taille souhaitée à l’écran.
Le logo est aussi présent dans le pied de page.
Cliquez sur l’icône “crayon” en bleu sur ce dernier pour accéder directement à la section du customizer permettant de l’éditer (Widgets >> Pied de page). Vous remarquerez que le logo et le texte en dessous sont insérés directement en HTML. Nous avons promis que vous n’auriez pas à coder, donc nous allons tout simplement supprimer ce widget.
Cliquez sur “Retirer” sous la zone d’édition.
Cliquez ensuite sur “Ajouter un widget”, sélectionnez le widget “Image” et glissez-le au-dessus du widget “Icônes sociales”.
Sélectionnez le logo dans la bibliothèque de médias.
N’hésitez pas à en profiter pour paramétrer les liens vers les profils de réseaux sociaux du widget “Icônes sociales”.
Et voilà, notre logo est en place, aussi bien dans l’en-tête que dans le pied de page !
Paramétrez les palettes de couleurs
Il est important de personnaliser les palettes de couleurs avec les couleurs que nous avons défini précédemment ainsi que d'éventuelles variations. En effet, cela nous fera gagner beaucoup de temps lors des sélections de couleurs et nous évitera surtout de choisir des couleurs approchantes ou au “feeling” (qui s’avère être bien souvent plus du hasard 
).
Nous avons précédemment installé le plugin Central Color Palette qui permet de configurer de façon centralisée les palettes de couleurs de l'administration WordPress et de OceanWP.
Depuis le dashboard WordPress :
Allez dans “Réglages >> Central Color Palette”.
Cochez les 4 checkbox.
Ajoutez les couleurs et les noms de la palette définie précédemment.
Ajoutez aussi les couleurs suivantes pour les textes :
#333, Dark Grey, pour les textes sur fonds clairs ;
#fff, White, pour les textes sur fonds sombres.
En ce qui concerne les palettes de couleurs Elementor, Central Color Palette ne les gère malheureusement plus depuis la version 3 d'Elementor. Il faut donc redéfinir la palette dans Elementor directement.
Retournez maintenant dans le customizer et allez dans Options générales >> Style général. Choisissez :
la couleur Pale Violet Red comme couleur principale et couleur des liens ;
la couleur Thistle comme couleur principale au survol et couleur au survol.
Paramétrez les polices de caractères
Retournez à l’accueil du customizer en cliquant sur la flèche de retour en arrière, en haut à gauche du customizer.
Allez dans “Typographie”.
Vous allez ici pouvoir définir de façon détaillée les réglages de typographie pour tous les éléments du site ! Nous allons rester simples et paramétrer seulement la typographie pour le corps de texte et les titres.
Pour le corps de page
Cliquez sur “Corps de page”.
Cliquez sur “Famille de Police” et sélectionnez “Open Sans”.
Saisissez “16 px” dans “Taille de la police”.
Cliquez ensuite sur l'icône “ordinateur” à droite de “Taille de la police”. Cette icône indique que l’option est déclinable selon les tailles d’écran ! Cliquez sur l’icône “mobile” et saisissez “14 px”.
Saisissez 1,4 dans “Hauteur de ligne”.
Choisissez la couleur #333333 (Dark Grey) de notre palette.
Enregistrez et retournez à l’écran précédent.
Pour les titres
Cliquez sur “Tous les titrages”.
Cliquez sur “Famille de police” et sélectionnez “Abezee”.
Vous remarquerez qu’il n’y a pas l’option de taille ; c’est parce que les tailles doivent être différentes pour chaque niveau de titrage (h1, h2, h3, etc.).
Nous n’allons pas définir les tailles et les couleurs des titres pour l’instant, parce qu’il sera beaucoup plus simple de les définir “in situ”, lorsque nous créerons notre page d’accueil.
Nous finaliserons donc la saisie de ces paramètres dans un second temps.
Paramétrez les layouts de page
Nous avons prévu des pages en pleine largeur lorsque nous avons défini le wireframe (et c’est généralement le layout utilisé lorsque l’on utilise un constructeur de pages). Il nous faut donc paramétrer le layout par défaut comme étant en pleine largeur.
Toujours dans le customizer, allez dans Options générales >> Réglages généraux, et choisissez le layout “100 % pleine largeur”.
En résumé
Il est essentiel de définir les bases d’une charte graphique (logo, typographie, palette de couleurs, master visuel) pour garantir la cohérence et le professionnalisme de son design.
De nombreux outils en ligne permettent de trouver des images de qualité, générer des palettes de couleur, ou même créer des logos.
Les principaux paramètres de design se configurent au niveau du thème dans Apparence >> Personnaliser. Mais attention, Elementor propose également des paramètres de design globaux qu’il faut donc désactiver si l’on veut utiliser les paramètres du thème.
Maintenant que nous avons configuré les options graphiques globales, nous allons pouvoir commencer à designer notre page d’accueil ! C’est ce que nous allons voir dans le prochain chapitre.
