Sketch vs. Photoshop, un problème plus fondamental

Crédit photo : Aleks Dorohovich

Il y a peu de temps est sortie la version 2 de l’application Sketch. Si vous ne connaissez pas Sketch, il s’agit d’une application professionnelle de design vectoriel. Elle est notamment très en vogue dans le domaine du UI Design.

Le titre de ce billet est « Sketch vs. Photoshop » mais je ne veux pas directement faire une comparaison des fonctionnalités, ou tenter de vous convaincre d’utiliser Sketch au lieu de Photoshop pour vos designs d’interfaces. Je veux d’abord parler d’un sujet un peu plus « métier », sur le problème les livrables demandés par et envoyés aux clients. Après tout, on travaille pour des clients qui veulent quelque chose en retour d’une certaine somme d’argent (grosse de préférence, non ?).

En effet, je vois dans mes courtes discussions avec des collègues sur Twitter qu’une des principales raisons pour lesquelles ils sont réticents à utiliser autre chose que Photoshop (pour voir plus large et ne pas parler que de Sketch), c’est la problématique des livrables. Et je rencontrais la même chose du temps où j’utilisais Fireworks.

Deux exemples récents :

  • « J’aimerais m’y mettre mais mes clients « exigent » du .psd »
  • « Je l’utiliserais si je n’avais pas à fournir des PSD »

De mon côté, je peux dire clairement que je n’ai pas ce problème et j’utilise Sketch au quotidien. Pas que Sketch mais surtout Sketch.

Le vrai problème

Je vais résumer ici une position que j’ai prise sur Twitter ce matin. Ça n’a pas plus de sens de livrer des fichiers Photoshop que de livrer des fichiers Sketch. Et je maintiens cette déclaration.

Les gens à qui nous transmettons nos livrables sont souvent des intégrateurs, des développeurs, des décisionnaires, des clients, etc. qui sont au final des « non-designers ».

Les personnes que nous avons face à nous n’ont pas les outils que nous utilisons. Ou ils ne devraient pas avoir à les utiliser. Et ils ne les maîtrisent en tout cas généralement pas.

Pistes de réflexion

Ceux qui sont impliqués dans un processus décisionnel et de validation n’ont pas besoin d’ouvrir un PSD pour examiner tous vos pixels à la loupe. Il n’y a que les designers qui s’assurent du pixel-fitting de leur icones. Les autres peuvent se contenter d’un JPG ou PNG de haute qualité.

Ceux qui sont responsables d’une intégration ou d’un développement ne devraient pas forcément avoir à ouvrir un livrable modifiable (PSD, Sketch, AI ou autre). Si vous faites du design pixel-perfect, assurez-vous que ceux qui vont en assurer le rendu final aient les bonnes cartes en mains pour que le produit fini soit pixel-perfect également. D’un point de vue qualitatif, il est largement préférable de fournir des assets exportés correctement, optimisés, aux tailles appropriées, sans altération possible et accompagnés de guidelines précises et détaillées… plutôt que de balancer un PSD brut à la « démerde-toi ».

UPDATE – Après plusieurs discussions et commentaires je suis tout à fait d’accord pour reconnaître qu’il y a plusieurs façons de travailler à ce niveau, beaucoup de dévs prenant en charge la découpe et la création des assets. Il n’en reste pas moins dommage que quelqu’un qui ne soit pas designer doive acheter une application avec un prix tel que celui de Photoshop. Il bon de savoir que je pourrais travailler moins en laissant la tâche de découpe à d’autres. Je suppose qu’il doit y en avoir qui ont un souci du détail aiguisé même en n’étant pas designer.

Le client final n’a logiquement aucune raison d’ouvrir un PSD. Le produit fini n’est pas un livrable dans le sens où on en parle ici. Donc le livrable ne doit pas forcément être un PSD. Donc le livrable peut-être un Sketch.

« (…) mais mon client exige du PSD »

C’est embêtant, certes, mais c’est un problème qui n’en est pas un. Votre client travaille avec vous parce qu’il est convaincu de la qualité de votre travail. Il devrait dès lors s’inquiéter de la qualité des assets utilisés par l’intégrateur ou le développeur plutôt que du format de fichier que vous utilisez.

On a passé des mois ou des années à éduquer nos clients vis-à-vis de certaines problématiques (te sens-tu visé, Internet Explorer 6 ?). Pourquoi ne pas faire de même si vous ne souhaitez pas utiliser Photoshop ? D’autant plus si après un certain temps ce que vous produisez est d’une qualité encore supérieure.

Comme je l’ai dit juste au-dessus, le client vous veut vous pour la qualité de votre travail et non pas pour l’outil que vous utilisez. Il suffit qu’il se rende compte qu’un livrable est un livrable, peu importe son format, et que ce sont surtout les assets qui sont importants. N’êtes-vous pas également force de proposition pour d’autres aspects que vous exposez peut-être dans votre offre commerciale en réponse au brief client ?

En agence c’est pas pareil

Je le concède, travailler en agence a d’autres implications.

Je suis sûr que si vous faites comprendre à qui de droit que vous pouvez faire la même chose avec Sketch d’avec Photoshop, que vous pouvez même faire mieux, qu’il vous faudra moins d’une semaine pour maîtriser totalement l’outil et qu’en plus ça coûte (sans doute) 10x moins cher, vu que Sketch ne coûte que $49.99… vous devriez arriver à négocier ceci.

Je dois reconnaître que je peux difficilement débattre de cet aspect des choses car je travaille en freelance et je ne connais pas les pratiques en agence et intrications autres que celles qui sont de notoriété publique.

Il faut malgré tout reconnaître que si Photoshop occupe la place qu’il a en agence aujourd’hui c’est parce qu’un choix a été posé il y a très longtemps. On dira qu’un choix peut être remis en question si c’est pour une bénéfice amélioré.


Les qualités de Sketch

Il faut malgré tout que j’en parle parce que vous lisez ce billet aussi pour savoir ce que Sketch peut vous apporter.

Exportation

J’en ai déjà parlé plus haut, c’est le pied. Là où Photoshop nous oblige à exporter chaque calque un par un, Sketch peut tout exporter en une fois dans le bon format de fichier.

L’outil de slicing de Photoshop n’est pas des plus commode et ce n’est pas pour rien si plusieurs boîtes ont développé des plugins (payants, il me semble) pour tenter de faciliter les choses.

Aussi, il est possible d’exporter directement en @2x à la volée. Ce n’est pas rien.

100% vectoriel

Voilà, c’est dit. En combinant ça à un zoom qui va jusqu’à 6400%, on travaille les pixels avec une aisance incomparable.

Il y a bien d’autres avantages Les transformations et effets appliqués dans Sketch ne sont jamais destructifs. Pas besoin de s’embêter avec des objets dynamiques, on redimensionne à la volée un rectangle à coins arrondis sans déformer ceux-ci (pour ça aussi il faut un plugin/script dans Photoshop, si on ne veut pas passer par une modification de tous les points d’ancrage un par un), si vous avez ajouté un effet de flou à une image vous pourrez l’ajuster, etc. Même une image importée peut-être redimensionnée sans jamais perdre la qualité initiale (pas au-delà de 100%, ça va de soi).

Qualité de rendu des textes

Pour les férus de typographie, il est difficile de trouver un outil de design ayant un meilleur rendu textuel. Sketch affiche les textes tels qu’ils seront dans Safari ou Chrome. Vous voyez ce que je veux dire, Photoshop est de loin le plus mauvais dans ce domaine, depuis des années.

Grilles

La gestion des grilles est intégrée à Sketch. C’est pratique puisque tout le monde (ou presque) utilise des grilles. Vous pouvez en changer de manière interactive et la voir bouger dans votre sketch.

Code CSS

Vous en rêviez, c’est dispo. Il y a aussi la possibilité d’avoir directement le code CSS correspondant aux styles appliqués à un élément UI. Pour faire ça dans Photoshop… il faut aussi un plugin payant. ;-)

Autres avantages

Ils sont nombreux, vraiment. Je vous invite à jeter un coup d’oeil au site web de Sketch, car chaque fonctionnalité listée sur cette page constitue un avantage vis-à-vis de Photoshop.

Pour aller plus loin…

  • Sketch n’est disponible que sur OS X. Si vous n’êtes pas Mac, là je ne peux rien faire pour vous même si vous êtes convaincu que Sketch est mieux que Photoshop.
  • Il est possible d’essayer Sketch gratuitement, consultez le site de Bohemian Coding pour en savoir plus.
  • Vous voulez acheter l’application ? Elle est disponible sur le Mac App Store pour seulement $49.99 – un prix pareil, c’est dingue non ?
  • Il faut reconnaître que l’application est encore un peu jeune (Adobe développait peut-être déjà Photoshop quand les développeurs de Sketch n’étaient pas nés, qui sait) et souffre parfois de l’un ou l’autre bug inoppiné. Mais c’est très rare, jamais grave et le support est très réactif. Même si l’application est distribuée sur le Mac App Store ils publient des mises à jour très régulières. Des betas sont également dispos gratuitement.
f84ab6f0ae9b48477df6fc7d216980f4qqqqqqqqqqqqqqqqqqqqqqq