Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX
Webdesign

3 Conseils pour préparer une meilleure documentation UX

by
Length:ShortLanguages:

French (Français) translation by Henri Lotin (you can also view the original English article)

La documentation UX consiste à traquer les détails spécifiques de votre design pour vous assurer que la mise en œuvre se produit sans à-coup. Après tous les rounds d’itérations de design, de recherche et de critique, il est important de ne pas négliger cette importante transition du design au code fonctionnel.

Voici comment structurer votre spécification de design allégée et vous assurer que le résultat final est aussi poli que vous l'aviez imaginé !

Composants de la documentation UX

De quoi les développeurs ont-ils besoin afin d'implémenter vos créations ? Cela peut dépendre de votre relation de travail et de la complexité de votre projet. Quoi qu’il en soit, sachant qu’un design contient plusieurs couches d’information, il est donc préférable de sur-communiquer que de laisser les choses ouvertes à interprétation.

  1. Design Mockups (maquettes) : montrez les spécifications de style telles que les zones rouges pour le positionnement, la couleur, la palette, les polices de caractères.
  2. Interactions : montrez comment ça fonctionne, soit par flux soit par clics.
  3. Spécifications supplémentaires : tout ce qui peut manquer dans les catégories précédentes. Cela peut inclure les dépendances sur les autres équipes, tous les éléments qui peuvent changer dans un avenir proche ou des détails d’implémentation spécifiques.
  4. Actifs : les ressources utilisées dans le design, telles que les icônes, images/audio/vidéo optimisés, texte, etc.

Outils

Aujourd'hui, il existe plusieurs outils de design qui ont des spécifications intégrées, sous forme d'intégrations ou comme partie intégrante du flux de production. Vérifiez-les pour voir lequel fonctionne le mieux pour votre équipe.

httpuxtoolscotoolshandoff
uxtools.co/tools/handoff

Figma

Semblable à InvisionApp, en ce qu’il y a une vue qui donne aux développeurs la possibilité d’inspecter, copier et exporter des ressources. Un outil web qui inclut la possibilité de créer des sites web, applications mobiles et de collaborer en temps réel avec ses collègues.

Adobe XD

Maintenant gratuite. Une solution UX/UI tout-en-un pour le design de sites web, applications mobiles et bien plus. Génère un lien externe pour les spécifications, inclut la fonctionnalité de protection par mot de passe.

InvisionApp

Plateforme de design produit, flux de production et collaboration. Inclut le mode Inspecter pour générer des mensurations, des couleurs et fait du design d'actifs une brise. Naviguer et accéder aux dimensions de l’écran – y compris la position, la palette, la fonte, la police, le code, l'aperçu d'actif, la fonction de téléchargement d’actif.

Zeplin

Outil de transfert de travail de design, avec des intégrations à Slack et Sketch (Mac uniquement) pour faciliter votre collaboration avec les développeurs. En outre, vous pouvez exporter vos fichiers de design depuis Figma, Photoshop ou XD directement dans Zeplin. Les fonctionnalités de commentaires sont utiles et sont sur la même page que les spécifications réelles.

En savoir plus sur les outils d'UX

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.