Hello ! Aujourd’hui on va dresser un panel de tous les outils que tu peux utiliser pour améliorer ton workflow en design d’interface.

En MMI, on est amené à travailler sur beaucoup de projets plus ou moins cools qu’on doit souvent faire en groupe. Mais qui dit groupe dit organisation, et c’est à ce moment que cela peut devenir un peu plus compliqué pour les profils créatifs.

Dans cet article, je vais essayer de dresser un panel de toutes les possibilités que les designers peuvent avoir pour faciliter leur travail tout au long de leur processus de design d’interface.

Sur cette review, je laisse la réflexion et l’étude de l’utilisateur précédant chaque projet un peu de côté car cela rallongerait considérablement la longueur de l’article

 

1. Les outils de wireframing

Le wireframing correspond à la première étape de conception. Cette première partie permet de créer la hiérarchisation du contenu de ton futur site ou de ton application. C’est à ce moment que l’on réfléchit aux systèmes de navigation entre les pages par exemple mais c’est aussi et surtout le bon moment d’essayer des choses et de se tromper afin de ne pas perdre du temps par la suite.

Pour le wireframing, je peux dire qu’il y a deux écoles. Le papier et le sans-papier.

En effet, certains d’entre nous préféreront faire des wireframes rapides à la main, ce qui demandera quelques feuilles et un crayon pour pouvoir laisser libre court à ses idées. Personnellement, je bosse de cette manière.

Mais certains peuvent préférer l’utilisation de l’ordinateur, donc voici deux possibilités :

Balsamiq

Balsamiq est un logiciel de wireframing pour MacOS et Windows.
Le logiciel est assez rapide à prendre en main mais le fait qu’il soit payant peut en refroidir plus d’un. En effet, dépassée la version d’essai de 30 jours, il faudra débourser 9$/mois pour l’utiliser.

Interface de Balsamiq
Interface de Balsamiq

Les wireframes sont ensuite exportables en PNG ou PDF : utile pour reprendre le projet sur les prochains logiciels de création.

Moqups

Moqups est un site qui permet de faire des wireframes ultra-simplement mais il permet aussi de dresser des infrastructures plus globales en faisant des liens entre les pages tout en précisant les étapes de navigation à la manière d’une arborescence.
Cependant là-aussi, après avoir dépassé un certain nombre d’éléments (~ 300), il faudra passer en version payante à 13 € par mois.

Interface de Moqups
Interface de Moqups

À éviter donc, si tu prévois un gros projet.

Mockflow

Mockflow est l’alternative gratuite à ces différents logiciels cités. Ce logiciel en ligne permet de faire du wireframing très simplement. En revanche, seulement 1 projet par utilisateur est autorisé et 2 personnes sont autorisées à le visualiser. Si vous souhaitez passer en illimité, il faudra payer 14$ par mois.

Après avoir réfléchi à l’allure globale de la page, il est temps d’y apporter de la couleur et un peu plus de soin. C’est à ce moment là qu’il faut changer de logiciels.

 

2. Logiciels pour la conception d’interface

Cette partie est celle que j’explique à ma famille quand il s’agit de parler de mon métier (sinon ça devient super compliqué…). Dans la conception d’interfaces, on travaille l’aspect visuel de la page, ici on s’intéresse donc à l’UI (User Interface) plutôt qu’à l’UX (User eXperience) comme précédemment. Je t’invite à aller voir l’article très complet de David si tu souhaites connaître la différence entre l’UX et l’UI.

Pour la conception d’interfaces, on retrouve 3 grands logiciels :

Sketch

Sketch est un logiciel disponible uniquement sur MacOS qui permet de créer des interfaces et possède de nombreuses fonctionnalités pour faire gagner du temps aux designers et est très facile à prendre en main. Ce logiciel peut aussi être utilisé pour faire du wireframing.
Il est aussi complet car il possède de nombreux plug-ins que l’on peut installer, ce qui le rend très puissant. J’aborderai la question des plug-ins dans un futur article :).

Sketch

En revanche, il faudra débourser 50$ (offre étudiante) soit une quarantaine d’euros pour l’avoir à vie.

Adobe XD

Adobe XD est un logiciel du même type que Sketch avec la possibilité de faire des prototypes un peu plus développés que le précédent qui est encore en retard sur les interactions. De plus, il fait partie du Creative Cloud d’Adobe : il est donc intéressant d’investir pour avoir accès à tous les logiciels (Photoshop, Illustrator, After Effects).

Interface Adobe XD
Interface Adobe XD

