Etiqueta: entregable

Entregable de UI: Wireframe en Figma

Resumen: En el marco de diseño de interfaz (C5/14/6/2021) exploramos en este artículo cómo realizar un wireframe en la aplicación Figma. En este proceso se incorporan métodos propios de la UX para alcanzar prototipos de alta calidad.

Wireframe Kit v3, imagen de UI8. Disponible en Dribbble

Wireframe en Figma

Los wireframes son una de las herramientas más simples que puede utilizar para visualizar las ideas generales en torno a la aplicación que se está diseñando.

Una buena definición de lo que es un Wireframe lo proporciona, Toni Gemayel:

«Un wireframe es una guía visual simple que representa el marco esquelético de un sitio web o producto digital. Piense en ello como el anteproyecto de su diseño final. Proporciona suficientes detalles para que todos conozcan la forma de la pared, pero no profundiza tanto en ella como para dar detalles exactos sobre el tipo de ladrillo del que deberían estar hechas las paredes (que viene más adelante). Aunque los wireframes son creados con mayor frecuencia por diseñadores, deben ser lo suficientemente básicos para que todos los demás diseñadores, partes interesadas, desarrolladores y usuarios puedan comprender las ideas.»

Créditos a Joseph Downs.Tomado de https://www.justinmind.com/ui-kits/mobile-wireframing-ui-kit

Kit de Wireframes con componentes ya diseñados para crear pantallas. Estos kits o templates se pueden trabajar en las aplicacione de diseño de interfaz, como Figma, Sketch, Invision, etc.

Tutorial de creación de Wireframe realizado por uxcristopher.
En este video se explica los Wireframes in Figma. Video por Butter Academy.

En conclusión…

Las wireframes son bosquejos que se pueden diseñar tanto a mano en hojas de papel como en aplicaciones web, como Figma. En Figma existen muchas plantillas para comenzar a trabajar con wireframe, como por ejemplo esta plantilla de Wireframe.

Como en todo proceso de diseño, garantizar que la etapa de Wireframe sea significativa y concrete el producto a diseñar, contribuye a las etapas siguientes de los productos. Un buen proceso de Wireframe cimenta las demás etapas de diseño.

Artículos de Referencia

Entregable de UX para Apps: Userflow

Resumen: En el marco de Diseño de interfaz, nos encontramos que las aplicaciones se basan en flujos, y para diseñarlos correctamente. En las etapas tempranas de diseño podemos diseñar los flujos de diseño para lograr una interacción y experiencia que agrade al usuario. (C4/11/6/2021).

Foto de Startup Stock Photos en Pexels

¿Qué es un Userflow?

 Para definir el concepto de Userflow, vamos a citar a Camren Browne:

«El concepto de flujo en el diseño de UX fue acuñado por primera vez por el psicólogo Mihaly Csikszentmihalyi. Lo consideró un estado mental altamente enfocado en el que el usuario está completamente inmerso en lo que está haciendo y la tarea que pretende lograr. A menudo se dice que está «en la zona». Los flujos de usuarios ayudan a los diseñadores a comprender y anticipar los patrones cognitivos de nuestros usuarios para crear productos que permitan este estado de flujo.»

«Los flujos de usuario, los flujos de UX o los diagramas de flujo, como a veces se les llama, son diagramas que muestran la ruta completa que toma un usuario cuando usa un producto. El flujo de usuarios describe el movimiento del usuario a través del producto, mapeando todos y cada uno de los pasos que da el usuario, desde el punto de entrada hasta la interacción final.»

En conclusión…

Para concluir, el flujo de usuario es el proceso de cómo el usuario interactuará con su producto, desde que el usuario se entera de la existencia de su aplicación / sitio web, hasta que se descarga / abre y cada paso que el usuario puede dar o tener, incluidas las pantallas, decisiones, resultados, pantallas después de esos resultados, y ya tienes la idea.

La clave de una aplicación o sitio web exitoso está en la intuición de su diseño. Cuando los usuarios pueden fluir fácilmente a través de una interfaz sin vacilación ni confusión, existe una mayor probabilidad de que compren el producto del cliente o visiten el sitio nuevamente. Los flujos de usuarios son una gran herramienta para la caja de herramientas de cualquier diseñador, ya que pueden ayudar a evaluar la eficiencia y simplicidad de su diseño creativo. Al mismo tiempo, los diagramas de flujo y los flujos de UX ayudan a otros miembros del equipo de diseño y comunican fácilmente el diseño de una interfaz a socios e inversores. Al proporcionar una representación visual de lo que encontrarán los consumidores, puede asegurarse de que la experiencia de sus usuarios sea gratificante y libre de frustraciones.

Artículos de Referencia