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
Florian Hureau
28 août 2019
Tendance

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 . Stratégie

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
Tendance

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 . Tendance

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 […]
image
image
IKOMOBI
11 février 2019
Agenda événements

Congrès Entreprise du futur 2019 : ce que nous retenons

Nous étions présents au congrès Entreprise du Futur qui a eu lieu le 17 janvier dernier à Lyon. Un moment privilégié et très bien orchestré, favorisant le partage de connaissances et d’expériences entre 4 000 dirigeants de PME, ETI et Grands Groupes. Leur point commun : la conscience de l’impérieuse nécessité de se transformer dans […]
image
image
IKOMOBI
29 janvier 2019
Stratégie . Tendance

Quelles sont les tendances qui feront évoluer les modèles économiques des organisations en 2019 (et après)

1. Les smart home devices grand public seront menés en 2019 par les assistants intelligents Selon le fameux cabinet Deloitte, le marché des smart speakers va générer 7Md$ en 2019, sur un total de 96Md$ sur les objets connectés pour la maison en 2018. L’industrie globale de production de ces objets intelligents devrait atteindre une […]
image
image
Florian Hureau
31 décembre 2018
Design . Tendance

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

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 […]
image
image
IKOMOBI
18 décembre 2018
Agenda événements

[AGENDA] Participez à l’entreprise DU FUTUR le 17 janvier à Lyon avec Ikomobi !

  Entreprise du Futur c’est un moyen pour vous, dirigeant et décideur de PME & ETI, d’accéder à une communauté et vous permettre de trouver de nouveaux leviers de croissance (partenaires, technologie, prestataire..etc) pour vos activités. Chez ikomobi nous croyons fortement à la force de l’écosystème pour co-construire des solutions innovantes en réponse à des […]
image
image
IKOMOBI
4 décembre 2018
Tendance

Digital Innovation 2018 : ce qu’il fallait retenir

Le digital Innovation 2018 le 28/11/2018 Lieu : 104, paris 19ème. Organisateur : EBG   Si nous devions résumer cette belle journée de conférences et Workshops, voici les mots-clés et thématiques à retenir : Démystification de l’IA User Centric / User experience Approche “data driven” des projets Innovations & transformations structurée C’est intéressant d’observer l’arrivée […]