L’une des fa\u00e7ons de s’assurer que l’\u00e9quipe web design<\/a> se trouve sur la m\u00eame longueur d\u2019onde lors de la conception de parties distinctes du site Web ou de la sauvegarde des conceptions des d\u00e9veloppeurs,<\/a> est de cr\u00e9er une documentation de conception ou un guide de style de conception Web.<\/p>\n Il est avantageux d’avoir un guide de style afin de cr\u00e9er une exp\u00e9rience coh\u00e9rente entre diff\u00e9rentes pages. De plus, cela permet de s’assurer que le d\u00e9veloppement futur ou la production de tiers collaborateurs suivront les lignes directrices de la marque et seront per\u00e7us comme faisant partie de la marque globale.<\/p>\n Pour ce faire, faisons le point sur la fa\u00e7on de cr\u00e9er un guide de style de conception Web <\/a>utilisable pour vos projets.<\/p>\n Un guide de style est une collection d’\u00e9l\u00e9ments pr\u00e9-con\u00e7us, graphiques et r\u00e8gles de conception que les d\u00e9veloppeurs devraient suivre pour s’assurer que les diff\u00e9rentes parties du site Web seront coh\u00e9rentes et cr\u00e9eront une exp\u00e9rience pertinente.<\/p>\n L\u2019UI Airbnb- Source : Derek Bradley<\/p><\/div>\n Il est extr\u00eamement important lorsque plusieurs concepteurs travaillent sur un grand site Web ou une application responsive Web<\/a> pour s’assurer qu’ils n’interpr\u00e8tent pas trop et ne modifient pas ou n\u2019ajustent pas les styles en fonction des pr\u00e9f\u00e9rences personnelles. En d\u00e9veloppement, les \u00e9l\u00e9ments d\u00e9finis du site facilitent la r\u00e9utilisation de ces m\u00eames \u00e9l\u00e9ments. En outre, cela peut s\u2019av\u00e9rer plus facile car les d\u00e9veloppeurs sont d\u2019embl\u00e9e dot\u00e9s des \u00e9l\u00e9ments qu’ils doivent coder et sauront exactement comment ils doivent proc\u00e9der depuis le d\u00e9but.<\/p>\n Afin de rendre la t\u00e2che encore plus simple aupr\u00e8s des d\u00e9veloppeurs, il incombe au concepteur d’inclure toutes les interactions possibles, telles que les clics, les visites, les boutons d\u2019action, les titres, les liens, etc.<\/p>\n Source :Adobe France<\/p><\/div>\n 1. \u00c9tude de la marque<\/strong><\/p>\n Tout d’abord, vous devez \u00e9tudier la marque afin de comprendre ce qu’elle repr\u00e9sente. D\u00e9couvrez l’histoire derri\u00e8re la marque, observez l’\u00e9quipe et d\u00e9couvrez la vision, la mission et les valeurs de l’entreprise. Il est important de creuser plus profond\u00e9ment la marque afin que le guide de style que vous produisez repr\u00e9sente visuellement et \u00e9motionnellement l’organisation.<\/p>\n Si vous \u00eates un concepteur qui ne peut pas coder, il vous suffit d’ouvrir Photoshop<\/a> et de donner \u00e0 votre document un titre et une br\u00e8ve description de ce que le document est,et de quoi il s’agit.<\/p>\n Si vous pouvez coder, il est pr\u00e9f\u00e9rable de cr\u00e9er un document html avec des \u00e9l\u00e9ments pr\u00e9-cod\u00e9s afin qu’ils puissent \u00eatre facilement r\u00e9utilis\u00e9s.<\/p>\n 2. D\u00e9finir la typographie<\/strong><\/p>\n Selon Oliver Reichenstein<\/a>, la typographie repr\u00e9sente 95% de la conception web.<\/p>\n Vous devez obtenir la typographie juste parce que c’est l’un des outils de communication les plus importants entre les visiteurs et votre site.<\/p>\n D\u00e9finissez la hi\u00e9rarchie et identifiez-la. Il existe des types de titres : h1, h2, h3, h4, h5 et h6. Ensuite le corps du texte, des variations en gras et en italique. Pensez \u00e0 la copie personnalis\u00e9e qui sera utilis\u00e9e pour les liens plus petits, le texte d’introduction et ainsi de suite. Fournir la famille de polices, le poids et la couleur.<\/p>\n Source : Zech Nelson<\/p><\/div>\n 3. Palette de couleurs<\/strong><\/p>\n Il est incroyable que les humains per\u00e7oivent la couleur et associent les nuances aux marques connues. Pensez \u00e0 Coca-Cola, je parie que vous voyez ce rouge maintenant. Et pour cause, il existe en web design des couleurs qui augmentent les ventes !<\/a> Source : Chloe Park<\/p><\/div>\n 4. Le ton<\/strong><\/p>\n Le ton auquel nous faisons ici r\u00e9f\u00e9rence et s\u2019apparenter \u00e0 la \u00ab charte \u00e9ditoriale \u00bb de votre contenu. Vous avez \u00e9tudi\u00e9 la marque avant de commencer le guide de style et avez d\u00e9couvert que cette marque est jeune et \u00e0 la mode. S’il n’y a pas de directive pour le ton de votre contenu,<\/a> vous devez la d\u00e9finir. Il peut s’agir d’un exemple simple qui montre que la tonalit\u00e9 doit \u00eatre professionnelle mais dr\u00f4le et accueillante. Au lieu de dire \u00ab Vous avez une erreur 404 \u00bb<\/em>, vous pouvez dire \u00ab Oh boy, vous avez bris\u00e9 les interwebs. erreur404 \u00bb<\/em>.<\/p>\n 5. Iconographie<\/strong><\/p>\n Les ic\u00f4nes existent depuis des milliers d’ann\u00e9es et sont plus anciens que le texte et les mots. Profitez de l’utilisation d’ic\u00f4nes dans vos projets, car ils donneront une id\u00e9e instantan\u00e9e aux visiteurs quant \u00e0 ce qui se passe et \u00e0 ce qui se passera ensuite. Choisir les ic\u00f4nes appropri\u00e9es donnera plus de contexte au contenu que la palette de couleurs, le r\u00e9dactionnel ou les graphiques. Lorsque vous utilisez des ic\u00f4nes, assurez-vous de r\u00e9fl\u00e9chir au public cible, \u00e0 la religion, \u00e0 l’histoire, de sorte \u00e0 \u00e9viter les fausses id\u00e9es et les malentendus. Encore une fois, pensez \u00e0 la marque et \u00e0 ses valeurs, de sorte \u00e0 ne pas avoir besoin d’ic\u00f4nes dessin\u00e9es et disponibles sur une banque d\u2019images. Pour ce faire, Iconfinder <\/a>est un excellent outil pour trouver des ic\u00f4nes incroyables pour vos projets.<\/p>\n Source : Iconfinder<\/p><\/div>\n 6. Images<\/strong><\/p>\n \u00ab Une image vaut mille mots \u00bb. Assurez-vous d’inclure des visuels qui d\u00e9finissent le style et la direction du site Web. Encore une fois, pensez aux valeurs de la marque et de sa mission. Par exemple, une association de charit\u00e9 telle qu\u2019Unicef va utiliser des images saisissantes, dot\u00e9es d\u2019une forte \u00e9motion et qui relatent la chance d’avoir acc\u00e8s aux ressources essentielles comme l’eau, la nourriture, l’\u00e9lectricit\u00e9 et l’\u00e9ducation.<\/p>\n Source : UNICEF<\/p><\/div>\n 7. Formulaires<\/strong><\/p>\n Les formulaires sont ce qui rend votre site Web ou votre application Web interactif et dynamique afin que l’utilisateur puisse entrer les donn\u00e9es et vous pouvez ensuite manipuler pour l\u2019optimisation de l\u2019exp\u00e9rience client.<\/p>\n Assurez-vous d’\u00e9tablir une hi\u00e9rarchie et d’inclure des commentaires possibles \u00e0 partir de formulaires ; y compris des \u00e9l\u00e9ments tels qu’un mot de passe trop faible, l\u2019adresse email<\/a> qui n’est pas valide ou des messages de succ\u00e8s simples, par ex. \u00ab Email envoy\u00e9 \u00bb.<\/p>\n 8. Boutons<\/strong><\/p>\n Les boutons sont un m\u00e9lange de palette de couleurs, de formes et de ton. Reliez ces actifs pr\u00e9c\u00e9demment cr\u00e9\u00e9s pour cr\u00e9er des boutons fonctionnels avec des designs diff\u00e9rents.<\/p>\n 9. Espacement<\/strong><\/p>\n Comment l’espacement peut-il faire partie d\u2019un guide de style ? Il est extr\u00eamement important de mentionner l’espacement. Il peut s’agir d’une grille utilis\u00e9e pour une mise en page ; Il peut \u00e9galement s’agir d’un espacement entre les titres, les boutons, les images, les formes et d’autres \u00e9l\u00e9ments.<\/p>\n \u00c9laborer l’espacement est important car il offre plus de marge de man\u0153uvre aux \u00e9l\u00e9ments et une utilisation coh\u00e9rente rend votre travail structur\u00e9 et professionnel.<\/p>\n 10. Dos et Don’ts<\/strong><\/p>\n \u00ab Last but not least \u00bb : Faites de la section DOs et DON’Ts une sorte de FAQ montrant les pi\u00e8ges les plus courants et donnant des exemples de la fa\u00e7on dont les choses devraient \u00eatre utiles et fonctionner \u00e0 la place.<\/p>\n Source : Designmodo<\/p><\/div>\n Exemples<\/strong><\/p>\n Voici quelques-uns des meilleurs exemples de guides de style \u00e0 utiliser comme inspiration lors de la cr\u00e9ation de votre propre guide de style. Gardez \u00e0 l’esprit que ces guides sont fortement influenc\u00e9s par la configuration de l’organisation, leur vision, leur mission et leurs valeurs, et certaines d\u00e9cisions peuvent \u00eatre sans importance ou illogiques par rapport \u00e0 ce que vous faites, alors ne suivez pas aveugl\u00e9ment les choses qui s’y d\u00e9roulent.<\/p>\n Spotify – Lignes directrices sur les marques partenaires (PDF)<\/strong><\/p>\nQu’est-ce qu’un guide de style ?<\/h2>\n
![\"L\u2019UI](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/08\/airbnb-ui-toolkit-web.png\")
<\/a>Pourquoi c’est important ?<\/h2>\n
![\"Source](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/08\/Adobe-France-.jpg\")
<\/a>Cr\u00e9ation d’un guide de style de conception Web<\/h2>\n
![\"Source](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/08\/Style-Guides.jpg\")
<\/a>
\nCommencez par d\u00e9finir les couleurs primaires pour votre guide de style qui domineront sur votre site Web, les couleurs dominantes ne devraient pas comporter plus de trois nuances. Dans certains cas, cependant, vous aurez besoin de couleurs secondaires et m\u00eame tertiaires pour illustrer votre interface utilisateur, assurez-vous de les d\u00e9finir \u00e9galement. Incluez \u00e9galement des couleurs neutres comme le blanc, le gris et le noir pour que les couleurs principales de la marque principales se d\u00e9marquent.<\/p>\n![\"Source](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/08\/color-palette.jpg\")
<\/a>![\"Source](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/08\/Iconfinder.jpg\")
<\/a>![\"Source](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/08\/Accueil-UNICEF.jpg\")
<\/a>![\"Source](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/08\/twitter.jpg\")
<\/a>
![\"Source](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/08\/spotify.jpg\")
<\/a>![\"Source](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/08\/dropbox.jpg\")
<\/a>