Désormais, Adobe XD est accessible gratuitement, de quoi améliorer ton design workflow à moindre coût !

Photoshop

Photoshop est majoritairement connu pour le traitement d’images, le montage photo ou la retouche mais beaucoup de designers travaillent sur ce logiciel pour faire des interfaces parfois un peu plus poussées que sur Sketch par exemple. C’est le logiciel que j’utilisais avant de démarrer mon stage de deuxième année chez Rakuten-PriceMinister.
Un petit désolé à toi, Tristan, pour les rendus un peu sale que je te faisais. <3

Après avoir fait nos interfaces, nous pouvons aller un peu plus loin et nous amuser un peu sur des logiciels de prototypage interactif qui permettent de donner vie à nos pages statiques.

 

3. Plate-formes de prototypage intéractif

L’étape du prototypage peut être très importante sur des projets à fort potentiel créatif. Par exemple, si vous faites une collaboration développeur/designer, il est intéressant que le développeur puisse visualiser la pensée du designer au travers d’un prototype.

Pour exécuter cette étape, nous avons plusieurs possibilités :

Principle

Principle est un logiciel de prototypage interactif disponible uniquement sur Mac au prix de 129$ mais une version d’essai de 15 jours d’utilisation pure est disponible (ce qui laisse un peu de marge pour y prendre goût).

Il semble très utilisé en entreprise d’après les offres que j’ai pu voir.. à étudier donc !

Framer

C’est l’un de mes coups de coeur ! Je l’ai découvert il y a quelques mois et je pense qu’il est vraiment adapté aux MMI.
En effet, Framer est un logiciel de prototypage avec une grande puissance car il est basé sur Coffee Script, un langage qui compile en Javascript.
Un designer avec quelques notions de code pourra donc faire facilement ce qu’un profil plus technique pourra développer en Javascript par la suite.

Interface de prototypage Framer
Interface de prototypage Framer

Malheureusement, cette petite pépite à un prix : 72$ soit environ 60 euros par an.

InVision Studio

C’est le petit nouveau des logiciels de prototypage. Il est gratuit et tout juste sorti par les équipes d’InVision.
Pour l’instant assez limité, les équipes d’InVision sont portées par une communauté d’utilisateurs qui leur permet de développer rapidement ce nouvel outil venu concurrencer Sketch aussi bien que Principle.
Je te conseille donc de garder un oeil du côté d’InVision, quelques belles surprises peuvent nous attendre.

Pour réclamer votre early-access : https://www.invisionapp.com/studio

 

4. Exploitation des rendus

Mais au final, comment suivre un avancement en équipe et comment faire ses rendus proprement ?
Là encore, plusieurs solutions s’offrent aux designers.

Abstract

Je vais commencer par un logiciel qui parlera aux développeurs.
Et oui, les designers aussi ont leur “Git”, et il s’appelle Abstract. En effet, utilisant le même fonctionnement que le site Github, Abstract permet de gérer ses sauvegardes de fichiers Sketch en créant des branches et des sous-branches pour éviter de travailler sur les mêmes fichiers qu’un collègue.
Ce genre de logiciel peut-être bien utile au moment des projets tutorés lorsqu’un groupe compte deux ou trois designers par exemple.
Cependant, ce logiciel très utile à un prix : 9$ par mois par utilisateur.

Voici une illustration présente sur leur site internet pour comprendre le fonctionnement d’Abstract :

Abstract workflow illustration

InVision

En installant le plug-in Craft sur Sketch, il est possible d’exporter ses interfaces afin de les rendre visible aux développeurs. En effet, le partage via InVision permet aux développeurs de récupérer les informations des interfaces (couleurs, spacings par exemple) ou de faire des retours sur le travail des designers. C’est donc bien pratique pour des projets en groupe.
Malheureusement, il faudra investir 22$ par mois pour pouvoir travailler en illimité.

Zeplin

Zeplin possède le même fonctionnement qu’InVision ce qui permet aux développeurs de récupérer facilement les informations des interfaces conceptualisées par les designers.
Cependant, il te faudra débourser 17$ par mois si tu dépasses la barre d’un projet actif.

 

En déboursant quelques euros par mois, tu pourras désormais économiser pas mal de temps dans l’exécution de tes projets créatifs !

On espère que cet article t’aura plu. N’hésite pas à le partager sur les réseaux sociaux et si tu aimerais que l’on creuse dans cette thématique, n’hésite pas à nous écrire en commentaire.  

Améliore ton workflow avec ces outils pour le design d’interface
4.5 (90%) 8 vote[s]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir