Voici mes premières impressions d'Inspect proposé par InVision LABS dans un processus de travail réel.

Inspect ça sert à quoi en fait ?

Inspect fait le pont entre les Designers et l'intégrateur, entre la maquette graphique et l'intégration HTML CSS.

Dans le processus que je suivais jusqu'ici, je faisais mes maquettes dans Photoshop et ensuite je transférais les fichiers originaux à l'intégrateur… puis, charge à l'intégrateur d'interpréter la maquette au mieux. Et c'est là que ça coince en général ! Pris par le temps et l'objectif que le site "fonctionne", l'intégrateur (et/ou développeur) ne fait pas toujours attention à une multitude de détails comme l'interlignage, la taille des polices, la graisse, les distances entre les blocs, etc. Autant de détails qui font qu'un design graphique est un design graphique. Pensez-vous vraiment que les designers posent les choses au hasard  ?

Et alors, inspect dans tout ça ?

Inspect pourrait, justement, permettre à l'intégrateur d'avoir, au sein de l'interface d'InVision, l'ensemble des styles de chaque élément présent à l'écran. La condition pour pouvoir l'utiliser est de travailler ses designs non plus dans Photoshop, mais dans Sketch ! Eh oui, vous sentez le changement qui arrive petit à petit… 😉 Il vous faudra, également, avoir installé le plug-in Craft.

 

 

 

 

 

 

 

Ce que je trouve quand même bien cool, c'est de pouvoir télécharger directement un picto, une image (JPG, PNG, SVG, etc.) peut importe, n'importe quel asset à une condition, l'avoir prévu dans Sketch. Pas de panique, si vous n'avez pas prévu la chose, il suffira de retourner dans Sketch, de créer votre asset et ensuite de synchroniser via Sync du plug-in Craft. Une petite flèche blanche fait son apparition dans les calques quand un élément est récupérable, et aussi à droite dans la partie "Assets". Il suffit alors de cliquer sur l'icône de téléchargement à côté du nom…

Ce processus de travail est assez avantageux, il permet de gagner en temps et en qualité. Inspect étant en ligne, nul besoin pour l'intégrateur d'ouvrir des fichiers de plusieurs mégas comme c'était le cas avec Photoshop. À chaque mise à jour dans un design, il faut retransmettre ces fichiers souvent très lourds. Ici, avec Sketch et Inspect, ça va vite. Sans sortir de Sketch, un appui sur un bouton, et hop, on synchronise ce qu'on veut. De l'autre côté du miroir, l'intégrateur à l'assurance d'avoir en permanence une version toujours à jour (à condition que le designer fasse son taf;-)). Côté intégrateur, l'interface va permettre de connaitre la position de chaque éléments en relation avec les autres à laide d'un simple clic et de récupérer des CSS toutes prêtes ! Merde, ça le fait quand même, non !?

Pour conclure

Je suis en train de tester ce processus sur un projet. Inspect fait le pont entre l'agence, l'intégrateur et moi. La version étant encore en bêta, il se peut que vous rencontriez de petits soucis. Pour ma part, le seuil écueil que j'ai pu vivre, c'est que certains Assets n'étaient récupérables, toujours en attente de synchronisation… j'ai fini par comprendre quel était le problème : il s'agissait d'un bug sur les caractères accentués. Inspect n'aime pas les noms avec des accents dans les assets. C'est pour cela que dans l'exemple plus haut, j'ai nommé mon calque « Icone_choix_metier » et non pas « Icône_choix_métier ».

À part cela, tout fonctionne à merveille et j'espère que l'agence y trouvera son compte. Je ferai un bilan après avoir terminé ce projet.

Pour en savoir plus Inspect, visitez le l'article officiel ici (en anglais)