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
16 juillet 2020
Développement application mobile

Faut-il migrer vers Jetpack / Android X ?

Pour assurer la rétrocompatibilité des applications mobiles avec le système Android, Google s’appuyait sur une bibliothèque de composants intitulée Android Support. La firme de Mountain View invite désormais à migrer les applications mobiles Android vers Jetpack et ses bibliothèques Android X.  Pourquoi faut-il procéder à cette migration dans les meilleurs délais ? À compter de […]
image
image
Équipe iOS
16 juillet 2020
Développement application mobile

TechnIKO #3 : Comment tester les push iOS simplement ?

Tester les notifications push sur iOS peut être un exercice très fastidieux : Configurer l’application pour qu’elle accepte les push Créer les certificats de push en conséquence Les uploader sur la plateforme utilisée pour gérer l’envoi des push (par exemple Accengage) Trouver le token de son device et créer un segment avec Configurer la push […]
image
image
Carl-Stephan Parent
16 juillet 2020
UX design

Le pôle Design UX d’Ikomobi imagine les nouveaux parcours de souscription online pour une enseigne spécialiste du crédit à la consommation

Proposer des parcours clients efficaces pour se distinguer au sein d’un marché très concurrentiel  Le crédit à la consommation est un marché fortement concurrentiel en France et à l’international. Il est constitué des banques de détail traditionnelles, de leurs filiales spécialisées (BNP Paribas Personal Finance, BPCE financement, Franfinance…) et des banques en ligne qui se […]
image
image
IKOMOBI
25 juin 2020
Développement application mobile

Click and collect : Ikomobi conçoit et réalise en un temps record, une application mobile pour l’enseigne de restauration Fée maison

Comme vous le savez, le click and collect (ou retrait sur point de vente) c’est ce nouveau parcours malin qui permet de passer commande depuis un site e-commerce, un e-shop dédié ou bien depuis une application mobile, puis de récupérer ses achats à un créneau horaire donné. L’intérêt suscité par ce nouveau service a été […]
image
image
Jason Dejaégère
25 juin 2020
Développement site web

L’intégration, une phase clé à ne pas négliger pour la bonne réalisation d’un site web RWD

Le processus de réalisation d’un site Internet RWD (Responsive Web Design) obéit à un enchaînement précis de procédures bien connu des professionnels du web. En synthèse, tout commence par la conception des écrans et se termine par la mise en ligne du projet. La procédure d’intégration est une étape moins connue. Elle assure pourtant la […]
image
image
Équipe iOS
23 juin 2020
Développement application mobile

Les 7 points clefs à retenir de la WWDC 2020

Compte tenu des contraintes imposées par la Covid-19, Apple a présenté sa très attendue conférence annuelle dans un format totalement inédit et 100% numérique. L’enseigne de Cupertino a notamment profité de cette nouvelle édition de la Worldwide Developers Conference pour présenter une série de nouveautés pour iOS 14 dont nous vous proposons ci-après une synthèse. […]
image
image
IKOMOBI
4 juin 2020
Développement application mobile . UX design

Ce que nous a enseigné la mise en pratique du neumorphisme en terme d’UX design et de développement lors de la réalisation d’une application mobile Android

La popularité croissante du neumorphisme nous a amené, chez IKOMOBI, à expérimenter son implémentation au sein d’une application Android et le proposer à nos clients. Voici le retour d’expérience de nos pôles d’experts UX Design et Android. Skeuomorphisme : dès l’origine, les UX designers cherchent à rendre l’expérience utilisateur plus intuitive Le Skeuomorphisme est une […]
image
image
Bérengère Noël
28 mai 2020
Développement application mobile . UX design

Marketing #1 Comment augmenter l’engagement de vos clients et de vos utilisateurs grâce aux mécanismes de gamification ?

Dans le domaine du web et des applications mobiles, la gamification, consiste à exploiter des mécanismes issus de l’univers du jeu dans d’autres domaines, comme des applications ou des sites internet. Elle vise à capter l’attention de l’utilisateur dans un processus de récompenses lui donnant envie de continuer et d’y revenir régulièrement. Le jeu et […]
image
image
IKOMOBI
26 mai 2020
Transformation digitale

Après le confinement : comment faire pour réussir sa transformation digitale ?

La mise en quarantaine d’une large partie de nos entreprises et services publics, bien que imprévisible, raisonne comme un coup de semonce pour chaque dirigeant, notamment vis à vis du niveau de “digitalisation” de son entreprise. Pour les entreprises à maturité digitale plutôt élevée, cette situation s’est transformée en stress test impromptu, impitoyable révélateur des dysfonctionnements […]
image
image
Bérengère Noël
5 mai 2020
UX design

Design #2 Quelles bonnes pratiques faut-il privilégier lors de la conception d’un formulaire en ligne ?

Le formulaire est bien souvent l’étape clé d’un parcours utilisateur : paiement en ligne, création de compte, prise de contact, etc. Un formulaire mal conçu génère de nombreux irritants et pénalise la qualité générale d’une expérience utilisateur. Par conséquent, il convient de maîtriser les bonnes pratiques correspondantes et concevoir des formulaires qui ne comportent aucun […]
image
image
Bérengère Noël
28 avril 2020
Développement application mobile . UX design

Design #1 En e-commerce, quelles bonnes pratiques faut-il adopter sur mobile pour proposer des fiches produits qui vont déclencher l’acte d’achat ?

Le mobile est définitivement devenu le point central de la relation client. Il répond aux besoins d’immédiateté des consommateurs. Ces derniers veulent être en mesure de vivre une expérience d’achat sans couture autrement dit sans frein ni obstacle, quelque soit le lieu ou le moment. Dans ce contexte, la fiche produit est l’élément central de […]
image
image
Équipe iOS
23 avril 2020
Développement application mobile

TechnIKO #2 Migration UIWebview vers WKWebview

UIWebview vs WKWebview UIWebview est un composant d’interface permettant d’afficher du contenu HTML directement dans une application. C’est un composant déjà ancien puisqu’il est apparu avec iOS 2. Il est fortement présent au sein de nos applications pour, par exemple, afficher le contenu des FAQ, des CGV, le tunnel de commande, la création de compte […]