SketchApp, le spécialiste de vos interfaces

par GFICHERE le 24 février 2017

Depuis sa sortie en septembre 2010, voici un logiciel qui n’a pas arrêté de faire parler de lui par 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.

La version 4.2 est la dernière version stable à ce jour.
La version 4.2 est la dernière version stable à ce jour.

Avant de détailler ces aspects, il nous faut définir le contexte. À ce jour, on ne trouve objectivement pas d’outil capable de succéder à Fireworks – le logiciel d’origine Macromedia abandonné par Adobe en 2013 – pourtant déjà dépassé pour le design « responsive ». Illustrator et Photoshop restent trop éloignés des besoins de fabrication Web. Tous deux capables de produire des écrans figés, ils échouent à gérer l’expérience utilisateur : leur architecture n’a pas été pensées pour ça… Quant à Adobe XD, il peut convenir pour l’élaboration de prototypes mais ne peut se charger de la création d’éléments d’interface. Ajoutons à cela que le prix mensuel des licences Adobe est difficilement justifiable quand on a des besoins modestes.

Artboard

Sketch quatrième du nom est un logiciel vectoriel orienté « UX » et « UI » et spécialisé dans la création rapide d’interfaces graphiques. Comme le dit son éditeur, il est avant tout un outil 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 : chaque objet subit instantanément une multitude de contraintes facilitant son édition et son placement sur une grille. Les dimensions, positionnement, fond et contour des objets 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érents aspects des objets de la page est simplifiée. Les différentes propriétés, comme les options de contours et de fond ou les modes de fusion, sont regroupées dans un panneau latéral unique, l’inspecteur. Nombre de ces styles sont directement basés sur des propriété 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 propose de travailler sur de multiples plans, option souvent présente dans de nombreux logiciels graphiques, mais avec ici l’avantage de pouvoir stocker et de gérer tout une série d’assets via une page réservée au stockage des symboles. Passer à l’édition d’un symbole se fait par un simple clic et nous transporte directement dans une page particulière.

Rien de très nouveau jusque là, sauf qu’ici on parle de symboles à occurrence dynamiques qui permettent une manipulation des contenus texte sans destruction de ce dernier. Les textes des symboles deviennent des données variables directement modifiables depuis le panneau latéral de l’inspecteur.

Grid system embarqué

Sketch offre aussi nativement des aides à la composition alors que ce genre d’options n’est souvent disponible que via un plug-in chez ses concurrents. 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. C’est 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 en même temps être exporté en jpg, png, SVG… et à de multiples tailles pour s’adapter aux écrans de haute densité grâce à l’export x1, x2, etc. Et ceci en un clic. Fini les jeux de paramétrages fastidieux ainsi que les pénibles essais pour tenter d’obtenir le réglages optimal.

Pixels or not ?

L’application a pour vocation de traiter des images vectorielles et obligera les amateurs de pixel art à tricher pour obtenir un effet de pixels : il faudra les dessiner mais par chance le « snap to grid » (accrochage à la grille) est particulièrement efficace. Et l’export ne provoque pas d’artefact comme c’est le cas lors d’opérations à virgules flottantes sur des logiciels concurrents.

heart

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 pixel) et de choisir l’option pattern dans les options de remplissages. Quant aux dégradés, leur paramétrage a été pensées pour l’export CSS et donc pour leur customisation ultérieure.

Mac Only

À cette date, Sketch n’est malheureusement disponible que pour Mac et aucune rumeur de développement pour une plateforme concurrente 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 liées au système comme une connexion avec l’iPhone via un câble USB pour tester l’interface directement sur mobile en sont facilitées.

Un deuxième écran, pourquoi faire ?

Si vous aimez ranger vos outils sur un écran secondaire ou si vous êtes habitué à comparer vos créations dans d’autres vues, Sketch risque de ne pas vous satisfaire car il n’offre pas la possibilité de spliter (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 l’application moins indispensable tant elle est pratique et efficace lorsqu’il s’agit d’adapter ses créations à différents viewports.

Notre prochaine formation Sketch aura lieu les 6 et 7 juin 2017:  infos et inscriptions.

Commentaires fermés sur SketchApp, le spécialiste de vos interfaces

Partager >