Wireframing
Objetivo
Esta etapa es el puente entre la investigación y el diseño de elementos visuales. Estructuramos las necesidades de los usuarios en User Stories y los utilizamos en conjunto a componentes visuales para crear pantallas completas conocidas como wireframes.
Un wireframe es una guía de interfaz visual básica que describe la estructura de cada pantalla y las relaciones entre sus páginas. Sirve como plano que define la estructura, el contenido y las funcionalidades de un proyecto.
Beneficios de wireframing
Para el cliente
- Permite la creación rápida de prototipos
- Permite a los clientes probar ideas con anticipación
- Nos permite eliminar errores y problemas desde temprano
- Permite al cliente ver el uso de contenido real mostrado como lo vería el usuario
- El cliente conocerá mejor su producto, las necesidades de los usuarios y los patrones de comportamiento
Para el equipo
- Los wireframes ayudan a descubrir nuevos requisitos y preguntas que pueden no haber sido considerados
- Los desarrolladores sabrán cómo funcionará el sitio web o la aplicación antes de recibir los diseños finales
- Hay oportunidad de obtener retroalimentación y probar cómo funcionará el producto
Subfases de wireframing
User Flow diagrams (diagramas de flujo) son representaciones visuales del camino deseado del usuario a través del producto diseñado. Muestran los pasos, las decisiones y los embudos que los usuarios encuentran más frecuentes.
Single-page wireframes (planos de pantalla) son una guía visual de la estructura, composición y jerarquía de información de una página. Su propósito es organizar los elementos del contenido de un sitio web de una manera informada, fácil de usar y eficaz para los negocios.
Elementos (Componentes) típicamente en un wireframe
- Navegación
- El logo de la empresa
- Secciones del área de contenido + contenido de muestra (texto de marcador de posición)
- Llamadas a la acción
- Widgets
- Campos
- Formularios
- Ventanas emergentes
- Estados de desplazamiento