Comment créer un guide de style d'esquisse, une bibliothèque et un kit d'interface utilisateur

Chaque projet de design peut bénéficier d'un guide de style bien pensé. Utilisez ce didacticiel pour créer un kit d'interface utilisateur et créer simultanément une bibliothèque personnalisée (et réutilisable) pour un prototypage rapide.

Qu'ils soient experts en Sketch ou nouveaux dans Sketch, les concepteurs constateront que la création de guides de style dans Sketch peut être une ressource précieuse pour leur boîte à outils de conception, ce qui peut leur faire gagner beaucoup de temps.

Un guide de style aide non seulement à garder les choses cohérentes, mais permet également de mettre à jour des éléments tels que les couleurs et les icônes sur plusieurs documents avec beaucoup moins de tracas. Ce didacticiel décrit étape par étape le processus de création d'un guide de style et d'un kit d'interface utilisateur et permettra aux concepteurs de mieux comprendre les symboles Sketch, de référencer une bibliothèque Sketch pour leurs conceptions et d'avoir confiance dans l'organisation de leurs éléments de conception.

Création de votre guide de style d'esquisse

"Un guide de style est un" document vivant "complet qui garde une trace de tous les éléments répétitifs d'un projet, des règles de marque à la quantité de biseautage pour les boutons d'appel à l'action", selon UXPin. Un guide de style peut inclure n'importe quoi, des éléments visuels simples au vocabulaire et aux images approuvées. Ce didacticiel couvre l'organisation, les couleurs, les icônes, les polices, les styles de texte et les ressources.

Première étape : Organisation

1. Créez un dossier principal pour contenir les fichiers de croquis, les plug-ins et les autres ressources nécessaires telles que les polices et l'iconographie. (Les plugins seront abordés à la fin du tutoriel.)
2. Démarrez un nouveau fichier Sketch et nommez-le " Clientname Library". Par exemple, si votre client est Toptal, votre fichier doit s'appeler "Toptal Library".

Deuxième étape : les couleurs

Si des couleurs ont déjà été sélectionnées, l'étape suivante consiste à convertir vos couleurs en symboles.

1. Pour ce faire, faites des carrés de même taille et changez leurs couleurs en conséquence. Cliquez sur "Créer un symbole" et enregistrez ces éléments à l'aide du système d'étiquetage couleur/ @nom-couleur . Color/@pink , color/@background-gray ou color/@FFFFF sont des exemples d'étiquettes appropriées. Les conventions de nommage sont importantes pour garder un guide de style organisé, donc un format pour tout doit être établi et respecté dès le départ.
2. Une fois terminé, ajoutez-les à la page du guide de style.
3. Enregistrez l'échantillon de couleur dans la section des documents de votre palette de couleurs.

Raccourcis utiles : R - outil rectangle, T - outil texte, alt - mesurer la distance.

Troisième étape : les icônes

La transformation des icônes en symboles dynamiques permet de changer facilement leur couleur en l'une des couleurs enregistrées à l'étape 2 ci-dessus. Cela signifie qu'une fois qu'une icône est placée dans un dessin, la couleur peut être modifiée via un simple menu déroulant, appelé « remplacement », à l'aide de « l'inspecteur » à droite du canevas.

1. Enregistrez l'icône en tant que symbole (collez à .svg pour le type d'actif si possible).
2. Allez dans la page des symboles, trouvez l'icône et masquez-la avec une couleur par défaut parmi les couleurs précédemment enregistrées. Pour ce faire, superposez le symbole de couleur au-dessus de l'icône et cliquez sur "Masque" dans la barre d'outils (ou faites un clic droit et sélectionnez "Masque" dans le menu contextuel).
3. Une fois l'icône masquée, supprimez le remplissage en décochant la case sous la section "Remplissages" dans l'inspecteur.
4. Organisez les icônes dans la page du guide de style. Dans la même section, il est utile de spécifier la couleur des icônes actives et inactives, ainsi que toute autre spécification de couleur importante.

Quatrième étape : styles de texte

Une fois les polices choisies, il est temps de spécifier les styles de texte : H1, H2, H3, H4, H5, corps, liens, légendes, étiquettes, etc. Une bonne référence pour la typographie Web est cet article de blog de Typecast.

