Aller au contenu principal

Direction du design

L'étape Direction du design vous permet de revoir, d'affiner et de finaliser le design visuel de votre thème avant que Theme Builder ne génère le thème complet.

Aperçu​

Après avoir terminé l'entretien de découverte (Discovery Interview), Theme Builder vous présente votre direction de design avec un aperçu de rendu pour ordinateur de bureau et mobile. Cela vous permet de voir exactement à quoi ressemblera votre design sur différents appareils avant de vous engager sur le thème.

Composants de la Direction du design​

1. Palette de couleurs​

Le schéma de couleurs de votre thème, incluant :

  • Couleur primaire — couleur principale de la marque utilisée pour les boutons, les liens et les accents
  • Couleur secondaire — couleur complémentaire pour la variété
  • Couleur d'accentuation — couleur de surbrillance pour les éléments importants
  • Couleurs neutres — gris et blancs pour les arrière-plans et le texte
  • Couleur de texte — couleur de texte principale pour la lisibilité

2. Typographie​

Sélections de polices pour :

  • Police de titre — utilisée pour les titres de page et les en-têtes de section
  • Police de corps de texte — utilisée pour le texte des paragraphes et le contenu
  • Tailles de police — dimensionnement réactif pour différentes tailles d'écran
  • Hauteur de ligne — espacement entre les lignes pour la lisibilité
  • Graisses de police — variations gras, régulier et léger

3. Mise en page et espacement​

  • Largeur du conteneur — largeur maximale du contenu
  • Marge et rembourrage (Padding and margins) — espacement autour des éléments
  • Système de grille — disposition en colonnes pour un design réactif
  • Espacement des composants — distance entre les éléments d'interface utilisateur

4. Éléments visuels​

  • Styles de boutons — designs de boutons primaires, secondaires et tertiaires
  • Designs de cartes — mises en page pour les blocs de contenu
  • Icônes — style et dimensionnement des icônes
  • Bordures et ombres — profondeur visuelle subtile
  • Effets de survol (Hover effects) — style des états interactifs

Rendu de l'aperçu​

Aperçu sur ordinateur de bureau​

L'aperçu sur ordinateur de bureau affiche votre design en pleine largeur (généralement 1200px ou plus) :

  • Menu de navigation complet
  • Mise en page complète avec toutes les colonnes
  • Typographie et espacement importants
  • Tous les éléments visuels à pleine taille

Aperçu sur mobile​

L'aperçu sur mobile affiche votre design en largeur mobile (généralement 375px) :

  • Navigation réactive (menu hamburger)
  • Mise en page en colonne unique
  • Typographie et espacement ajustés
  • Tailles de boutons adaptées au toucher

Points de rupture réactifs​

Theme Builder rend des aperçus à ces points de rupture :

AppareilLargeurAperçu
Mobile375pxTéléphone portrait
Tablette768pxTablette paysage
Ordinateur de bureau1200pxOrdinateur de bureau pleine largeur
Grand ordinateur de bureau1920pxÉcran ultra-large

Affiner votre design​

Effectuer des ajustements​

Vous pouvez affiner votre direction de design en :

  1. Ajustant les couleurs — changez n'importe quelle couleur de la palette
  2. Changeant les polices — sélectionnez différentes familles de polices
  3. Modifiant l'espacement — ajustez les marges et le rembourrage
  4. Mettant à jour la mise en page — changez les largeurs de conteneur et les colonnes de grille
  5. Personnalisant les éléments — modifiez les styles de boutons, les designs de cartes, etc.

Mises à jour de l'aperçu​

Les changements sont reflétés en temps réel :

  • L'aperçu sur ordinateur de bureau se met à jour immédiatement
  • L'aperçu sur mobile se met à jour immédiatement
  • Tous les points de rupture réactifs sont mis à jour
  • Vous pouvez basculer entre les aperçus pour vérifier les changements

Vue de comparaison​

Comparez votre direction de design avec :

  • Design original — voir ce qui a changé
  • Designs de concurrents — comparer avec des sites d'inspiration
  • Versions précédentes — revenir à des directions de design antérieures

Validation de la Direction du design​

Une fois que vous êtes satisfait de votre design :

  1. Revoyez les deux aperçus — vérifiez que l'affichage sur ordinateur de bureau et mobile est bon
  2. Vérifiez toutes les couleurs — assurez-vous du contraste et de l'accessibilité
  3. Testez la typographie — vérifiez la lisibilité à toutes les tailles
  4. Confirmez la mise en page — vérifiez l'espacement et l'alignement
  5. Validez le design — passez à la génération du thème

Prochaines étapes​

Après avoir validé votre direction de design :

  1. Theme Builder génère votre thème complet
  2. Le thème est installé sur votre site WordPress
  3. Vous pouvez personnaliser davantage à l'aide du Customizer de WordPress
  4. Passez à Hospitality Menus ou à d'autres fonctionnalités

Bonnes pratiques​

  • Tester sur de vrais appareils — utilisez de vrais téléphones et tablettes si possible
  • Vérifier la lisibilité — assurez-vous que le texte est lisible à toutes les tailles
  • Vérifier le contraste — utilisez Validate Palette Contrast pour l'accessibilité
  • Penser à la performance — optimisez les images et les polices pour la vitesse
  • Planifier le contenu — assurez-vous que la mise en page fonctionne avec votre contenu réel

Dépannage​

L'aperçu ne se met pas à jour​

  • Actualisez la page
  • Videz le cache du navigateur
  • Essayez un autre navigateur
  • Vérifiez la connexion Internet

Les couleurs semblent différentes​

  • Vérifiez les paramètres de couleur du moniteur
  • Essayez sur différents appareils
  • Vérifiez le contraste des couleurs avec des outils d'accessibilité
  • Tenez compte des simulateurs de daltonisme

Problèmes de typographie​

  • Vérifiez que les fichiers de polices se chargent
  • Vérifiez la taille de la police à différents points de rupture
  • Testez avec du contenu réel
  • Tenez compte de la longueur des lignes pour la lisibilité

Documentation connexe​