Fiche 6: personnaliser design

1) Personnaliser le design WordPress

1.1) Configurer l’identité du site (titre, logo, favicon)

1. Accéder au menu Apparence > Personnaliser ou Apparence > Éditeur selon le thème utilisé.
2. Ouvrir la rubrique Identité du site.
3. Définir le titre du site, qui sera utilisé dans les balises HTML <title> et par certains moteurs de recherche.
4. Saisir le slogan si celui-ci apporte une information complémentaire.
5. Importer le logo au format SVG, PNG ou WebP selon les recommandations du thème.
6. Vérifier que le logo est correctement affiché sur ordinateur, tablette et smartphone.
7. Importer une icône de site (favicon) d’au moins 512 × 512 px.
8. Contrôler l’affichage du favicon dans les onglets du navigateur et sur les appareils mobiles.
9. Vérifier la qualité des images importées et leur optimisation.
10. Enregistrer les modifications puis vider le cache du navigateur si nécessaire.

1.2) Définir la palette de couleurs

1. Identifier les couleurs principales de la charte graphique.
2. Définir une couleur primaire pour les éléments principaux (menus, boutons, liens…).
3. Définir une couleur secondaire pour les éléments complémentaires.
4. Choisir une ou plusieurs couleurs d’accentuation pour les appels à l’action.
5. Définir les couleurs d’arrière-plan des différentes sections.
6. Configurer les couleurs du texte et des titres.
7. Vérifier le contraste entre le texte et le fond conformément aux recommandations WCAG.
8. Déclarer les couleurs dans les paramètres du thème ou dans theme.json lorsque celui-ci est utilisé.
9. Tester la cohérence des couleurs sur toutes les pages.
10. Contrôler l’affichage en mode clair et, si disponible, en mode sombre.

1.3) Choisir les typographies

1. Sélectionner une police adaptée à l’identité visuelle du site.
2. Définir une police pour les titres.
3. Définir une police pour les textes courants.
4. Choisir les différentes graisses utilisées (Regular, Bold, Italic…).
5. Configurer les tailles des titres H1, H2, H3 et des paragraphes.
6. Définir les hauteurs de ligne (line-height).
7. Configurer les espacements entre les lettres si nécessaire.
8. Vérifier les performances des polices utilisées.
9. Tester la lisibilité sur différents écrans.
10. Vérifier la cohérence typographique sur l’ensemble du site.

1.4) Configurer le header et le footer

1. Définir la structure de l’en-tête.
2. Positionner le logo.
3. Configurer le menu principal.
4. Ajouter les éventuels boutons d’action (Contact, Devis…).
5. Définir le comportement du menu sur mobile.
6. Configurer la structure du pied de page.
7. Ajouter les informations légales (copyright, mentions légales…).
8. Intégrer les liens vers les réseaux sociaux si nécessaire.
9. Vérifier les espacements et l’alignement des éléments.
10. Tester le fonctionnement sur tous les supports.

1.5) Ajouter les widgets utiles

1. Identifier les zones de widgets proposées par le thème.
2. Ajouter un moteur de recherche si nécessaire.
3. Ajouter les derniers articles.
4. Ajouter les catégories ou les archives pour un blog.
5. Ajouter les coordonnées ou horaires d’ouverture.
6. Ajouter les liens vers les réseaux sociaux.
7. Vérifier la cohérence graphique des widgets.
8. Contrôler leur affichage sur les différentes pages.
9. Supprimer les widgets inutiles.
10. Tester leur fonctionnement après chaque modification.

1.6) Vérifier le Responsive Design

1. Tester le site sur un écran d’ordinateur.
2. Vérifier l’affichage sur tablette.
3. Contrôler le rendu sur smartphone.
4. Vérifier les différents points de rupture (breakpoints).
5. Contrôler les menus mobiles.
6. Vérifier les tailles de police adaptatives.
7. Tester les images responsives.
8. Contrôler les colonnes et les grilles.
9. Corriger les éventuels débordements.
10. Valider l’affichage sur les principaux navigateurs.

1.7) Créer les modèles avec Gutenberg

1. Identifier les pages possédant une structure récurrente.
2. Créer des compositions (Patterns) réutilisables.
3. Créer des modèles de pages si le thème le permet.
4. Organiser les blocs Gutenberg en sections logiques.
5. Définir les styles des blocs.
6. Réutiliser les compositions sur plusieurs pages.
7. Vérifier la cohérence graphique de chaque modèle.
8. Tester les modèles avec différents contenus.
9. Documenter les modèles créés.
10. Préparer leur réutilisation dans les futurs projets.

1.8) Ajouter éventuellement un Page Builder

