Sommaire
Face à une deadline trop serrés, la collaboration entre développeur et UX designer peut devenir catastrophique.
Garder les concepteurs et les développeurs sur la même longueur d’onde est assez compliqué. Donnez leur un site web qui doit être fonctionnel rapidement et les bureaux brulerons.
Nous devons donc concevoir rapidement, de façon transparente pour fournir un site de classe mondiale à la fin ?
Dans cet article, je vous propose quelques conseils du quotidien pour réduire vos maux de tête au travail. Les conseils tirent de mes expériences vécues au cours des dernières années en tant qu’UX Designer.
[Tweet « Conseils du quotidiens pour réduire les conflits UX Designer et Développeur »]
1 – La conception réactive : système de grille
Vous ne travaillez peut-être pas avec des grilles lors de vos wireframe, voici un problème auquel les développeurs sont confronté.
Définir une largeur à votre grille
Il est utile de commencer son wireframe avec une largeur spécifique à votre grille et de connaître la taille des gouttière exacte pour chaque partie de la grille. Avec cette information, vous pouvez déjà uniformiser votre conception, ce qui vous empêchera de faire des ajustements tout au long de la conception du wireframe.
Si vous définissez un bloc de 50 pixels, il doit être exactement à 50 pixels. Si votre grille a une largeur de 1200px dans son intégralité, elle doit être de 1200px de large. Si vous définissez une base solide à votre projet web et notamment pendant votre wireframe, cela devrais fonctionner sur tout type d’appareil et tout type de système, il est important d’avoir un point de départ en béton.
Ne laissez pas le hasard réaliser vos vues mobiles
Tout semple beau sur desktop, mais attendez… et la vue mobile ?
Dans beaucoup de projets, le développeur doit prendre des décisions sur la composition de la vue mobile…
Pour mieux collaborer sur un projet web, les UX designer doivent impliquer sur le design desktop l’ordre d’empilement mobile. Si le temps le permet, il est extrêmement utile de fournir une maquette fidèle de la vue mobile. Fournir une vue mobile vous permettra d’obtenir une interprétation mobile au pixel près !
Utiliser un système de grille desktop pour la conception d’un site mobile n’a pas de sens. C’est souvent le cas avec les éléments d’interface utilisateur étendus, qui ne se compriment généralement pas bien lorsqu’ils sont placés sur des périphériques mobiles.
En tant qu’UX designer, vous devez résoudre ces problèmes afin que les développeurs du projet ne viennent pas avec des idées en conflit avec vos intentions.
2 – Utilisez des outils modernes pour une représentation précise
Polices de caractères
Dans un premier temps, la cohérence entre les polices de caractères entre Photoshop et le Web n’existe pas.
Souvent, les polices avec lesquelles je travaille sur Photoshop sont complètement éteintes. Même les polices open-source peuvent sembler différentes lorsqu’elles sont comparé sur Photoshop et le Web.
En tant qu’UX designer, nous aurions besoin d’ajuster la conception en fonction du poids des polices. Lorsqu’ils ne sont pas correctement représentes,
En tant que concepteur, vous aurez besoin d’ajuster la conception en fonction du poids des polices. Lorsqu’ils ne sont pas correctement représentés, vous prenez des décisions basées sur des données ou une représentation visuelle de la police qui va être incohérente.
Problèmes de performance
L’un des aspects de la représentation du pixel parfait se rapporte à la façon dont les designers créés la plupart des documents Photoshop.
Utilisons les ombres portées comme exemple.
Photoshop comme vous le savez surement, contient une option d’ombre portée. Les designers ont beaucoup de souplesse lorsqu’ils créent des ombres, ainsi que des masques et autres éléments de conception. Mais quand un développeur recrée ces mêmes ombres sur le web, les options sont beaucoup plus limitées.
Quand un développeur entame la création du front-end d’un site web, il ou elle est très préoccupé par les performances de celui-ci. Chaque fois qu’ils ont besoin d’utiliser une image en PNG transparent ou translucide de 32 bits pour un élément UI, le site prendra plus de temps à charger. Multipliez l’exemple par des centaines de composants et votre site va être très lent.
La solution idéale est de recréer les ombres portées avec CSS.
Vous pouvez créer de nombreux effets avec le CSS, y compris les ombres portées. Si un développeur peut utiliser CSS pour faire des ombres au lieu d’intégrer un PNG. Le coté positif du CSS, c’est qu’il est plus léger, il vous permettra donc d’obtenir un poids de page réduit. En revanche pour la typographie et les ombres portées, ils ne seront pas
Sur le côté positif, CSS est plus léger, vous permettant d’obtenir des actifs à une taille beaucoup plus petite. En revanche, la typographie et les ombres portées ne seront pas identiques à celles créées en CSS.
Une des images ci-dessus est un PNG, l‘autre est un SVG.
Bien que les deux images soient visuellement identiques, le PNG à un poids de XX ko tandis que le SVG obtient le poids de XX ko seulement. De plus, l’ombre sur le SVG peut être articulée.
3. Prototypes collaboratifs : communication claire et concise.
Lorsqu’on travaille sur des projets sans prototype, la communication autour du projet devient difficile, entre les appels téléphoniques et les notes gribouillées à la vas vite.
Voici un processus de travail pour améliorer la clarté en réduisant la documentation autour du projet et de vos attentes :
- Au début d’un projet de site web, dite vous que la documentation doit agir comme noyau de connaissances plutôt que d’une encyclopédie. Par exemple, définissez la conception des bases et les principes techniques, puis reportez-vous à d’autres outils pour présenter votre vision du projet. Découvrez une liste d’outils de prototypage ou notre boite à outils pour les projets web.
- Une fois le projet démarré, créez des flux utilisateurs pour planifier les interactions pour l’ensemble du système. InVision vous permet par exemple d’ajouter des commentaires pour que les développeurs puissent poser des questions et comprendre le système.
[su_divider divider_color= »#ececec » link_color= »#f1f1f1″ size= »1″]
Si vous avez trouvé ces conseils utiles, continuez à consulter mon blog. N’hésitez pas à me donner votre avis et à noter les articles.
Je recherche actuellement un passionné du métier d’UX designer pour rédiger des articles sur Blog UX designer.fr. Contactez-moi ici !
