Sketch vs Photoshop. Confessions d’un UI Designer.

Juin 30, 2017

L’objectif de cet article est de vous présenter un nouvel outil de conception graphique apparu depuis peu : Sketch. Avant toute chose, je tiens à préciser que je ne suis pas actionnaire dans la start-up qui se cache derrière Sketch.

cover-sketch-photoshop

En 2017, pourquoi les UI designers utilisent (encore) la Créative Cloud ?

J’utilise la Creative Suite depuis la version 5.0 de Photoshop. J’ai pu suivre l’évolution de ce logiciel et depuis quelques temps je ressens un sentiment étrange :  Photoshop ne correspondait plus tout à fait à mes attentes d’UX/UI designer. J’entendais parler de Sketch mais je me disais que ça ne ferait pas « le job » aussi bien que mon fidèle ami Photoshop. Mais ça c’était avant ! La bascule s’est faite dans le cadre d’une mission où j’intervenais en « team » avec un UX designer. Nous étions face à un problème de taille : nous devions itérer très rapidement sur un grand nombre d’écrans.

L’utilisation d’un outil commun UX/UI designer

Dans un premier temps l’UX designer produisait les wireframes sur son outil de prototypage, ensuite venait mon intervention UI avec Photoshop. Sauf qu’avant de pouvoir passer « en créa » le « wireframe » je passais du temps (trop) à recréer les éléments dans Photoshop. Le constat était simple et sans appel : l’utilisation de deux outils ralentissait notre delivery. La solution sous-jacente : l’utilisation d’un outil commun, mais une question persistait encore : lequel ?

Deux solutions s’offraient à nous : utiliser Photoshop ou Sketch. Notre choix s’est naturellement porté sur la seconde pour une raison simple : la montée en compétence d’une partie du binôme (en l’occurence moi l’UI designer) sur Sketch serait plus rapide (et plus naturelle) que la montée en compétence de l’UX designer sur Photoshop. Ce choix s’est avéré payant car notre delivery a atteint une vélocité plus importante. Depuis entre Sketch et moi, une histoire d’amour est en train de naitre… 

Les 10 raisons pour lesquelles Sketch est devenu mon compagnon

1/ Sketch opte pour le Less is more en terme d’interface

sketch-3-4-material-design-icon

Ma première impression m’a déconcerté. Habitué à la richesse de l’interface de Photoshop, j’ai trouvé Sketch un peu « cheap« . Ne vous laissez pas détourner par l’épure des fonctionnalité, vous vous y ferez très (très) vite. En tant qu’UI designer, nous sommes habitués à des interfaces logicielles avec beaucoup de palettes d’outils. L’interface est épurée et c’est là que réside sa force. Nous avons juste le « minimum vital » pour designer nos interfaces.

Je vois deux avantages à cela :

  • Le premier : plus de surface pour designer. Fini les palettes d’outils qui viennent par-dessus vos plans de travail.
  • Le second : sa facilité de l’apprentissage : peu d’outil, donc une prise en main très rapide. 

2/ Un outil commun UX/UI

Sketch_collab

Selon moi, l’intérêt majeur de Sketch est qu’il offre la possibilité de s’utiliser dans le workflow UX/UI. UX designer et UI designer ont (enfin) un outil commun qui permet à chacun de continuer à travailler sur ses problématiques. L’UX travaille la conception : par exemple, il produit une V01. L’UI part de cette version pour créer une V02. Et ainsi de suite selon le nombre d’itérations. Mais qui dit travail collaboratif dit également organisation.

Ensemble, nous avons mis en place une nomenclature précise pour optimiser le partage des fichiers. Un conseil de nomenclature : date_nomdefichier_versionXX. Chaque nouvelle itération correspondant à une nouvelle version. Pratique et redoutable d’efficacité !

4/ Sketch utilise la langage mac de manière native

Natif, vous avez dit natif ? Je vous épargne les considérations trop techniques : retenez que Sketch est natif MacOS. Ainsi, il est d’une rapidité d’exécution impressionnante.

Autre avantage, il embarque des fonctions gratuites d’iOs comme le versionning, la sauvegarde auto, un rendu des fonts (hyper) précis. Toutes les opérations sont non destructives : les combinaisons et transformations de formes vectorielles sont réversibles. Pratique !

5/ La richesse des plugins et une communauté active

1-OdxoqLP-NvjW_7EhDof-Hg

La communauté derrière Sketch est très nombreuse et très active. Par exemple, l’ajout des symboles apparu dans la V03 a vu le jour grâce à des feedbacks d’utilisateurs.

Et chez UX Republic, nous apprécions quand les éditeurs de logiciel sont centrés sur l’utilisateur et non le produit. Sketch a d’abord été un MVP (Minimum Viable Product). Son équipe, à l’écoute de ses utilisateurs,  développe les futures updates. Une approche que nous pratiquons en UX et qui a de nombreux avantages : le logiciel évolue en fonction des besoins et des usages des utilisateurs.

https://www.sketchapp.com/extensions/plugins/

6/ L’exports des assets

zeplin

La production des assets devient facile et rapide grâce au plugin Zeplin. Cet outil est partagé entre vous et les développeurs. Tous vos assets seront générées et exploitables par l’équipe de devs.

7/ Sketch + Zeplin et Slack

Zeplin peut se plugger à Slack. Ainsi, toute l’équipe peut suivre en temps réel les exports d’assets. Je vous explique le principe : une fois un écran finalisé, je fais un export sur Zeplin. Une notification apparait dans le Channel #design de l’équipe de développement. Ainsi, les risques d’erreurs liés au versionning sont quasi nuls. Le gain : du temps en plus et des erreurs en moins.

8/ Un outil à un prix attractif

Une licence à 99$, oui vous avez bien lu ! C’est plus qu’attractif comme prix par rapport à une licence Adobe.

9/ Full vectoriel & css

Une des forces de Sketch est également son approche 100% vectorielle : pratique, simple et rapide. De la même manière, sketch est conçu pour créer des UI : tout, ce vous designez, est réalisable en HTML/CSS. Une fonctionnalité de générateur de codes est d’ailleurs disponible.

10/ Sketch mirror

mirror-png8

Comme son rival, Sketch a développé un visualisateur sur iPhone : Sketch Mirror. C’est un outil indispensable pour le design mobile.

Encore un dernier argument

Enfin, j’apprécie tout particulièrement les symboles. Peut être parce qu’is me rappellent les movie clips dans Flash ou les objets dynamiques pour Photoshop. Encore une fois, ils sont plus simples, plus pratiques, plus légers qu’un produit de la Suite Adobe.

layers@2x

Pour finir de vous convaincre

Malgré son jeune âge, Sketch a tout d’un grand (ou presque). Ses évolutions régulières laissent prévoir un mode collaboratif plus avancé où UI & UX pourraient travailler en même temps sur le même fichier. Si vous avez apprécié cet article, je vous invite à consulter cet article qui est un très bon complément à celui-ci. et qui corrobore cette tendance que nous observons dans nos différentes missions chez UX Republic. Et vous, qu’en pensez vous ? Discutons en sur@ux-republic

Sketch vs. Photoshop: The 5 things Sketch can do that Photoshop can’t

Jérôme Fiorese, UX-Activist @jerome  

 

UX-REPUBLIC est une agence spécialisée en conception centrée utilisateur. Nous sommes également centre de formation agréé. Retrouvez toutes nos formations en UX-DESIGN sur notre site training.ux-republic.com

 

6 Comments. Leave new

« Apparu depuis peu »… 🤔

Répondre
Stéphane Cruchon
30 juin 2017 22 h 22 min

Sketch est en effet un outil incroyable.
Adobe est en train de tenter de rattraper son retard avec Adobe XD qui permet de designer et prototyper au sein du même logiciel (l’équivalent de Sketch + Craft + Invision). Sur le long terme, la compatibilité Mac / PC d’Adobe XD risque bien d’ébranler quelque peu la domination de Sketch sur le Design UI.

Répondre

Tout à fait d’accord !
Sketch c’est la vie surtout grâce au plugins incroyable comme craft pour n’en citer qu’un !
Une infos à rajouter je pense,
La creation de fichier sketch à dépasser le nombre de creation de fichier Photoshop en 2016 !

Répondre

Hello,
Merci pour cet article.

La question ne se pose plus pour moi depuis fin 2016. Toutes les équipes avec qui je travaille fonctionnent avec Sketch. Un peu dur de réapprendre une nouvelle logique et un nouveau soft après toutes ces années avec PS mais le jeu en vaut la chandelle. A vrai dire, le plus appréciable est la légèreté de ce soft et sa connectivité avec des apps tierces qui viennent faciliter la vie des designers. Tu as cité Zeplin, c’est un super outil pour la collaboration design/dev. Quand un projet contient un grand nombre d’écrans, je conseillerais de renseigner au maximum les tags sur chaque écran. Ça devient très facile ensuite de rechercher un élément. Sinon c’est un peu le bazar.

Pour le maintien et l’organisation des sources design, je vous recommande fortement de tester Abstract.
https://www.abstractapp.com/
Un soft qui permet de versionner les fichiers Sketch. Il se basé sur la logique de branches et de commits de GitHub. Tout est constamment sauvegardé, il est possible de revenir à N version du fichier en arrière. Hyper pratique quand on bosse en nombre sur un produit complexe.
Nous l’avons mis en place dans notre process entre plusieurs équipes de design réparties dans le monde et ça change la vie.

Répondre

11/ La gestion des symboles et des overrides.
12/ Le plugin Craft de InVision: https://www.invisionapp.com/craft
13/ Le plugin Autolayout de Anima App: https://animaapp.github.io

Ces trois outils (un natif, deux sous la forme de plugins) bossent réellement Sketch et en font un outil encore plus puissant.

Répondre

Merci pour cet article :)
J’ajouterais que la gestion des symboles est un vrai plus dans Sketch (même si photoshop a les objets dynamiques…) et que j’adore son approche du responsive !
Les différents artboards dans un même espace de travail, les symboles à contenu variable, le positionnement des éléments imbriqués… tout ça renvoie photoshop à ce pourquoi il a été conçu : la retouche photo :)

Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *