Dans cet article, Anthony vous propose de découvrir certains logiciels et outils sur lesquels les UI designers interviennent pour la réalisation de wireframes/maquettes & prototypage. Il faut savoir qu’il en existe une petite cinquantaine, il va donc vous faire un retour sur ceux qu’il a déjà utilisé 🙂 

[divider color= »blue » type= »solid » width= »100% » height= »1px » float= »left »][/divider]

Sketch (le pionner)

Sketch est un logiciel de conception de wireframes et maquettes. La société a été fondée en 2008 et est basée à Hague aux Pays-Bas. Il a l’avantage de s’être implanté parmi les premiers dans ce secteur et donc adopté par les plus grands (Apple, Facebook, Google, Stripe, Nasa, Nintendo) Cependant, avec des concurrents qui fleurissent au fur et à mesure des mois, Sketch commence à perdre une part du marché avec le manque de fonctionnalités. Heureusement, une grande communauté est derrière ce logiciel et créé des plugins comme Craft qui est le plus célèbre permettant d’importer des images via gettyimages & iStock, faire des retours type crayonné sur les maquettes, de créer une librairie, mais aussi des liens entre les maquettes (prototypes) et faire du versionning. Ce plugin est développé par InVision. Sketch est le logiciel qui est à ce jour le plus utilisé par les designers d’interfaces.

  • Plateforme : Mac
  • Positif : Petit prix / Grande communauté
  • Négatif : Vie grâce à sa communauté / disponible que sur Mac / version anglaise uniquement
  • Prix : 99$
[divider color= »blue » type= »solid » width= »100% » height= »1px » float= »left »][/divider]

InVision (l’expert du prototypage)

Créé en 2011 à New-York, InVision est un outil en ligne permettant de créer de l’interaction entre plusieurs wireframes/maquettes pour valider un parcours utilisateur. InVision travaille depuis de nombreuses années en collaboration avec Sketch. Ils proposent également des plugins pour Sketch et Photoshop afin d’exporter rapidement les écrans. InVision montre de plus en plus une envie de vouloir être totalement indépendant en proposant des nouveaux outils/logiciels. L’outil est utilisé par des grandes sociétés (Netflix, Twitter, Linkedin, Shopify, Soundcloud, Uber, Zendesk, Salesforce, Mailchimp, Evernote).
  • Plateforme : Web
  • Positif : Petit prix / Grande communauté
  • Négatif : Le prix / version anglaise uniquement / Disponible uniquement en ligne, pas d’internet > tu bosses pas ! 😉
  • Prix : Gratuit pour 2 prototypes ensuite payant de 15$/mois pour 3 prototypes jusqu’à 99$/mois pour des prototypes illimités et travailler en équipe.
[divider color= »blue » type= »solid » width= »100% » height= »1px » float= »left »][/divider]

Marvel (la simplicité)

Marvel est un outil en ligne créé en 2013 à Londres. La société est composée de seulement 24 salariés contrairement à ses concurrents composé d’effectifs à 3 chiffres. Marvel permet de créer des maquettes directement dans l’outil ou important vos créations réalisées au préalable avec Sketch ou l’un des outils de la suite Adobe, vous pouvez également réaliser des prototypes. Cet outil est très peu utilisé pour la création de maquettes, il est principalement utilisé pour le prototypage qui est avancé par rapport à ses concurrents. Vous retrouverez principalement cet outil dans des organisations où le CP s’improvise designer 😀
Par contre, je craque totalement pour leur application sur l’apple TV qui permet de projeter et de switcher simplement des prototypes sur grand écrans, idéal pour les présentations, mais encore faut-il avoir une apple TV 😀
Marvel est utilisé par des marques comme Deliveroo, kickstarter, Transferwise et DICE.
  • Plateforme : Web
  • Positif : Simple d’utilisation / intègre des éléments graphique avec un système de drag & drop / prototype en ligne protégés par mot de passe sur la version payante.
  • Négatif : Signature “Marvel App” sur les prototypes en version gratuite / Prix excessif pour travailler en équipe / Disponible uniquement en ligne.
  • Prix : Gratuit pour 2 projets et 1 utilisateur ensuite payant de 16$/mois pour des projets illimités, mais toujours avec 1 seul utilisateur. Il faut prendre un abonnement supérieur (64$/mois) pour pouvoir travailler en équipe.

 

[divider color= »blue » type= »solid » width= »100% » height= »1px » float= »left »][/divider]

Adobe XD (l’américain !)

Adobe XD est le petit dernier de ces outils avec la sortie d’une bêta en octobre 2016 et vient de passer à sa version V.1 au début du mois d’octobre 2017. Adobe XD frappe un grand coup en réalisant un mix de Sketch et de InVision en un seul et unique logiciel ce qui permet aux designers de gagner un temps considérable. Également, des applications mobiles sont disponibles pour avoir un aperçu direct sur différents devices et de tester en direct l’ergonomie. Le gros avantage d’Adobe XD, c’est le budget rocambolesque que dispose Adobe pour le développer, de nombreuses fonctionnalités sont à venir comme le responsive design, le partage développeur (visualiser les flux, obtenir les dimensions des éléments, les couleurs, les polices, les styles graphiques, etc.) et la mise en place de plugin avec Avocode, Zeplin & Sympli.
  • Plateforme : Mac & Windows
  • Positif : Création de maquette & prototype assembler / application mobile / gros budget
  • Négatif : prototype en ligne non-protégés par un mot de passe
  • Prix : 12€ /mois

 

[divider color= »blue » type= »solid » width= »100% » height= »1px » float= »left »][/divider]

Studio (le futur king ?)

Studio n’est pas encore sortie, mais fait déjà parler de lui. Annoncé le 20 octobre via une vidéo, la société néerlandaise veut taper un grand coup en proposant un logiciel disponible sous mac & windows avec de nombreuses fonctionnalités dont certaines pas encore intégrées par Adobe XD. Sortie prévue : début 2018.

[divider color= »blue » type= »solid » width= »100% » height= »1px » float= »left »][/divider]

Comparaison

Voici un petit tableau récapitulatif de 8 outils/logiciels que j’ai déjà utilisé (sauf pour studio) avec leurs fonctionnalités, leurs supports et le prix.
[divider color= »blue » type= »solid » width= »100% » height= »1px » float= »left »][/divider]

Mon utilisation

J’utilise la suite Adobe (Ai / PS / ID / AE..) depuis de nombreuses années, gardant une cohérence entre chacun de leurs logiciels, j’ai rapidement pris en main Adobe XD dès sa sortie en version bêta. Également, Adobe XD a de nombreuses petites fonctionnalités qui permettent de gagner du temps comme des grilles de répétition, l’import d’un nombre illimité de photos se plaçant automatiquement dans des blocs, etc.. J’ai un petit penchant pour Figma avec leur système de travail en équipe avancé, mais je ne l’utilise pas, car je ne suis pas fan des outils disponibles uniquement sur le web (Marvel, Figma, UXPin) pour plusieurs raisons :
  • en cas de panne internet, vous êtes à l’arrêt
  • souvent impossible d’exporter les éléments pour ensuite les utilisés sur un autre logiciel
À long terme : Je vais continuer à utiliser Adobe XD, par contre dès son lancement début 2018, je vais prendre en main InVision Studio, car il va clairement challenger Adobe XD. Je vois à long terme, une battle entre ces deux pionniers du design InVision vs Adobe
Merci pour la lecture, je vous prépare un second article sur l’ensemble des outils que j’utilise à longueur de journée