• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 31/07/2019

Définissez le design global de votre site

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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

N’étant a 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.

De bons sites d’inspiration 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. Cette image d’inspiration va nous guider dans les choix graphiques à venir.

Définissez une palette de couleur

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 couleur avec https://www.canva.com/color-palette/.

L’outil Color Palette de Canva nous génère automatiquement la palette de couleur suivante à partir de notre image :

L'outil Color Palette
L'outil Color Palette

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.com 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 :

Master Visuel pour le hero du site
Master Visuel pour le hero du site

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 “Entê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) que la taille souhaitée à l’écran.

Le logo est aussi présent dans le pied de page.

  • Cliquez 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 avions promis que vous n’auriez pas à coder, donc nous allons tout simplement supprimer ce widget.

  • Cliquez “retirer” sous la zone d’édition.

  • Cliquez ensuite “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édia.

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’entête que dans le pied de page !

Paramétrez les palettes de couleurs

Nous avons précédemment installé le plugin Central Color Palette permettant de configurer de façon centralisée la palette de couleur du site.

La personnaliser avec les couleurs de la palette que nous avons définie nous fera gagner beaucoup de temps par la suite et nous évitera de choisir des couleurs au “feeling”, qui s’avère être bien souvent plus du hasard. ;)

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.

Paramétrer les palettes de couleurs
Paramétrer les palettes de couleurs

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 typographies 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 “Corps de page”.

  • Cliquez “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 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 “Tous les titrages”.

  • Cliquez “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”.

Paramétrer la mise en page
Paramétrer la mise en page

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.

Exemple de certificat de réussite
Exemple de certificat de réussite