Sketch, ça vous parle ? Sketch, ça vous parle ?

Sketch, ça vous parle ?

par ,
le 13 juin 2016

0
0

Le studio de Roubaix a expérimenté Sketch sur un projet de refonte de site responsive grand compte et international. Dur dur de se remettre à Photoshop après quelques mois non stop passés sur ce nouveau logiciel. Pour le moment, on vous propose de faire la connaissance de Sketch, si ce n’est pas déjà votre nouvel outil de prédilection. Le case study ce sera pour plus tard.

Sketch : piqûre de rappel

Sketch est un logiciel conçu pour le design d’interface avant tout, une niche, mais c’est aussi ce qui le différencie. Quelques mots qui le caractérisent : pratique, flexible, 100% éditable, 100% vectoriel, plug-in, interface, rapide, léger, natif MAC (même si des rumeurs courent sur un portage sous Windows). En résumé on se concentre sur la partie fonctionnelle lorsque l’on travaille sur Sketch, il répond bien au flat design et à tout design 2D qui a vocation à terminer sur un écran.

sketch-02

Depuis quelques années, Sketch prend de plus en plus de place dans le cœur des créatifs et s’impose surtout, progressivement auprès de la communauté des UX designers. Bonjour « changement » ! Eh oui il faut bien le dire, le petit dernier remet en question la domination du marché par Adobe. Et non sans fondement, il a conquis des sociétés comme Facebook, Google, Twitter, Dropbox… Avantage non négligeable, Sketch est peu honéreux, et surtout on le paye une bonne fois pour toute.

Le jeu des points forts… 

#1 Rapidité & efficacité 

Rapide oui .. à installer, à prendre en main et à utiliser au quotidien. Environ 2 jours pour maîtriser les fondamentaux de Sketch pour un designer. C’est un logiciel natif MAC donc extrêmement fluide, d’autant plus qu’il propose en grande partie des outils vectoriels. Il nécessite un laps de temps très court à l’ouverture. Il est aussi agréable de constater la légèreté des fichiers même lorsque l’on y compile tout un projet.

#2 Bonjour les copains

sketch-04

Sketch bénéficie d’un grand nombre d’adeptes qui constituent une communauté active. De nombreuses interfaces sont disponibles en fichiers sources pour vous aider à démarrer (Apple Watch par exemple). Creusez, testez, explorez et surtout partagez ! C’est par ici http://www.sketchappsources.com

#3 Artboards & Pages : perfect combo

sketch-05b

Sketch fonctionne avec un système de « artboards ». Comme sur Illustrator vous pouvez donc disposer de plusieurs plans de travail côte à côte. Grâce au système de pages, vous pouvez travailler tout votre projet sur un seul fichier. Au studio roubaisien nous avons travaillé un fichier par device pour notre projet de refonte de site e-commerce. Cela donne une vue d’ensemble et offre une réelle aisance quant à la réflexion des interactions (surtout en mobile). Les composants (principes de design) sont ainsi plus faciles à utiliser.

#4 Plug-in en veux-tu en voilà

Pour enrichir la palette d’outils assez « dépouillée », mais je n’aime pas trop ce terme, je parlerai plutôt d’un plan de travail « épuré », vous pouvez aisément ajouter des plug-in. Le plus apprécié est le Sketch mirror. Le principe ? Vous permettre de regarder vos designs en temps réel sur d’autres devices.

#5 C’est carré

De manière générale, Sketch est précis et permet d’appréhender visuellement toutes vos mesures en pixels. Quelques fonctionnalités appréciées des designers : smart guides, touche alt pour afficher les mesures, mode vectoriel, exportations multiples.

sketch-07b

Grande révolution, le système de symboles vous permet de modifier un élément sur toutes les pages en une seule manipulation (bien utile pour un menu, il se remplacera partout si vous avez dupliqué ce fameux symbole). Attention donc aux mauvaises surprises lorsque ce « détail » vous échappe. Comment les repérer ? Les calques des symboles sont violets.

On observe peu de plantage et la sauvegarde automatique fonctionne très bien (pas mal hein !).

#6 Vous allez aimer exporter

sketch-06

Pas le choix, il faut qu’on parle des exports. Tous les designers vous confirmeront (j’espère ne pas trop m’avancer) que la phase d’exports est fastidieuse tout au long d’un projet. Sur Sketch, petite révolution cette fois-ci… vous avez la possibilité d’exporter en une manipulation plusieurs formats pensés pour nos contraintes web actuelles (le X2 pour le retina par exemple).

