Wireframe, Mockup y Prototipos: en busca de sus diferencias
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.
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”.
¿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.
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.
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.
