Comment créer le style guide parfait pour débuter votre projet Webflow

Ok, on va jouer à un jeu ensemble.

Imaginez-vous en train de vous servir un café, rejoindre votre poste de travail, enthousiaste à l’idée d’enfin commencer ce nouveau projet (interne à votre entreprise ou personnel) qui vous tient tant à cœur.

Plein d’enthousiasme, vous vous lancez tête baissée dans le développement de la home page, puis de la page contact, puis des pages métiers ! Vous créez un header, un hero, des boutons, vous retournez sur Google chercher la meilleure police pour vos titres, vous cherchez des images pour illustrer et donner vie à votre site, etc.

Puis au fur et à mesure du développement, vous créez de plus en plus de classes différentes qui font plus ou moins la même chose. Et parce que vous ne savez plus quel nom vous leur avez donné, vous ne vous rappelez plus exactement quelle taille de border radius vous donniez aux boutons initialement ? Et aux cards ? Et qu’en est-il des shadow box ?

Les titres sont-ils noirs ou gris foncés ? À chaque fois que vous voulez ajouter un nouvel élément vous le redesignez from scratch puis…

Peu à peu votre code devient une soupe de spaghettis avec des classes conflictuelles les unes avec les autres et sans nom descriptif. Vous commencez à ajouter des combo class à la moindre petite modification de design. Votre code et votre site deviennent de moins en moins maintenables et vous savez pertinemment qu’aucun autre développeur ne voudra jamais mettre le nez là-dedans. En somme, vous serez seul, toujours seul dans ce piège qui se referme de plus en plus chaque jour qui passe, condamné face à l’éternité des Dieux de Webflow à devoir vous débrouiller par vous-même, tombé dans le précipice des limbes de l’enfer du code spaghetti, ce projet qui vous enthousiasmait tant étant alors votre tombeau sans même que vous vous en rendiez compte…

Ce que je viens de décrire c’est ce qui fait la différence entre les amateurs et les vrais professionnels de Webflow. Les professionnels sont ceux qui créent des projets avec la vision de pouvoir continuer à les développer, parce qu’ils sont maintenables, évolutifs, modulaires et surtout bien pensés dès le tout départ.

Et vous savez ce qui fait la différence entre un amateur et un professionnel au tout départ ? Le professionnel, lui, crée un vrai style guide, réellement bon et complet.

Un style guide, c’est bien plus qu’un simple document rempli de règles. C’est une feuille de route visuelle et fonctionnelle qui définit les choix esthétiques et techniques de votre projet web dès le premier jour : typographie, palette de couleurs, styles de boutons, espacements, icones, etc. Considérez-le comme le chef d’orchestre de votre site, celui qui veille à ce que chaque élément joue la même partition, pour un résultat harmonieux et professionnel.

Mais pourquoi est-il si important, surtout dans un projet Webflow ? D’abord, il garantit une cohérence visuelle. Un site où chaque page suit les mêmes règles typographiques et colorimétriques donne une impression de fluidité et de professionnalisme. Rien de pire pour un visiteur que de naviguer sur un site qui semble avoir été conçu par trois designers différents avec des goûts opposés ! Ensuite, un style guide simplifie la collaboration. Que vous travailliez seul ou avec une équipe, ce document centralisé évite les allers-retours interminables du type « attends, on avait dit bleu ciel ou bleu marine ? ». Je vous invite à lire notre article sur l’art de collaborer sur Webflow pour en apprendre davantage sur ce sujet.

Enfin, il accélère le processus de design. En ayant toutes vos règles prédéfinies dans Webflow, vous gagnez un temps précieux pour vous concentrer sur la créativité plutôt que sur des ajustements laborieux.

Prenons un exemple concret. Imaginez deux projets Webflow : l’un avec un style guide bien défini, l’autre sans. Dans le premier, chaque bouton, chaque titre, chaque marge : tout est pensé en amont, et le designer passe d’une page à l’autre en appliquant des styles déjà validés. Résultat ? Un site terminé en un temps record, avec une allure soignée.

Dans le second, le designer improvise à chaque étape, change d’avis sur les polices, ajuste les couleurs au feeling, ne dispose d’aucune nomenclature prévue à l’avance sur le nom des classes et finit par passer des heures à corriger des incohérences.

Spoiler : le premier projet sera non seulement plus rapide à finaliser, mais, en plus, il inspirera davantage confiance à vos visiteurs.

En somme, un style guide, c’est la fondation invisible d’un site Webflow réussi. Il ne s’agit pas de brider votre créativité, mais de la canaliser pour qu’elle brille de manière cohérente. Alors, prêt à créer le vôtre et à transformer votre projet en une symphonie visuelle ?

‍

Style guide Webflow : les indispensables

‍

Un style guide efficace pour Webflow, c’est comme une boîte à outils bien rangée : chaque élément a sa place et vous permet de construire un site web cohérent et professionnel en un clin d’œil. Que vous soyez un designer débutant ou un pro du no-code/low-code, intégrer ces composants essentiels dans votre style guide vous garantit un projet fluide et un résultat réussi.

Voici les éléments incontournables à inclure pour faire de votre site Webflow une véritable réussite.

‍

Typographie : la voix visuelle de votre site

‍

La typographie, c’est l’âme de votre design. Elle guide l’œil du visiteur et donne le ton de votre message. Dans votre style guide, définissez :‍

- Polices principales et secondaires : choisissez des polices lisibles et adaptées à votre projet. Google Fonts est une excellente option pour les projets Webflow grâce à sa facilité d’intégration, mais vous pouvez aussi opter pour des polices premium via des services comme Fontshare. Par exemple, combinez une police sans-serif moderne comme "Inter" pour les titres avec une police serif élégante comme "Lora" pour les paragraphes.

- Hiérarchie et tailles : définissez des styles pour vos titres (h1, h2, h3), sous-titres, paragraphes et textes secondaires (comme les légendes). Par exemple, un h1 pourrait être en 48px avec un poids bold, tandis qu’un paragraphe reste en 16px regular.

- Accessibilité : assurez-vous que vos polices offrent un bon contraste avec le fond (pensez au ratio WCAG 4.5:1 pour le texte normal). Testez la lisibilité sur différents écrans, y compris mobiles, grâce aux outils de prévisualisation responsive de Webflow.

Astuce SEO : une typographie claire améliore l’expérience utilisateur, ce qui réduit le taux de rebond et booste votre référencement.

‍

Ces conseils comptent pour les titres, bien sûr, mais également pour tous les autres éléments textuels de votre site que sont les paragraphes, les liens et les richs-text Webflow.

‍

Palette de couleurs : l’émotion au premier regard

‍

Les couleurs définissent l’identité de votre site. Une palette bien pensée renforce votre marque et guide les émotions des visiteurs. Voici comment la structurer :

- Couleurs principales et secondaires : limitez-vous à 3-5 couleurs principales (ex. : une couleur dominante, une accentuée, une neutre).

- Outils pour choisir : utilisez des générateurs comme Coolors ou Adobe Color pour créer une palette harmonieuse. Une fois choisie, notez les codes hexadécimaux pour une intégration directe dans les Global Styles de Webflow.

- Accessibilité : vérifiez le contraste des couleurs avec des outils comme WebAIM Contrast Checker pour garantir une lecture facile, même pour les utilisateurs malvoyants.

Astuce pro : créez des variations (clair, sombre) pour chaque couleur afin d’ajouter de la flexibilité, comme des effets hover ou des états désactivés pour les boutons.

‍

Boutons et éléments interactifs : l’appel à l’action

‍

Les boutons et autres éléments interactifs sont les stars de l’engagement utilisateur. Ils doivent être cohérents et intuitifs :

- Styles de boutons : définissez des styles pour les boutons primaires (ex. : fond coloré, texte blanc), secondaires (ex. : contour uniquement), et leurs états (hover, cliqué, désactivé). Les boutons seront parmi les éléments les plus réutilisés sur l’ensemble de votre projet, pensez donc à les designer de manière unifiée une fois, à un endroit central qui est votre style guide.

- Inputs et liens : assurez-vous que les champs de formulaire, les liens hypertextes et les call-to-action suivent une logique visuelle commune. Par exemple, tous les liens pourraient être soulignés avec une couleur accentuée au hover. Notamment dans les corpus textuels comme les richs-text.

- Réutilisabilité : dans Webflow, utilisez les *Symbols* pour transformer vos boutons en composants réutilisables, ce qui garantit une mise à jour rapide sur l’ensemble du site.

‍

Espacements et grilles : l’harmonie invisible

‍

Un bon espacement, c’est ce qui rend votre design respirant et professionnel. Dans votre style guide :

- Marges et paddings : définissez des valeurs standard (ex. : 16px, 24px, 32px) pour les marges et paddings. Cela crée une rythme visuel cohérent.

- Grille Webflow : exploitez la grille intégrée de Webflow pour aligner vos éléments. Par exemple, une grille de 12 colonnes avec un gutter de 24px est un standard pour les designs modernes.

