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 :
Winston Zeddemore
Merci d’avoir lu l’article. Et si vous avez des question, who you gonna call? 😉