1. Choisissez la taille, l'épaisseur, les caractères et l'interligne pour autant de styles que nécessaire.
2. Écrivez un mot ("Tapez quelque chose" apparaît automatiquement lorsque vous appuyez sur T, l'outil de texte) et formatez-le pour refléter les détails de style choisis.
3. Cliquez sur "Créer un nouveau style de texte".
4. Organisez les styles de texte dans la page du guide de style.

Cinquième étape : Actifs

Maintenant, pour la partie amusante. Il est temps de combiner toutes les étapes précédentes pour créer des actifs. Si des ressources ont déjà été créées, par souci de cohérence, il est préférable de les recréer en utilisant les styles de texte, les icônes et les couleurs que vous avez déjà choisis. Par exemple, il peut y avoir de nombreuses couleurs de gris différentes dans le document de conception de travail qu'une conception n'a pas prises en compte, donc la recréation de l'actif garantira la cohérence de la couleur choisie. N'oubliez pas de garder un nom cohérent et assurez-vous d'ajouter des éléments dans la page du guide de style au fur et à mesure de leur création.

Voici quelques atouts suggérés sur lesquels travailler :

Boutons

1. Créez ces symboles dynamiques, tout comme les icônes, en masquant le bouton dans la couleur par défaut et en supprimant le remplissage.
2. Pour que le texte reste centré à tout moment, étendez la largeur de la zone de texte pour qu'elle soit identique à celle du bouton et centrez le texte.
3. Pour assurer la cohérence, assurez-vous d'utiliser les styles de texte enregistrés.
4. Enregistrez ces éléments sous forme de symboles à l'aide du système de nommage bouton/ nom de bouton .
5. Utilisez la fonction de remplacement pour modifier les étiquettes et les couleurs.

Barres de recherche

1. Appliquez des contraintes de redimensionnement au champ de recherche, ainsi qu'aux icônes et au texte utilisés dans le champ lui-même.
2. N'oubliez pas d'appliquer les styles de texte et les couleurs précédemment enregistrés dans la palette de couleurs de votre document.
3. Enregistrez cet élément en tant que symbole en utilisant la recherche comme titre, ou si vous avez différents types de recherche, respectez le système d'étiquetage tel que recherche/standard et recherche/pas d'icône .

Boutons radio et cases à cocher

1. Il est possible d'avoir un symbole dans un symbole, et un bon moyen de le tester consiste à créer des actifs de bouton radio et de case à cocher intelligents.
2. Tout d'abord, créez l'actif du bouton lui-même. Enregistrez cet élément en tant que symbole en utilisant la case à cocher/sélectionné et la case à cocher/désélectionné comme exemple d'étiquetage.
3. Créez maintenant l'entrée. Ajoutez un texte d'espace réservé à côté du symbole de case à cocher, puis convertissez l'intégralité de l'actif en symbole. Puisqu'il s'agit maintenant d'une entrée, il est suggéré d'enregistrer l'actif en tant que tel, donc une bonne étiquette serait input/checkbox/selected et input/checkbox/deselected .

Sixième étape : utilisez le guide de style !

Faire tout ce travail pour créer un guide de style n'est utile que s'il rend le projet plus fluide. Une fois tous les actifs créés, il est temps d'appliquer la bibliothèque au document en cours de conception. Dans Sketch, allez dans "Préférences ‐> Ajouter une bibliothèque…" et ajoutez le document de la bibliothèque.

Une fois que vous avez ajouté une bibliothèque à votre fichier de conception de projet, vous pouvez accéder à la bibliothèque et à ses symboles dans la section des symboles. Vous remarquerez la bibliothèque iOS UI Design fournie avec Sketch en tant qu'option de bibliothèque, ainsi que la bibliothèque récemment importée.

Si vous souhaitez mettre à jour un symbole, double-cliquez sur le symbole lui-même et votre document de bibliothèque devrait apparaître. Une fois que vous avez apporté les modifications, revenez au document de conception et cliquez sur le bouton de mise à jour dans le coin supérieur droit.

Bonus : importation/exportation de styles de texte

Les styles de texte ne sont pas enregistrés avec une bibliothèque, mais le plug-in Styles de texte partagés pour Sketch résout ce problème. Une fois le plugin téléchargé, allez dans le document de la bibliothèque puis dans le menu : « Plugins ‐> Shared Text Styles ‐> Export… » Enregistrez ce fichier dans le même dossier que votre document de la bibliothèque. Ensuite, dans votre document de conception, allez à nouveau dans le menu : "Plugins ‐> Shared Text Styles ‐> Import Text Styles…" et importez le fichier que vous venez d'enregistrer. Vos styles de texte apparaîtront.

Bonus : importation/exportation de palettes de couleurs

Semblables aux styles de texte, les couleurs du document ne sont pas sauvegardées avec une bibliothèque Sketch, mais le plug-in Sketch Palettes résout ce problème. De la même manière que ci-dessus, exportez la palette à l'aide de "Plugins ‐> Sketch Palette ‐> Document Colors ‐> Save Palette" et importez-la avec "Plugins ‐> Sketch Palette ‐> Document Colors ‐> Load Palette". N'oubliez pas de l'enregistrer dans le même dossier que vos autres documents de bibliothèque.

Bonus : Polices

Craft by InVision est une suite de plugins qui font passer le logiciel Sketch au niveau supérieur. Craft vous permet de remplacer les images par des photos d'archives, de prototyper et de synchroniser avec InVision, de créer des bibliothèques, etc. Si Craft est téléchargé, appuyez sur "cmd-shift-c" dans le document et une feuille de style sera générée. Les polices seront listées ici.

En suivant les six étapes décrites ci-dessus, les projets de conception, petits et grands, se dérouleront plus facilement et le résultat final sera plus raffiné. S'ils sont uniques ou très spécifiques, le guide de style, la bibliothèque et le kit d'interface utilisateur peuvent être utilisés pour un client ou pour de nombreux projets si des éléments d'interface utilisateur standard sont constamment créés, tels que des structures filaires et des prototypes. Consacrer du temps, au début, à créer correctement ces composants d'interface utilisateur Sketch permettra de gagner beaucoup de temps sur toute la ligne, et potentiellement sur de nombreux projets.

Pour en savoir plus sur le blog Toptal Design :

• Pourquoi les startups ont besoin d'un guide de style
• Ce que vous ne savez peut-être pas sur la typographie dans Sketch
• La liste ultime des 50 meilleurs plugins de croquis
• Adobe XD vs Sketch - Quel outil UX vous convient le mieux ?
• Comment créer un cadre de conception efficace (comprend un cadre d'interface utilisateur Sketch gratuit)