Bien organiser ses styles sur Sketch

4 min readJan 26, 2018

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.

= 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 ;)