11 Astuces de prototypage avec Sketch

Si vous êtes designer, vous connaissez forcément Sketch, une application Mac idéale pour vos travaux de maquettage. Andy Orsow propose quelques astuces pour vous rendre la vie (encore) plus facile.

Par

L'équipe de Bohemian Coding a construit Sketch pour les designers qui conçoivent des produits pour le web, son utilisation pour le prototypage va donc de soi.

Voici quelques astuces qui vous rendront la vie plus facile et vous feront gagner du temps.

1. Dimensionner vos artboards

image

Ok, ce n'est sans doute pas la plus excitante des astuces de cette liste mais elle est utile et importante. Sketch offre un tas de d'artboards prédéfinis pour vous permettre de commencer. Tapez simplement A et choisissez l'artboard dont vous avez besoin.

2. Utiliser une grille

image

Avec Sketch, la création de mise en page est facile. Allez sur View>Layout Settings pour configurer votre mise en page ou bien faites Ctrl+L pour voir votre layout par défaut.

3. Dupliquer en un clin d'oeil

image

J'ai utilisé cette astuce pendant longtemps avec Illustrator, elle existe aussi dans Sketch. Si vous appuyez sur Option puis que vous cliquez/déplacez un élément, celui-ci est copié. Une fois que vous l'avez mis en place, faites simplement Cmd+D pour reproduire l'opération autant de fois que nécessaire.

Remarque : si ça ne fonctionne pas comme montré dans l'illustration, allez dans Préférences>Layers et décochez Offset pasted & duplicated objects.

4. Mesurer les distances

image

Pour réaliser de belles choses, il faut être attentif à tous les détails. On peut mesurer la distance séparant un élément des autres en le sélectionnant et en cliquant Option. Préparez-vous à devenir obsessionnel.

5. Utiliser les styles partagés

image

Vous en êtes à votre 100e écran et on passe en revue le design pour la 3e fois, la ligne d'arrivée est en vue. Et là, votre client vous dit “est-ce qu'on ne pourrait pas changer la couleur de tous les boutons en bleu ?”

Vous ne renversez pas la table, vous dites simplement “oui” — parce que vous utilisez les styles partagés (Shared Styles) sur tous les boutons. Lorsque vous créez des éléments d'interface utilisateur que vous utiliserez abondamment dans le design, donnez-leur un style en cliquant sur No Shared Style puis Create New Shared Style et donnez-leur un nom facile à mémoriser.

6. User et abuser des symboles

image

Les symboles sont vraiment très utiles, et j'ai tendance à en abuser. Si vous avez un écran complexe comprenant tout une série d'états, faites un symbole de ce qui constitue la base intangible, puis dupliquez l'artboard pour créer vos versions alternatives. De cette façon, si vous devez mettre à jour quelque chose dans la base (par exemple le header) vous n'aurez pas à modifier chaque version une par une : la modification d'une seule version entraîne celle de toutes les autres.

7. Déplacer les formes tout en les dessinant

image

Cette astuce est très pratique. Lorsque vous dessinez une forme (par exemple un cercle) il est difficile de la placer en même temps exactement où il faut. Mais si vous appuyez sur la barre d'espace tout en dessinant, vous pouvez déplacer votre forme en même temps que vous la créez et continuer à la dimensionner avant de la valider.

8. Changer l'opacité à la volée

image

Cela fonctionne comme dans Photoshop, mais beaucoup de gens l'ignorent encore. Utilisez les touches de nombres (1-0) de votre clavier pour régler le niveau d'opacité par intervalles de 10%.

9. Conserver les proportions avec “Scale”

image

Nous faisons tous des erreurs. Admettons que vous ayez créé un bouton, mais beaucoup trop grand. Vous avez un border radius de 20px et un contour de 4px. Si vous déplacez le coin du bouton pour le faire rétrécir, le résultat ne sera pas celui que vous attendez. À la place, cliquez sur l'icône Scale et redimensionnez en gardant les proportions.

10. Maximiser votre espace de travail

image

On travaille parfois sur un écran réduit, et Sketch, comme toute autre application, peut être difficile à utiliser.Pour cacher les panneaux de gauche et de droite, appuyez sur Ctrl+Option+Cmd+3. Ou bien Cachez / Affichez les panneaux gauche et droit à l'aide de Ctrl+Option+Cmd+1 et Ctrl+Option+Cmd+2.

11. Déposer vos fichiers dans InVision

Vous pouvez déposer vos fichiers Sketch dans InVision pour transformer automatiquement vos artboards en écrans. Si vous voulez exclure un certain artboard ou une page en particulier, ajoutez simplement un signe moins devant le nom du calque ou de la page, de la façon suivante : “-modal exploration”.

Ça a l'air trop simple ? Voici la preuve


Intéressé par Sketch ? Retrouvez une liste des meilleurs articles et ressources du web.

Retrouvez tous les articles de la Cascade consacrés à Sketch !


original paru le dans Le blog d’InVision.

Sur l'auteur : est designer chez InVision, spécialiste des Gif et de la vidéo. On peut le suivre sur Twitter.

Traduit avec l’aimable autorisation de InVision et de l’auteur.
Copyright InVision © 2015.