Wireframe, Mockup y Prototipos: en busca de sus diferencias

May 18, 2017

Cuando hablamos de prototipado tres palabras que seguro se nos vienen a la mente son Wireframe, Mockup y Prototipo. En numerosas ocasiones estas palabras son utilizadas indistintamente pero, ¿son realmente lo mismo?

 

¿Qué es un Wireframe?

 

Como bien expone el artículo The guide to mockups, los wireframes son el esqueleto del diseño. Se caracterizan por tener una baja fidelidad visual, representando la interfaz en escala de grises y sin dedicar demasiado tiempo al aspecto o estética del diseño. Se utilizan escalas de grises con el propósito de que no haya un excesivo diseño visual o gráfico que pueda distraer la discusión de lo realmente importante en un wireframe: el concepto, la estructura y los componentes básicos del diseño.

 

 Fragmento de wireframe

 

 

____________________

 

Los wireframes suelen utilizar escalas de grises con el propósito de que el diseño visual o gráfico no pueda distraer la discusión de lo realmente importante en un wireframe: el concepto, la estructura y los componentes básicos del diseño.

 

 

Los wireframes incluyen todos los elementos que tendrá el producto final, aunque a nivel de detalle visual no estén aún definidos. Por poner un ejemplo simple, imaginemos un botón en nuestro diseño. En un wireframe, se definirá si este botón es primario o secundario, su disposición, su texto, etc. Lo que no se entrará es a definir qué aspecto visual tendrá (tipografía, color, bordes, etc.).

 

También debe dejar entrever cuál va a ser su interacción y navegación. Esto se debe a que los wireframes, aunque no suelen incluir interacción, sí suelen ir acompañados de notas que explican la navegación más importante para que sea tenida en cuenta en fases posteriores.

 

Los wireframes se pueden utilizar en todas las fases del diseño, aunque son mayoritariamente usados en fases tempranas para definir la estructura básica. También, al ser productos rápidos de desarrollar, se utilizan en gran medida para compartir propuestas e ideas dentro de los equipos de diseño. A veces también se usan como elemento de discusión con el cliente, pero hay que tener cuidado de explicarles que se fijen en lo que realmente define este producto y no en detalles visuales que no se contemplan en este punto (“este botón no es bonito”, “la tipografía no me gusta”, etc.). Por una razón parecida, habría que tener precaución al utilizarlos para evaluar con usuarios. Puede que solo se queden con que "no lo ven bonito". 

 

Las herramientas disponibles para desarrollar este producto son muy diversas, desde hacerlo en papel hasta utilizar herramientas de prototipado rápido como Axure, Sketch, JustinMind, etc.

 

¿Y un Mockup?

 

Los mockups son la piel del diseño. Se caracterizan por tener una media-alta fidelidad y por ser representaciones completamente estáticas del diseño visual. Es esencialmente eso, el diseño más visual. Por lo tanto, su objetivo es demostrar cómo se van a representar visualmente los elementos definidos, por ejemplo, en el wireframe.

 

 

 

 

Ejemplo de Mockup, Fuente: UXpin

 

 

 

Al contrario que en el wireframe, en el mockup ya se va “al pixel”, definiendo los detalles visuales como el color, la tipografía, las sombras, etc. Es el punto en el que hacerse una idea muy clara de qué apariencia visual va a tener el producto. Volviendo al ejemplo del botón, aquí se define su tipografía, color, sombreado, bordes, etc. Si el wireframe asienta la base y estructura del diseño, el mockup define su apariencia.

 

____________________

 

Si el wireframe asienta la base y estructura del diseño, el mockup define su apariencia

 

 

Este producto permitirá discutir con el cliente si el aspecto visual y la comunicación encaja con lo que se buscaba. También puede ser muy útil para evaluar con los usuarios dicho aspecto visual y comunicación: si les parece atractivo, si les transmite o comunica aquello que se busca de forma clara o si se entiende.

 

Este producto requiere de software de diseño más gráfico como Photoshop, Illustrator, Sketch, etc.

 

 

Por últimos, los prototipos

 

Los prototipos son representaciones de media-alta fidelidad que incluyen o simulan la interacción con la interfaz. En esta representación los usuarios ya sí podrán experimentar en alguna medida la experiencia de uso del producto. Si el wireframe define la estructura y el mockup cómo es visualmente, el prototipo define sobre todo cómo se comporta el producto. Por ello, aquí la interacción debe estar ya muy definida. En nuestro ejemplo del botón, ya veremos cuál es el feedback visual del botón y su navegación o funcionalidad asociada.

 

Los prototipos son ya sí un candidato ideal para evaluar con usuarios. Al tener una funcionalidad simulada y un aspecto visual más definido que el wireframe, son más adecuados para evaluar la experiencia que tienen los usuarios interactuando con el producto. Para definir este producto puedes utilizar herramientas de prototipado rápido como Axure con las que puedes trabajar fácilmente la interacción.

 

Como has visto, cada tipo de producto tiene su función y características específicas. Empieza trabajando la estructura, elementos principales y navegación básica con el Wireframe, define la línea visual en el Mockup y remata con el detalle de la interacción en el prototipo funcional.

 

 

 

 

Share on Facebook
Share on Twitter
Please reload

Entradas destacadas

Investigar y testar con usuarios son dos actividades cada vez más recurrentes en un proceso de diseño. Pese a su indiscutible potencial, hay ocasiones...

Sin excusas

08.01.2018

1/4
Please reload

Entradas recientes

April 26, 2019

January 8, 2018

February 7, 2017

Please reload

Archivo
Please reload