Update : Aujourd'hui nos équipes utilisent et conseillent l'outil Figma. Des maquettes au design system, c'est l'outil le plus complet que nous avons testé jusqu'ici. Si vous voulez en savoir plus sur notre utilisation de Figma, notamment pour la création d'un design system, nous vous conseillons cet article : Créer un design system adapté à chaque client quand on est une agence.

‍

Vous êtes un designer UX/UI aguerri. Photoshop et Illustrator sont vos armes, et vous les maîtrisez à la perfection. Vous produisez des écrans, des icônes, des wireframes... en un rien de temps, et vous vous demandez : pourquoi changer ? Pourquoi sacrifier mon efficacité et mes workflows bien rodés au profit d'un nouvel outil, qu'il faudra apprendre et apprivoiser, pour finalement produire les mêmes choses ?

Je me suis dit la même chose lorsque l'on m'a parlé de Sketch pour la première fois. Photoshop et Illustrator répondaient à tous mes besoins, et même si je n'étais pas contre l'idée d'ajouter un outil à mon portefeuille, les éloges qu'on m'en avait fait n'avaient pas été assez convaincants pour me pousser à sauter le pas.

Tout a changé il y a deux semaines, lorsque BAM nous a procuré une licence Sketch. En quelques jours d'utilisation, j'étais conquise. Pourquoi, me demandez-vous ? Voici (mes) 10 bonnes raisons de passer à Sketch.

Raison #1 :Tout vectoriel et non destructif

Sketch est avant tout un outil vectoriel, ce qui veut dire qu'un élément peut prendre toutes les tailles sans perte de qualité. A l'ère du numérique et des résolutions d'écran multiples, c'est un véritable avantage de pouvoir faire ses maquettes sans avoir à se soucier des dimensions finales.

Mais le vectoriel, ce n'est absolument pas nouveau, et Illustrator le fait déjà très bien, me direz-vous. Certes, mais avec Sketch, je peux modifier toutes les propriétés d'une forme (jusqu'au rayon de courbure d'un coin et aux effets de flous appliqués) à la volée, directement dans l'inspecteur, ce que ni Photoshop ni Illustrator ne permettent. Plus besoin de détruire la forme puis la recréer, un vrai gain de temps !

Raison #2 : Canvas infini, nombre d'écrans infinis

Le canvas de Sketch est infini, et peut contenir une infinité d'artboards, ce qui veut dire qu'il est facile de centraliser toutes ses maquettes d'écran dans un seul et même fichier, même sur des projets très ambitieux. En comparaison, le canvas d'Illustrator a une taille pré-definie et ne peut contenir plus d'une quinzaine d'artboards sans voir ses performances souffrir un gros coup.  Photoshop a incorporé un canvas infini en 2015, mais Sketch va une étape plus loin en proposant aussi des pages, chacun contenant son propre canvas infini et ses propres artboards, pour d'avantages de flexibilités d'organisation.

Raison #3 : La fonction d'export, si simple, si efficace

Il s'agit d'une des fonctions les plus magiques de Sketch. Grâce à elle, je peux exporter un même asset en différentes dimensions en quelques clics seulement ! Et cela qu'il s'agisse d'un écran entier ou seulement d'une sélection donnée - icône, bouton, header... : il suffit de cliquer sur "make exportable" tout en bas de l'inspecteur, de choisir la résolution et le format d'export, et c'est fait !

Raison #4 : Prévisualisation facile et rapide avec Mirror

Sketch met gratuitement à disposition Mirror, un outil de prévisualisation rapide. Installez l'application sur votre iPhone, et vérifiez immédiatement le rendu de vos écrans directement sur votre device. Parfait pour les mettre en situation le plus rapidement possible ! Mirror marche aussi dans votre navigateur, si vous êtes sur le même réseau local.

Raison #5 : Des symboles pour rester cohérent

Rester visuellement cohérent pour offrir une meilleure expérience utilisateur : c'est le combat de tout designer UX / UI. Et c'est extrêmement simple avec les symboles. N'importe quel élément (icône, menu, header, ou écran complet) peut ainsi devenir un symbole, reproduisible à l'infini, et dont la manipulation du master affecte immédiatement toutes les autres instances du même symbole. Cerise sur le gâteau : les champs de textes facilement remplaçables et la possibilité de hiérarchiser les symboles en ajoutant simplement un '/' dans leur nom.

Raison #6 : Les opérations booléennes intelligentes

Lorsque j'ai découvert les opérations booléennes sur Illustrator, je crois bien que j'ai pleuré (bon j'exagère, mais ça a changé ma vie !). Mais j'ai toujours été frustrée de leur irréversibilité : une fois une opération booléenne faite, impossible de revenir dessus de manière simple. Avec Sketch, plus de soucis : la forme résultant de l'opération conserve les formes d'origine, qui peuvent alors être changées, déplacées etc? pour modifier la forme finale. On peut même changer l'opération booléenne appliquée, voire la supprimer !

Raison #7 : Une précision mathématique

Les champs position et dimension des formes sur Sketch comprennent les opérations mathématiques simples : + - * /, et même le pourcentage. On peut ainsi placer de manière précise un élément, ou le mettre à la bonne taille simplement. Petit plus : des formes groupées prendront la taille globale du groupe (et non de l'écran) comme base pour calculer un pourcentage. Faire une icône dont la hauteur soit 50% du bouton dans lequel il est placé, qui lui même fait 60% de la largeur de l'écran, c'est maintenant possible !

Raison #8 : L'accès direct aux couleurs

Sur Sketch, la pipette nous permet de récupérer une couleur exacte au pixel près, n'importe où dans l'écran, même en dehors du logiciel. Que dire de plus ?

Raison #9 : Des flous gaussiens simples comme bonjour

Avec l'arrivée d'iOS 7, la nouvelle mode c'est d'appliquer un flou gaussien sur une portion de l'arrière plan. Un effet que je trouve des plus beaux, et des plus fastidieux à réaliser sur Photoshop. Il faut dupliquer l'image d'arrière plan, faire une forme, faire un masque d'écrêtage, et ajouter un filtre qui prend une éternité à s'appliquer et qui ralentit tout le logiciel. Sketch fait tout cela en une simple option dans l'inspecteur, sans trop de répercussions sur les performances - à condition de ne pas en mettre à tout va !  

Raison #10 : L'intégration facilitée pour les développeurs

Chez Bohemian Coding (les créateurs de Sketch), ils ont compris qu'un designer travaille très souvent avec des développeurs, et ils ont pensé à eux. Sketch offre ainsi la possibilité d'exporter simplement le CSS d'un élément voire d'un écran entier. Sketch dispose également de tout un écosystème de plug-ins et d'outils supplémentaires qui permettent de simplifier le workflow d'intégration des développeurs, comme par exemple Zeplin, qui leur permet de lire simplement les dimensions et les couleurs des éléments.

Bonus round si vous n'êtes toujours pas convaincu :

Raison Bonus #1 : Le Prix

La licence Sketch ne coûte que 99$. Si vous vous arrêtez là, vous aurez Sketch pour la vie mais sans ses mises à jour, sinon, comptez 99$ par an pour profiter des dernières versions de Sketch.

En comparaison, un abonnement Creative Cloud pour un logiciel de la Suite Adobe vaut environ 287? l'année, et il est obligatoire sans quoi le logiciel est bloqué. Si vous voulez faire des économies, le choix est vite fait.

Raison Bonus #2 : La légèreté

Sketch est bien plus léger que les logiciels de la suite Adobe : l'application prend 47,5 Mo de mémoire sur le disque alors que Photoshop en prend 2,11 go. De même, elle est bien plus économe en mémoire vive : en ayant les deux applications ouvertes avec un artboard vide, Sketch prend 98 Mo contre 661 pour Photoshop.

Raison Bonus #3 : La facilité de prise en main

J'ai ouvert Sketch pour la première fois il y a deux semaines. En moins d'une journée j'avais trouvé mes repères, en moins de deux, j'étais aussi productive que sur Photoshop ou Illustrator. L'interface de Sketch est extrêmement intuitive, surtout grâce à l'inspecteur qui rassemble l'ensemble des propriétés modifiables d'un élément, ce qui permet un temps d'apprentissage très court, malgré la logique de fonctionnement assez différente des logiciels de la suite Adobe (notamment au niveau des raccourcis)

Tout n'est pas rose dans le meilleur des mondes

Comme tout outil, Sketch a ses limites. Déjà, il n'est disponible que sur Mac, ce qui est très dommage. Et c'est un outil qui est vraiment et résolument conçu pour le design d'interfaces - ce qui est à la fois sa force et sa faiblesse. Il ne remplacera ainsi jamais Photoshop en traitement de l'image, ni Illustrator sur certaines applications vectorielles (je trouve notamment son outils plume - ici nommé vecteur - un peu moins performant, même s'il ne s'agit peut-être que d'une question d'habitude). Et pour finir, il semble que Sketch souffre encore de quelques bugs et de quelques soucis de stabilité, même si l'équipe de Bohemian Coding est très à l'écoute et réactive quand il s'agit de les régler.

Sketch est, selon moi, une combinaison du meilleur de Photoshop, d'Illustrator et même de Keynote, conçue et pensée pour le design d'interface, ce qui en fait un outil redoutablement efficace - voire indispensable - pour tout designer. J'espère que les raisons que j'ai citées aujourd'hui vous feront au moins télécharger la version d'essai, afin que vous vous fassiez une opinion personnelle de la chose - mais je ne doute pas que vous trouverez assez vite vos propres X bonnes raisons de passer à Sketch !

Vous avez aimé cet article ?

Venez discuter de Sketch et de design UX avec nous !