InVison, Sketch, Adobe XD, Marvel, Figma… et combien d’autres encore ?! Comment s’y retrouver dans cette récente explosion d’outils dédiés aux designers d’interface ? Aujourd’hui notre superstar Djibril vous propose un tour d’horizon des outils que les UX/UI designers de YUX utilisent au quotidien.
Quels outils utilises-tu et pour quel usage ?
En tant que UX/UI Designer, j’utilise principalement quatre outils que cela soit pour wireframer (faire des wireframes) ou alors pour faire du design d’interface. Il faut juste clarifier que le secret d’un bon design n’est pas seulement dans l’utilisation d’outils de conception, cela demande également beaucoup de créativité et de connaissance des interfaces numériques de la part du Designer.
1. Sketch
Sketch est l’outil d’excellence que nous utilisons à YUX pour le design d’interface et la conception des wireframes. Il permet de faire des écrans web & mobile de très haute précision et de gagner en productivité. J’adore principalement deux choses avec Sketch :
- Les “symbols” qui permettent de créer une librairie de composants (boutons, champs de texte, icônes, etc). Très utile pour ne pas avoir à changer chaque écran quand votre client vous dit qu’il n’aime pas ce bouton bleu !
- Le plugin Zeplin qui permet faciliter le travail et la collaboration avec les développeurs : connaître toutes les propriétés et marges des éléments, pouvoir exporter plusieurs ressources en différents formats (PNG, JPG, SVG), avoir tous les codes couleurs, les HTML et CSS pour chaque éléments, etc.
Les + : Sketch permet de travailler plus rapidement, gère les différents composants et facilite la collaboration avec développeurs.
Les – : Il ne permet pas d’exporter ou d’importer vers Illustrator et il y a parfois quelques bugs sur l’application.
2. Marvel
J’utilise également beaucoup Marvel qui est dédié à la conception de prototypes interactifs d’applications mobiles ou de sites web. Marvel me permet d’importer en format image mes écrans réalisés sur sketch (ou sur papier) et d’en faire un prototype cliquable. Cela nous permet de mieux présenter l’app au client et au développeurs, mais surtout de faire des tests utilisateurs avec de vrais clients.
Les + : Le gros avantage de Marvel est sa simplicité et son ergonomie. De plus, malgré son apparente simplicité, l’application recèle des fonctionnalités très puissantes. Fait important, il marche également en mode offline, ce qui nous est très utile pour réaliser des tests utilisateurs en zones rurales.
Les – : Concernant les points faibles, Marvel est limité sur les interactions (notamment le swipe ou les menus déroulants) et il n’est pas idéal pour le gestion du versionning et du travail en équipe.
Photoshop permet de faire du traitement d’images, des effets et des filtres, de faire des montages, des illustrations et même des wireframes si vous voulez. C’est toutefois un logiciel assez complexe, abrupte aux premiers abords, qui n’est pas aussi simple et intuitif que des logiciels basiques comme Paint, ou même Paint Shop Pro. Même si Photoshop apporte une très grande marge de manœuvre à l’utilisateur, actuellement, je fais appel à ce logiciel uniquement pour de la retouche d’images qui vont aller ensuite dans mes écrans.
Les + : Très puissant pour faire de la retouche d’images et donner à votre app un super look.
Les – : Il est relativement coûteux en comparaison avec d’autres logiciels de retouche photo et il n’a pas d’intégration directe avec Sketch, ce serait trop top ! Il n’est également pas si simple à prendre en main car il a énorméments de fonctionnalités.
4. Illustrator
Avec Adobe Illustrator, on peut créer des logos, des icônes, jouez avec les couleurs et les effets, des vectors et faire des illustrations complexes notamment pour faire ensuite du Motion Design pour transformer votre expérience utilisateur. L’un des avantages de Adobe Illustrator est qu’il vous fournit des capacités de typographies avancées.
Les + : Pour les points forts d’Illustrator, on peut noter une bonne manipulation des objets vectoriels et il n’y a pas de pixellisation.
Les – : Comme Photoshop, le point faible d’Illustrator pour le métier de UX-UI Designer est qu’il n’a pas de connection directe avec sketch, ce qui permettrait par exemple de faire évoluer une illustration dans un écran sketch dès que l’on modifie le fichier Illustrator.
Où as tu appris à utiliser ces outils ?
Pour Photoshop et Illustrator, j’ai appris tout seul à l’aide de tutoriels et pour Sketch, j’ai tout appris depuis mon arrivée à YUX où je me perfectionne avec les autres Designers et aussi via les tutoriels.
Quels ressources pour apprendre à utiliser ces outils?
Pour apprendre à utiliser ces outils, des ressources innombrables (et gratuites) existent sur le net. Tout en gardant en tête que YouTube constitue un ressource très vaste, nous vous avons quand même fait un petite liste de sites où vous trouverez des tutoriels vidéos adaptés pour apprendre plus rapidement :
Pour SKETCH
- OpenClassRoom : Introducing Sketch for UX and UI
- Gymnasium : Introducing Sketch for UX and UI
- Tuto
- Learn Sketch
- 7 Tutos vidéos pour apprendre les bases de sketch
- DesignLab
Pour PHOTOSHOP et ILLUSTRATOR
- Photoshoptuto avec de nombreuses catégories selon le besoin et on peut même proposer un tutoriel, Tuto Photoshop, Openclassrooms, Blogduwebdesign etc…
- Tuto Illustrator, Pearltrees qui constitue une bonne base pour les débutants, Guide du débutant à Illustrator …
—
Si vous aimez créer et vous sentez à l’aise avec ces logiciels ou vouez un passion pour tout ce qui touche au Design d’interface, contacter-nous, ON RECRUTE !
YUX Design 
Craft couplé avec InvisionApp est magique !
LikeLike