Share
La création de guides de style est en train de devenir une pratique courante pour les concepteurs Web, en particulier lorsqu'il s'agit de sites contenant beaucoup de contenu. Avec un guide de style de site Web, les concepteurs sont en mesure de définir et de conserver une apparence en créant un ensemble de règles que la conception suit. Le processus devient flexible, facile à mettre à jour et cohérent.
Au cours de ce tutoriel, je vais vous montrer comment implémenter un guide de style dans votre propre site ou projet..
Les guides de style existent depuis longtemps. Même avant le Web, les entreprises avaient souvent besoin de créer des visuels cohérents et unifiés pour leur marque. Cela a été et reste atteint grâce à l’utilisation de directives relatives à la marque ou à l’identité. Ces directives sont généralement énoncées dans un document et peuvent contenir des informations telles que:
Ce qui est contenu dans un guide de marque / identité dépend de la société. Cela peut aller d'un document d'une page à un document extrêmement complet tel que la chaîne de télévision anglaise, le guide de style de Channel 4.
Les guides de style Web fonctionnent de manière similaire aux consignes de marque / identité, la seule différence étant que vous ne créez pas une identité pour une marque, mais plutôt une identité pour un site Web. Cette fois, la marque est le site Web et, en tant que tel, un guide de style est établi pour créer la cohérence et l'unité dans la conception d'un site Web..
Je ne dis pas qu’un guide de style devrait être écrit pour chaque le site Web auquel vous participez, mais il est parfois très logique de créer un.
Par exemple, cela pourrait être une bonne idée…
La façon dont nous concevons les sites Web est en train de changer. Nous commençons à comprendre que la conception de sites Web page par page peut ne plus être la solution appropriée dans certaines circonstances. En créant un système et une structure telle qu'un guide de style, cela nous permet d'avoir une vue d'ensemble de la manière dont un site Web peut s'emboîter, ce qui rend le processus de mise à jour du site beaucoup plus facile à gérer..
Maintenant que vous en savez un peu plus sur le guide de style d'un site Web, examinons quelques exemples..
Les règles de style les plus connues pour un site Web se trouvent probablement dans Twitters 'Bootstrap. Bien que n'étant pas spécifiquement un guide de style pour twitter.com, un certain nombre de ses composants peuvent être trouvés sur twitter.com et sont beaucoup utilisés pour les applications internes de Twitter..
Github est un bon exemple de site Web qui doit utiliser un guide de style. Github a une équipe de concepteurs et de développeurs travaillant sur son produit. Il est donc essentiel de maintenir la cohérence, peu importe qui travaille sur les nouvelles fonctionnalités et sections du site..
Si vous regardez cette image du guide de style de MailChimp, vous verrez différents composants provenant du site Web de MailChimp. Une chose que vous avez peut-être remarquée est l'approche humaine conviviale de MailChimp pour le dialogue utilisé sur son site. Ceci est cohérent car Mailchimp a créé un ensemble de règles auxquelles ce ton de voix doit adhérer..
Ce que vous décidez d’inclure dans votre guide de style variera en fonction du site pour lequel vous concevez. Par exemple, un site de réseau social aura des composants différents de ceux d'un site de critique de film.
Vous pouvez être aussi détaillé ou bref que vous le souhaitez, mais plus vous serez détaillé, plus votre projet sera unifié..
Lors de la création d'un guide de style, il est important d'inclure toutes les situations dans lesquelles un élément ou un composant peut se trouver. Par exemple, vous devez envisager différents états pour les boutons et les entrées, ainsi que les éléments de menu actuels, etc. Ils doivent être illustrés dans votre. Fichier PSD.
Pointe: Vous pouvez basculer entre différents états visuels dans Photoshop en utilisant des compositions de calque. Jetez un coup d'œil à notre récent tutoriel sur le sujet.Dans cet exemple, je vais créer un guide de style pour un blog. Le guide de style de blog comprendra des composants, à savoir:
Je vais aussi utiliser les six couleurs suivantes:
Toutes les entrées et tous les boutons utiliseront un rayon de bordure de 5px, tandis que tous les widgets de composants auront un rayon de bordure de 0px les rendant de forme rectangulaire.
Tout d'abord, configurez un nouvel espace de travail de document. J'ai décidé de définir le mien à 580px de large. C'est une taille confortable pour travailler et représente un espace de bonne taille pour une conception à base de modules.
J'utilise une grille (Affichage> Afficher> Grille) pour m'aider à concevoir et tout aligner. J'ai choisi d'utiliser une grille de 20 pixels x 20 pixels avec une subdivision toutes les 10 pixels. Cela peut être modifié en allant dans Préférences> Guides, Grille et Tranches.
Vous verrez alors l'écran ci-dessous. Ici, vous pouvez modifier l'espacement de la grille en fonction de vos choix, mais je trouve qu'une ligne de grille de 20 pixels avec des subdivisions réglées sur 2 fonctionne bien. J'ai également mis en place des guides de 460 pixels de large de part et d'autre de mon document pour m'aider. En plus de cela, il peut être intéressant d'activer la fonction "Capture" en sélectionnant Affichage> Capture. Cela garantira que vos éléments atteignent des mesures de pixels exactes et ne disparaissent pas avec des mesures de sous-pixels parasites.
La première chose que nous allons créer est le module de composant auteur. Les réseaux sociaux tels que Twitter ont récemment rendu ces cartes d'auteur très populaires et j'ai pensé qu'il serait peut-être intéressant de les utiliser dans notre guide de style de site Web. De cette façon, chaque auteur de notre blog peut avoir sa propre carte d’auteur..
Commencez par sélectionner l'outil Forme, puis sélectionnez une couleur de blanc au premier plan. Lorsque cette option est sélectionnée, créez un rectangle de 380 x 250 pixels. Une fois que cela a été créé, cliquez avec le bouton droit sur le calque de cette forme et sélectionnez "Options de fusion". Le panneau d'options de fusion devrait maintenant apparaître. Dans la barre latérale gauche de la fenêtre contextuelle, sélectionnez "Trait" et attribuez-lui une taille de trait de 1px. La couleur que nous allons utiliser est le gris clair # e7e2de tiré de notre jeu de couleurs.
Sélectionnez maintenant "Lueur externe" et réglez la couleur de la lueur externe sur la même couleur, mais réduisez son opacité à 80. Réglez l'étendue de la lueur à 100% et sa taille à 4. Cela donnera à notre composant une frontière avec une lueur épaisse qui est déguisée en frontière.
Les styles de calque que nous venons de créer vont être beaucoup utilisés dans d'autres éléments que nous créerons plus tard, mais voici une astuce rapide sur la façon d'utiliser les mêmes styles de calque sur n'importe quel autre élément. Si vous cliquez avec le bouton droit sur le calque de l'élément que nous venons de créer, cliquez sur "Copier les styles de calque". Cela fera exactement ce qu'il dit et vous permettra de le coller sur n'importe quel autre calque que vous avez. Pour ce faire, cliquez simplement sur le calque auquel vous souhaitez ajouter le style et sélectionnez "Style du calque collé". Prenez note de ceci car nous allons l’utiliser assez souvent tout au long de cette discussion. Nous ferons référence à ce style de calque particulier pour cet élément en tant que "style de calque principal"..
Pour l’avatar de l’auteur, prenons un exemple de photo et redimensionnez-le à 75px x 75px. Ensuite, sélectionnez l'outil 'Elliptical Marquee' et faites glisser votre curseur sur l'image, en partant du coin supérieur gauche au coin inférieur droit. Pendant ce temps, maintenez la touche Maj enfoncée pour limiter les proportions et créer un cercle parfait. Ensuite, une fois que vous avez créé une sélection sur l'image, copiez-la puis collez-la dans votre document de guide de style. Copiez et collez notre élément 'style de calque principal' puis éditez les styles de calque et supprimez le trait.
Pour créer les trois boîtes de statistiques, créez d’abord trois formes de rectangle blanc pouvant être divisées en parts égales entre 380px. Ceci fait, prenez l’un d’eux et ouvrez à nouveau le panneau de styles de calque en cliquant avec le bouton droit de la souris sur le calque. Puis sélectionnez 'Inner shadow'. Assurez-vous que le «mode de fusion» est réglé sur normal et que l'opacité est égale à 100%. Réglez l'angle sur '-90' et réglez la distance sur 5px. Pour la couleur, utilisez notre couleur bleue principale # a4d4e8. Répétez ensuite cette opération sur les 2 autres boîtes de statistiques, mais cette fois-ci, modifiez les couleurs de leurs ombres intérieures par chacune de nos couleurs secondaires. vert # aee1a3 et rouge # f67f77. Ajoutez ensuite le texte pour chaque statistique. Dans le mien, j'ai choisi de montrer le nombre d'adeptes, de suivis et de posts.
Pour ajouter le texte et la biographie de l'auteur, j'ai choisi d'utiliser "Droid Sans", disponible en tant que police Web Google..
Pour le petit triangle situé dans le coin supérieur droit de la carte d’auteur, créez un carré de 50 pixels x 50 pixels avec notre couleur principale bleue, puis sélectionnez l’outil «Lasso polygonal». Tracez une ligne droite du coin supérieur gauche au carré en bas à droite, puis tracez un contour autour de la partie gauche du carré. Une fois que cela est fait, sélectionnez Calque> Masque de calque> Masquer la sélection pour créer le triangle..
Pour l'étoile, sélectionnez l'outil de forme 'Polygon'. Assurez-vous que les côtés sont réglés sur «5» dans le menu supérieur. Ensuite, sélectionnez la petite flèche située à côté du mot "Côtés". Sélectionnez l’étoile et «indentez les côtés» à 50%. Ensuite, dessinez une étoile blanche au-dessus du triangle et placez-la dans le coin supérieur droit de la carte auteur..
Le composant de publication de blog est créé de la même manière que nous avons créé l'élément principal de la carte d'auteur ci-dessus..
J'ai ensuite ajouté le "style de couche principale" à cela. La vignette de l'image 70px x 70px est placée à gauche à l'intérieur de celle-ci. J'ai créé trois styles de texte différents. le titre principal, la date et le texte du paragraphe. En bas à droite, j'ai ajouté un bouton "En savoir plus". Voir l'étape 6 pour créer les boutons.
Pour créer la bulle de commentaire actuelle, créez un rectangle arrondi de 316 px x 90 px et ajoutez le "style de calque principal" à celui-ci..
Créez une forme carrée de 15 px x 15 px et faites-la pivoter dans Edition> Chemin de transformation> Rotation, puis faites-la pivoter de 45 degrés dans le menu Options. Sélectionnez le calque de forme actuel et allez dans Edition> Copier, puis dans le grand rectangle arrondi que nous venons de créer. Assurez-vous que le carré est aligné à l'endroit où vous souhaitez que le pourboire aille. Ensuite, allez dans Edition> Coller et cela fusionnera les deux formes. Ajoutez le style de calque principal à cela et il y a la bulle de dialogue!
J'ai décidé d'ajouter deux composants post commentaire. l'un étant un composant de commentaire standard et l'autre étant un commentaire d'auteur. Pour l'exemple de l'auteur, j'ai modifié le trait pour qu'il soit la couleur bleue principale.
Les boutons sont relativement faciles à créer car nous avons établi des directives avant de commencer dans notre guide de style.
Pour créer un gros bouton, sélectionnez l'outil 'Rectangle arrondi'. Dans la barre des options, assurez-vous que le rayon est défini sur "5px" et tracez un rectangle bleu principal de 125px x 40px. Ajoutez ensuite le texte de votre choix. Dupliquez le calque en cliquant avec le bouton droit de la souris sur le calque et en sélectionnant "Dupliquer le calque". Une fois que cela est fait, changez sa couleur en une de nos couleurs secondaires. Répétez cette procédure pour le bouton avec l’autre couleur secondaire. Répétez également cette procédure pour les petits boutons, mais cette fois-ci, les rectangles sont de 30 pixels x 105 pixels et pour le 'bouton d’appel au bouton d’action', rendez-le 374 pixels x 40 pixels..
Pour les états de survol, j'ai ajouté un dégradé subtil en ajoutant un style de calque "superposition de dégradé". Réglez le mode couleur sur 'Normal' et l'opacité sur 10% avec le dégradé du noir au blanc. Ce sera juste un indice qu'un utilisateur a survolé le bouton.
Pour le jeu de boutons groupé, créez un rectangle arrondi de 380 x 30 pixels de large, puis divisez-le en quatre boutons de taille égale. Vous pouvez le faire en traçant une ligne au crayon 1px ou en découpant des sections avec un outil de 1px 'rectangle de sélection rectangulaire'.
La pagination est créée de manière similaire au jeu de boutons groupé que nous venons de créer ci-dessus. Mais cette fois, au lieu de la créer en quatre boutons de taille égale, créez dix boutons carrés de taille égale avec les boutons fléchés aux extrémités un peu plus grands. L'image ci-dessous montre cela. Pour les flèches, j'ai utilisé des formes prédéfinies spécialement conçues pour les flèches de conception Web..
A présent, vous devriez avoir réalisé à quel point nous nous créons facilement la vie en répétant beaucoup d'éléments et de styles. La grande chose à propos de cela est qu'il crée une cohérence dans notre conception.
Les entrées et les zones de texte pour cet ensemble sont créées à l'aide des méthodes que nous avons utilisées précédemment. Pour les entrées, tracez un rectangle arrondi de 380px x 40px et appliquez la couleur du trait. Augmentez légèrement la hauteur de la zone de texte à environ 90 pixels. Pour mettre l'accent sur les éléments, j'ai utilisé notre "style de couche principale" et ajouté un élément supplémentaire pour les messages d'erreur et de succès..
C'est à vous de choisir le nombre d'éléments que vous souhaitez créer pour votre guide de style. Vous connaîtrez les exigences du site sur lequel vous travaillez et vous saurez ce dont vous aurez besoin et ce dont vous n’aurez pas besoin. La grande chose à propos de la création d'un guide de style est que tous les éléments que vous introduirez à l'avenir auront des règles et des pratiques à respecter et permettront une cohérence dans ce contexte..
Il créera une familiarité avec les utilisateurs et permettra une meilleure expérience globale, tant esthétique que fonctionnelle..
Accentsconagua