1. Vérifier si le projet nécessite réellement un constructeur de pages.
2. Comparer les fonctionnalités de Gutenberg avec celles d’un Page Builder.
3. Installer le Page Builder choisi si nécessaire.
4. Vérifier sa compatibilité avec le thème.
5. Configurer les options générales.
6. Tester les performances obtenues.
7. Contrôler la compatibilité avec les extensions installées.
8. Vérifier la facilité de maintenance.
9. Mesurer l’impact sur le temps de chargement.
10. Valider son utilisation uniquement si les bénéfices sont supérieurs aux contraintes.

1.9) Respecter la charte graphique

1. Vérifier la cohérence des couleurs.
2. Contrôler l’utilisation des typographies.
3. Uniformiser les styles des boutons.
4. Harmoniser les espacements entre les sections.
5. Vérifier les marges et les paddings.
6. Uniformiser les icônes utilisées.
7. Contrôler la présentation des cartes (Cards).
8. Vérifier les styles des formulaires.
9. Contrôler les effets de survol (hover).
10. Valider l’homogénéité visuelle de l’ensemble du site.

1.10) Tester l’affichage sur plusieurs écrans

1. Tester le site sur un écran Full HD (1920 × 1080).
2. Tester sur un ordinateur portable (1366 × 768).
3. Vérifier l’affichage sur tablette en mode portrait.
4. Vérifier l’affichage sur tablette en mode paysage.
5. Tester sur plusieurs smartphones Android.
6. Tester sur plusieurs iPhone.
7. Utiliser les outils de simulation de Chrome DevTools et Firefox Developer Tools.
8. Vérifier l’affichage sur les principaux navigateurs (Chrome, Firefox, Edge, Safari).
9. Contrôler les performances et la fluidité de navigation.
10. Corriger les anomalies détectées avant de poursuivre le développement.

2) Les points essentiels

Résultat attendu

À la fin de cette fiche, l’identité visuelle du site est entièrement personnalisée. Le logo, les couleurs, les typographies, le header, le footer, les modèles Gutenberg et les différents éléments graphiques sont configurés de manière cohérente. Le site respecte la charte graphique du projet tout en garantissant une navigation fluide sur tous les types d’écrans.

À retenir

• Personnaliser l’apparence en respectant la charte graphique du projet.
• Conserver une identité visuelle homogène sur l’ensemble du site.
• Privilégier la simplicité et la lisibilité.
• Vérifier systématiquement le rendu sur ordinateur, tablette et smartphone.
• Construire une interface agréable pour les visiteurs avant d’ajouter des effets visuels.

Les outils recommandés

Personnalisation

• Gutenberg
• Éditeur du thème WordPress
• Personnaliseur WordPress (si disponible)

Conception graphique

• Figma
• Penpot
• Canva

Développement

• Chrome DevTools
• Firefox Developer Tools
• Visual Studio Code

Contrôle

• W3C Validator
• Color Contrast Analyser
• Wave

Les erreurs à éviter

• Multiplier les couleurs sans respecter une palette cohérente.
• Utiliser un trop grand nombre de polices d’écriture.
• Choisir des contrastes insuffisants entre le texte et le fond.
• Surcharger les pages avec des effets visuels.
• Négliger la lisibilité sur smartphone.
• Modifier l’apparence sans suivre la charte graphique.
• Oublier de tester les différents modèles Gutenberg.
• Utiliser des images de mauvaise qualité.
• Modifier les styles sans vérifier leur impact sur les autres pages.
• Chercher l’originalité au détriment de l’expérience utilisateur.

Checklist de validation

Niveau de difficulté

(3/5) – Intermédiaire

Cette fiche nécessite des connaissances en design web, en ergonomie et en personnalisation de WordPress. Les choix réalisés influencent directement l’expérience utilisateur et l’image du site.

Temps moyen de réalisation

Lecture de la fiche

25 à 35 minutes

Mise en application

3 à 8 heures

(Selon la complexité de la charte graphique et le niveau de personnalisation souhaité).

Compétences développées

À l’issue de cette fiche, vous serez capable de :

• Configurer l’identité visuelle d’un site WordPress.
• Personnaliser les couleurs et les typographies.
• Mettre en place une charte graphique cohérente.
• Configurer le header et le footer.
• Utiliser efficacement les modèles Gutenberg.
• Organiser les différents éléments graphiques.
• Vérifier l’accessibilité des choix visuels.
• Adapter le design aux différents écrans.
• Améliorer l’expérience utilisateur grâce à une interface claire.
• Construire une identité visuelle professionnelle et durable.

Bonus

➤ Infographie personnaliser l’apparence: