Sketch : le design web nouvelle génération !

Sketch : le design web nouvelle génération !

Le monde du design web s'agite autour d'une technologie depuis quelques temps, celle-ci fait couler beaucoup d'encre, et pour cause : Il s'agit de Sketch !

A l'agence, nous l'avons adopté pour nos projets web depuis 8 mois, il est maintenant temps d'en parler un petit peu en compagnie de Ryad, notre UI - UX Designer.

 

sketch-agence-ui-ux-design.jpg

Comment as-tu découvert Sketch ?

J’ai découvert Sketch via Twitter et à travers un réseau de freelance auquel je suis abonné pour me maintenir à jour concernant les technologies liées à mon métier. Du coup, à chaque fois qu’un nouveau logiciel, une nouvelle tactique apparaît ou une petite astuce, on regarde pour voir ce que ça vaut. Pour Sketch, le schéma a été celui-ci.

L'avantage d'un réseau de freelance est qu'en tant que professionnels , nous sommes entretenus par une sorte de concurrence qui nous permet de nous remettre en question de manière permanente et nous tirer vers le haut. En effet, lorsque de nouvelles technologies sont utilisées par la communauté, on se dit que ça pourrait forcément nous être utile, c'est ce qui s'est passé pour Sketch.

Suite à la découverte de Sketch, je me suis rendu sur leur site pour en savoir plus à ce propos, j’ai regardé les vidéos tutoriels mises en ligne afin d’avoir un aperçu global du logiciel, ensuite je me suis arrêté là. Mais au fur et à mesure, j’en entendais de plus en plus parler lors de ma veille, j’ai donc décidé de le télécharger pour le tester de temps en temps en parallèle de Photoshop qui était mon outil de travail principal.

Premières impressions : Découverte du logiciel de design

En tant que designer, je juge souvent le logiciel par rapport à l’apparence du site, c’est un bon indicateur du niveau de sérieux de la solution. En tant que designer et ergonome, je m'intéresse aussi beaucoup à l’agencement de l’interface, ce qui m’a bien plu avec Sketch c’est aussi l’esprit de l’entreprise qui fait beaucoup plus « accessible » que d’autres entreprises. Disons que c’est le fait d’avoir dans la manière de communiquer les aspects « détente » et « sérieux » assez bien mariés. Ce n’est pas ce qui fait le logiciel, bien entendu, mais c’est le genre de petit plus qui donne envie d’aller plus loin dans l’apprentissage de Sketch !

Cette ambiance sérieuse mais cool ne transparaît cependant pas dans le logiciel car il faut garder à l’esprit que Sketch reste un logiciel destiné aux professionnels. Par contre cette manière de communiquer a déteint sur la communauté et sur les différents messages émis par Sketch. On se sent vraiment intégré dans une communauté, ce qui est assez plaisant, il faut bien l’avouer.

Pour résumer rapidement : le logiciel est présent pour être efficace, l’interface est plaisante, les couleurs sympas mais cela reste tout de même un logiciel sérieux.

Il y a déjà une communauté importante et ce qui est intéressant, c’est que cette communauté clame qu’elle utilise Sketch. En réalité, le fait de déclarer que nous n’utilisons plus Photoshop, mais Sketch est presque devenu un gage de qualité dans l’industrie. C’est vraiment un plus d’un point de vue commercial dans la mesure où on communique sur le fait d’utiliser de nouvelles technologies, de rester en veille permanente, de se remettre en question sur notre méthode et notre façon de travailler.

Par rapport à Photoshop, Sketch a su « écouter » les développeurs en leur ouvrant ses API, ce qui permet une grande capacité de création de plugins. Comme de plus en plus de logiciels aujourd’hui, Sketch adopte une philosophie qui consiste à proposer une base déjà très complète à laquelle on viendra y ajouter des plugins qui permettront d’étendre ses capacités. Finalement, contrairement à Photoshop, ce n’est plus l’utilisateur qui s’adapte au logiciel, mais c’est le logiciel qui s’adaptera à son utilisateur.

Pour moi, les plugins sont indispensables ! Il y a une base qui est déjà très efficace, ensuite on ajoute des plugins qui aident dans le quotidien, sur la façon de travailler, qui améliorent le workflow. C’est vrai qu'il est fréquent d'en installer 6-7 au minimum.

Tu fais des comparaisons : Sketch vs Photoshop, pourquoi ?

sketch-vs-photoshop-UIX-design.png

 

