Sketch est un outil de création graphique sur Mac conçu pour le design digital et notamment la création web, des sites aux applications en passant par la création d’icônes. Pour nous, il s’agit de remplacer Photoshop par un outil plus rapide et plus adapté aux métiers du digital. Beaucoup de fonctionnalités sont présentes à la fois sur Sketch et Photoshop. Toutefois, l’approche de Sketch a été pensée pour se libérer des contraintes jusque-là rencontrées par les designers au quotidien. L’interface est simple d’utilisation, l’application est rapide et flexible. Le but est de n’avoir qu’une seule limite, l’imagination.

‘’Finally you can focus on what you do best: Design.’’

Avec Sketch, vous pouvez appréhender votre application comme un ensemble de modules (symboles).

Vous pouvez donc créer des éléments récurrents (boutons, barres de progression…) avec plusieurs propriétés communes pour les dupliquer. On gagne du temps dans la création mais également dans la modification, puisque qu’un changement sur un symbole est automatiquement répercuté sur toutes les occurrences. Le gain de temps est visible principalement lors du passage de la phase zoning à la phase maquette, les symboles sont créés, réutilisés, il n’y a plus qu’à les styler.

Cette approche est valable pour un ensemble de propriétés, que ce soit du style ou des textes, on pense global.

Sur un plan de travail, il est possible de créer plusieurs pages, ce qui permet d’avoir en permanence une vision globale de ce sur quoi vous travaillez et de voir immédiatement les répercussions de changements sur un bloc.

Cela permet également d’exporter les maquettes rapidement, et en une seule fois, sans risque de confusion.
 

Grâce à une simple extension le responsive devient plus simple. Avec Sketch Mirror, il est possible d’avoir un aperçu en temps réel du rendu de l’application sur différents devices (iPhone, iPad et navigateur). Cette extension est disponible à la fois pour Photoshop et Sketch mais a l’avantage d’avoir été conçue pour ce dernier.

Pour en savoir plus :
www.sketchapp.com
Infographie Sketch vs Photoshop (en anglais)

Non parce que, Sketch, c’est cool, mais on parlait d’intégration là, pas de design ! Or, même avec la possibilité d’exporter des propriétés CSS, Sketch est fait avant tout pour les designers. C’est pourquoi il est intéressant d’utiliser en parallèle un autre outil pour les intégrateurs : Zeplin.

Zeplin est une application permettant de générer des ressources pour les développeurs front-end à partir de maquettes Sketch ou Photoshop. Contrairement à Sketch, Zeplin propose une application web en plus des applications natives Windows ou Mac qui permet à l’intégrateur de l’utiliser quel que soit l’OS sur lequel il travaille.

Tout comme Sketch, Zeplin est fait pour supprimer toutes les contraintes inutiles du développeur, toutes ces tâches répétitives qui font perdre du temps à tous. Ainsi vous pouvez vous concentrer sur des problèmes plus complexes et souvent plus intéressants.
 

Zeplin, comment ça marche ?

Zeplin crée automatiquement des planches de styles avec les informations globales du projet, couleurs, typos… Si comme nous vous utilisez Sass ou Less, vous pourrez renommer vos variables Zeplin pour les faire correspondre aux variables utilisées lors de l’intégration. Après ça, grâce à la flexibilité d’affichage des propriétés CSS (Sass, Less, etc), en un coup d’œil vous saurez à quelle variable correspond le fameux #d60b51.

 

Le principe de Zeplin, c’est d’avoir tout à portée de main. En quelques clics vous pouvez :

• connaître toutes les propriétés d’un élément, tout est affiché, couleurs, propriétés CSS (fond, font size, bordures…), vous n’avez même pas à vous soucier des ombres, elles sont déjà générées.

• connaître les marges des éléments entre eux grâce à l’aperçu directement dans l’inspecteur.
   

• exporter des ressources en plusieurs formats (PNG, JPG, SVG). Les JPG et PNG sont automatiquement générés en 3 formats (utile pour le rétina). La seule contrainte est la préparation en amont de la part de votre graphiste qui doit rendre les ressources exportables.

Ces infos ne créent ni plus ni moins que l’environnement nécessaire à l’intégration d’application et de site au pixel près.

Zeplin pour mieux collaborer

Zeplin est aussi un bon outil collaboratif, notamment grâce aux commentaires qui peuvent être laissés à des endroits bien précis. Vous pouvez mentionner une personne ce qui permet d’avoir une réponse assez rapide. Les commentaires étant sauvegardés, ils constituent un complément d’information non négligeable sur des comportements pas forcément visibles sur une maquette statique.

À tout cela s’ajoute une mise à jour en temps réel lors de l’import d’une nouvelle version de l’écran en cours, avec une notification pour ne rien louper. Grâce à la réactivité de l’équipe Zeplin, le versioning a récemment été ajouté pour faciliter le suivi des versions/modifications.

Découvrez le site officiel avec les avantages designers et développeurs : Zeplin.io

Sketch et Zeplin sont deux outils indépendants l’un de l’autre : l’intérêt de l’utilisation couplée de ces deux applications est la vision similaire du travail de création digitale qui en résulte. Celle-ci permet de penser global, modules et réutilisabilité.

Plutôt intéressante cette perspective, non ? Et vous, utilisez-vous l’un ou l’autre de ces outils ? Ou les deux ! Dites-nous ce que vous en pensez en commentaires.