Hoy somos conscientes de la importancia de ofrecer una buena experiencia de usuario a quienes utilizan las aplicaciones o webs creadas. Y en esa línea deben utilizarse las herramientas de diseño que vamos a enumerar.
La experiencia de usuario (UX) es esencial en todos los procesos digitales. Mejora la satisfacción de las personas que consultan el sitio web o app, y se debe basar en la máxima usabilidad y accesibilidad de las aplicaciones digitales.
Además, una experiencia de usuario bien cuidada proporciona una mejor interacción entre el consumidor y el producto: es el punto de contacto con el usuario.
El diseño UX o de experiencia de usuario
El diseño de interfaces digitales cambia la forma en la que los visitantes perciben una página web o aplicación. Actualmente, el diseño UX es fundamental para complacer al usuario, pues hace de las interfaces digitales algo accesible e inmediato.
Para conseguir un equilibrio en tu página web o aplicación, es vital brindarle al usuario una navegación simple y una jerarquización de la información. Es decir, la claridad está por encima de cualquier otro valor, incluso el estético. Hay páginas muy bonitas que al poco tiempo de navegar en ellas terminan por cansar al visitante.
Software de diseño de interfaces
Actualmente los profesionales diseñamos con una gran cantidad de herramientas que pueden adaptarse a casi todos los procesos de diseño y satisfacer todas las necesidades creativas.
La variedad de herramientas hace que haya una solución para cada diseñador y creativo y las posibilidades son increíbles. Es un buen momento para explorar nuevas herramientas y ver qué hay disponible para diseñar y mostrar los proyectos.
Wireframing
Esta lista contiene software para crear wireframes , es decir el esqueleto o estructura visual de una futura aplicación o web:
- MockFlow
- Balsamiq
- Axure
- Adobe Comp
Diseño de interfaz de usuarios y prototipos
Aquí listamos software para creación de interfaces y prototipos:
- Invision Studio
- Sketch
- Adobe XD
- Figma
- Flinto
Conozcamos una herramienta para UX: ¿qué es Adobe XD?
Adobe XD, o Adobe Experience Design, es una herramienta de edición de gráficos que funciona para crear interfaces de páginas web y de aplicaciones. Permite al diseñador enfocarse en la experiencia del usuario al navegar, con un rango mínimo de error y en el menor tiempo posible.
Nace para hacer frente a las necesidades de los diseñadores UX/UI para generar bocetos, diseños y prototipos de interfaces, dado el vacío que había dentro de Adobe, sin ningún software específico para generar este tipo de procesos.
Antes hubo otros como Adobe Fireworks (una clásica herramienta absorbida de Macromedia, que desapareció en 2013).
Y algunos programas se han utilizado para estos fines sin ser los más apropiados, como Photoshop (programa dedicado al retoque fotográfico) e Illustrator (dedicado al diseño vectorial). Ninguno de ellos es óptimo ni específico para ello. Aunque se les ha intentado agregar herramientas para generar bocetos o prototipos, no eran nada ligeros ni estaban bien optimizadas para ello.
¿Qué puedes hacer con Adobe XD?
Esta es la lista de tareas que se pueden realizar con Adobe XD:
• Wireframes, el esqueleto de la interfaz de usuario UI
• Mockup, diseño estático y fiel al producto terminado.
• Prototipos interactivos, mockups que representan el flujo de la aplicación
• Animaciones, diseños exportables a After effects
• Iconos y formas basadas en vectores
• Especificaciones para desarrolladores: imágenes, tamaños, colores, CSS, tipografía…para llevar el mockup a código
Herramientas colaborativas
• InvisionApp
• Zeplin
• Adobe XD
Estas herramientas ayudan a los desarrolladores a comprobar fácilmente las especificaciones de interfaz de usuario de las capas en la tabla de diseño. Además cualquier miembro del equipo puede aportar comentarios sobre un artboard o descargar los archivos necesarios para el desarrollo.
Proceso de trabajo de diseño de la mejor UX y UI
Análisis y documentación
En esta fase del proceso se obtiene la información necesaria para conocer el proyecto, su contexto, las necesidades y objetivos antes de comenzar a ‘diseñar’.
Tareas que se llevan a cabo son:
● Reuniones con cliente para establecer una visión clara del site o aplicación a diseñar y ver qué necesidades tiene.
● Documentación acerca del cliente, que imagen corporativa tiene, que colores usa en su web, etc..
● Documentación sobre posible competencia.
● Establecer objetivos de usabilidad
● Búsqueda de productos competidores, ver diseños de otros sitios.
● Documentación sobre la tecnología a usar (material design, vue, etc..)
● Compilación de recursos gráficos (bancos de imágenes, iconos, fuentes, etc..)
Diseño
En esta fase los creativos y diseñadores se ponen manos a la obra y se presentan resultados parciales para obtener feedback del resto del equipo y del cliente.
Las tareas a realizar son:
● Documentación: diseño de conceptos
● Diseño con papel y lápiz (no siempre es necesario pero ayuda)
● Desarrollo del flujo de pantallas y el modelo de navegación
● Elaborar primeros bocetos en wireframes, solo esqueleto.
● Elaborar prototipos detallados (mockups)
● Organizar tests de usabilidad sobre los prototipos detallados (prototipo)
● Elaboración de una especificación de diseño (CSS)
● Compartir mockups finales con cliente y desarrolladores. (InvisionApp, Zeplin)
● Maquetación de los mockups.
Esperamos que la lista de herramientas os resulte interesante y os animéis a probar alguna de ellas.
