10 astuces pour gagner du temps en tant que Ux Ui designer

Voici mes 10 astuces pour optimiser mon temps et mes efforts lorsque je design des interfaces.

Camille Hautreux
Dec 5, 2019 · 6 min read

Au sein de 40/60 service design studio, nous cherchons à optimiser
notre temps et nos efforts pour pouvoir se concentrer sur la création.
Ces astuces nous permettent de gagner du temps aussi bien lors d’un audit UX, que pendant la composition rapide d’écrans ou lors d’un UI au pixel près !

1. Visual Inspector

Visual Inspector est un plugin Chrome qui te permettra de comprendre rapidement la composition d’une page et la manière dont elle a été designée.
Idéal pour commencer un audit Ux, tu y trouveras l’inspection pour étudier
la grille, les espacements, les couleurs et les variantes de typographie.

À télécharger ici

2. Google Analytics

La conversion reste une priorité pour beaucoup de sites Web.
En tant que chercheur/concepteur UX, tu dois suivre l’activité des utilisateurs sur ton site Web, savoir d'où ils viennent, combien de temps ils restent
sur ton site et comment améliorer ton taux de conversion.
Google Analytics te permet de suivre l’ensemble de ces métriques.

Trois variables nous intéressent particulièrement à l’agence:

  • les canaux d’acquisition
  • le taux de rebond
  • les parcours effectués

Si vous souhaitez utiliser Google Analytics, commence avec l’aide
du help center google analytics.

3. L’alignement rapide et smart layout

L’alignement rapide est une fonctionnalité très utile que tu retrouveras
sur Figma et sur Sketch. Elle te permet de sélectionner un groupe d’éléments
et de les aligner en 1 clic grâce au bouton bleu en bas à droite.

Le smart layout est une fonctionnalité Figma qui te permet de gérer
la disposition des éléments de ton design.
Les traits violets entre les éléments te permettent de régler rapidement
les espacements entre les objets tandis que les ronds te donnent la possibilité de les inter-changer de place. C’est rapide et super simple ;)

4. Scale layers

Pour éviter d’avoir tes éléments mal répartis lorsque tu changes d’échelle,
je te conseille d’utiliser l’outil Scale layers dans Sketch. C’est une solution simple qui te fera économiser beaucoup de temps.

Sélectionne les éléments à redimensionner et clique sur “scale” dans le header — tu peux aussi utiliser le raccourci CMD +K. Tu peux ainsi changer la taille de tes éléments en pourcentage ou en pixel.

Notons ici que cette fonctionnalité n’existe pas encore dans Figma …

5. Champs de dimension et position comme calculateurs

Tu n’as peut-être jamais essayé mais il est possible d’utiliser les champs
de position et dimension comme des calculateurs. Cette fonctionnalité
est disponible dans pratiquement tous les logiciels de design dont Figma, Sketch, XD ou Illustrator.

Par exemple, si tu as un rectangle de 100px de large, tu peux rapidement
le diviser ainsi : 100/2 et le rectangle fera 50px. De même pour le multiplier
il suffit de faire 50*2.

6. Font Ninja

Font Ninja est une application qui permet d’identifier une police sur un site web en un clic. Pour l’utiliser, télécharger le plugin chrome et passe ta souris par dessus une police.

Je l’utilise en complément de Visual Inspector pour pouvoir écrire
avec la typographie sélectionnée.

7. Les points de suspension

Utiliser les points de suspension est une très bonne astuce pour éviter
de casser un design.

On pense souvent que tout le texte doit être visible dans une même interface.
Mais la plupart du temps, l’utilisateur est capable de comprendre le sens d’un texte abrégé ou réduit. Dans le cas contraire, donne-lui la possibilité de cliquer sur le texte afin d’agrandir la fiche et voir plus d’informations.

Néanmoins, s’il s’agit d’informations clés pour l’expérience, il vaut mieux éviter les points de suspension.

8. Créer sa palette de couleur

L’une des manière les plus rapide pour créer sa palette de couleur est d’utiliser Illustrator.

L’outil “dégradé de formes” te permet de sélectionner en 2 clics les dégradés dont tu as besoin.

Comment ça marche ?
Premièrement, créé les carrés. Le premier avec ta couleur choisie,
le second pour faire le dégradé.

Ensuite, sélectionne les 2 objets et clique sur Objet > Dégradés de formes > Options de dégradés. Définis le nombre d’étapes. Je t’en conseille 4.
Clique à nouveau sur Objet> Dégradés de formes >Créer.
Et voilà, tu as désormais ta palette de couleur!

9. Gérer son contenu avec Content Real

Lorsque l’on conçoit des interfaces, nous sommes toujours confrontés
à la problématique du contenu.

Aujourd’hui, le premier réflexe des designers est d’utiliser le fameux
Lorem ipsum afin de visualiser les zones de texte.

À cela, nous notons deux problèmes.
Le premier est la perte de temps. Contrairement à Illustrator, Figma et Sketch n’ont pas la possibilité de remplir automatiquement les zones de texte
en Lorem ipsum. Ainsi, nous perdons beaucoup de temps à aller sur des sites de générateur de texte Latin.
Le deuxième problème est le manque de précision. Le Lorem ipsum ne nous donne aucune idée sur la nature du contenu. Est-ce une [accroche commercial dynamique] ? un [nom prénom]? etc.

Content Real te permet en quelques secondes de placer du contenu adapté
à son design afin de lui donner plus de réalisme.

Petit défaut à noter, le plugin est américain et le contenu est donc anglais, avec des villes américaines …

10. Gérer vos icônes avec Feather icons

Feather icons est une application simple qui te permet d’organiser
et de stocker des bibliothèques d’icônes. Cela t’évite d’avoir à télécharger
une icône à chaque fois que tu en as besoin.

Ma deuxième banque d’icônes préférée est Boxicons, moins belle mais plus complète.


Continues la lecture avec l’instagram de 40/60 service design studio, on te donnes également des tips pour booster ton figma avec les 6 plugins les plus utiles :

👋 Merci pour votre lecture !

Suivez moi sur Camille Hautreux ou sur LinkedIn. Suivez également 40/60 service design studio pour plus de contenu autour du design et de l’innovation.


Chez 40/60 studio, nous accompagnons start-up et grands groupes dans leur démarche d’innovation pour imaginer, créer et développer les services et produits de demain. Nous sommes un cabinet de conseil par le design, c’est-à-dire que nous vous conseillons et accompagnons jusqu’à la réalisation de vos projets pour que chaque idées deviennent réelles, intelligentes et désirables.


✌️Retrouvez nos autres articles dans nos 40/60 stories

🖖 Facebook de 40/60

🤟Instagram de 40/60

👌LinkedIn de 40/60

🤜Youtube de 40/60

Design hacking

40/60 studio & Feads

Camille Hautreux

Written by

Art & Service designer- cofounder at 40/60 studio « innovation by design » Strategic designer lover - design doing

Design hacking

40/60 studio & Feads

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade