Deep Dive: Designing Figma's UI3 icons (project walkthrough)

Summary

Dans cette vidéo, Tim Vanam (alias Max Waler sur Twitter) explique le processus créatif derrière la refonte des icônes de UI3 de Figma. Il parle de l’évolution du design des icônes, de l’importance de la simplicité et de l’équilibre visuel, et de la manière dont chaque icône doit être à la fois fonctionnelle et engageante. Tim partage également des exemples pratiques de son travail, notamment des itérations de design pour rendre les icônes plus ludiques et intuitives, tout en respectant les principes de lisibilité et de clarté. Il évoque également l'importance de travailler en collaboration avec d'autres designers et de se concentrer sur l'amélioration continue du système d'icônes.

Takeaways

• 😀 Tim vanam a travaillé sur la refonte des icônes de Figma pour UI3, en se concentrant sur la création de lignes directrices et d'une collection d'icônes cohérentes.
• 😀 Les icônes de UI3 sont plus équilibrées et moins anguleuses que celles de UI2, avec des bords arrondis et une épaisseur de trait d'un pixel.
• 😀 L'objectif principal du changement de style entre UI2 et UI3 était d'augmenter l'accessibilité et la convivialité des icônes, tout en conservant une apparence professionnelle.
• 😀 Les icônes jouent un rôle essentiel dans l'interface utilisateur, à la fois pour la clarté des actions et pour la création d'une expérience agréable.
• 😀 L'équilibre visuel des icônes a été une priorité importante, en s'assurant qu'aucune icône ne se distingue trop des autres, qu'il s'agisse de taille ou de forme.
• 😀 Tim a conçu plus de 200 icônes pour la sortie de Figma, travaillant directement avec d'autres designers pour les aider à créer leurs propres icônes.
• 😀 Les icônes doivent être suffisamment simples et claires, mais peuvent intégrer des éléments ludiques dans des contextes appropriés comme dans les prototypes ou dans des environnements moins formels.
• 😀 Les icônes dans des menus avec des étiquettes servent à la fois à faciliter la navigation et à aider les utilisateurs à mémoriser plus rapidement les actions disponibles.
• 😀 Lors de la création d'une icône, Tim commence souvent par des esquisses papier avant de passer à Figma pour affiner et obtenir des retours des autres designers.
• 😀 L'idée derrière les icônes de highlights et de shadows a été d'emprunter à des logiciels de retouche photo pour créer des symboles intuitifs qui communiquent clairement les concepts visuels.

Q & A

Pourquoi le processus de création d'icônes est-il itératif selon Tim ?

Le processus de création d'icônes est itératif car il permet de tester différentes versions, d'évaluer ce qui fonctionne ou non, et d'ajuster les éléments jusqu'à ce que le design soit optimal et compréhensible pour l'utilisateur.

Quel est le principal défi lorsqu'il s'agit de concevoir des icônes de manière claire ?

Le principal défi est de rendre les icônes compréhensibles sans texte tout en les distinguant les unes des autres. Lorsqu'elles sont utilisées sans légendes, elles doivent être suffisamment intuitives pour être identifiées immédiatement.

Comment les icônes de la vidéo sont-elles liées à la manipulation des couleurs ?

Les icônes de la vidéo sont liées à la manipulation des couleurs, notamment la teinte, la saturation et les ombres. Elles font partie d'un même ensemble d'outils visuels, où chaque icône représente une fonctionnalité de modification de couleur dans une interface.

Pourquoi le design des icônes est-il comparé à l'histoire d'un film ?

Le design des icônes est comparé à une histoire de film car, tout comme dans une narration, il existe une progression, des variations et une évolution des éléments. Les designers font face à des choix créatifs qui influencent l'expérience globale, tout comme les personnages et les intrigues influencent une histoire.

Comment le processus de design est-il décrit par Tim vanam dans la vidéo ?

Tim vanam décrit le processus de design comme un voyage créatif qui inclut des expérimentations, des ajustements et des retours en arrière. Il souligne que, même si l'on revient souvent aux idées de départ, chaque itération apporte des améliorations subtiles.

Pourquoi Tim pense-t-il que l'absence de texte rend certains designs difficiles à comprendre ?

Tim explique que, sans texte, il est difficile de comprendre immédiatement la signification des icônes, surtout si elles se ressemblent trop. L'ajout de texte permet de clarifier leur fonction et de faciliter l'expérience utilisateur.

Comment les icônes sont-elles évaluées pour garantir qu'elles sont compréhensibles ?

Les icônes sont évaluées par des tests de lisibilité et de reconnaissance, souvent à travers des retours d'utilisateurs et des comparaisons avec d'autres designs d'interface. Cela permet d'identifier rapidement si une icône est intuitive ou nécessite des modifications.

Quel est l'impact de l'apparence similaire des icônes de manipulation des couleurs ?

L'apparence similaire des icônes peut être un avantage en ce sens qu'elles créent une cohérence visuelle et une facilité d'utilisation, mais elle peut également rendre plus difficile la distinction de chaque fonction si les icônes ne sont pas suffisamment différenciées.

Que pense Tim de la comparaison entre la conception des icônes et les applications de caméra ?

Tim remarque que les applications de caméra ont un ensemble cohérent d'icônes de manipulation des couleurs, ce qui permet aux utilisateurs de les comprendre rapidement. Cependant, il souligne que même dans un cadre similaire, il faut être prudent et trouver un équilibre pour éviter la confusion.

Comment le processus de création d'icônes se compare-t-il à d'autres types de design selon Tim ?

Le processus de création d'icônes, selon Tim, partage des similitudes avec d'autres formes de design, car il implique la réflexion créative, les ajustements continus et la nécessité de trouver un équilibre entre fonctionnalité et esthétique. Il compare cela à un scénario de film où les éléments sont essentiels à la cohésion finale.