Quelques astuces pour gagner du temps sur Sketch
Pour mon premier article sur Medium je vais vous parler de mes astuces pour gagner du temps sur la production de maquettes sous Sketch.
Ces astuces découlent du bon sens, de la logique mais aussi des différentes méthodes qui circulent. (modular design, atomic…)
Sommaire :
1 Raccourcis
2 Rigueur
3 Factoriser
4 Conclusion
1 Les raccourcis
Inutile de les introduire, les raccourcis sont un gain de temps phénoménal dans sa création d’interface. Cependant rien ne sert de tous les apprendre, ici sur Sketch il suffit d’acquérir la logique du logiciel qui est très intuitive : « Je veux un rectangle, j’appuie sur R (de Rectangle…) !.
Voici donc les raccourcis simples que j’utilise le plus :
- A : artboard
- R : rectangle
- V : vector
- L : line
Là où ça devient intéressant, c’est pour les taches répétitives :
- CTRL+C : color picker
- CMD+clic : sélection directe du calque
- ALT+CMD+Flèche du bas : fermeture de tous les artboard dans le DOM
- CMD+N : nouveau document
Un très bon lien sur comment construire des raccourcis sous sketch : https://medium.com/@namba/collapse-artboards-and-groups-for-sketch-3-1-31ee8e784604
Si vous maitrisez l’ensemble de ses raccourcis, vous avez déjà gagné un temps conséquent lors de l’exécution des taches répétitives.
2 Rigueur
Au fil du temps et des maquettes, je me suis rendu compte qu’il n’existe pas de méthode magique pour devenir un dieu de la création d’interface. Chacun à ses tips, le mien est la rigueur ou « less is more ».
Partant du principe qu’une interface est un organisme vivant, il m’a fallut épuré au maximum mes styles pour n’avoir que l’essentiel et rendre le tout évolutif dans le temps.
Réduire au minimum l’utilisation de styles différents permet un énorme travail de simplification et assure une cohérence graphique à toute épreuve pour l’interface.
Sketch facilite grandement ce travail en créant des styles administrables et donc déployables à la volée partout sur le site. Il suffit donc de constituer des grandes familles et d’y inclure ces styles :
Titres
- H1/H2/Etc.
Liens
- Primaire / Primaire :hover /secondaire / secondaire :hover.
Textes
- Chapô/ content/ description / …
Attention à ne pas tout consigner dans les styles et produire l’effet inverse : trop de styles tue les styles, au même titre que les symboles il est parfois plus simple et rapide de partir from scratch que d’importer un symbole ;)
3 Factoriser
Ici nous parlons des blocs. Pourquoi chercher à tout reconstruire lorsqu’on peut trouver une solution simple et surtout permettant de garder la cohérence graphique à son maximum tout en étant flexible sur les évolutions?
Aujourd’hui il existe plusieurs méthodes dont l’atomic design mais celle-ci ne correspond pas à tous les projets. Ma méthode s’inscrit plus ou moins dans cette logique en étant beaucoup moins lourde à mettre en place :
A, Identifier tous les blocs transverses à vos maquettes !
Lors de la phase de wireframing, il est important d’identifier les blocs qui se ressemble au niveau du contenu et qui se répète. L’idée ici est de capitaliser sur la construction d’éléments similaires pour déployer autant de bloc que l’on souhaite en y ajoutant des variantes.
Par exemple : un bloc article contient une image, un titre, un lien et parfois une description. Cela tombe bien car nous avons aussi un bloc projet contenant sensiblement les mêmes éléments !
B, Produire les premiers blocs
L’ordre de construction des blocs s’établit naturellement en fonction des pages que l’UI/DA produit au début du projet. A savoir la homepage ou la fiche produit voir une page de contenu (et oui…) dans la majorité des cas.
Cette partie va permettre de donner l’intention générale graphique dans son contexte mais surtout d’acquérir l’ensemble des éléments graphiques pour construire nos blocs en série !
Par expérience, j’ai 90% de mes blocs sur les 2 templates que je décline au début du projet. Les autres éléments sont des variantes.
Pour reprendre l’exemple de notre bloc article. La première page que je vais décliner est la homepage dans laquelle se trouve un bloc de remontée d’actualités. Cette actualité contient bien une image, un titre, une description et un lien. Hors ça tombe bien, sur l’une des pages à produire, je dois construire un bloc projet. Je n’ai plus qu’à prendre mon bloc article, y inclure une variante (taille de l’image, tag..) et j’ai mon bloc projet.
C, Créer son catalogue
La dernière étape consiste à transformer en symbole l’ensemble des éléments transverses au site.
Pour reprendre notre exemple de bloc article, une fois transformé en symbole et appliqué partout, il me suffira de faire la modification une seule fois pour qu’il soit déployé sur l’ensemble des maquettes.
La boucle est bouclée,
Conclusion
Pour gagner du temps, pensez utile. Soyez organisé et le résultat n’en sera que plus convainquant et solide. Adoptez ce qui vous convient le mieux et n’oubliez pas que chaque projet a ses propres contraintes.
Il n’y a pas Une recette mais plusieurs !
