Sketch, the designer’s toolbox
par tm le 11 septembre 2013
A l’heure où de plus en plus de webdesigners s’interrogent sur l’efficacité de leurs outils de conception (souvent hérités du « print »), Sketch vient bousculer nos petites habitudes… Sketch, une application de dessin vectoriel destinée aux designers de toutes sortes. Côté « bitmap », Sketch embarque le support de styles de bases tels que le flou et les corrections de couleur mais ne gère en aucune façon la correction de photo ou le dessin. L’interface utilisateur, claire et intuitive, permet d’avoir tous les outils sous la main. Espace de travail infini, remplissages multiples, excellent rendu de texte, affichage « pixel perfect », etc. Autant de bonnes raisons de se pencher sur ce nouveau challenger !
Photoshop, le maillon faible ?
Mais pourquoi faudrait-il remplacer Photoshop ? Peut-être parce qu’il n’a tout simplement jamais été adapté à notre métier ! Et ce d’autant plus si vous recherchez un travail de qualité, efficace et collaboratif.
Destiné initialement au traitement d’image numérique, Photoshop n’est pas vraiment dédié aux concepteurs d’interface. Au fil des années, nous avons fini par oublier que nous n’étions en réalité que des « hackers » de Photoshop, détournant des fonctionnalités inadaptées à nos besoins. Qui plus est, cette grosse machine, gourmande en ressources, peine continuellement à s’adapter au « nouveau » média qu’est le web, mobile de surcroît…
Alors que ce web nous offre justement une formidable opportunité : la capacité de concevoir et tester une interface directement dans l’environnement réel pour lequel elle est prévue.
Il est temps de cesser de concevoir des images de sites Web et de commencer à concevoir tous les aspects de l’expérience utilisateur d’une manière pragmatique et simultanée.
Stephen Hay
Il est donc temps de réenvisager la place de nos outils de design dans un flux de travail résolument orienté web avec une approche responsive et modulaire.
100% vectoriel et pixel perfect
À l’heure du mobile et des écrans à haute densité, le vectoriel s’avère particulièrement adapté, tant pour la conception de sites web que celle d’icônes ou d’interfaces.
Avec son zoom infini, des styles applicables à vos formes vectorielles et un export _@2X automatique, Sketch affiche et gère à la perfection vos créations jusqu’au pixel.
Rythme et équilibre (grille, alignement et distribution automatiques, repères intelligents)
Personnalisez votre grille comme bon vous semble, ajustez colonnes et gouttières avec simplicité, réorganisez vos contenus et testez rapidement plusieurs dispositions et enfin alignez ou positionnez précisément n’importe quel élément. C’est simple et rapide. Bref, redoutablement efficace…
Slicing et assets
Alors qu’il s’agit généralement d’une des étapes les plus fastidieuses, l’interface particulièrement bien pensée vous permet d’exporter à différentes tailles et dans différents formats (pdf, eps, svg, png, jpg, tiff) en un seul clic ! Fini les plugins et autres extensions.
DCO (Design Code Oriented)
Si vous faites quelques développements web ou ne souhaitez pas vous mettre à dos votre collègue front-end, sachez que chaque option ou propriété possède son équivalent CSS ! Du coup, traduire votre interface en feuille de styles devient (presque) un jeu d’enfant…
Et bien d’autres…
Édition à la volée, options multiples (comme les remplissages, contours, ombres), styles de texte liés, sauvegarde automatique et versionning,… la liste est encore longue !
Autant de fonctionnalités qui sont autant d’arguments pour délaisser Photoshop au profit de Sketch ? Si l’on ajoute à cela une équipe jeune, à l’écoute de ses utilisateurs, très réactive ainsi qu’un prix plus qu’abordable, c’est sûr, Sketch mérite un petit détour ! 🙂
Breaking news : Sketch Mirror is out !
À l’heure où je rédige ce billet, Bohemian Coding passe en version 2.3 et propose une application iOS. Dénommée « Sketch Play » en version beta, « Sketch Mirror » vous permet de visualiser vos créations sur vos appareils iOS. Un peu à la manière de Skala, LiveView ou xScope sauf que, ici, la solution est directement intégrée dans l’application. La gestion intelligente des zones à synchroniser procure un vrai confort grâce à une vitesse de rafraîchissement bluffante. L’utilisation des pages et « artboards » est bien pensée et, enfin, Sketch gère automatiquement la résolution Retina (ou pas) de votre périphérique !
bohemiancoding.com/sketch/mirror/
Notes : Sketch est disponible via l’AppStore pour la modique somme de 44,99 € et n’est malheureusement disponible que sur Mac OS X. Les illustrations de cet article ont été (forcément ?) réalisées avec Sketch.