Table des matières
Chaque UI designer rêverait d’utiliser le ou les outil(s) le(s) plus performant(s) dans son processus créatif. Mais comment y trouver son compte parmi la multitude d’outils déjà existants sur ce marché sans pour autant s’y perdre ? Nous vous proposons un tour d’horizon des outils que nous utilisons tous les jours et vous faisons un feedback de notre expérience.
AXURE : Un prototypage interactif complexe
Axure est un logiciel de prototypage interactif complexe pour PC & MAC. Il est ancré sur le marché des outils de conception web depuis 2002 et est encore très utilisé. Très riche en fonctionnalités, il permet de créer par exemple des formulaires à choix conditionnel, des dropdown menu, des animations, des pop in etc. Il est possible d’y ajouter des bibliothèques d’éléments de ce type déjà configurés ou de les paramétrer de A à Z comme bon vous semble. En bref, cette app permet une simulation détaillée des parcours utilisateurs. Les intervenants sur le projet peuvent donc avoir une vision réaliste des interactivités du futur site ou application. Les prototypes générés par Axure peuvent également servir à effectuer des tests utilisateurs.
App payante PC/MAC (460€ la licence, soit 23€/mois)
Les notes de l’agence : Nous avons tenté de réaliser des prototypes avec Sketch & InVision (dont nous parlons plus loin dans cet article) mais les possibilités nous ont paru pour l’instant trop limitées et nous restons fidèles à Axure.
SKETCH : pour un design d’INTERFACE RÉUSSI
Une fois notre prototype fonctionnel réalisé, nous passons aux maquettes. Sketch est l’outil d’excellence pour cette partie graphique du design d’interface. Des fonctionnalités ont été prévues pour gagner en productivité comme ses symboles intelligents qui permettent un gain de temps considérable. Une simple modification du symbole va s’appliquer à tous les écrans contenant ce même symbole.
App payante uniquement disponible sur MAC (99 €/an)
Et les outils d’adobe ?
Les notes de l’agence : Il y a presque un an, nous utilisions encore Photoshop pour faire le design de nos interfaces. Nous attendions de tester le dernier né d’Adobe qui avait pour but de concurrencer Sketch : Adobe XD, mais les mauvais échos de la bêta de XD nous ont influencés et incités à nous positionner définitivement sur Sketch. Bonne pioche ! Nous sommes aujourd’hui ravis de l’avoir adopté. En effet, c’est un outil très facile à prendre en main car il est adapté et conçu pour les designers d’interfaces. Sa communication avec InVision (existante sur Photoshop) est beaucoup plus fluide.
Photoshop avait été détourné de sa fonction principale pour servir au web design en l’absence d’outils dédiés, nous l’utilisons toujours mais pour ses fonctions de base : la retouche d’images ou la création graphique pure.
InVision : des maquettes statiques aux maquettes interactives
Invision permet principalement de rendre interactives des maquettes réalisées sous Sketch (ou autre outils de design d’interface). Par la réalisation de petites simulations telles que des liaisons de pages, des header / footer fixe etc. (qui ne sont pas aussi élaborées que sur Axure). InVision est également une plateforme collaborative grâce au mode commentaires ce qui facilite la communication du designer avec le client et l’équipe projet.
Sa particularité ? Il offre différents points de vue dont :
- La vision client : qui voit le panorama des écrans et peut faire des commentaires au designer. Des feedbacks agrémentés de screenshots lui sont transmis afin qu’il pointe directement l’erreur du doigt. Cette communication sera facilitée par des notifications.
- La vision owner : grâce au “build option”, le designer disposera d’un template dont les modifications de liens et d’hyperliens s’appliqueront à l’ensemble des maquettes. Les démarches sont ainsi simplifiées et les étapes réduites ce qui offre un gain de temps non négligeable. Enfin, ce dernier pourra se repérer plus aisément dans son travail en mettant à jour ses statuts (en cours, à valider, à reprendre etc.)
- La vision développeur : Le développeur front-end pourra bénéficier d’une récupération des éléments CSS, des assets et images des fichiers du designer. C’est grâce à l’Inspect mode, son véritable allié, que toutes ces caractéristiques lui seront possible. Ainsi, son intégration sera moins contraignante et il gagnera du temps sur le développement.
Son inconvénient ? Il nécessite d’avoir un logiciel de design externe d’interface.
CRAFT : le plugin d’InVision essentiel avec sketch
C’est ce plugin qui permet la liaison entre Sketch et InVision. Une fois Craft téléchargé, la toolbar s’installe automatiquement sur Sketch. Craft accompagnera le designer et lui permettra de récupérer des styles, des fonts, des couleurs des maquettes réalisées sur Sketch. Il pourra alors envoyer toutes ses modifications graphiques directement sur InVision et disposera d’une synchronisation des écrans de Sketch.
InVision STUDIO : la révolution (?) a venir …
InVision Studio n’est pas encore officiellement sorti mais est très attendu. Ce sera peut-être celui qui va redistribuer les cartes parmi les outils déjà existants sur le marché. En effet, il a pour ambition d’être un outil permettant la création d’interface comme Sketch et XD et de pouvoir créer des animations ou micro-interactions comme Principle. Certains ont la chance de profiter dès maintenant de la bêta mais ce n’est pas encore notre cas. Les fonctionnalités vont s’y additionner au fur et à mesure. Donc, l’étendue de ses capacités n’est pas encore connue mais l’on ose imaginer son potentiel et il nous fait rêver.
Web app payante (18€/mois)
ceux que nous aimerions tester
MACAW : Cet outil de conception a la particularité de générer du code un HTML/ CSS de qualité et de pouvoir optimiser le responsive. Il promet presque de remplacer un développeur front-end ! Fraîchement racheté par InVision, a-t-il encore un avenir ou va-t-il se greffer à InVision (studio) ? (Licence gratuite)
PRINCIPLE : Cet outil semble pour l’instant le plus intéressant pour simuler des micro-interactions (avec une timeline permetttant de gérer durée et succession d’enchaînement des animations) en les exportant ensuite en GIF ou MOV. (la licence coûte 100€)
Nous pourrions en citer beaucoup d’autres comme Framer, Origami, Marvel…
Voici un comparateur qui permet un aperçu de toute cette galaxie d’outils.
En conclusion, ces logiciels sont presque tout aussi performants les uns que les autres mais présentent des caractéristiques différentes qui font leur force respective. Ils sont très souvent complémentaires. Prenons Axure, une licence vieillissante mais qui reste une des plus polyvalente et indispensable pour certains projets à parcours complexes. Quant à Sketch, il a connu un succès fulgurant auprès de l’ensemble des designers car il a permis un gain de productivité important. Par défaut, la conséquence directe de cette validation dans le monde du design a été le “rejet” de la suite Adobe.
Enfin, InVision est l’outil révolutionnaire en devenir en concernant l’optimisation des conditions de travail des professionnels du milieu et qu’il faut surveiller de près.
Dans le cas de YATEO, Axure + Sketch + InVision + Adobe Creative Cloud = environ 120€ par mois pour un designer.
L’idéal serait de condenser les logiciels pour n’avoir à payer qu’une seule licence ou à ne payer que les logiciels indépendants que nous utilisons au quotidien.
Si vous souhaitez avoir des informations sur nos prestations, contactez-nous au 0158892736 ou via le formulaire de contact disponible ici
Suivez-nous