#7 Réconcilier FrontEnd et Design

Les outils proposés peuvent paraître limités, mais sont en fait calqués sur les propriétés disponibles en CSS3. Plus du tout (ou moins en tous cas^^) de « c’est beau mais c’est pas faisable ! ».

Arf… Impossible de respecter un top 5 ici mais pour les points négatifs, promis, je me suis améliorée dans l’exercice.

… et un peu moins forts

#1 B comme bugs

sketch-08b

En toute transparence, avouons qu’il reste des bugs que les mises à jour ne corrigent pas. Le magnétisme et l’alignement de la grille sont à améliorer. Sans raison apparente, ou lorsqu’il y a trop d’éléments sur la page, le magnétisme n’arrive plus à effectuer un alignement précis.

L’outil texte fait parfois quelques caprices (décalage lors de la saisie).

sketch-12

Le syndrome du carré blanc… Petite histoire bonus propre à notre projet ! Allez savoir pourquoi un carré blanc nous a hanté durant des semaines. Malgré de multiples suppressions, son retour nous surprenait à chaque ouverture du fichier, bizarrerie du jour bonjour…

#2 OS X only

Logiciel exclusivement supporté par OS X (pour l’instant), l’éditeur ne souhaiterait pas créer de version supportée par d’autres plateformes. On y voit un avantage en terme de rapidité mais un inconvénient pour le travail en équipe.

#3 Tracé vectoriel… ré-ouvrez Illustrator

sketch-09

Pour ma part, je trouve le dessin vectoriel moins précis que sur mon bon vieil Illustrator (qui me déçoit un peu dans sa dernière version soit dit en passant). Pour une première prise en main j’ai trouvé le travail assez fastidieux, avis partagé par mon binôme lors de ces derniers mois.

#4 Mises à jour presque chaque jour

Les mises à jour sont plus que fréquentes. Cela devient donc une habitude lors de l’ouverture du logiciel en début de journée. Heureusement, soyez rassurés, elles prennent très peu de temps.

#5 Fonts : pay attention

Attention à bien installer les Fonts liées à un document. Ne validez pas l’ouverture sans avoir tout installé au préalable. Le risque ? Ne plus pouvoir mettre à jour facilement la typographie de l’ensemble des textes. Cela pourrait vous faire perdre un temps précieux.

Quelle différence entre Photoshop, Illustrator et Sketch ?

sketch-10

Photoshop devenu très généraliste est considéré par certains designers comme « usine à gaz ». Cette impression émane du temps d’ouverture particulièrement long, du nombre d’outils infinis, et d’une prise en main du logiciel sur le long terme. Photoshop offre par définition tellement de possibilités que Sketch n’a pas… En travaillant sur Sketch, j’ai également besoin de Photoshop pour préparer les images, effectuer les retouches photos, travailler des textures…

Illustrator bien plus complexe que Sketch demande également une phase d’apprentissage plus longue et plus poussée. Sketch et Illustrator se rejoignent sur l’utilisation des plans de travail et sur une pratique principalement vectorielle. Illustrator reste inégalé pour les projets vectoriels et les illustrations complexes.

Sketch, conçu pour le design d’interface, n’a donc pas vocation à remplacer nos logiciels adorés. Tout dépend du type de projet que vous menez et de la manière dont vous souhaitez le faire.

Pour conclure sur cette comparaison, je vous invite à suivre de près une autre alternative : https://affinity.serif.com/fr/designer/

Comment gérer la phase d’intégration ?

C’est bien beau de préparer des maquettes sur Sketch mais pour l’étape suivante – interrogation légitime – on fait comment ? Selon les créateurs de Sketch, on bénéficie d’un code-friendly, autrement dit tout ce qui est utilisé dans le logiciel (ombres ou bordures par exemple) est réalisable en CSS. Sketch nous force à être d’autant plus minutieux, on devient obsédés des chiffres et du pixel perfect grâce à des guidelines précis. Dénicher des codeurs inconditionnels de Sketch ? Challenge accepted !

sketch-11

A vous de jouer, c’est par ici : https://www.sketchapp.com/

 

mots-clés :

, , , ,

,

articles à lire ensuite...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *