Wireframe: Antes del desarrollo

Escrito por | 01 Noviembre 2015 | Publicado en Noviembre 2015
Los wireframes también llamados prototipos desnudos, blueprints o layouts son una de las herramientas que nos pueden facilitar el trabajo a la hora de iniciar el desarrollo de un sitio web.

¿Qué es un Wireframe?

Dentro del proceso de construcción de un sitio web, está el diagrama de flujo de estructuras de trabajo o mapas de sitio, el diseño de pantallas y finalmente el wireframe que es donde el concepto se vuelve tangible. Los wireframes son guías visuales que representan la estructura de un sitio, con los cuales se esquematiza el diseño de la página y el orden del contenido, incluyendo elementos de la interfaz y sistemas de navegación, representando así la funcionalidad, el comportamiento y la jerarquía de la información. Los wireframes conectan la estructura conceptual o arquitectura de la información, con la superficie o diseño visual. No debe tener elementos finalizados de diseño (colores o tipografías), debe estar en blanco y negro o máximo en escala de grises, con el fin de evitar distracciones.

Aparte de los sitios web, los wireframes son usados para hacer prototipos de aplicaciones para dispositivos móviles, aplicaciones para ordenador, u otros productos basados en pantalla que impliquen interacción de hombre-máquina.

Los wireframes pueden ser utilizados por diferentes disciplinas:

  • En desarrollo (generación de código) para obtener una aproximación más tangible de las funcionalidades del sitio
  • En diseño para impulsar el proceso de la interfaz de usuarios (UI)
  • En diseño de experiencia de usuario y arquitectura de información para mostrar las rutas de navegación entre páginas

Los wireframes se enfocan en:

  • El tipo de información que será mostrada - Definir que tipo de información general es la que maneja el sitio
  • Las reglas para mostrar ciertos tipos de información - Como diferenciar los tipos de información que maneje la página
  • La cantidad de funciones disponibles - Cómo voy a lograr que el usuario entienda o ejecute interacciones
  • El efecto de los distintos escenarios en la pantalla - Que va a suceder luego de un click, acciones a seguir

wireframe sketch 03

 

Elementos de un wireframe

El prototipo de un sitio web tiene tres componentes: diseño de información, diseño de navegación y diseño de interfaz. El diseño de la página es donde estos componentes se unen, mientras que un wireframe es donde se representa la relación entre estos componentes.

Diseño de información
El diseño de información es la ubicación en la presentación y priorización de información de manera de facilitar el entendimiento. El diseño de información es un área del diseño gráfico pensada para representar información de manera efectiva para una comunicación clara.

Diseño de navegación
El sistema de navegación le da al usuario un conjunto de elementos que le permiten moverse entre páginas del mismo sitio web. Este sistema debe comunicar la relación entre los enlaces de manera que los usuarios entiendan las opciones de navegación en el sitio.

Diseño de interfaz
Este incluye seleccionar y ordenar los elementos de la interfaz para permitir a los usuarios interactuar con la funcionalidad del sistema. Elementos comunes que se encuentran en el diseño de interfaces son los botones de acción, campos de texto, cajas de verificación, botones radiales y menús desplegables.

 

¿Qué hay que tener en cuenta a la hora de hacer un Wireframe?

Hacer que el contenido sea fluido y claro de manera que se lea correctamente y que el ojo del usuario se mueva de forma fluida entre las diferentes partes que componen el sitio.

Hacer estructuras pensando en el usuario final, acordes al objetivo de la página y a sus contenidos.

Seguir tendencias o flujos normales de trabajos, mediante estructuras de navegación ya comunes para el usuario como por ejemplo logo lleva a la página de inicio, encabezado con menú, pie de página con textos de navegación o de contacto.

 

Beneficios de hacer un wireframe

Son fáciles y rápidos de hacer
En menos de quince minutos con una servilleta o una aplicación, usted puede encontrar un bosquejo de lo que va a desarrollar o diseñar, si es en papel a punta de lápiz, borrador y tachones puede crear todo el esquema de navegación, flujos de usuarios, etc. Si es en digital, existen cientos de aplicaciones que lo ayudan en este proceso como Mockingbird, Cacoo, Gliffy, entre otros. Da una visión global de lo que queremos ver, tanto para desarrollo como para el cliente.

Priorizar contenido y determinar qué tipología y formato de contenido se necesita: un vídeo, un post, un audio
Organizar como se va a ver su contenido, que es lo más importante, que es lo más relevante, que es lo que atrae a los usuarios al sitio y como los retengo presentando la información de la manera adecuada.

Permiten explorar múltiples posibilidades de desarrollo
Si se va a desarrollar con o sin un cms, si tal vez alguno en específico cumpla los requerimientos.

Levantar requerimientos de forma rápida
En el caso puntual de Joomla! permite definir que extensiones van a servir para desarrollar el proyecto. Si se hace el prototipo de manera correcta, se sabrá cuales son los objetivos de la página y cómo se van a resolver ante el usuario. Con el prototipo es posible definir si se necesita hacer una plantilla diseñada de cero o una extensión en particular si es gratuita o paga, si necesita personalización de los estilos, etc.

Probar y validar esquemas de navegación
Saber si el usuario final entiende donde debe dar click para llegar a donde quiere

Hacer pruebas de usabilidad en etapas tempranas del proyecto
Saber si el usuario final entiende el desarrollo tal cual como se está planteado

Facilita poner las llamada a la acción
Con un prototipo es mucho más sencillo ver los puntos claves para ubicar los llamados a la acción, cual es el punto de acción del ojo con respecto al contenido de manera tal que sea eficaz.

Evitar reprocesos
Se plantean escenarios sin necesidad de desarrollar para luego tener que pivotear en el camino porque tal vez no se valido la solución

Visto 3180 veces Etiquetado como Spanish, Desarrollador
Andrea Kekan

Andrea Kekan

Colombiana!. Diseñadora Gráfica. Luego de muchos años entre el CMYK me pasé al RGB y Joomla! se volvió el emblema de este cambio. Amo diseñar! Trabajando en el J.U.G. de Bogotá.