10 bonnes raison d'adopter Sketch pour concevoir une page web

Tael 4 Juillet 2014 …

Vous avez peut-être déjà entendu parler de lui, lui c'est un logiciel de création graphiques vectoriels web designer friendly. Lui, c'est Sketch annoncés par certains comme le tueur de Photoshop. Je suis absolument convaincu que pour le web design Sketch est en effet un outil bien plus efficace et pratique que Photoshop. C'est un de mes collègue de travail Sebastien qui m'a conseillé de tester de ce logiciel la première fois dont j'avais vaguement entendu parler.

J'ai donc essayé brièvement la démo, partant un peu avec un apriori de photoshopeur/illustratoriste invétéré, mais curieux quand même. La première fois que je l'ai testé je n'ai pas eu le sentiment qu'il s'agissait d'une révolution, car je ne n'avais pas spécifiquement d'objectif mais je me trompais clairement.

J'y suis revenu peu de temps après ayant besoin de créer rapidement une spec un soir dans le train. Et ce fut une révélation.. Sketch rapproche les designers et les développeurs sur bien des aspects tels que sur les possibilités et les limites des effets et des rendus CSS.

Le logo de Sketch créé par la team de Bohemian Coding

Voici 10 raisons qui m'on fait adopté Sketch.

1 - La rapidité d'exécution

Sur mon mac, lorsque je crée un design ou une spec, j'ai souvent Photoshop et Illustrator ouvert en même temps, ce qui consomme énormément de mémoire vive.

Prenons un exemple simple, une page de l'administration OverBlog ouverte sur Photoshop, avec tous les éléments qu'elle peut comporter, polices, images, boutons.. représente environ 2 Go de mémoire vive employé par Photoshop. Alors que Sketch, avec l'ensemble des pages de l'administration OverBlog (plus de 30 pages) ne consomme que 500 Mo de mémoire vive. Les temps d'ouvertures et de manipulation des fichiers s'en trouvent logiquement sensiblement améliorés.

2 - Le système de symboles

Ce système permet la création d'objets dynamiques. On crée une ou pluiseurs formes avec du texte, quelques effets, ce que l'on souhaite en fait, puis on les sélectionne et on les converti en symbole, puis en un seul clic on peut d'une part réutiliser le même symbole a plusieurs endroits mais aussi tous les éditer en une seule fois.

Imaginez que vous ayez 10 pages a faire comportant le même ensemble d'éléments, vous n'avez plus qu'a modifier une page pour que toutes les autres se mettent automatiquement à jour.

En plus de ça il est possible d'organiser les symboles très facilement sous forme de dossiers, afin de pouvoir les classer, il suffit tout simplement de mettre un slash après le nom du symbole. Par exemple : "Icones de l'admin / Loupe". Ainsi mon icone "loupe" se trouvera automatiquement dans un dossier "Icones de l'admin". Un détail qui facilite énormément la vie lors d'un travail de design ou certains éléments sont souvent répétés et nombreux.

Le système de symbole permet d'éditer dynamiquement et facilement en masse.

3 - les marqueurs d'alignement automatique

Une fonctionnalité très pratique qui me fait penser aux outils type Firebug et autres inspecteurs des navigateurs. Dès que l'on place un élément à coté d'un autre, Sketch va calculer automatiquement les espaces entres ces derniers afin de respecter un rythme horizontal ou vertical. C'est une fonctionnalité très pertinente en ce ce qui concerne le design, qui permet d'aligner en un éclair de nombreux éléments. Une simple pression sur la touche "Alt" permet en un clin d'oeil de connaitre l'espacement entre les éléments par rapports aux axes horizontaux et verticaux.

Ces marqueurs facilitent grandement la création rapide d'une maquette sans se fatiguer avec des dizaines de repères. D'autre part des plugins tels que Sketch measure master permettent de récupérer ces données afin de les afficher, ce qui viendra par exemple faciliter le travail de lecture des maquettes a destination des développeurs.

Repères d'alignement automatique

4 - l'inspecteur

Agréable et ergonomique, permet de définir les dimensions, le positionnement, l'opacité, les modes de fusion de n'importe quel objet. Cet inspecteur est extrêmement intuitif dans la manière dont les styles d'un texte ou d'un objet peuvent être modifiés, ajoutés, et surtout enregistrés pour les réutiliser.

L'inspecteur de Sketch

5 - Le tout vectoriel

La encore un énorme avantage de Sketch et de faire passer définitivement les designers au images vectorielles, plus facilement scalables à différentes résolutions. Cela étant dit il faut quand même reconnaitre qu'Illustrator n'as aucuns soucis a ce faire concernant le dessin vectoriel pur, celui ci restant beaucoup précis et performant (il y a quand même 25 ans d'écart de dev entre les deux logiciels) que Sketch dans ce domaine.

6 - Les pages

Les pages font parti des petits détails qui permettent a Sketch de se rendre agréable à l'utilisation, en effet ces dernières permettent de regrouper facilement plusieurs fichiers et donc d'organiser proprement son travail.

Toutes les pages d'un site internet pourront donc être contenue en un seul document organisé sous plusieurs pages. Les symboles fonctionnent toujours d'une page à une autre restent actif et liés entre eux (édition dynamique).

L'organisation des pages ici à gauche

7 - L'export

Ceux qui on déjà eu l'occasion de créer des icônes pour des applications mobile à l'aide des tranches sur photoshop le savent, c'est un travail qui peut vite s'avérer fastidieux, l'export de sketch permet très rapidement de créer des sprites, des sets d'icons à plusieurs résolutions différentes notamment pour des applications qui sont supportés sur des appareils ou des OS différents.

8 - Les effets

Le remplissage avec des couleurs, des dégradés permet des créations très rapide, toujours cohérente en vue d'une future intégration car tout ce qui est fait sur Sketch est faisable en CSS, les règles sont d'ailleurs exportables ce qui montre bien que Sketch cherche a rapprocher le produit et la technique.

9 - L'utilisation des couleurs

L'utilisation des couleurs dans Sketch se révèle aussi très intuitive avec un colorpicker très bien pensé qui est à mon sens plus efficace que celui de Photoshop. En dessous des réglages de couleurs on retrouve un ensemble de couleurs prédéfinies qui sont générées à partir du document chargé, un aspect extrêmement pratique qui permet un gain de temps non négligeable, il n'y a plus besoin de créer un nuancier manuellement pour chaque nouveau travail.

Le colorpicker et la palette automatique sont très pratique

10 - Le gain de temps généré

Dernière raison qui fait que Sketch a définitivement conquis mon coeur, c'est le gain de temps généré. En effet Sketch s'avère clairement adapté pour du design web et ne s'encombre pas de fonctionnalités qui ne servent pas ce but. Très intuitif, la prise en main elle aussi est très rapide et bien moins ardue que photoshop.

Pour conclure

Il convient de dire que Sketch n'est pas exempt de défauts et qu'il ne faut pas non plus jeter Photoshop et Illustrator pour autant qui restent des outils formidables et complémentaires, mais parfois trop lourd quand on a besoin de travailler rapidement.

Sketch est encore jeune et supporté par une petite équipe (4/5 personnes) Un blog compile d'ailleurs les petits défaut de jeunesse de ce dernier. Ceci dit je pense que Sketch a définitivement sa place en matière de web design et il faut avouer que dès que l'on repasse sous photoshop on a vite l'impression de ralentir dans son travail de création.

Si vous travaillez dans le web et que vous êtes amené a concevoir des sites, des blogs, des thèmes, des UI diverses et variées, sachez que Sketch peut réellement vous faire gagner beaucoup de temps et vous faciliter la vie.

Disponible uniquement sur Mac, il est téléchargeable en version d'évaluation sur le site de Bohemian coding ici.