image

UI Design Tools 2019 : Inventaire des outils utilisés par l’équipe IKOMOBI

image
Florian Hureau
31 décembre 2018

Les fêtes de fin d’année sont l’occasion de revoir ses classiques. Certains voudront regarder La Grande Vadrouille, d’autres un Indiana Jones, un Gremlins, Home Alone ou encore Back to the Future. Chez nous c’est Ghostbusters qui a fait résonance quand, autour d’une bière de Noël, il s’est agi d’évoquer le parallèle que nous pourrions trouver entre notre quotidien de designers et celui de personnages d’un film-madeleine de notre enfance.

L’équipe Ghostbusters utilise des outils de pointe, dont le Proton Pack, qui leur permettent de repousser toujours plus loin la menace ectoplasmique quand nos outils de designers nous aident à tirer sans cesse plus loin la créativité et les possibilités d’interactions afin de répondre le plus pertinemment possible aux besoins des utilisateurs de dispositifs interactifs.

Nous vous partageons ici ceux que nous avons retenus (à l’heure où l’article s’écrit) et qui nous aident dans cette quête :

Slack + Notion

Faire du Design d’Interface Utilisateur, c’est avant tout un échange. C’est un partage d’idées et de savoir entre nous (Designers) et nos clients spécialistes de leur métier et garants des besoins de leurs utilisateurs. C’est aussi un partage entre nous et les experts techniques et fonctionnels de l’agence. Ces discussions vont avoir pour cadre des ateliers d’idéation entrecoupés d’échanges d’hyperliens, de vidéos, d’informations (et de quelques gifs animés). Slack est un outil génial pour tout ça, mais il n’est pas du tout construit pour ce que Notion, outil de structuration de prise de notes, permet. Ce dernier va nous aider à centraliser les spécifications et les informations importantes relatives aux projets (chartes, cahiers des charges, liens vers les documents).

Sketch, Figma

Sketch reste ouvert en permanence sur notre ordinateur (avec les onglets 9GAG et reddit sur notre navigateur web et l’application Spotify bien entendu). S’il ne fallait garder qu’un outil pour l’UI Designer de 2018, ce serait Sketch. On l’utilise parfois pour réaliser des wireframes mais surtout pour concevoir les maquettes graphiques de nos interfaces. La force de Sketch réside dans le fait que c’est un outil qui, à la différence d’Illustrator ou Photoshop, a été pleinement conçu pour réaliser des interfaces. Il va alors nous aider à créer des Symboles qu’on peut considérer comme les éléments récurrents d’une interface : un bouton, une cellule, un header, un footer. Il permet d’exporter les icônes ou autres éléments graphiques à destination de tous supports et en seulement quelques clics. On l’utilise enfin pour créer des prototypes simples que l’on va pouvoir partager en posant des liens entre les écrans.

De nombreux plugins viennent nourrir Sketch, notamment les plugins Craft d’InVision et Zeplin (voir plus bas pour ces logiciels) que nous utilisons régulièrement et qui servent à faire le lien plus facilement avec ces dites plateformes.

Figma est à Sketch ce que Google Doc est à Word. Il s’agit d’un outil de prototypage en ligne qui permet à plusieurs personnes de travailler simultanément sur un même projet. Au delà de cet aspect, qui apporte un plus indéniable, Figma offre peu ou prou les même possibilités que Sketch à ceci près qu’on ne peut pas lui adjoindre de plugins pour le moment.

Illustrator

Si Sketch et Figma sont des applications très bien pensées pour prototyper des interfaces graphiques, Illustrator reste l’outil le plus abouti pour travailler en finesse les courbes polynomiales (de Bézier). Nous dessinons des objets graphiques qui vont comprendre des formes, des dessins ayant la capacité de s’adapter en fonction de leurs supports de visualisation (écran de smartphone, écran d’ordinateur) et Illustrator bénéficie, pour cela, d’options bien précises.

Par exemple, nous pouvons travailler et exporter indépendamment les différents éléments d’une illustration en leur adressant des identifiants uniques afin, potentiellement, de les rendre interactifs, de redéfinir leur position, ou même leur mouvement en fonction de sa situation d’usage ou de son support de visualisation.

Principle

Sketch ne permet pas de réaliser des transitions complexes entre une unité éditoriale et une autre. Fondu, poussée vers la gauche ou vers la droite seront les seules fantaisies permises pour matérialiser l’interaction. Avec Principle, on peut aller beaucoup plus loin et proposer la visualisation d’animations plus complexes dans un prototype. Ce logiciel permet de prototyper l’interaction de gestures complexes comme le double tap, l’appui long, le swipe, le pan-zoom, etc, mais permet aussi d’animer formellement et temporellement les transformations des éléments de l’interface en corrélation avec ces interactions.

Sketch ne permet pas de réaliser des transitions complexes entre une unité éditoriale et une autre. Fondu, poussée vers la gauche ou vers la droite seront les seules fantaisies permises pour matérialiser l’interaction. Avec Principle, on peut aller beaucoup plus loin et proposer la visualisation d’animations plus complexes dans un prototype. Ce logiciel permet de prototyper l’interaction de gestures complexes comme le double tap, l’appui long, le swipe, le pan-zoom, etc, mais permet aussi d’animer formellement et temporellement les transformations des éléments de l’interface en corrélation avec ces interactions.

Et comme Principle est plutôt bien fait, on peut facilement y importer un écran réalisé dans Sketch et y distinguer chaque élément graphique pour procéder à sa mise en interaction.

After Effects (+ Bodymovin)

Nous utilisons After Effects pour répondre principalement à deux finalités :

Vidéo de présentation

Créer une vidéo qui va présenter nos maquettes en mouvement : en avant-vente, pour vous projeter sur ce que serait votre dispositif interactif ; à la fin d’un projet, pour présenter une application sur l’App Store (par exemple) ou pour réaliser une vidéo de marketing digital.

Motion Design

Réaliser un motion design qui serait impossible à coder. Si nos développeurs peuvent coder des animations de transition entre les unités éditoriales d’une application, nous pouvons apporter des animations complémentaires qui nécessitent un travail de direction artistique.

Et dans ce deuxième cas, nous utilisons actuellement Bodymovin (plugin d’After Effects) pour exporter les animations dans un format de fichier qui conserve les propriétés vectorielles du dessin original, le tout dans un poids optimisé et avec la possibilité d’en contrôler la chronologie afin, parfois, de permettre à l’utilisateur d’interagir sur l’animation.

Photoshop + Premiere

Malgré l’omniprésence grandissante des vecteurs dans les compositions graphiques, il reste des éléments qui (encore aujourd’hui) sont composés de pixels : les photographies. Et Photoshop est l’outil le plus complet pour leur traitement, leur préparation et leur export vers une interface utilisateur.

Le pendant vidéo de Photoshop, c’est Premiere. Et quand on doit faire un montage vidéo comme on l’a fait par exemple pour le site d’Exotec, c’est ce logiciel que nous allons éditer et exporter.

InVision

On l’utilise pour deux choses :

  • Prototyper les maquettes afin de les rendre interactives et de donner à voir des parcours utilisateurs. Ces maquettes pourront ensuite être chargées sur smartphone dans l’application InVision pour ainsi être testées en condition d’usage. Le rendu final pourra alors être bien simulé.
  • Partager les maquettes à toutes les parties prenantes des projets. L’avantage de cet outil repose dans le fait qu’un lien peut être partagé à nos clients, sans qu’ils aient l’application, pour directement y faire des commentaires à des endroits précis de la maquette. Cela nous permet ainsi d’avoir des retours rapides et précis.