- Responsive design : prévoyez des ajustements pour les breakpoints (desktop, tablette, mobile) afin que vos espacements restent harmonieux sur tous les écrans.

Astuce bonus : pour des styles visuels cohérents et harmonieux, utilisez toujours des tailles d’espacement en rapport avec le nombre d’or.

‍

Images et icônes : la touche visuelle

‍

Les visuels renforcent l’attrait de votre site, mais ils doivent être cohérents :

- Formats et tailles : privilégiez des formats comme WebP ou JPEG optimisés pour des chargements rapides. Définissez des tailles standard (ex. : 1200x800px pour les images hero, 48x48px pour les icônes).

- Style des icônes : choisissez un style cohérent (ex. : icônes linéaires, remplies, ou minimalistes) et une palette monochrome ou assortie à vos couleurs principales. Des bibliothèques comme Feather Icons sont parfaites pour Webflow mais vous pouvez aussi utiliser des librairies comme Relume ou Google fonts.

- Optimisation SEO : ajoutez des noms de fichiers descriptifs et des balises alt pour améliorer le référencement de vos images.

‍

Header et footer : les piliers réutilisables de votre site

‍

Votre style guide est l’endroit idéal pour concevoir le header et le footer de votre site, car ces éléments seront utilisés sur presque toutes les pages. En les définissant dès le départ, vous garantissez une navigation fluide et une identité visuelle cohérente. Voici comment procéder :

- Header : définissez la structure (ex. : logo à gauche, menu de navigation à droite, bouton CTA en surbrillance). Précisez les styles pour les liens de navigation (typographie, espacement, effets hover) et assurez-vous que le header s’adapte aux différents breakpoints (ex. : menu hamburger sur mobile).

- Footer : incluez des éléments comme les liens vers les pages clés (contact, à propos), les icônes de réseaux sociaux, et un copyright. Choisissez des couleurs et polices alignées avec le reste de votre style guide.

- Symboles dans Webflow : transformez votre header et footer en Symbols dans Webflow pour les réutiliser facilement sur toutes les pages. Cela permet de modifier un seul élément pour mettre à jour l’ensemble du site en un clic, évitant les incohérences. Par exemple, un changement de couleur dans le header se répercutera automatiquement partout.

En intégrant ces éléments dans votre style guide, vous posez des bases solides pour un projet Webflow fluide, cohérent et optimisé pour l’expérience utilisateur. Non seulement votre site sera plus professionnel, mais il sera aussi plus facile à maintenir et à faire évoluer. En effet, si vous souhaitez faire évoluer vos éléments de design existants ou que vous souhaitez en créer de nouveaux, vous n’avez alors qu’à retourner dans votre style guide. Vous effectuez vos ajouts ou modifications et ainsi tout se répercutera sur l’ensemble de votre site. Ce qui vous permet de maintenir cette fameuse cohérence tout en conservant un vrai confort de développement.

Maintenant que nous avons évoqué pourquoi il faut impérativement créer des style guides et quels sont les éléments à prendre en compte, la dernière étape à évoquer dans cet article est logiquement : comment créer votre style guide sur-mesure.

‍

Construire votre style guide dans Webflow

‍

Si vous avez déjà fait l’acquisition d’un template Webflow sur la marketplace, vous aurez certainement remarqué qu’ils possèdent toujours un style guide ! En effet, il s’agit là d’une obligation de Webflow pour mettre en vente des templates sur sa marketplace.

De plus, vous aurez aussi certainement remarqué que les style guides prennent toujours la même forme qui est celle que nous vous recommandons aussi : créez une nouvelle page vide, excluez-la du sitemap grâce au bouton prévu à cet effet et laissez-la en brouillon, c’est-à-dire qu’il ne faut pas la publier avec le site. Cela permet d’éviter que les crawlers de Google ne passent dessus alors que ce n’est évidemment pas une page que l’on veut positionner sur Google.

‍

‍

Créer une page dédiée pour le style guide

‍

La première étape consiste à ajouter une nouvelle page dans le projet Webflow, nommée par exemple « Style Guide » ou « Système de design » pour les bons Français 🇫🇷. Cette page servira de référence centrale pour regrouper tous les choix visuels : typographie, palette de couleurs, boutons, espacements, header, footer, etc. - comme nous l’avons évoqué plus haut. Elle ne sera pas publiée, mais elle deviendra une ressource essentielle tout au long du projet. Il est recommandé d’organiser cette page en sections claires (comme « Typographie », « Couleurs », « Boutons ») pour une consultation rapide et intuitive.

Conseil pratique : gardez cette page facilement accessible dans l’éditeur Webflow pour y revenir à tout moment. Ajoutez une barre de navigation verticale à gauche avec des ancres vers les différentes sections de votre style guide.

‍

Définir les variables de couleur

‍

Les couleurs sont au cœur de l’identité visuelle d’un site. Les variables de couleur de Webflow, accessibles via le panneau Styles > Color Swatches, permettent de centraliser et de gérer facilement la palette. Voici comment s’y prendre :

- Configurer la palette : dans le panneau Styles, ajoutez les couleurs principales, par exemple un bleu profond (#1E3A8A) pour les fonds, un corail vibrant (#F472B6) pour les boutons d’action, et un gris clair (#F3F4F6) pour les arrière-plans. Attribuez à chaque couleur un nom clair, comme Bleu-Principal, Corail-Accent ou Gris-Clair, pour une identification immédiate par la suite dans le sélecteur de variables.

- Appliquer les variables : utilisez ces variables pour les fonds, textes, bordures ou effets de survol. L’avantage est simple : modifier une variable met à jour automatiquement tous les éléments qui l’utilisent, éliminant les ajustements manuels fastidieux et améliorant la maintenabilité de votre projet.

‍

Structurer la typographie et les espacements

‍

La typographie et les espacements donnent au site une allure professionnelle et fluide. Les styles globaux de Webflow permettent de les standardiser efficacement :

- Typographie : dans le panneau Styles, définissez les polices et tailles pour chaque type d’éléments. Par exemple, optez pour Inter, 48px, Bold pour les titres h1 et

Lora, 16px, Regular pour les paragraphes. Une échelle modulaire (12px, 16px, 24px, 32px) facilite la création d’une hiérarchie visuelle claire.

- Espacements : établissez des marges et paddings standards, comme 16px pour les petits écarts ou 24px pour les moyens. Ces valeurs, configurées dans les Styles, assurent un rythme visuel harmonieux.

- Nomenclature des classes : adoptez une convention de nommage claire, comme la méthode BEM (Block, Élément, Modificateur). Par exemple, pour un bouton, utilisez btn--principal pour le style de base et btn--principal--hover pour l’état de survol. Une nomenclature bien pensée évite les confusions et simplifie la maintenance.

‍

Exploiter les symboles pour des éléments réutilisables

‍

Les Symbols de Webflow sont idéaux pour les éléments qui se répètent, comme les boutons, headers ou footers :

- Boutons : créez un bouton principal (par exemple, fond Bleu-Principal, texte blanc, padding de 16px) et transformez-le en Symbol via un clic droit > Create Symbol. Nommez-le Bouton-Principal. Ce symbole peut être utilisé sur tout le site, et toute modification se répercute instantanément partout.

- Header et footer : concevez le header (logo, navigation, CTA) et le footer (liens, icônes de réseaux sociaux, copyright) sur la page du style guide, puis convertissez-les en Symbols (Header-Principal, Footer-Base). Cela garantit une cohérence sur toutes les pages et permet des mises à jour rapides.

‍

Conseil supplémentaire : simplifier avec le plugin Figma to Webflow

‍

Pour ceux qui commencent leur design dans Figma, le plugin Figma to Webflow est une astuce précieuse. Dans Figma, configurez les styles de couleur (ex. : Bleu-Principal), de typographie (ex. : h1: Inter, 48px) et les composants (boutons, header, footer) avec des noms alignés sur la nomenclature Webflow. Ensuite, utilisez le plugin, disponible dans la communauté Figma, pour exporter ces éléments directement dans Webflow. Les styles de couleur et de typographie deviennent des Global Styles, et les composants se transforment en Symbols. Un dernier contrôle dans Webflow (grilles, responsive, etc.) permet de peaufiner le résultat pour une intégration parfaite.

Une fois le style guide construit, appliquez-le à une page test, comme une page d’accueil fictive. Vérifiez que les variables de couleur et de taille fonctionnent correctement, que les Symbols (boutons, header, footer) s’affichent bien sur tous les écrans (desktop, tablette, mobile), et que la nomenclature des classes reste cohérente. Si des ajustements sont nécessaires, effectuez-les directement dans le style guide pour qu’il reste la référence centrale du projet.

En suivant ces étapes, le style guide deviendra un outil puissant pour un projet Webflow fluide et professionnel. Grâce aux variables, styles globaux, symboles et à l’astuce du plugin Figma to Webflow, le design sera non seulement cohérent, mais aussi rapide à mettre en œuvre. C’est la clé pour un site qui impressionne les visiteurs tout en simplifiant le travail de création.

‍