2 Associés est une agence web de Montréal spécialisée en développement web et mobile, stratégie de contenu SEO, SEM et les technologies langagières.

Vous voulez discuter?

Workflow avec Photoshop CC 2015 et InVision

2 Associés développement web et mobile à Montréal

Pour améliorer considérablement votre «workflow» de production en équipe (ou avec votre client), la combinaison Photoshop CC 2015 et InVision pour le design de prototypes collaboratifs semble être la meilleure.

Je travaille (très souvent) en équipe. La plupart du temps il s’agit d’un designer et de plusieurs développeurs/intégrateurs et le premier problème que je rencontre est le partage des visuels pour fins de commentaires ou intégration : Le designer doit sortir toutes les images et les envoyer d’une manière ou un autre à l’équipe ou alors, le fichier source est directement partagé via un service (Dropbox, WeTransfer, etc.) ou sur une plateforme (Basecamp, Producteev, etc.) et à partir de ce moment, le designer perd le contrôle. À partir de ce moment, d’autres personnes altèrent le fichier pour diverses raisons. À partir de ce moment, l’auteur ne reçoit généralement plus la dernière version révisée, faisant en sorte que s’il doit retoucher son fichier, il va retoucher « son » fichier et non celui mis à jour. Beaucoup de confusions et de pertes de temps en vue.

Je ne connais aucune entreprise qui permet (encore officiellement) l’utilisation des iCloud, Google Drives, Dropbox etc. comme serveurs de fichiers sources d’entreprise (pour des raisons de sécurités, confidentialités, etc.). Lorsque l’entreprise le permet, ce n’est que pour le transfer de fichiers d’une personne à une autre mais jamais comme espace de travail principal (même avec une copie locale).

Comment faire pour développer et faire évoluer une maquette sans échanger le/les fichiers sources ou manuellement sortir les visuelles pour toute l’équipe?

Workflow avec Photoshop CC 2015 et InVision

Photoshop utilise «Layer Comps», depuis 2011 environ, mais avec la venue de Photoshop CC 2015, InVision instaure une fonctionnalité à même la nomenclature interne de Photoshop pour extraire facilement toutes les compositions d’une maquette ou des «Artboards» présents dans Photoshop CC 2015.

Le designer peut donc travailler son PSD sur le serveur de la compagnie, nommer adéquatement ses «Layer Comps» et à partir de son compte InVision (gratuit pour 3 projets), faire un «Drag & Drop» de son PSD afin que InVision puisse extraire toutes les compositions en PNG. Restera ensuite qu’à partager le lien raccourci du projet InVision à toute l’équipe. À noter que le lien du projet est unique et permanent jusqu’à la suppression du projet. Si le designer fait des retouches et refait les étapes précédentes, toutes les compositions se mettront à jour (automatiquement). Pour chaque fichier PNG remplacés, un historique est conservé chez InVision.

Le designer reste donc l’auteur du document source jusqu’à sa finalisation. En extra, vous profitez de toutes les fonctionnalités de commentaires et ajout d’interactivité propres à InVision.

Il existe un «plug-in» InVision pour Photoshop qui vous permet de travailler en temps-réel avec un client à distance, un peu à la manière d’un partage d’écran, sur un visuel visionné sur un moniteur, un téléphone ou une tablette. Vraiment très pratique.

Commentez cet article

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

Articles reliés