Bien organiser ses styles sur Sketch
Dans la logique de création d’interfaces, nous avons tous été un jour confronté à nos propres problématiques de styles de texte. A force d’itérations, de déclinaisons, maintenir une bibliothèque de styles relève du défis permanent.
Sommaire
1 — Classer ses styles
2 — Adopter des noms qui vous parlent
3 — Conclusion
1 Classer ses styles
Les styles sous Sketch sont organisés dans les propriétés de texte. Avant de voir comment bien organiser de manière simple et intuitive ses styles, regardons comment créer un style de texte, puis, lui assigner une hiérarchie.
Créer un style de texte
- 1 Insérer un texte de votre choix puis modifier le via les propriétés de texte.
- 2 Aller dans la zone prévue pour les styles de textes au dessus du typeface (avec le placeholder suivant : No text style) et cliquer dessus.
- 3 Terminer l’opération en cliquant sur « create a new text style »
- 4 Vous venez de créer votre premier style de texte !
Cette opération s’avère être chronophage mais ôh combien efficace pour la suite. Automatiser vos styles (textes, calques etc.) c’est s’assurer un gain de temps énorme pour la suite de votre projet. Gain de temps que vous pouvez utiliser sur d’autres problématiques !
Hiérarchiser vos styles
Pour organiser et ranger vos styles sur Sketch, il vous faut créer une sorte d’arborescence :
VOTREGRANDEFAMILLE/NOMDEVOTRESTYLE
Une fois votre création de style bien avancée, il faut classer. Cela évite d’avoir un ensemble de style de texte confus, long à utiliser et finalement de perdre du temps là où l’on est censé en gagner.
La méthode qui suit n’est pas l’unique solution, encore une fois, chacun adapte en fonction de son mode de réflexion !
Classer par grande famille
Mon classement se veut logique, à la manière d’une maison, chaque élément à sa propre spécificité mais appartient aussi à sa famille (électricité, plomberie etc.)
Ici, c’est pareil. Votre interface est une maison et vous en êtes le bâtisseur.
a) Observer
L’ensemble du contenu de votre site possède des éléments plus ou moins commun et décliner partout. Nous pouvons y retrouver :
- Les titres
- Les liens
- Les textes de descriptions
- Les citations
- Les légendes
- Les libellés des formulaires
- Les dates
- Les tags
- …
b) Trier
Chaque élément a une fonction précise. Un titre par exemple, a une fonction de hiérarchisation et d’information alors qu’un lien, lui, a pour fonction de diriger l’action vers un autre élément. De ce fait, nous allons regrouper de manière GÉNÉRALE et par sens commun le contenu de votre interface :
- TITRES
- CONTENU (au sens large, tout ce qui relève du texte, page de contenu etc.)
- LIENS
- CTA
- FORMULAIRE
- …
c) Organiser
Une fois vos grandes familles en place, il vous faut encore organiser ce que vous allez y mettre. A savoir que Sketch classe en ordre alphabétique.
- TITRES
___01 XXL
___02 XL
- CONTENU (au sens large, tout ce qui relève du texte, page de contenu etc.)
___Chapô
___Citation
___Texte principal
- LIENS
___Primaire
___Secondaire
- CTA
___Primaire
___Secondaire
___Tertiaire
- FORMULAIRE
___Libellés
___PlaceHolder
Astuce : pour conserver l’ordre d’importance dans Sketch, utilisez les chiffres. Par exemple : 01-XXL , 02-XL, ils apparaîtront par ordre croissant
2 Adopter des noms qui vous parlent
Pour moi, ce n’est jamais évident de nommer un style de texte de manière à ce qu’il corresponde directement à son usage. Dans une logique de gain de temps, il faut rationaliser, aller à l’essentiel : un lien reste un lien, il n’y a que des niveaux de priorités.
Les TITRES font partis de cette famille nombreuse où leurs classifications posent souvent problème :
- Est ce que je dois nommer mon titre H1 car sur la homepage et la page intérieur, ils n’ont pas le même style ?
- Est ce que je dois nommer mon style, Titre de bloc, mais là encore, quel bloc ? Au bout du compte, se retrouver avec Titres/bloc1,2,3,lames,etc.
Et pourquoi pas conserver l’ordre de hiérarchisation mais brutaliser son appellation par un langage fort en signification : les tailles de vêtements !
Au même titre qu’un XXL sera différent d’un S, la logique s’applique aux titres. Un titre important, avec un impact conséquent sera traité en XXL alors qu’un titre voir sous titre sera traité en S.
Plus besoin de savoir où va ce titre et dans quel cas doit-on l’utiliser. Ici on se concentre sur l’importance du sens du titre.
- XXL
- Xl
- L
- M
- S
- XS
= 6 niveaux de titres !
Nous ne sommes pas obliger de prendre les 6, parfois 4 suffit :
XL/L/M/S
3 Conclusion
Être organisé et adopter cette logique de classement prend du temps mais reste vitale pour le bon déroulement d’un projet. Commencer au plus tôt sa mise en place permet un gain de temps futur et une pérennité de vos styles contre les itérations ;)