Les outils du UX / UI Designer

YUX Design, Djibril Designer, Dakar, Senegal Afrique

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

#logosketch #uidesign #userinterface #yuxdakar #agenceux #userexperience #tools #outils

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

#marvelapp #uidesign #userinterface #yuxdakar #userexperience #tools #outils #designer

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.

   3. Adobe Photoshop

#adobephotoshop #tool #uidesign #interfacedesign #uxdesign #yuxdakar #tools #resourcesPhotoshop 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

#adobeillustrator #tool #uidesign #interfacedesign #uxdesign #yuxdakar #tools #resources

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

Pour PHOTOSHOP et 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 !

Advertisements

One thought on “Les outils du UX / UI Designer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s