Créez une identité visuelle cohérente et professionnelle
🧭 Pourquoi définir un design global ?
Un site au design cohérent et harmonieux inspire confiance et professionnalisme. Pour cela, il faut définir une charte graphique, c’est-à-dire un ensemble de règles qui fixent les éléments visuels : logo, couleurs, typographies, etc.
Dans ce cours, vous allez apprendre à définir une mini charte graphique adaptée à votre projet, même si vous n’êtes pas graphiste.
🖌️ 1. Inspirez-vous
Avant de créer, inspirez-vous !
Consultez des sites de design comme :
-
Dribbble
-
Behance
-
Collect UI
-
Pinterest, Instagram (UI/UX Design)
L’idée n’est pas de copier, mais de trouver des combinaisons de couleurs, de typographies ou d’ambiances visuelles qui vous parlent.
🎨 2. Créez votre palette de couleurs
Choisissez 4 à 6 couleurs principales à utiliser sur tout le site.
Outils recommandés :
-
Canva Palette Generator
-
Colormind.io
-
Coolors.co
Exemple de palette issue d’une image inspirante :
-
Sky Blue – #63C3E9
-
Dark Salmon – #EA98AD
-
Dark Khaki – #BBB14E
-
Thistle – #EDDDE3
-
Pale Violet Red – #DA658A
-
Texte principal – #333333
-
Fond clair – #FFFFFF
💡 Conseil : Évitez le “vrai noir” (#000000) sur fond blanc. Utilisez plutôt un gris foncé pour un meilleur confort visuel.
🔠 3. Choisissez vos polices de caractères
Les polices structurent l’identité de votre marque.
Recommandations :
-
Utilisez Google Fonts : gratuites, performantes, faciles à intégrer
-
Évitez les polices fantaisistes pour les textes longs
Exemples choisis :
-
Titres : Abeezee, style régulier (400), élégante et originale
-
Corps de texte : Open Sans, lisible et professionnelle
📌 Outil utile : Fontpair.co pour associer deux polices harmonieuses.
🍌 4. Créez un logo simple et efficace
Votre logo doit être :
-
Lisible en petit format
-
Déclinable sur fond clair et foncé
-
Visuellement simple (évitez les détails complexes)
Outils gratuits :
-
Canva
-
Snappa
-
Looka
-
Icônes : Freepik
💡 Le nom de votre marque dans une belle typo + une icône simple = un logo pro !
🖼️ 5. Choisissez une image pour votre Hero Header
Le hero header est la grande bannière en haut de votre site. Il capte l’attention et transmet immédiatement votre univers.
Où trouver de belles images gratuites :
-
Unsplash
-
Pexels
-
Pixabay
💡 Choisissez une image en lien avec votre thématique ou contenant votre “élément visuel signature”.
⚙️ 6. Paramétrez votre thème avec votre charte
① Ajoutez votre logo
-
Allez dans Apparence > Personnaliser > En-tête > Logo
-
Téléversez votre logo
-
Ajoutez aussi une version retina (2x plus grande)
👉 N’oubliez pas de remplacer aussi le logo du pied de page.
② Paramétrez la palette de couleurs
-
Installez le plugin Central Color Palette
-
Allez dans Réglages > Central Color Palette
-
Cochez les 3 premières options + “Intégrer avec OceanWP”
-
Ajoutez vos couleurs principales et de texte
📌 Elementor n’utilise plus automatiquement ces couleurs :
➡️ Ouvrez une page avec Modifier avec Elementor
➡️ Allez dans Menu > Réglages du site > Couleurs globales
➡️ Ajoutez les mêmes couleurs.
③ Paramétrez les polices de votre thème
-
Allez dans Apparence > Personnaliser > Typographie
Corps de texte :
-
Police : Open Sans
-
Taille : 16px (ordinateur), 14px (mobile)
-
Hauteur de ligne : 1.4
-
Couleur : #333333
Titres :
-
Police : Abeezee
-
Laissez les tailles par défaut (nous les ajusterons dans Elementor)
④ Mettez en place une mise en page en pleine largeur
-
Allez dans Options générales > Réglages généraux
-
Choisissez “Large” comme style de page
➡️ Ce layout est idéal pour travailler avec Elementor.
🧾 En résumé
Élément | Ce qu’il faut faire |
---|---|
🎯 Charte graphique | Définir une palette, des polices, un logo cohérent |
🎨 Palette de couleurs | Utiliser un outil comme Canva ou Colormind |
🔤 Polices de caractères | Choisir des Google Fonts lisibles (titres vs corps de texte) |
🖼️ Image d’en-tête (hero) | Sélectionner une image marquante pour la bannière principale |
🖋️ Logo | Créer un logo simple avec Canva, Snappa ou autre |
⚙️ Paramétrages du thème | Intégrer logo, polices, couleurs et layouts dans OceanWP et Elementor |
🎯 Vous avez désormais posé les bases visuelles solides de votre site.
👉 Prochaine étape : créer et personnaliser votre page d’accueil avec Elementor !