{"id":1027,"date":"2018-03-27T14:44:50","date_gmt":"2018-03-27T14:44:50","guid":{"rendered":"https:\/\/www.yateo.com\/blog\/?p=1027"},"modified":"2021-07-05T09:44:46","modified_gmt":"2021-07-05T07:44:46","slug":"outils-ui-designers-2018","status":"publish","type":"post","link":"https:\/\/www.yateo.com\/blog\/outils-ui-designers-2018","title":{"rendered":"Quels outils pour les UI designers en 2018 ?"},"content":{"rendered":"

Chaque UI designer<\/em> r\u00eaverait d\u2019utiliser le ou les outil(s) le(s) plus performant(s) dans son processus cr\u00e9atif. Mais comment y trouver son compte parmi la multitude d’outils d\u00e9j\u00e0 existants sur ce march\u00e9 sans pour autant s\u2019y perdre ? Nous\u00a0vous proposons un tour d\u2019horizon des outils que nous utilisons tous les jours et vous faisons un feedback<\/em> de notre exp\u00e9rience.<\/p>\n

<\/p>\n

AXURE : Un prototypage interactif complexe<\/strong><\/h2>\n

\"Logo-Axure-nouvel-outil-prototypage-webdesigner-digital<\/p>\n

Axure<\/strong><\/a>\u00a0est un logiciel\u00a0de prototypage interactif<\/a> complexe<\/b> pour PC & MAC.<\/b>\u00a0Il est ancr\u00e9 sur le march\u00e9<\/strong> des outils de conception\u00a0web depuis 2002<\/strong> et est encore tr\u00e8s utilis\u00e9<\/strong>.\u00a0 Tr\u00e8s riche en fonctionnalit\u00e9s<\/strong>, il permet de cr\u00e9er par exemple des formulaires \u00e0 choix conditionnel<\/strong>, des dropdown menu, des animations, des pop in<\/strong> etc. Il est possible d’y ajouter des biblioth\u00e8ques d’\u00e9l\u00e9ments de ce type d\u00e9j\u00e0 configur\u00e9s ou de les param\u00e9trer de A \u00e0 Z comme bon vous semble. En bref, cette app permet une simulation d\u00e9taill\u00e9e des parcours utilisateurs. Les intervenants sur le projet peuvent donc avoir une vision r\u00e9aliste des interactivit\u00e9s du futur site ou application. Les prototypes g\u00e9n\u00e9r\u00e9s par Axure peuvent \u00e9galement servir \u00e0 effectuer des tests utilisateurs.<\/p>\n

App payante PC\/MAC (460\u20ac la licence, soit 23\u20ac\/mois)
\n<\/b><\/p>\n

Les notes de l’agence : Nous avons tent\u00e9 de r\u00e9aliser des prototypes avec Sketch\u00a0&\u00a0InVision (dont nous parlons plus loin dans cet article) mais les possibilit\u00e9s nous ont paru pour l’instant trop limit\u00e9es et nous restons fid\u00e8les \u00e0 Axure.<\/p><\/blockquote>\n

SKETCH : pour un design d’INTERFACE\u00a0R\u00c9USSI<\/strong><\/h2>\n

\"Logo-Sketch-orange-diamond-nouvel-outil-prototypage-webdesigner-digital<\/p>\n

Une fois notre prototype fonctionnel r\u00e9alis\u00e9, nous passons aux maquettes.\u00a0Sketch<\/strong><\/a> est l’outil d’excellence pour cette\u00a0partie graphique<\/b>\u00a0du design<\/strong>\u00a0d\u2019interface. <\/b>Des fonctionnalit\u00e9s ont \u00e9t\u00e9 pr\u00e9vues pour <\/b>gagner en productivit\u00e9<\/strong> comme\u00a0<\/b>ses symboles intelligents<\/b>\u00a0qui permettent un gain de temps<\/b> consid\u00e9rable. Une simple modification du symbole va s’appliquer \u00e0 tous les \u00e9crans contenant ce m\u00eame symbole.<\/p>\n

App payante uniquement disponible sur MAC (99 \u20ac\/an)<\/b><\/p>\n

 <\/p>\n

Et les outils d’adobe ?<\/strong><\/h3>\n

\"Logo<\/p>\n

Les notes de l’agence : Il y a presque un an, nous utilisions encore Photoshop<\/strong> pour faire le design de nos interfaces<\/strong>. Nous attendions de tester le dernier n\u00e9 d’Adobe qui avait pour but de concurrencer Sketch : Adobe XD<\/strong>, mais\u00a0les mauvais \u00e9chos de la b\u00eata de XD nous ont influenc\u00e9s et incit\u00e9s \u00e0 nous positionner d\u00e9finitivement sur<\/strong> Sketch<\/strong>.\u00a0Bonne pioche ! Nous sommes aujourd’hui ravis de l’avoir adopt\u00e9. En effet, c’est un outil tr\u00e8s facile<\/strong> \u00e0 prendre en main car il est adapt\u00e9 et con\u00e7u pour les designers d’interfaces. Sa communication avec InVision<\/strong> (existante sur Photoshop) est beaucoup plus fluide<\/strong>.<\/p>\n

Photoshop<\/strong> avait \u00e9t\u00e9 d\u00e9tourn\u00e9 de sa fonction principale pour servir au web design en l’absence d’outils d\u00e9di\u00e9s, nous l’utilisons toujours mais pour ses fonctions de base : la retouche d’images<\/strong> ou la cr\u00e9ation graphique pure.<\/strong><\/p><\/blockquote>\n

 <\/p>\n

InVision : des maquettes statiques aux maquettes interactives<\/strong><\/h3>\n

\"Logo-InVision-pink-white-nouvel-outil-prototypage-webdesigner-digital<\/p>\n

Invision permet principalement de rendre interactives des maquettes <\/strong>r\u00e9alis\u00e9es sous Sketch (ou autre outils de design d’interface). Par la r\u00e9alisation de petites simulations telles que des liaisons de pages, des\u00a0header \/ footer fixe etc. (qui ne sont pas aussi \u00e9labor\u00e9es que sur Axure).\u00a0<\/b>\u00a0InVision est \u00e9galement une plateforme collaborative <\/b>gr\u00e2ce au\u00a0mode commentaires<\/b> ce qui facilite la communication du designer\u00a0avec le client et l’\u00e9quipe projet<\/b>.<\/p>\n

Sa particularit\u00e9 ? Il offre diff\u00e9rents points de vue dont :<\/p>\n