() translation by (you can also view the original English article)
La documentación de Experiencia de Usuario tiene que ver con el seguimiento de detalles específicos de tu diseño para asegurar que la implementación ocurra fluídamente. Después de todas las rondas de iteraciones de diseño, investigación y critica, es importante no descuidar ésta importante transición desde el diseño hasta la programación.
Aquí está como estructurar tu ligera especificación de diseño y asegurarte de que el resultado final ¡sea tan prolijo como lo imaginaste!
Componentes de la Documentación de Experiencia de Usuario
¿Qué necesitan los desarrolladores para implementar tus diseños? Ésto puede depender en tu relación de trabajo, y la complejidad de tu proyecto. De una u otra manera, debes saber que un diseño contiene múltiples capas de información así que es mejor comunicar de más a dejar cosas abiertas a la interpretación.
- Diseñar Mockups: mostrar especificaciones de estilo como líneas rojas para colocación, paleta de color, tipografía.
- Interacciones: mostrar cómo funciona, ya sea a través de un flujo o mediante clicks.
- Especificaciones adicionales: cualquier cosa que pudiera estar faltando de categorías previas. Ésto puede incluir dependencias de otros equipos, cualquier elemento que pudiera cambiar en el futuro cercano, o detalles de implementación específicos.
- Recursos: recursos usados en el diseño, tales como íconos, imágenes/audio/video optimizados, copiar, etc.
Herramientas
Hoy en día, hay varias herramientas de diseño que tienen especificaciones integradas, ya sea integraciones o como parte del flujo de trabajo. Consúltalas para ver qué funciona mejor para tu equipo.
Figma
Similar a InvisionApp, en ella hay una visualización que proporciona a los desarrolladores la capacidad de inspeccionar, copiar y exportar recursos de diseño. Una herramienta basada en la web que incluye la capacidad de crear sitios web, aplicaciones móviles y colaborar en tiempo real con compañeros de equipo.
Adobe XD
Ahora gratuita. Una solución UX/UI todo en uno para diseñar sitios web, aplicaciones móviles y más. Genera un enlace externo para especificaciones, incluye la función de protección con contraseña.
InvisionApp
Plataforma de diseño de producto, flujo de trabajo y colaboración. Incluye modo Inspección para generar medidas, colores, y recursos de diseño de manera muy fácil. Explora y accede a dimensiones de pantalla-incluyendo función de posición, paleta, tipografía, fuentes, código, previsualización de recursos, descarga de recursos.
Zeplin
Herramienta de entrega rápida de diseño,con integraciones con Slack y Sketch (únicamente Mac) para facilitar tu colaboración con desarrolladores. También, puedes exportar tus archivos de diseño desde Figma, Photoshop o XD directamente hacia Zeplin. Las características de hacer comentarios son útiles y en la misma página que las especificaciones reales.
Aprende Más Sobre Herramientas UX
- uxtools.co: un sitio informativo de comparación de herramientas de diseño
- Una lista de comprobación para diseños de entrega rápida de InvisionApp
