El Wireframe es una jerarquización de contenidos distribuidos visualmente y una esquematización de la interfaz.
Gráficamente, son estructuras muy simples y están enfocados a visualizar la distribución de los contenidos dentro de una pantalla.
El Wireframe es el puente que une la Arquitectura de Información y Diseño.
Pasa de la “mentalidad estructural” de un mapa de contenidos, donde decidimos y ordenamos los contenidos de nuestro sitio web, a la emocionalidad del Diseño de Interfaz.
La principal ventaja del Wireframe es que aumenta la productividad en el proceso de experiencia de usuario
La principal ventaja de los Wireframes, es que ofrecen una perspectiva del contenido, obviando el diseño y que puedan distraer (colores, tipografías, imágenes, textos, etc.). esquematización de la interfaz
PERMITE EL TRABAJO EN EQUIPO
Además, son una excelente herramienta de comunicación y discusión y entre arquitectos de información, programadores, diseñadores y clientes.
Presentación Wireframes alta vs baja densidad
Principales características del Wireframe
Son simples y no tienen distracciones visuales como colores o imágenes
Pueden ser dibujados a mano o creados con alguna herramienta computacional ALTA y BAJA fidelidad
Siempre van acompañados de una explicación acerca de las zonas e interacciones
Malas practicas en la creación de Wireframes
Uso de colores e imágenes
Mezclar con interfaz real
Wireframe muy complejos
Wireframe muy simples, sin contenido
Wireframes de baja fidelidad
Los prototipos de baja fidelidad implementan aspectos generales del sistema sin entrar en detalles.
Los prototipos de baja fidelidad se caracterizan por ser económicos, rápidos de construir, rápidos de arreglar y no precisan de técnicos expertos
- Se utiliza un menor tiempo de trabajo.
- Carece de elementos distractores debido a su simpleza.
- Permite correcciones rápidas.
Wireframes de alta fidelidad
Con los prototipos de Alta fidelidad se representan aspectos más precisos. Sirven, por ejemplo, para detallar el proceso interactivo global de una o varias tareas concretas.
- Permite un mayor detalle de interacción.
- Se acerca al contenido y esboza una estructura y funcionamiento realista.
- Al presentar mayor detalle, requiere menor imaginación del cliente para comprender el prototipo.
Plataformas para crear wireframes digitales
En una muy entretenida charla de Duoc UC en «Me titulé en Duoc UC» me corresponde hablar con Jannette Pérez, diseñadora gráfica titulada Duoc UC quien nos habla sobre su experiencia académica y el camino que ha realizado para trabajar hoy en día como diseñadora UX/UI en Ripleytech.
En esta charla realizada para el canal de Youtube de la escuela de Diseño de Duoc UC entrevisto a Consuelo Olivares y Marcelo Morales, diseñadores UX en Thoughtworks quienes nos cuentan sus “experiencia diseñando experiencias” desde sus orígenes, donde nos compartirán cómo partiendo desde puntos tan diferentes como la informática y el diseño terminando en […]
Charla que realizamos para el canal de la escuela de Duoc UC en la cual soy docente compartiendo junto a Vladimir Torres y Paola Veliz, El Diseño de Experiencia de Usuario (UX) es el proceso fundamental en la metodología de Diseño Centrado en el Usuario (DCU) y se enfoca en conocer las necesidades, frustraciones y […]