Comment créer un guide de style pour la conception web

La conception d’un site Web peut être un processus difficile. Il n’est pas facile de trouver l’inspiration pour un design esthétique et pratique. La cohérence des styles entre les différentes propriétés et pages Web rend les choses plus difficiles. Cela est particulièrement vrai après le lancement d’un site, car il peut y avoir plus d’équipes impliquées. À ce stade, les guides de style de conception web sont vraiment utiles. Qu’est – ce qu’un guide de style Web? Le Guide de style de conception du site décrit en détail la conception de chaque élément du site. Les guides de style ne créent pas de maquettes de conception pour chaque modèle de page, mais plutôt des composants plus spécifiques tels que la typographie, la couleur et le remplissage.
Pourquoi créer un guide de style? La création d’un guide de style de conception vous aidera à maintenir un style cohérent dans l’ensemble du site et des attributs externes tels que les profils des médias sociaux. Les guides de style sont particulièrement utiles lorsque plusieurs équipes travaillent sur votre site. Par exemple, vous pourriez avoir une organisation qui construit de nouvelles pages. En leur fournissant un guide de style, vous pouvez vous assurer que la conception de la nouvelle page est conforme au reste du site. Voici quelques exemples de guides de style de conception web existants. Vous apprendrez les différentes approches que vous pouvez adopter, ainsi que certains éléments communs contenus dans la plupart des guides de style.
Voici deux guides de style de conception web que nous examinerons attentivement: la Bibliothèque de modèles Google Material Design mailchimp Zones couvertes par le Guide de conception des matériaux de Google pour voir la conception des matériaux, nous pouvons voir les principales zones incluses dans le Guide de style: les styles mobiles (y compris les couleurs, les icônes, les images, la typographie, l’écriture) les composants de disposition (tels que les boutons, les onglets, les listes et les onglets) la croissance modale et
Plate – forme de disponibilité des communications Guide de la Bibliothèque de modèles mailchimp la Bibliothèque de modèles mailchimp couvre les domaines suivants: module de mise en page du système de grille Éléments tableaux de navigation listes d’ardoises statistiques \/ réponses aux données classes d’aide de la boîte de dialogue freddions ce sont des guides de style complets, nous pouvons voir certains éléments communs entre les deux, tels que la mise en page, les icônes, Mise en page \/ maillage et composants.
Nous n’avons pas l’intention de couvrir tout, y compris la conception des matériaux et la Bibliothèque de modèles de mailchimp, mais nous détaillerons les éléments importants à inclure dans la plupart des guides de style. Contenu du Guide de style vous venez de voir quelques exemples de guides de style de conception web et les éléments communs qu’ils contiennent. Nous allons maintenant examiner plus en détail certains éléments communs. Ne sous – estimez pas l’importance de l’impression. Pour certains, le type est l’aspect le plus important de la conception du site. Vous devriez passer beaucoup de temps à bien comprendre cette partie de votre guide de style. Si vous souhaitez approfondir la typographie, vous pouvez lire la recherche sur le style de texte sur le site.
Il y a plusieurs domaines clés sur lesquels vous devriez vous concentrer lorsque vous définissez des règles pour un type de site. Maintenant, nous allons examiner chacun d’eux en détail. Il existe deux types de familles de caractères: les noms de familles de caractères tels que \
Google fonts est un service gratuit
Un personnage anti – astique. Sauf si vous n’avez jamais utilisé Internet auparavant (qu’en pensez – vous?!), Alors vous verrez certainement des personnages comme \
En plus des polices Google, il existe d’autres sources de polices gratuites. Adobe typekit offre une variété de polices de haute qualité. Ils ont une version gratuite et une version payante, et si vous voulez un de leurs rôles avancés, ou si vous avez un site Web très fréquenté, vous n’avez qu’à mettre à jour vers cette version. Adobe typekit vous pouvez également utiliser de nombreuses bibliothèques de polices gratuites disponibles pour rechercher des polices. Assurez – vous de vérifier les licences pour les polices que vous utilisez pour vous assurer qu’elles sont appropriées. Par exemple, si vous les utilisez pour des sites Web générateurs de revenus, une licence commerciale est requise.
La taille des différents éléments typographiques dans la conception peut avoir un impact énorme sur la perception globale et la lisibilité du site. L’absence de lignes directrices claires peut donner l’impression que le site Web est incohérent et non professionnel. Personnellement, j’ai vu sur certains sites Web que chaque paragraphe a un style différent et ne semble pas très bon. N’oubliez pas non plus qu’il est très difficile de choisir la taille des différents éléments typographiques, alors ne laissez personne d’autre le faire. Vous devez définir les éléments de texte pour lesquels vous souhaitez définir des lignes directrices. Au minimum, il devrait s’agir d’une variété de tailles de titres (H1, H2, H3, etc.) et d’éléments de paragraphe.
Vous pouvez utiliser des outils tels que l’échelle de type ou l’échelle de module
Vous aide à définir l’échelle du texte. Ils utilisent des ratios pour calculer la taille des différents éléments de texte. La sélection des poids de police de taille pour les différents éléments typographiques à l’aide d’outils tels que modularscale est importante pour la cohérence et vous devriez définir les poids de police pour les différents éléments typographiques tout au long du processus de conception. Vous devez vous assurer qu’il y a une raison d’utiliser la taille de police pour distinguer les différents éléments typographiques. Hauteur de ligne \/ rythme vertical la hauteur de ligne de l’élément typographique est essentielle à la lisibilité de la copie et au maintien du rythme vertical. Le rythme vertical est difficile à maintenir sur les sites Web très réactifs, par exemple en ajustant la hauteur de l’image sur différents types d’appareils. Bien que les sites Web réactifs soient confrontés à des défis, essayer de maintenir une certaine forme de rythme vertical aidera à rendre votre conception plus cohérente.
Vous devez définir la hauteur de ligne de chaque élément typographique (H1, H2, H3, p), ainsi que le remplissage et les marges qui maintiennent le rythme vertical désiré. Palette de couleurs choisir la bonne couleur est un autre élément important du design. Le bon choix de couleurs peut influencer les émotions, les opinions et les comportements des visiteurs. Il existe plusieurs théories sur la couleur qui convient le mieux au choix, y compris la biologie \/ évolution, le sexe et la valeur écologique. Comprendre pourquoi les couleurs ont un tel effet peut vous aider à créer un site Web avec un taux de conversion plus élevé pour que vos visiteurs se sentent « appropriés ». La théorie des couleurs est un sujet brûlant, il ya donc beaucoup d’outils comme paletton et Adobe kuler.
Adobe kuler Color Selection Tool vous devez définir toutes les couleurs primaires (primaires, secondaires, tertiaires et accents) et les nuances de lumière et d’ombre que vous utiliserez. Idéal,
Vous pouvez définir différentes intensités pour chaque couleur et quelques nuances différentes entre les nuances de lumière et d’ombre. Une fois que vous avez défini la palette, vous voulez fournir des conseils sur la façon de l’appliquer à votre conception. Vous devez spécifier la couleur de police, la couleur de fond, les éléments de positionnement et tout autre contenu que vous souhaitez garder cohérent dans votre conception. Imaginez deux images très différentes: une photo d’une personne réelle sur un ordinateur portable, et une caricature, une image vectorielle d’une personne. Les deux sont très différents, mais si vous n’avez pas établi de règles pour le type d’image que vous souhaitez utiliser, les personnes qui ont apporté des modifications à votre site Web pourraient penser que les deux sont tout à fait justes. Il peut être plus difficile de définir des lignes directrices pour les images que de spécifier des polices et des couleurs. Les images peuvent être très subjectives; Cependant, des caractéristiques telles que la teinte, la couleur, le thème, l’échelle et la qualité peuvent encore être définies. Lisez l’importance d’obtenir correctement l’image de premier plan. 3. Iconographie de nombreux sites Web présenteront une sorte d’icône. Si c’est le cas, vous voudrez inclure des icônes dans le Guide de style. Si vos icônes ne sont pas personnalisées et que vous utilisez l’ensemble d’icônes par défaut, il peut être très facile de les inclure dans un guide de style, en indiquant simplement l’ensemble d’icônes à utiliser, la taille, la couleur et l’endroit où les utiliser. Si vous utilisez un ensemble d’icônes personnalisées et que vous devrez peut – être en créer d’autres, vous devrez définir plus de règles pour elles. Google fournit des conseils pour la conception d’icônes de matériaux, où vous pouvez trouver comment ajouter rapidement de grandes icônes de polices à votre site WordPress. 4. L’espacement est important pour rendre vos éléments de conception web dynamiques. Lors de la détermination des marges supérieure et inférieure et du remplissage, il faut tenir compte:
Et le rythme vertical mentionné dans la section typographie. Indique la quantité exacte d’espace que chaque projet devrait avoir. Vous serez surpris de constater qu’un design désordonné et non professionnel commence à sembler désordonné s’il n’y a pas d’espacement cohérent et délibéré. Si vous créez une nouvelle page, définissez les règles pour la nouvelle mise en page, ce qui est particulièrement important si plus d’une personne crée une page. Par exemple, les sites Web sur lesquels j’ai travaillé permettent aux administrateurs de créer du contenu principal dans n’importe quel format de leur choix, et ces sites ont tendance à devenir incohérents et confus au fil du temps. La page peut commencer par une introduction au contenu de la page, aller à la FAQ et se terminer par une invitation à l’action. Quelqu’un va créer une autre page pour un contenu similaire, mais cette page a une mise en page, une introduction, des recommandations, des FAQ, donc il n’y a pas d’invitation à agir différente. Votre conception devrait être stratégique, de préférence basée sur des tests, et permettre à n’importe qui de modifier la conception sans connaître la stratégie qui sous – tend votre décision pourrait éventuellement mener à un site non professionnel et mal performant. Les composants peuvent être des éléments tels que des boutons, des listes et des champs de texte. Assurez – vous de créer un guide de style pour les composants communs du site. Les styles de composants comprendront un certain nombre de sujets déjà abordés, comme les couleurs, la typographie et les icônes, bien qu’il soit important de définir clairement les styles de composants. Imaginez que des choses aussi simples que les styles de boutons, de la couleur utilisée, la typographie, le remplissage et les marges, aux bordures et aux ombres, deviennent rapidement incohérentes. De nombreux sites Web ont maintenant des animations ou des transitions. Ce ne sont pas des plaisirs visuels simples, mais des plaisirs pratiques