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

Post relacionados
Curso optativo de WordPress 2024 – Duoc UC

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera […]

[Me Titulé en Duoc] Jannette Pérez – Diseñadora UX/UI

 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.

Nuestra experiencia diseñando experiencias [Charla UX]

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 […]