SketchApp, le spécialiste de vos interfaces
par Grégory Fichère le 24 février 2017
Depuis sa sortie en septembre 2010, Sketch n’a pas arrêté de faire parler de lui grâce à son audacieuse simplicité. Conçu pour les besoins du web, il a su éliminer certaines fonctionnalités pénibles de ses concurrents et se concentrer sur celles qui leur faisaient défaut.

Mais avant d’entrer dans les détails, revenons un instant sur le contexte de sa naissance. Progressivement abandonné par Adobe – et définitivement supprimé en 2013 – Fireworks n’a été ni égalé, ni remplacé. Malgré ses défauts – ne pas s’être adapté au responsive design, par exemple – le logiciel créé au départ par Macromedia a laissé un vide qui n’a pas été comblé…
Illustrator et Photoshop, de leur côté, restent trop éloignés des besoins liés au web. Leur architecture, pensée pour produire du contenu statique, ne leur permet pas de gérer l’expérience utilisateur. Quant au petit dernier de la famille, Adobe XD, il peut convenir pour l’élaboration de prototypes mais ne peut prendre en charge la création d’éléments d’interface. Ajoutons à cela que le prix mensuel des licences Adobe est dissuasif quand on a des besoins modestes. Dans cette situation, un nouveau venu comme Sketch peut vraiment espérer se faire une place au soleil…

Sketch, quatrième du nom, est un logiciel vectoriel centré « UX » et « UI » et spécialisé dans la création rapide d’interfaces graphiques. Comme l’affirme son éditeur, il se veut simple et facile à utiliser. Il ne possède ni option de masquage avancée ni galerie de filtres créant des matières compliquées difficilement exploitables. Tout, chez lui, est orienté grille et magnétisme : des contraintes multiples agissent sur les objets et facilitent leur placement et leur édition. Les attributs de dimensions, positionnement, fond et contour sont aisément accessibles, de même qu’une multitude d’options d’export préparamétrées.
Force et simplicité
La gestion des différentes propriétés des objets, comme les options de contours et de fond ou les modes de fusion, est regroupée dans un panneau latéral unique, l’inspecteur. Nombre de ces styles sont directement basés sur des propriétés CSS comme les ombrages multiples intérieurs (inset) et extérieurs, les coins arrondis des blocs, etc. Comme tout a été conçu avec le web comme objectif, récupérer les propriétés CSS d’un bouton qu’on vient de réaliser se fait rapidement. Et le code généré est d’une propreté sans faille !
Purement web
Au niveau des fonctionnalités, l’application permet d’organiser les différentes tailles d’écrans sur des plans séparés (artboards), eux-mêmes regroupés dans des pages. Rien de super original si ce n’est qu’une de ses pages est réservée pour stocker les symboles. Passer à l’édition d’un de ceux-ci, où qu’il soit, se fait d’un simple clic et nous transporte directement dans cette page particulière.
La spécificité de ces symboles est qu’ils sont en quelque sorte dynamiques : si vous créez un symbole de bouton, par exemple, le texte que vous y placerez pourra être modifié via une variable, directement accessible dans le panneau de l’inspecteur. Un seul bouton pourra donc servir autant de fois que nécessaire, avec des contenus différents. Toutes les occurrences ainsi produites pourront être modifiées en une seule opération si on souhaite en changer la couleur, la taille ou les effets…
Grid system embarqué
Sketch offre aussi nativement des aides à la composition : pas besoin, comme chez ses concurrents de recourir à des plugins créés par des sociétés tierces. Le seul défaut des grilles personnalisables (ici appelées « layouts ») est qu’il vous sera impossible de préparer des grilles préparamétrées adaptées à des tailles différentes sans avoir à manipuler leurs options. C’est surtout gênant si vous mixez des plans pour mobile avec des plans destinés à un affichage d’ordinateur car ils possèdent des « grid layouts » différents. Dommage, mais l’outil est jeune et connaîtra sûrement des améliorations…
Export simplifié
Sketch gagne aussi de nombreux points à l’export en proposant des possibilités d’extraction simples mais surtout multicritères : un même objet peut être exporté en jpg, png, SVG en une seule opération… et à de multiples tailles. Il s’adaptera ainsi aux écrans de haute densité grâce à l’export x1, x2, etc. Fini les jeux de paramétrages fastidieux ainsi que les pénibles essais pour tenter d’obtenir le réglage optimal.
Pixels or not ?
L’orientation vectorielle de Sketch a beaucoup d’avantages mais obligera les amateurs de pixel art à tricher pour obtenir le traditionnel effet d’escalier : il leur faudra passer par le dessin pour y parvenir, mais la fonction « snap to grid » (accrochage à la grille) se révèle alors particulièrement efficace. Et l’export ne provoque pas d’artefact disgracieux comme c’est le cas sur des logiciels concurrents.
Des patterns et des dégradés faciles
L’outil offre aussi la possibilité de créer facilement des « patterns » (motifs à répétition). Pour cela il vous suffit d’enregistrer un morceau d’image (pour l’instant uniquement en mode pixel) et de choisir l’option pattern dans les options de remplissages. Quant aux dégradés, leur paramétrage a été pensé pour l’export CSS et donc pour leur modification ultérieure.
Mac Only
À ce jour, Sketch n’est malheureusement disponible que pour Mac et aucune rumeur de développement pour une autre plateforme n’est parvenue à nos oreilles. L’application a, dès le départ, été écrite dans le langage natif du Mac ce qui lui permet de profiter directement des ressources système et de bénéficier d’une grande fluidité dans son utilisation. Certaines opérations gérées par l’OS en sont facilitées, comme, par exemple, la connexion avec un iPhone via un câble USB pour tester une interface sur mobile.
Un deuxième écran, pourquoi faire ?
À la liste des défauts du produit, on ajoutera son incapacité à gérer plusieurs écrans. Pas question de ranger vos outils sur un second moniteur ou d’afficher vos créations de plusieurs façons en même temps : Sketch n’offre pas la possibilité de splitter (morceler) son interface. Et pas d’option de clonage de vue (pratique pour la fabrication d’icônes) sans passer par un périphérique tiers…
Mais ces petits inconvénients ne rendent pas Sketch moins indispensable : il reste extraordinairement pratique et efficace quand il s’agit d’adapter un design à une multitude de périphériques et donc de viewports !
La prochaine formation Sketch au Cepegra aura lieu les 6 et 7 juin 2017. Infos et inscriptions sur le site du Cepegra.