Utilisation de Devtools pour améliorer le processus de conception UX au développement

Cet article explore l'intersection du code et de la conception, en se concentrant sur la façon dont les concepteurs peuvent tirer parti des connaissances de codage de base pour améliorer leur flux de travail et améliorer la communication avec les développeurs. L'auteur, un concepteur UX avec une certaine expérience de codage, soutient que même une compréhension rudimentaire du code profite considérablement au processus de conception.

Tout en ne préconisant pas que les concepteurs deviennent des développeurs, l'auteur souligne la valeur de "jouer avec le code" - expérimentant CSS et HTML pour affiner les conceptions et assurer la compatibilité du navigateur. Cette approche, suggèrent-ils, comble l'écart souvent significatif entre la conception et le développement.

Le processus de conception typique de l'auteur implique l'esquisse, le wireframing (à l'aide d'outils comme Axure, Adobe XD, Invvision Studio, Figma et Sketch) et créant des actifs visuels. Cependant, ils ont constaté que l'interaction directe avec le code améliore la fidélité de la conception et réduit les malentendus pendant le transfert.

Devtools: une aire de jeux de designer

L'auteur met en évidence le navigateur Devtools comme une ressource inestimable. Devtools permet aux concepteurs de manipuler le code du site Web en temps réel, en testant la précision des couleurs, la lisibilité des polices, la réactivité entre les appareils et les éléments d'interaction sans avoir besoin d'un environnement de développement. Les changements sont temporaires, ce qui en fait un espace d'expérimentation sans risque. L'auteur note les améliorations récentes de Devtools, y compris l'éditeur de path de forme de Firefox. Une anecdote personnelle illustre comment Devtools a permis à l'auteur de visualiser rapidement l'impact des modifications de conception sur une application Web complexe.

Extensions chromées: améliorer les capacités de Devtools

L'auteur recommande deux extensions de chrome pour améliorer encore l'interaction du code de conception:

• Utilisateur CSS: Cette extension enregistre les modifications CSS Devtools, permettant aux concepteurs de revisiter et de partager leurs modifications. L'auteur décrit son utilisation dans les critiques de conception et la création de démonstrations de modifications proposées. L'éditeur de code intégré et l'interrupteur ON / OFF sont mis en évidence comme des fonctionnalités particulièrement utiles.

• Remplacements Web: Cette extension plus complète permet de remplacer HTML, CSS et JavaScript, offrant une plus grande flexibilité pour créer des prototypes et tester divers scénarios de conception. L'auteur démontre son utilisation dans l'ajout d'éléments HTML, l'édition de CSS et l'injection de JavaScript pour les tests de disposition dynamique.

Ces extensions permettent un prototypage rapide et une exploration de nombreuses options de conception, dépassant les capacités des outils de conception traditionnels. L'auteur met l'accent sur la valeur des tests des conceptions directement au sein du navigateur pour garantir la précision et éviter les problèmes de traduction pendant le développement.

Les principaux plats et conclusion

L'auteur conclut que l'intégration des extensions Devtools et du navigateur dans leur flux de travail a considérablement amélioré leurs conceptions et favorisé une meilleure collaboration avec les développeurs. La capacité de créer des prototypes rapides à l'aide du code réel améliore la communication et permet une compréhension plus approfondie du processus de développement. L'auteur encourage les concepteurs à explorer ces outils et à partager leurs propres expériences.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!