Parecen lo mismo, pero son diferentes: wireframe, boceto, mockup y prototipo

22 mayo, 2018 | Por: Juan Gabriel Cano, Diseñador

Actualmente, el diseño, específicamente gráfico, se ha convertido en un componente clave para el desarrollo de productos digitales y, además, está presente en todas las etapas del proceso. Generalmente, durante las primeras etapas del desarrollo de un producto digital es común el uso de términos como wireframe, boceto, mockup o prototipo de manera indistinta; ahora bien, ¿conoces la diferencia entre estos términos y cuál es la función de cada uno de estos artefactos?

Empecemos hablando de un wireframe, éste tiene como objetivo representar áreas, distribución y estructura de un producto digital o sus funcionalidades para explicar y comunicar a los clientes y miembros del equipo una idea aterrizada o precisa (Ronda León, 2007). Así mismo, está compuesto por bloques, cajas textos, flechas y otras representaciones gráficas sin detalles visuales de marca, tipografía o color. Por otra parte, existen diferentes técnicas para hacer wireframes, podemos recurrir al lápiz y al papel para construirlos; también, podemos encontrar herramientas web que permiten crearlos e incluso aplicarles funcionalidades básicas como desplegar una lista o añadir un link, en este sentido, el wireframe adquiere características de prototipo (más adelante aclararemos esto término).

wireframe hecho manualmente:

 

wireframe hecho con una herramienta digital:

 

De otro lado, es posible que alguna vez hayas realizado un boceto; de hecho, no se necesita ser un diseñador o un artista para lograr un alto nivel de entendimiento a través de un boceto. En el desarrollo de productos digitales, generalmente, todos los roles tienden a bosquejar, pues este ejercicio permite explicar ideas, flujos, interacciones y conceptos. Aunque podríamos decir que un wireframe es, también, un boceto, el segundo no se limita a interfaces, también permite expresar conceptos libremente y puede realizarse de manera manual o digital.

Boceto de un concepto:

 

Ahora, ¿sabes qué es un mockup?: es la evolución de un wireframe, aunque puede concebirse sin construir un wireframe, dado que no solo se centra en aspectos meramente funcionales, también incluye elementos visuales como color, tipográfica y recursos de marca. Así mismo, posee alta fidelidad y toda la información para la implementación de un producto digital. No obstante, el mockup es un artefacto estático; es decir, no tiene funcionalidades ni micro-interacciones y, generalmente, se diseña con herramientas digitales.

Mockup de una página de login:

 

Finalmente, un prototipo es un artefacto que agrupa las características de un wireframe y un mockup; dicho de otra manera, tiene la distribución o diagramación de la solución, posee componentes funcionales (botones, inputs, etc.), incluye recursos visuales como color, tipográfica y elementos de marca, logra alta fidelidad; además, permite realizar interacciones o micro-interacciones para la validación de la experiencia de usuario. También, es el insumo para el desarrollo de software y la construcción de requerimientos o historias de usuario en un marco de trabajo ágil. Puede diseñarse en una herramienta digital o construirse en HTML.

Para concluir, cada término (wireframe, boceto, mockup y prototipo) corresponde a un artefacto que, a su vez, cumple una función en el desarrollo de productos digitales. Por lo tanto, y más allá del uso de anglicismo, la importancia de conocerlos es poder hablar en un lenguaje común alrededor de la experiencia de usuario y la construcción de productos y servicios digitales.

Referencias bibliográficas

  • Ronda León, R. (2007). La diagramación en la arquitectura de información. Nosolousabilidad.