J’aime Photoshop d’un amour franc et sincère. Je l’utilise à outrance, pour retoucher des photos mais aussi pour créer des maquettes imprimées ou digitales.
C’est un outil tellement abouti qu’on s’aperçoit qu’il y a souvent plusieurs moyen d’arriver à un même résultat.
Une explication bien illustrée de la joie théorique des objets dynamiques dans Photoshop. veerle.duoh.com
Les récents ajouts fonctionnels (objets dynamiques, objets dynamiques liés, plan de travail multiples, exportation simplifiée, styles d’objet et de texte…) dopent considérablement la productivité.
Ces outils sont particulièrement cools. On se dit que comme dans un site Internet, on va pouvoir partager des éléments entre plusieurs documents, et les mettre à jour tous d’un coup en cas de modification d’un élément récurant.
Au premier abord, la magie opère. Les objets dynamiques liés sont une mini révolution qui permet de fractionner une maquette en plusieurs documents, rendant possible le travail collaboratif simultané.
Ça marche nickel pour des petits documents comme des campagnes publicitaires multiformats.
Oui mais…
Lors de projets de maquettes de sites Internet, j’ai été amené à réaliser de nombreuses pages, et notamment des versions de pages de listes d’items.
Un de mes souvenir les plus douloureux est la réalisation de maquettes de pages incluant une liste avec les vrais images et les vrais textes de résultats de recherche de 160 modèles de lave-linge. C’était sexy au diable.
Cette liste m’a prouvé que qu’il y a des limites à ne pas dépasser avec Photoshop. En multipliant calques dynamiques et plans de travail, il est possible de mettre à genoux la plus puissante des stations de travail. On arrive rapidement à des centaines de calques lourds à manipuler, malgré l’apparente flexibilité de ces fonctionnalités.
J’ai du, pour réaliser la maquette, fractionner ma page en plusieurs documents Photoshop, et tout assembler dans un document en copiant-collant des captures aplaties.
Photoshop n’est pas parfait non plus quand il s’agit d’exporter des objets vectoriels, notamment des SVG à la bonne taille. Cela nécessite des aller retour dans Illustrator.
Enfin dans une gestion de projet complète, une page passe par plusieurs étapes : zoning, wireframe, maquette, prototype fonctionnel. Photoshop n’est pas l’outil idéal pour les zonings et wireframes, et il ne peut pas réaliser de prototype interactif.
À la recherche d’une alternative spécialisée
Depuis quelques années, de nombreux logiciels sont apparus permettant de gérer de manière plus fluide le flux de production d’interfaces. Elles permettent de construire zoning et wireframe, d’y inclure un graphisme pixel-perfect, de permettre un test fonctionnel dans une fenêtre émulée ou dans un vrai device, puis finalement d’exporter les assets pour une intégration par une équipe de développement.
SketchApp
Sketch a le vent en poupe. C’est le choix de nombreux concepteurs d’interface. C’est un logiciel très complet et super optimisé. Lancé en 2010, le logiciel est éprouvé, des fonctionnalités ont été ajoutées à la demande des utilisateurs et il dispose de nombreuses extensions très pratiques. En plus la licence de 99$/an est vraiment pas chère.
Idéalement c’est le logiciel qu’il me faudrait, mais je n’ai pas de Mac ultra à jour au niveau de la configuration système.
Axure
Très utilisé, mais très cher.
InvisionApp
Une autre solution validée par l’industrie. C’est une application dans le navigateur, très bien pour le travail collaboratif.
C’est un service sur abonnement, limité dans sa version gratuite à un projet. Je cherche quelque chose de plus pérenne, de plus solide et qui fonctionne hors-ligne.
Figma
Le Google Docs du design. Dans le navigateur, collaboratif, c’est très bien fichu mais je n’ai pas testé en production.
Gravit
Un site qui permet de faire des interfaces. Gratuit mais moins efficace qu’une application.
Adobe XD
En 2015, Adobe a lancé le développement d’XD. Le logiciel est clairement inspiré de Sketch. Il est actuellement inclus à la Suite Créative. D’abord réservé aux utilisateurs de Mac, une version Windows est sortie en 2017 pour ma plus grande joie.
J’ai commencé à l’utiliser pour des projets de sites Internet et d’application mobiles. L’application a de nombreux avantages par rapport à Photoshop. Elle est légère, intuitive et relativement simple. Elle permet de maquetter rapidement de nombreux écrans, sans trop puiser dans les ressources de mémoire de votre ordinateur. Comme dans Illustrator la feuille de travail est énorme. Comme dans Sketch, on peut créer des prototype interactifs, exporter des documents de conception image ou vidéo, et exporter les assets graphiques pour une intégration iOs ou Android en un clic ou presque (ce qui peut s’avérer pénible avec Photoshop, à cause d’une nomenclature et de tailles de document à respecter strictement).
Le logiciel n’est clairement pas fini, il pèche sur certains points : gestion des effets graphiques limités, pas d’export des valeurs stylistiques du texte, pas de plugins, options générales assez primaires… Heureusement il est plus rapide de copier que de créer, donc normalement ils devraient rattraper leur retard rapidement.
N’ayant pas ou peu de concurrence sur PC, cela reste à mon avis le meilleur choix sur cette plateforme. À noter : la version Mac de XD est légèrement en avance sur la version PC.
C’est un logiciel très agréable pour réaliser des maquettes pixel perfect, avec des marges et des espacements réguliers. XD gère très bien les tracés vectoriels, l’intégration d’images pixel par simples cliqué-glissé et surtout il permet d’essayer rapidement et souplement différentes maquettes d’affichage de liste. Il est aussi maniable que de nombreux outils de wireframe mais avec un rendu très proche de la mise en production, ce qui permet une meilleure prise de décision.
C’est aussi un logiciel léger, qui fonctionne très bien avec des machines modestes.
Adobe XD permet par sa souplesse de faire des essais en direct, en même temps que les idées et suggestions sont lancées lors de réunions créatives.
Je vous conseille de l’essayer si vous n’êtes pas déjà habitués à Sketch. Le logiciel a intégré la Creative Suite en version 1.0 en 2017. Il est devenu gratuit en 2018. C’est un must-have.
Les liens entre les pages d’un projet, pour pour faire un prototype fonctionnel
L’export des assets graphiques se fait en un clic. Comme disait Kenza du loft : « C’est que du bonheur »
NOTA
Captures d’écran lors de la réalisation graphique de l’application UFC – Que Choisir Quel Cosmetic