Photoshop c’était LE logiciel historique pour créer des maquettes graphiques pour le design. C’est vrai qu’à l’époque, nous n’avions pas de logiciel dédié au graphisme. La suite Adobe est apparue, les logiciels proposés étaient ceux qui s’approchaient le plus des besoins d’un designer car à l’époque le métier était nouveau. Du coup, nous nous sommes approprié cette solution et au fur et à mesure. Adobe, conscient de l'opportunité, a fait évoluer Photoshop et a ajouté des fonctionnalités afin de pouvoir créer des maquettes graphiques. Du coup, c’est devenu LE logiciel par excellence pour créer des maquettes, il y a quelques années.

Nous comparons souvent les deux  logiciels justement car ils jouent sur le même terrain, l’un étant le logiciel « historique » qui fonctionnait quand même assez bien et l’autre étant l’outsider qui cherche à se faire une place dans ce marché. Aujourd’hui, encore beaucoup d’agences et de sociétés utilisent encore Photoshop, il est toujours adapté, mais en comparant avec Sketch, il y a quand même une grande différence dans la mesure où Sketch est vraiment axé sur la création d’interface et en confort d’utilisation et rapidité, c’est incomparable. Pour donner une échelle, ce qu’on fait avec Photoshop, on le fait en moitié moins de temps sur Sketch.

Ce qui explique ce gain de productivité, c’est vraiment le souci de l’optimisation des actions chronophages qu’à Sketch. Cela passe par la mise en place d’accès plus rapides aux différents éléments souvent utilisés et les plugins qui automatisent les actions chronophages et sans grande valeur ajoutée, mais indispensables. Par exemple, il arrive très souvent que nous soyons obligés de mettre en place des photos dans une maquette, si je fais le comparatif entre Photoshop et Sketch, voilà ce que ça donne :

  • Photoshop : Aller sur Google, taper les mots-clés qui correspondent, trouver une image de bonne qualité, la télécharger, l’importer dans Photoshop, la redimensionner et la positionner.
  • Sketch : Cliquer sur un bouton sur le plugin et tout se remplit automatiquement.

C’est précisément ce genre de tâches que Sketch permet d’optimiser afin de réellement laisser place au travail sur l’ergonomie de la maquette qui représente la vraie valeur ajoutée d’une maquette graphique. Bien entendu, les plugins de Sketch ne se limitent pas qu’à ce genre de tâche, ce sont beaucoup de petits plus qui optimisent le quotidien. La somme de ces quelques secondes gagnées tout au long de la journée finit par vraiment faire la différence, tant dans la rapidité de production que dans la qualité de celle-ci car le temps qui est gagné pourra être réinvesti dans une réflexion plus poussée à propos du projet, ce qui résulte en un meilleur résultat global.

Avantages et inconvénients de Sketch en agence digitale

Pourquoi utiliser Sketch ?

  • Il y a une impression de légèreté, le logiciel est rapide, simple et intuitif. L’essentiel est présent en un coup d’œil.
  • La possibilité d’ajouter des plugins avec la gestion des mises à jour automatique.
  • La communauté de développeurs/designers qui, tous les jours, contribue à améliorer les plugins et le confort des designers
  • J’aime bien aussi sa compatibilité avec Invision. Invision a travaillé pour créer Craft qui permet de faire l’intermédiaire entre Invision et Sketch. À travers Craft, il y a une simplicité pour publier les maquettes depuis Sketch vers Invision qui est inégalable dans la mesure où on envoie les maquettes et les mises à jour de celles-ci directement sur Invision sans devoir s’y rendre et le faire manuellement. C’est encore une fois la preuve que l’optimisation de la productivité est au cœur de Sketch.

Inconvénients de Sketch

C’est surtout des petits ajustements pour l’améliorer. Par exemple, pour les repères, ce n’est pas nécessairement intuitif car on les attrape, on les place mais on ne peut pas switcher entre le mode « règles » et le mode « règles masquées ». Je les utilise énormément pour bien positionner mes éléments et c’est bien de pouvoir avoir un aperçu de la maquette sans celles-ci comme on peut le faire sur Photoshop.

La gestion du magnétisme des éléments pendant la composition de la maquette. Lorsque l'ont créé un nouveau bloc, le magnétisme tente d’aligner parfaitement les deux blocs. Ça fonctionne, c’est en place mais ce n’est pas parfait car il arrive que l’élément se place par rapport à des repères que je ne vois pas sur la maquette, c’est vrai qu’avec Photoshop, ça fonctionne mieux.

Amélioration du workflow

Sketch a changé ma façon de concevoir les maquettes car on gagne du temps, notamment avec Craft. Aussi, Sketch a amélioré la communication que j’ai avec les développeurs car lorsque je publie ma maquette, les développeurs ont directement accès aux spécifications de la maquette via l’outil « Inspect » présent sur Invision comme les espacements, les marges internes et externes, etc…

Aussi, la possibilité de permettre le téléchargement des assets pour que les développeurs puissent avoir dans un seul et même répertoire : la maquette, les éléments etc…

Le workflow s’est consolidé avec l’ajout d’étapes, qui mènent à un meilleur résultat car avant, il est vrai qu’on décomposait les images, on les communiquait via email ou une plateforme de partage de fichiers, finalement, ce n’était vraiment pas l’idéal.

Finalement, la combinaison de toutes ces optimisations solidifie le workflow en rendant le travail des développeurs plus rapide et plus précis.

Avec Photoshop et Sketch, il est possible d’obtenir une maquette ayant le même rendu, cependant, avec Sketch, on peut y noter une différence avec la fonction « Inspect » qui permettra de fournir des informations beaucoup plus riches aux développeurs qui permettra de les guider avec plus de précision.

Pourquoi passer sur Sketch en tant qu’agence ?

  1. Gain d’argent : Sketch est à payer 99 dollars une seule fois, et on bénéficie des mises à jour pendant un an. Contrairement à la suite Adobe, généralement, en tant que designer, nous avons besoin a minima de Photoshop et Illustrator, ce qui implique de devoir payer la suite complète, seulement pour ces deux logiciels 70 euros chaque mois. Sketch est clairement un meilleur investissement que Photoshop.
  2. C’est un logiciel dernier cri : Aujourd’hui, la mention de Sketch est, comme je l’ai mentionné plus tôt, un élément qui permet de faire la différence tant d’un point de vue technique et fonctionnel que d’un point de vue commercial.
  3. Il y a une meilleure précision concernant les rendus, ce qui facilite le travail des développeurs, ce qui augmente donc leur productivité.

Si tu devais proposer de nouvelles fonctionnalités à Sketch, lesquelles seraient-elles ?

Il est vrai que je m’émerveille toujours face aux fonctionnalités de Sketch, chaque jour, j’en découvre de nouvelles.

  1. Il serait intéressant de continuer à travailler avec Invision pour charger sur Sketch les commentaires postés sur Invision, ce qui permettrait d’éviter les allers/retours entre les différentes solutions afin de travailler uniquement sur Sketch.
  2. Pour la phase de contrôle de la conformité du site par rapport à la maquette, il serait intéressant de pouvoir superposer la maquette par-dessus le site qui serait chargé sur le navigateur afin d’avoir un maximum de précision et pouvoir éventuellement s’approcher du pixel-perfect.
  3. Pouvoir créer des configurations personnalisées d’espacement. C’est-à-dire que l’on définirait des espacements selon une certaine règle qui seraient réutilisables en les insérant dans les maquettes, ce qui permettrait de pouvoir utiliser exactement les mêmes espacements sans devoir les recréer à chaque fois.

La transition entre Sketch et Photoshop n’a pas nécessairement été radicale car le processus depuis le design jusqu’au développement par les développeurs était déjà bien intégré et maîtrisé par l’équipe. Le passage d’une solution à une autre implique de nombreux changements dans le workflow qui peuvent prendre du temps à être mis en place. En tout, six mois nous ont été nécessaires pour opérer la transition de Photoshop à Sketch en y incluant la formation à l’équipe de développement, la refonte du workflow et tout ce qui s’ensuit.

D’autres technologiques en UI/UX Design en vue ?

J’ai travaillé 10 ans avec Photoshop, donc quand on change de logiciel, il est nécessaire de presque tout réapprendre. J’en ai vu d’autres sortir tels qu’Adobe XD mais pour moi, c’est clairement Sketch le meilleur de sa catégorie et je pense qu’il le sera pendant un bout de temps avant qu’une autre solution de design web autre soit plus performante.

Donc pour moi, c’est Sketch, mais s’il faut évoluer, on évoluera aussi, c’est comme ça que ça fonctionne.

Vous voulez du concret ? Cliquez ici pour consulter notre portfolio Behance !

Partager sur :