Comment construire une bibliothèque de modèle dans Sketch, Bloq Creative
Avez-vous déjà eu du mal avec cohérence dans la conception web? Cela arrive trop souvent, surtout lorsque l'on travaille à l'échelle. Heureusement pour nous, les bibliothèques de modèles sont là pour vous aider!
Une bibliothèque de motifs est une collection d'éléments de conception d'interface utilisateur qui peuvent être réutilisés pour construire des pages. Les exemples incluent Navigations, des boutons, des paragraphes, des titres et des formes. En concevant des éléments individuels au lieu de pages complètes, nous encourageons activement réutilisabilité, ce qui dans les conceptions qui sont cohérentes et faciles à entretenir.
Avant de mettre en œuvre une bibliothèque de modèle, nous devons nous assurer que nos outils de conception peuvent gérer des éléments réutilisables. Au cours des deux dernières années, mon go-to outil de conception a été Sketch: un outil vectoriel léger, parfait pour les interfaces et bibliothèques de motifs. Pourquoi est-il parfait? Je vais vous donner un exemple.
OK, assez de moi chantant les louanges de croquis. Ouvrons le tutoriel! Ne pas avoir une copie de croquis? tête simplement ici pour télécharger l'essai gratuit.
Obtenez votre artboard mis en place
Maintenant, pour créer notre grille. Avec Artboard 1 sélectionné aller à Voir> Canvas> Afficher la disposition (raccourci clavier: Ctrl + L). Vous verrez une grille par défaut apparaît. Maintenant, nous avons juste besoin de le modifier. Avec Artboard 1 toujours sélectionné, cliquez sur Affichage> Canvas> Paramètres Mise en page. Définition de la largeur totale de 1080px, Nombre de colonnes à 12, Largeur Gutter à 30px et la largeur de colonne comme 60px. Assurez-vous Gutter à l'extérieur est cochée. Cliquez sur le bouton central.
Faire un bouton
Maintenant, nous avons notre plan de travail et la grille mis en place, il est temps d'ajouter un peu de contenu. Pour ce tutoriel, nous allons créer quatre différents types d'éléments de bibliothèque de motifs. Commençons par les boutons. Pour créer l'arrière-plan de bouton, aller à Insertion> Forme> Rectangle (raccourci clavier: R). Dans l'inspecteur, définissez la largeur de 280px et la hauteur de 44px. Réglez le rayon de 3px et la couleur de remplissage # 1A9DD3.
Insertion et mise en forme du texte
Maintenant, pour ajouter le texte. Cliquez sur Insérer> Texte (raccourci: T). Modifier la police à la Source Sans Pro, poids, gras, couleur à #FFFFFF, Taille à 16pt et cliquez sur l'icône d'alignement central. Placez le texte de sorte qu'il est centré dans l'arrière-plan. Sélectionnez les deux couches et aller à Réorganiser> Layers groupe (raccourci clavier Cmd + G). Avec le groupe sélectionné, allez à Calque> Créer un symbole. Vous remarquerez que l'esquisse est vous invitant à nommer le symbole, entrez donc Bouton. Les symboles peuvent être reconnus par une icône de couche pourpre.
Toute modification apportée à un symbole, comme celui que nous venons de créer, seront appliquées à tous les autres cas de ce symbole. Le seul problème est que si l'on change le texte du bouton à l'intérieur du symbole, il modifiera le texte de tous les autres boutons. Pour éviter cela, sélectionnez le calque de texte et cochez la case Exclure la valeur du texte de symbole dans l'inspecteur. Maintenant, nous allons créer un bouton double. Cliquez sur Insérer> Symboles> Bouton.
Symboles en action
Avant de passer, il est important d'être conscient de la façon dont fonctionne la mesure dans l'esquisse. Sélectionnez un bouton, maintenez la touche Alt et passez la souris sur le deuxième bouton pour afficher la distance entre eux. Ceci est non seulement une caractéristique que les concepteurs utilisent tout le temps, mais qui est parfait pour les développeurs qui ont régulièrement pour calculer les mesures de pixels exactes.
Commencez avec des titres
La prochaine étape, rubriques. Comme rubriques sont des éléments de texte réutilisables, il est important d'utiliser les styles de texte disposent au lieu de symboles. Insérez une couche de texte et le type Titre de niveau 1. Changement Typeface à Source Sans Pro, poids, gras, couleur à # 3A4654 et taille à 37pt. Aller à Calque> Créer style partagé. Dans l'inspecteur, vous remarquerez qu'il ya le texte en surbrillance. Sketch est vous invitant à nommer le style de texte, entrez donc H1.
Répétez la dernière étape pour créer votre H1 à H6 éléments. Ma rubrique tailles de police sont H1: 37pt, H2: 31pt, H3: 25pt, H4: 21pt, H5: 18pt et H6: 15pt. Chaque rubrique est un style de texte, les changements seront appliqués à tous les autres cas de celui-ci. Je l'ai utilisé l'outil d'échelle Type de Jeremy Eglise pour déterminer la taille de mes titres. Type échelle utilise l'échelle modulaire pour choisir la taille des polices proportionnelles, selon le rapport sélectionné.
styles de texte organisation
Pour organiser les styles de texte que nous venons de créer, allez à Insérer> Texte Styled> Organiser les styles de texte. Ici, vous pouvez supprimer et renommer des styles de texte, mais pas les réordonner. Comme les styles de texte sont classés par ordre alphabétique, je nomme des éléments similaires avec le même premier mot: par exemple, une liste non triée et liste ordonnée. Suivez la même procédure pour l'organisation de symboles. OK, nous avons abordé des boutons et des rubriques! Mais qu'en est-images?
Faire un avatar
Pour avatars, insérer une image et le rectangle que les deux ont une largeur et une hauteur de 130px. Donnez le rectangle un rayon de 65px. Groupe les deux couches et positionner le rectangle derrière l'image. Faites un clic droit sur la couche de rectangle et sélectionnez Utiliser comme masque. Nous avons maintenant un avatar circulaire. Nous avons utilisé un rectangle avec un rayon au lieu d'un réglage de cercle réel parce que si vous voulez faire la place avatar, vous pouvez simplement modifier le rayon au lieu d'insérer une nouvelle forme.
Tirer sur les photos de l'utilisateur avec le générateur de contenu pour Sketch
Une alternative à insérer vos propres images est d'utiliser le générateur de contenu pour le plugin Sketch par Timur Carpeev. Il suffit de créer une forme et allez Plugins> Contenu Générateur Sketch Plugin> Persona> Photos. Il tire les photos des utilisateurs de l'utilisateur Faces Inter. et les insère comme un remplissage de forme. La communauté du plugin Sketch est grande.
Prochaine étape, nuanciers! Il est important de documenter les couleurs couramment utilisés dans notre bibliothèque de modèle. Insérez un rectangle avec largeur et la hauteur de 120px, et lui donner une couleur de remplissage de # 1A9DD3. Répétez cette étape avec les couleurs # 3A4654, # 475361, # 8793A1 et # EFF0F1. Il y a aussi un plugin pour créer des nuanciers par Jody Heavener. Aller à Plugins> Nuancier et entrez les cinq valeurs hexagonales ci-dessus.
Construire votre bibliothèque de couleurs
couleurs fréquemment utilisés
Mis à part les couleurs du document, esquisse également sélectionne automatiquement les couleurs communes dans votre document et indique à quelle fréquence ils ont été utilisés! Cette fonction est masquée, mais est accessible à partir du sélecteur de couleur. Cliquez sur la zone à droite des curseurs de teinte et d'opacité. Vous verrez une fenêtre intitulée Couleurs fréquentes utilisées dans. Non seulement Sketch vous dire à quelle fréquence la couleur a été utilisé, mais où.
Pour les dernières étapes, s'il vous plaît télécharger la ressource qui accompagne ce tutoriel et assurez-vous que vous avez la police du code source Pro installé. Dans la ressource, HTML est inclus à côté de chaque élément. Cela garantit que les balises HTML correctes et les noms de classe sont utilisés pour le développement. Notes d'utilisation peuvent être fournies le cas échéant. Un bon exemple de ceci est dans le système de grille, où il est utile d'avoir des informations sur les classes de colonnes, des colonnes de compensation, et ainsi de suite.
Assurez-vous que les gens peuvent sauter à des éléments afin qu'ils ne doivent pas faire défiler
Dans la ressource, vous remarquerez également que l'en-tête a un saut à ... sélecteur. bibliothèques de motifs peuvent être longues, il est donc important que les membres de l'équipe sont en mesure de passer rapidement à un élément sans avoir à faire défiler la page. Un exemple de cela se trouve sur la liste des bibliothèques A part modèle et la bibliothèque de motifs d'Anna Debenham.
Richard Child est un consultant en design. Cet article a paru dans le numéro 272 du magazine net.
Aimait ça? Lisez-les!
- Pourquoi devriez-vous gérer votre CSS avec les bibliothèques de motif
- Comment construire une application. essayez ces didacticiels
- logiciel de conception graphique gratuit à votre disposition dès maintenant!