Sketch a su s'imposer comme le logiciel idéal pour le design d'interfaces. Comment utiliser son potentiel au maximum et en faire un outil efficace.

1. Sketch pour les designers
Pourquoi, quand et comment l’utiliser

2. Ces dernières années, Sketch a su
s’imposer comme le logiciel idéal pour du
design interfaces.
L’objectif de ce document est de
comprendre pourquoi l’utiliser, dans quels
cas et comment en faire un outil efficace et
collaboratif pour trouver le meilleur
workflow possible.
INTRODUCTION

3. 1. Les avantages
1. Les limites
1. Les bonnes pratiques
SOMMAIRE

4. LES AVANTAGES

5. FACILE À PRENDRE EN MAIN
L’interface est simple et le logiciel est peu
coûteux. On est loin des usines à gaz que
sont Axure, Photoshop ou Illustrator ce qui
permet à différents profils de pouvoir
manipuler les fichiers :
→ Un PO peut faire des tests d’évolutions
→ Un rédacteur peut faire des
modifications de textes directement dans
les maquettes
→ Un dev peut aller chercher ses découpes
lui-même
...

6. UNE APPROCHE PAR COMPOSANTS
Ce logiciel est parfait pour une approche
par composants :
● Chaque composant est transformable
en symbole et son comportement
responsive peut être spécifié (fixe,
fluide etc…)
● Possibilité de créer un style guide sur
une page, directement dans le fichier
Sketch et de piloter les modifications
de composants depuis ce style guide
Un style guide dans mon fichier Sketch

7. LA FACTORISATION DU DESIGN
Sketch permet de faire un élément une
seule fois et de le faire évoluer au fur et à
mesure du projet. Chaque partie de
l’interface peut être factorisée et ré-utilisée.
● Les composants peuvent être
transformés en symboles que l’on
peut rendre paramétrables grâce à la
fonctionnalité d’override
● Les Styles partagés permettent de
définir une seule fois une couleur ou
un style de typos.
Symboles paramétrables
Styles de couleurs Styles de typos

8. LES LIBRAIRIES PARTAGÉES
Les librairies partagées permettent de
centraliser tous les éléments visuels du
projet et de garder une cohérence, même
lorsqu’on travaille à plusieurs designers.
● Lingo et Zero height par exemple
proposent de stocker tous les
composants en les classant et de
pouvoir les utiliser directement dans
les fichiers
● Sketch propose aussi maintenant une
librairie partagée qui permet de
savoir lorsqu’un composant a changé
et d’appliquer la modification partout.
La librairie native de Sketch
Comparatif des bibliothèques partagées
Voir cet article

9. VERSIONING DE FICHIERS
Nous sommes de plus en plus amenés à
travailler à plusieurs profils (designers UX,
UI, Créas, PO, Dev…) sur les mêmes fichiers.
Grâce à des logiciels comme Abstract il est
maintenant possible de faire du versioning
de fichiers afin que tout le monde parte
toujours de la dernière version !
À surveiller : Figma qui propose également
du travail collaboratif (et XD qui devrait
suivre) Abstract : outil de versioning pour repartir
toujours du fichier le plus à jour

10. PROTOTYPER RAPIDEMENT
L’autre intérêt de Sketch est de pouvoir
prototyper très rapidement via le plugin
Craft qui crée automatiquement un
prototype invision.
Il existe également d’autres plugins de
prototypages :
● Launchpad qui transforme un fichier
sketch en html
● Mirr.io qui permet de prototyper
directement dans Sketch sans passer
par invision
Protoypage rapide avec Craft

11. PASSAGE EN DEV FACILITÉ
La façon de construire les interfaces avec
Sketch se rapproche énormément de la
façon de penser d’un développeur, ce qui
facilite le passage en dev.
On notera également :
● Des découpes multi-plateformes des
assets en quelques clics
● Des spécifications graphiques
simplifiées avec des logiciels comme
Inspect (en passant toujours par le
plugin Craft), Sympli, Zeplin...
Des specs facilement récupérables par les dev

12. DES PLUGINS À GOGO
Vous n’arrivez pas à faire quelque chose
dans Sketch ? Hé bien quelqu’un a
sûrement déjà créé un plugin pour vous !
En voici quelques uns :
https://medium.com/ux-power-tools/the-
ux-designers-best-companions-for-sketch-
2d6cd3c10534
Sinon ils sont tous référencés là :
https://www.sketchapp.com/extensions/pl
ugins/
Sketch Toolbox permet de gérer facilement
l’installation et la désinstallation des plugins Sketch

13. LES LIMITES

14. MAC ONLY
Et oui, c’est un des grands points noirs de
Sketch ; il ne s’adresse qu’aux designers
travaillant sur le système Mac…
Cela peut poser problèmes, notamment si
certaines personnes de l’équipe sont sur
Windows ou si un client veut pouvoir ouvrir
les fichiers sources...

15. GESTION DU TEXTE
La gestion du texte sur Sketch est
beaucoup moins fine que sur des logiciels
comme In design ou Illustrator par
exemple.
L’équipe de Sketch explique bien les soucis
que leurs posent la gestion de la typo dans
cet article.
La gestion du texte peut paraître simpliste comparé
à des logiciels de mise en page classiques.

16. PROTOTYPAGE POUSSÉ
Sketch n’est pas adapté pour du
prototypage poussé (micro-interactions,
transitions complexes etc…).
En fonction de l’objectif du prototype, on
préférera passer par Axure ou encore par
les très bons logiciels Principle, Flinto ou
proto.io.
Et pour des prototypes exportables ensuite
en code, on privilégiera Framer.js
On doit toujours adapter l’effort à l’objectif du prototype
Article

17. ARBORESCENCE
Il est parfois plus difficile sur Sketch d’avoir
une bonne vision de l’arborescence.
Afin de conserver une vision d’ensemble il
est toutefois possible d’utiliser le plugin
Userflow.
Arborescence sur axure

18. DESIGN COLLABORATIF
Il n’est pas encore possible de travailler à
plusieurs sur le même fichier Sketch et de
voir en live les modifications des autres
designers.
On attend beaucoup du plugin Picnic dont
c’est la promesse et pour ceux qui ne sont
pas patients, il est également possible de
se mettre au logiciel Figma dont c’est le
gros point fort.

19. LES BONNES PRATIQUES

20. ON RÉFLÉCHIT AVANT DE SE LANCER
Oui, Sketch est facile à prendre en main
mais ce n’est pas une raison pour se jeter
sur le logiciel dès le début du projet…
Donc on n’oublie pas :
- Des sketchings pour dégrossir
rapidement la demande
- La cinématique pour définir le
parcours
- Des zonings ou des wireframes pour
affiner le besoin
Le prototype papier : indispensable avant de se lancer !!

21. LES PAGES
Les pages permettent de structurer le
fichier. Il existe plusieurs approches :
- Une page par sprint
- Une page par fonctionnalité clé
- Une page par parcours
- ...
De mon côté, je préfère lorsque c’est
possible d’avoir une seule page “design”
avec tous les parcours (pour garder la
vision d’ensemble) puis une page “Style
Guide” et une page “Assets”.
Attention : la page “symboles” que Sketch créé automatiquement
devient vite le bazar, même quand on essaie de la ranger
régulièrement. Il est possible d’organiser cette page avec le plugin
Symbol Organiser

22. LES SYMBOLES
Les symboles permettent de factoriser son
design. Bien conçus, ils peuvent être
responsives et dynamiques (overrides de
textes, d'icônes, de couleurs etc...)
Bonnes pratiques :
- Bien nommer ses symboles
- Mettre des “/” dans le nom pour créer des
dossiers
- Faire un symbole le plus intelligemment
possible au vue de ces potentielles
réutilisations
Les bonnes pratiques des symboles

23. LES CALQUES
Les fichiers sont rarement manipulés par
une seule personne. Le but est donc que
n’importe qui puisse en comprendre la
structure.
Les calques doivent être :
- Bien nommés
- Bien rangés
- Groupés
Il est également possible de faire une
recherche parmis les calques pour les
sélectionner rapidement.

24. LES RACCOURCIS SONT VOS AMIS
Afin d’aller plus vite, il est utile de passer
par les raccourcis clavier.
Les principaux raccourcis à connaître
Tous les raccourcis Sketch

25. ET EN BONUS...
Pleins de ressources (plugins, icons,
kits…) pour bien débuter :
http://sketch.fordesignrs.com/
Et des vidéos pour se former :
http://learnsketch.com/tutorials

26. Audrey Hacq - Octobre 2017