Share
Ce que vous allez créerCe tutoriel vous montrera comment organiser un guide de style à l'aide de Sketch. De plus, il vous enseignera certaines compétences de base pour utiliser Sketch dans d’autres situations. Nous aborderons tout, de la configuration de la typographie à l'utilisation de types de grilles assortis, en passant par les meilleures pratiques d'utilisation de «symboles» et de «styles partagés»..
La définition de styles de type réutilisables dans Sketch vous fera gagner beaucoup de temps. Lorsque l'outil de texte est sélectionné, vous verrez une petite boîte à droite de l'application qui vous permet de définir toutes sortes de styles de caractères tels que la famille de police, le poids de la police et même l'espacement des caractères..
Voyons comment nous pouvons l'utiliser dans notre propre document de guide de style.
Chaque fois que je travaille avec une typographie, j'aime utiliser une copie réelle (par opposition à une copie de remplissage générique). Je pense que cela facilite l'expérience de conception et donne au résultat final plus de contexte et une voix authentique.
Commencez par les différents types de texte de votre conception. Dans ce fichier, nous avons quatre en-têtes, pas six, car nous n’avons pas besoin de beaucoup.
Remarque: Chacun de ceux-ci est un objet texte séparé.
Il est conseillé de mettre les couches dans le bon ordreLe premier élément à concevoir est le sous-titre, qui accompagne le H1, mais nous y reviendrons plus tard. Sketch n'a pas de paramètre pour dicter le caractère “casse”, donc pour que le sous-titre soit en majuscule, je dois le saisir manuellement en tant que tel..
Faites ceci le cas échéant pour chaque élément de texte que vous avez. Ne vous inquiétez pas pour l'espacement sur la planche graphique, nous reviendrons sur cela plus tard..
Vous pouvez créer des styles de texte réutilisables de deux manières. Tout d'abord, sélectionnez un texte avec le style que vous aimez, puis cliquez sur Pas de style de texte par dessus les réglages de type à droite. Ensuite, sélectionnez Créer un nouveau style de texte à partir de l'arrêt.
Remarque: Transférer ces styles dans autre les fichiers copient et collent les objets texte souhaités et les styles sont automatiquement transférés.
La deuxième façon de créer un style de texte dans Sketch consiste à créer le nouveau style de texte dans le menu déroulant, comme vous l'avez vu ci-dessus, puis à ajouter le style à ce style. Peu importe lequel vient en premier. Ce qui compte, c’est que vous compreniez que tout changement de style d’un style de texte affectera tous les autres éléments de texte utilisant ce style. Par conséquent, si je changeais la couleur de l'en-tête Mini, cela refléterait ce changement sur chaque article..
Il n’existe pas de moyen simple d’ajuster le style pour différentes tailles d’écran. Mon travail actuel consiste à créer des styles de texte distincts pour les écrans mobiles, en plus des styles de bureau..
Il existe trois références pour les mesures dans Sketch: grille, mise en page et règle. Passons rapidement en revue les trois et voyons comment les utiliser. Ceci fait, nous allons parler de les utiliser pour configurer la mise en page de votre page.
Pour basculer l'affichage de la règle, appuyez sur Ctrl + R (facile à retenir). Les règles ne doivent pas être utilisées comme principale forme de grille dans Sketch, les deux autres options sont bien mieux adaptées à cela. Utilisez la règle pour aligner les objets ou pour vérifier l’alignement comme dans la capture d’écran ci-dessous..
De la même manière que la règle, pour basculer en mode Grille, appuyez sur Ctrl + G. La grille est un système de carrés dont vous pouvez ajuster le côté. Je les utilise pour des mises en page qui ne correspondent pas nécessairement à un style de page Web typique centré. L’avantage de la grille dans Sketch est qu’elle recouvre l’ensemble du plan de travail (si vous augmentez la taille du plan de travail, la grille s’agrandit)..
Vous pouvez définir la taille des unités de la grille comme étant quelconques. Vous pouvez également mettre en évidence un ensemble de lignes, la valeur par défaut étant tous les 10.
Pour basculer la disposition sur laquelle vous appuyez (devinez) Ctrl + L. Ceci est un peu plus compliqué en termes de points de données différents que vous devez fournir, mais vous obtenez une grille de présentation parfaitement personnalisée. parfait pour concevoir des sites web!
Notre grille est basée sur des unités de 30 px, de sorte que tous les chiffres que vous voyez dans la capture d'écran ci-dessous reflètent cela. Une fois que vous savez quelle est votre grille, entrez-la dans le Paramètres de mise en page.
Si vous ne savez pas ce que votre grille devrait être, utilisez le Paramètres de mise en page jouer - il garde les proportions et recalcule tout pour vous. Supposons, par exemple, que ma mise en page utilise onze colonnes au lieu de douze, tout en conservant sa largeur totale. Si je diminue le nombre de colonnes, Sketch me donnera les largeurs mises à jour des colonnes et des gouttières. Jouer voir ce qui se passe.
L'inconvénient des grilles dans Sketch est que vous ne pouvez pas avoir une nouvelle grille pour les nouveaux planches. Peut-être que c'est une bonne chose, mais ce n'est pas comme ça que j'ai tendance à travailler. Si j'ai deux tableaux d'art côte à côte, l'un pour l'ordinateur de bureau et l'autre pour le mobile, il est impossible de travailler dessus en même temps. C'est ici que Des pages être utile. Si tu as Liste des couches vue ouverte, vous pouvez voir en haut quelque chose appelé Des pages.
Les pages sont très utiles, car elles permettent une couche supplémentaire de conception dans un seul document. Vous pouvez modifier la grille et la disposition dans les pages et elles resteront identiques dans cette page uniquement..
Vous avez peut-être remarqué dans mes captures d'écran que ma typographie n'est pas alignée sur les lignes de la grille. Avoir des lignes de grille ne veut pas dire que les choses qui étaient auparavant là s'aligneront comme par magie. Chaque fois que vous modifiez l'emplacement de vos grilles, vous devrez y aligner vos éléments. La typographie est différente car elle ne commence ni ne finit là où se trouve la totalité de l'élément. Vous pouvez placer la base de la typographie comme vous le souhaitez par rapport à la grille. C'est à vous. Je le mets en haut des lignes. Alors laisse-moi le réaligner pour toi.
Comme vous pouvez le constater, le paragraphe mobile ne s’aligne pas; sa hauteur de trait est de 24px. Il a donc besoin de sa propre mise en page et de sa grille. Mais dans le but de cette procédure, il peut rester mal aligné.
Voyons comment enregistrer les couleurs dans Sketch pour pouvoir les réutiliser..
Disons que je voudrais ajouter une ligne de violet à utiliser comme accents dans cette conception. Je vais copier et coller la ligne verte et choisir un violet. Pour accélérer les choses, j'ai choisi les nuances de violet plus claires en modifiant l'opacité des couleurs d'origine à respectivement 70%, 50% et 20%..
Pour obtenir la couleur, utilisez l’outil Color Eyedrop et sélectionnez la nouvelle teinte. N'oubliez pas de revenir à 100% de l'opacité.
Ensuite, utilisez le petit + au bas des nuanciers pour enregistrer la couleur dans la palette de Sketch. La différence entre Couleurs globales et Couleurs du document Comme leurs noms le suggèrent, les couleurs globales seront enregistrées dans Sketch pour être réutilisées dans tous les autres fichiers Sketch que vous ouvrez, tandis que les couleurs de document ne restent que dans ce document..
J'ai un tas d'éléments d'interface utilisateur simples dans mon fichier Sketch.
Je les garde ici pour pouvoir copier rapidement ceux dont j'ai besoin dans les nouveaux designs sur lesquels je travaille. Je vais vous montrer comment créer des styles et des symboles partagés pour les réutiliser..
Les styles partagés sont les styles que vous pouvez réutiliser. Par exemple, l'entrée active / focalisée est composée de trois composants, le texte de l'étiquette, le texte de saisie et la zone de saisie..
Le rectangle a un style spécifique, il a un fond blanc, une bordure bleue de pixel unique et une ombre intérieure bleu clair. C'est quelque chose qui est réutilisable si vous travaillez sur plusieurs entrées.
Sur le côté droit au-dessus de tout le style que je viens de décrire, vous pouvez voir le texte qui dit Pas de style partagé. Vous pouvez enregistrer ces caractéristiques de style de la même manière que nous avons enregistré le style de texte pour nos en-têtes. Enregistrez-le et réutilisez-le autant que vous le souhaitez. Mais rappelez-vous que si vous modifiez un aspect du style enregistré à l'avenir, cela aura un impact sur chaque élément partageant ce style..
J'utilise cette fonctionnalité pour beaucoup de styles différents, comme l'état de saisie des erreurs et même mes trois boutons (le bleu, le noir et le blanc).
Les symboles sont une excellente fonctionnalité de Sketch que j'utilise beaucoup. Les symboles sont reconnaissables à leur dossier violet dans le Liste des couches que je n'ai pas ouvert dans mes captures d'écran. Pour basculer son point de vue, allez à Affichage> Afficher la liste des calques ou appuyez sur Commande + Option + 1.
Faisons aussi l'entrée que j'ai utilisée dans les styles partagés comme exemple pour Symbol. Commençons par en faire un groupe. Pour faire ça presse Commande + G.
Pour en faire un symbole, vous pouvez utiliser l'icône en haut à gauche de l'application Sketch. Vous pouvez également utiliser la même zone pour enregistrer un style partagé et enregistrer un groupe en tant que symbole. Une fois que vous faites cela, nommez-le.
Un symbole diffère des autres styles réutilisables en ce qu’il s’agit d’un groupe d’éléments que vous pouvez mettre à jour partout, au lieu d’un style unique comme la couleur du rectangle en entrée ou le style du texte de l’étiquette. Les symboles permettent d’espacer et de dimensionner ces éléments lorsque vous les réutilisez.
Une autre fonctionnalité intéressante de Symboles est que vous pouvez sélectionner l’élément de texte que vous souhaitez réutiliser textuellement, ce qui signifie que le texte reste le même, ou vous pouvez exclure la valeur de texte d’un élément de texte sélectionné. C'est une fonctionnalité incroyable que j'adore. Il serait inutile de réutiliser mes symboles d'entrée si je ne pouvais pas renommer l'un en «Prénom» et l'autre en «Nom».
Ces fonctionnalités vous aideront à créer vos propres guides de style dans Sketch. Téléchargez les fichiers source et jouez avec ce qui a été construit. J'ai hâte d'entendre vos suggestions d'amélioration! Et si vous recherchez plus d'inspiration pour travailler avec Sketch, jetez un coup d'œil à la catégorie Fichier Sketch sur Envato Market..
Accentsconagua