Workflow moderne cherche graphiste à l’ancienne

En tant qu’intégrateur n’aimant pas maugréer après son camarade graphiste, j’ai cherché dans mon workflow quotidien ce qui pouvait nous être utile et lui faciliter la tâche. C’est marrant, j’ai trouvé plein de trucs.

Plantons le décor

maquetteAccueil-FINAL_new-HOME (2).psd — 163 Mo

En ouvrant le fichier, je tombe sur :

  • un nid de calques masqués ( ohé ohé ) ;
  • les maquettes de trois pages différentes ;
  • des noms de calques, groupes et masques à la limite du folklore ;
  • des textes transformés dans Photoshop ;
  • aucun repère, des éléments aplatis…

Un vrai de vrai.

« Qu’est-ce qu’on a raté ? »

Voici deux réactions communes lors de la réception d’un tel bouzin :

  1. Le personnage « Tristesse » de Vice-Versa qui pleure
    La tristesse
    Avec un éventuel recours à la PLS.
  2. Le personnage « Colère » de Vice-Versa qui s’enflamme en hurlant
    La colère
    Aucun graphiste n’a été malmené pendant le tournage.

Bon. Que fait-on pour éviter ça ? Je suis intégrateur, je proposerai donc des solutions d’intégrateur.

Sous-entendu : je ne parlerai pas d’Avocode ou d’InVision (et leur extension Craft, incluant notamment Library), mais vous devriez vraiment y jeter un œil.

Revoir ses fondamentaux

Définir un protocole de travail

Une évidence pour commencer : se remettre en question est indispensable.

Poussons Git

Sus aux noms abracadabrantesques

Avec Git, vous pourrez conserver l’historique, revenir en arrière, utiliser les tags pour les versions, disposer d’une version de référence, et de branches…

Et sur GitHub et son interface graphique :

  • un fork pour proposer une variation ;
  • des PR pour travailler à plusieurs ;
  • des issues et même un wiki pour vos échanges.

Un petit tuto pour la route : Versioning Your Graphics Files With Dropbox

Inclusion de fichiers

Comme avec du templating, vous y trouverez quelques avantages :

  • moins de répétition ;
  • une propagation des changements « automagique » ;
  • une organisation proche de celle de votre CMS ;
  • et une facilité pour travailler à plusieurs.
              
              home.psd
              post.psd
              404.psd
              /templates
                  _header.psd
                  _footer.psd
                  _nav.psd
              /components
                  _tabpanel.psd
                  _dropdown.psd
                  _modal.psd

Les objets dynamiques liés dans Photoshop

Déléguez vos tâches

En utilisant les objets dynamiques et un gestionnaire de tâches tel que Gulp, vous pourrez facilement :

  • optimiser le poids et les dimensions des fichiers ;
  • générer un sprite et une police d’icônes à la volée ;
  • utiliser Git via un script npm.

Et tout ça sur le poste de votre collègue graphiste, qui pourrait ainsi vous livrer tout ça déjà optimisé sur le repo sans même avoir à s’en soucier.

Guide de styles

Dans Photoshop, les bibliothèques CC sont très intéressantes. En dehors, jetez un œil à PSD.rb ! C’est un parser en Ruby qui permet d’extraire les informations telles que les corps de texte, les couleurs, les tracés vectoriels, les contenus textuels…

Il existe un package Node qui s’interface avec PSD.Rb et un autre qui extrait les caractères, corps et couleurs dans un fichier .json en précisant le nombre d’occurrences. Avec un peu d’imagination : générer des CSS « atomiques » ou définir des modules CSS pour chaque composant ?

La popote Photoshop

Vous pouvez implémenter vos propres scripts et actions dans Photoshop. Et c’est du JavaScript !

Si vous avez besoin de morceaux, quelques ressources en vrac :

Oui mais…

  • le graphiste freine des quatre fers ;
  • le PSD vient d’ailleurs, il m’arrive validé momifié ;
  • le workflow complet est pyramidal — a.k.a. « cycle en V » ;
  • les intermédiaires sont si nombreux qu’on joue au téléphone arabe…

L’amortisseur de PSD

Certaines pistes évoquées peuvent être mises en place par l’intégrateur lors de la réception du PSD. Lister les typographies, les couleurs, les corps… Tout ceci sera du pain béni quand vous verrez atterrir un PSD de 163 Mo !

Conclusion

Il s’agit avant tout d’un problème de méthode et de communication. Et si l’échange est impossible, vous pouvez toujours bricoler un amortisseur !

Et n’oubliez pas de vous pencher très sérieusement sur divers produits miracles :

Lisez également les slides de l’excellente conf’ «  Réconcilier les développeurs et designers autour d’un thème WordPress  » de Matthieu Bousendorfer et Geoffrey Crofte au WordCamp Paris 2016, ainsi que ceux de Marie-Cécile Paccard et Goulven Champenois à Blend en 2014 : « Designer & intégrateurs : BFF ».

Merci

Et à bientôt ☺

Crédits