InVision est très actif auprès de la communauté des designers interactifs, ainsi la société a conçu le logiciel InVision Studio qui se veut concurrent de Sketch (mais pas encore au niveau, à notre sens). Par ailleurs, InVision s’investit dans le partage d’expérience et de méthodologies UX autour de son site/blog DesignBetter.co où livres, podcasts sont disponibles et où workshops et discussions avec experts sont proposés.

Enfin, le site Muzli, ressource de tendances visuelles qui est aussi animé par InVision, nourrit notre quotidien et participe à nos benchmarks graphiques.

rticipe à nos benchmarks graphiques.

Zeplin

Une maquette interactive c’est sympa, mais pour un développeur qui va devoir les porter en production, cela manque clairement d’informations. Zeplin a la capacité de transmettre les spécifications graphiques des maquettes en données informatiques relatives aux supports de destination. Par exemple, si on exporte sur Zeplin une maquette graphique réalisée pour un site web, le développeur pourra récupérer les polices. Les couleurs utilisées dans les composants de la maquette seront disponibles par leur code hexadécimal. Mais surtout, les tailles en pixel des composants et le panel de couleurs ainsi que plusieurs petits détails sont disponibles (ex : détails typographiques, marges, etc).

Bonus : Jira

Si si, vous avez bien lu. Nous les Designers on aime s’organiser (c’est pas une blague). Chez IKOMOBI, nous suivons la méthode agile pour planifier notre travail en cohérence avec les chefs de projets et les équipes techniques. Jira est l’outil qui nous permet de lister, évaluer, prioriser, catégoriser, dynamiquement croiser nos travaux. On l’utilise pour notamment quantifier notre travail et lister/sous-lister nos tâches via la construction de ce qu’on nomme un Product Backlog. Il est vrai qu’aujourd’hui on trouve pléthore d’applications ToDo, mais la plus précise, celle qui nous offrira la plus fine des granularités c’est Jira. Et pour ça, on ne pourra pas s’en passer.

Vous allez me dire: “Mais il n’y a pas de logo fait à la main pour Jira?”. Oui bon, on aime bien Jira, mais faut pas abuser non plus.

Voilà

Et pour rappel, une année mobile c’est 3 mois, donc peut-être qu’à Pâques tout aura changé et qu’un article UI Design Tools Easter 2019 fera son arrivée. Mais comme le dit Winston, les outils ne se suffisent pas à eux-mêmes :

We had the tools, we had the talent!

Winston Zeddemore

Merci d’avoir lu l’article. Et si vous avez des question, who you gonna call? 😉

Logo ikomobi
IKOMOBI — Agence Conseil, Studio UX & Digital Factory
image
image
Équipe Android
7 novembre 2019
Technologies

London droidcon 2019 : l’incontournable grand-messe européenne des développeurs d’applications mobiles Android

Les 24 et 25 octobre derniers, deux représentants de notre équipe de développement Android se sont rendus, à Londres, à la droidcon 2019 pour faire le plein de nouveautés techniques à propos de leur plateforme fétiche. Reportage. À peine sortis de l’Eurostar, nous prenons le métro londonien pour rejoindre le Business Design Centre qui héberge […]
image
image
Florian Hureau
5 novembre 2019
Actualités

IKOMOBI News #3 : l’actualité digitale via le prisme de l’agence mobile

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. Adobe Photoshop sur iPad : fin de la version bêta La vingt-et-unième mouture de cet éditeur d’image comporte son lot de nouveautés portant sur l’amélioration continue des centaines (milliers ?) d’outils qu’il propose : […]
image
image
Florian Hureau
15 octobre 2019
Actualités

IKOMOBI News #2 : l’actualité digitale via le prisme de l’agence mobile

L’actualité UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI Mastercard, Stripe, eBay et Visa quittent Libra, la monnaie virtuelle de Facebook Après les interrogations voire réticences de nombreux gouvernements à travers le monde, ce sont maintenant ses partenaires historiques qui font faux bond au projet Libra. Tour à tour et à […]
image
image
Florian Hureau
15 octobre 2019
Design

Le Dark Mode sur les mobiles iOS et Android

Tendance esthétique ou véritable plus-value des interfaces homme-machine, le Dark Mode est sur toutes les lèvres depuis la sortie d’iOS 13. Qu’est-ce que le Dark Mode ? En terme d’interface et par extension d’expérience utilisateur, le Dark Mode consiste à proposer un fond sombre et des composants d’interface s’y contrastant en couleurs claires (polices, pictogrammes, […]
image
image
Florian Hureau
1 octobre 2019
Actualités

IKOMOBI News #1 : l’actualité digitale via le prisme de l’agence mobile

L’actualité UX design, transformation digitale, développement mobile & web et marketing mobile par IKOMOBI Facebook Horizon, un nouveau Second Life pour relancer les Oculus Rift Facebook vient de lancer (en bêta) un nouveau réseau social. Accessible aux propriétaires d’un Oculus Rift, ce service va permettre aux utilisateurs d’interagir en réalité virtuelle avec des résidents du […]
image
image
Florian Hureau
28 août 2019
Actualités

Les 10 informations mobiles et digitales pour briller à la rentrée 2019-2020

Ça y est, c’est la rentrée ! Si comme nous vous avez profité de l’été pour faire une digital detox, il est désormais temps de vous remettre dans le bain de l’actualité des innovations et des usages numériques. Envie de briller au prochain COPIL ? C’est parti pour les 10 informations, web, mobiles et digitales […]
image
image
IKOMOBI
25 juin 2019
Mobile

Flutter or not Flutter

Un framework de développement créé par Google pour réaliser des applications mobiles Android et iOS Flutter est un projet open-source créé par Google et mis en avant depuis Google I/O 2017, permettant de développer des applications principalement pour Android, iOS et Fuchsia. Le projet utilise le langage de programmation Dart, présenté par Google en 2011. […]
image
image
IKOMOBI
20 mai 2019
Mobile

ASO 2019 : les bonnes pratiques en matière d’App Store Optimization

Après l’idéation, la conception et la réalisation de votre application mobile, cette dernière a été déposée sur les stores. Bravo mais ce n’est pas terminé ! Votre application mobile démarre sa vie publique et va bientôt être confrontée aux réalités de la visibilité sur les stores d’applications. C’est ici que la démarche d’ASO (App Store […]
image
image
IKOMOBI
25 avril 2019
IKOMOBI

Meet the team : Jason, Web Integrator et UX/UI Designer

Boulanger, architecte, avocat, informaticien… Nombreux sont les métiers que Jason a voulu faire durant son enfance. Pourtant, il n’était pas vraiment destiné à faire du design… Ayant réalisé des études en sciences/langues, il ne savait toujours pas vers quel secteur se diriger en dernière année de lycée. Il a étudié 3 ans dans une école […]
image
image
IKOMOBI
26 mars 2019
Tendances

Vers une expérience omnicanale : les leviers du phygital

Le phygital, expression inventée et déposée par l’agence de Marketing australienne Momentum en 2013, est la contraction de 2 termes : “physique” et “digital”. Terme en vogue depuis maintenant quelques années, le phygital envahit le commerce. Nous assistons à une réelle digitalisation des points de vente, notamment avec l’utilisation d’outils numériques.  Évidemment, le retail pouvait […]
image
image
IKOMOBI
19 mars 2019
Analyse

Comment enrichir l’expérience clients avec le Phygital – Compte rendu table ronde EBG du 19 mars 2019

Nous étions ce matin présents à une conférence organisée par l’EBG. Voici notre compte rendu des retours d’expériences de trois grandes marques de secteurs bien différents, qui se rejoignent sur des problématiques similaires en terme d’expérience client omnicanal à l’ère du digital. L’expérience client en passe de remplacer la relation client ? On peut noter quatre […]