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".
Las herramientas disponibles para desarrollar wireframes son muy diversas: desde algo tan común como el papel, a herramientas más esquemáticas como Balsamiq, o más orientadas al diseño visual como Figma o Sketch, entre otros.
Muchos equipos prefieren utilizar la misma herramienta, para centralizar todo los desarrollos de wireframes, y mockups en una, otros prefieren utilizar herramientas diferentes según el uso. Aquí tu decides.
¿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.
Ejemplo: Figma
____________________
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.
'Para definir mockups se suelen utilizar herramientas orientadas al diseño visual y que ya hemos mencionado antes: pueden ser Figma (la más extendida), Sketch, Justinmind o Penpot (históricamente se utilizaban Photoshop e Illustrator, pero actualmente están casi obsoletos para este uso por la falta de automatización).
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.
Para definir la interacción de tus prototipo puedes utilizar herramientas ya mencionadas anteriormente como Figma o Axure y que te permiten fácilmente dar vida a un mockup. Lo ideal es utilizar la misma herramienta para evitar exportaciones y problemas de sincronización. Por ello Figma es la más utilizada en la actualidad.
Además, existen otras herramientas más avanzadas que permiten lanzar prototipos casi reales sin necesidad (casi) de un equipo de desarrollo como son Webflow o Framer, que sincronizadas con herramientas de diseño como Figma te pueden ayudar a tener un prototipo interactuable en muy poco tiempo y que te permitirá validar tus diseños en un entorno real
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.
Cuenta con Rocket Studio para diseñar o evolucionar tu producto digital.
¿Estás pensando en evolucionar tu producto digital o comenzar un producto o servicio nuevo?.
Contáctanos y hablamos de ello.