Si estás empezando en el campo del Diseño UX es posible que te cueste un poco distinguir entre un boceto, un wireframe, un prototipo y un mockup. ¿Qué significan todos esos nombres, algunos en inglés? ¿Cuándo se utiliza cada uno de ellos? A continuación resumimos las convenciones en uso en la profesión.
Boceto
Un boceto, o sketch en inglés, es un primer esbozo de la interfaz hecho con lápiz y papel. Cuando has entendido el proyecto, has realizado las primeras investigaciones y puesto en orden tus ideas es el momento de empezar a bosquejar la solución visual. Es un proceso muy rápido y te permite descartar ideas y proponer otras a gran velocidad. Generalmente es un trabajo en solitario. Algunos diseñadores prefieren lapiz y goma de borrar. Personalmente, utilizo bolígrafo y papel sin pautar y prefiero tachar y empezar de nuevo en lugar de borrar.
Los diseñadores de interfaz tienen a su disposición decenas de recursos “cuquis” para hacer más fácil su trabajo: desde cuadernos con forma de iPhone a plantillas con los elementos de interfaz más habituales. No obstante, son únicamente aditamentos no necesarios. Puedes dibujar sin plantillas ni cuadrícula.
Asimismo, hoy en día, con dispositivos como las tablets de pantalla táctil que permiten dibujar con un lápiz digital las fronteras entre un boceto y un wireframe se difuminan.
Wireframe
Un wireframe, como su nombre en inglés indica, se asemeja a una “estructura de alambre”. Son trazos en blanco y negro que representan una interfaz. Es importante destacar que no se usa el color en los wireframes, ni las tipografías definitivas, son sólo aproximaciones.
Durante años los wireframes constituyeron un “entregable” muy importante en el proceso de diseño de una web. Se utilizaban para validar las funcionalidades y los flujos antes de pasar a la siguiente fase de desarrollo.
Actualmente los wireframe han perdido protagonismo. No se prioriza tanto la documentación de los proyectos como en metodologías waterfall. Si no te gusta documentar, esta novedad es un alivio pero también es cierto que en determinados entornos, como las grandes corporaciones donde son muchas las personas implicadas en los proyectos y a lo largo del tiempo, puede ser necesario documentar y explicar por qué se tomaron determinadas decisiones.
Los sistemas de diseño, con sus componentes reutilizables, hacen casi más sencillo realizar una propuesta de diseño visual completa que un wireframe. Yo misma, en uno de mis últimos proyectos, Genomapp, realicé ambos procesos simultáneamente, ya que era la persona encargada del diseño global de la experiencia de usuario (UX). No prescindí de los bocetos pero sí di el salto directamente al diseño visual.
Un artículo titulado Why wireframes are becoming obsolete abunda en lo que acabo de mencionar.
Si buscas un software para diseñar wireframes echa un vistazo al post Cómo elegir la mejor herramienta para wireframes.
Prototipo
Un prototipo es un diseño al que se han incorporado interacciones. Sirve para mostrar cómo responde la interfaz a las acciones del usuario (haz clic aquí, pulsa allá) y para reflejar cómo son los flujos de la web o app que se está construyendo.
Hasta ahora, los documentos que hemos mencionado eran estáticos. Los prototipos son el primer documento que incorpora interacción. Se pueden realizar a partir de bocetos o wireframes, incluso se puede llegar a cortar con tijeras un boceto y pegar los distintos elementos en una hoja para realizar test de usuarios “de guerrilla”.
Lo más habitual, sin embargo, es animar los prototipos con herramientas específicas o el propio software de diseño. Invision o Marvel alcanzaron gran popularidad aunque la tendencia en el sector hacia soluciones que abarcan el proceso de diseño de principio a fin les ha restado protagonismo. Es decir, puedes crear desde el wireframe hasta el prototipo con la misma herramienta.
Desde mi punto de vista, el prototipo es una de las fases del diseño que menos optimizada se encuentra. Lo ideal sería contar con un prototipo en HTML totalmente interactivo pero sin conexiones a bases de datos, una especie de prototipo “dummy” o tonto. En su lugar, tenemos herramientas que simulan la interactividad pero que son una maraña de enlaces entrantes y salientes. Por eso mismo, crecen en popularidad utilidades “no code” como WebFlow, que transforma tus diseños en webs.
Mockup
Los mockups o maquetas se llevan usando muchos años en el ámbito del diseño gráfico. Son fotomontajes que permiten comprobar cómo quedaría nuestro diseño en un determinado soporte: una taza, una tarjeta de visita, una camiseta, una furgoneta…
En el entorno digital se pueden realizar ejercicios similares. Si no eres muy hábil con Photoshop son especialmente útiles PlaceIt y TheAppLaunchPad.
Placeit dispone de cientos de mockups en los que puedes insertar tus diseños: un ordenador, un móvil, una escena…
TheAppLaunchPad está pensado para crear las capturas de pantalla (screenshots) que acompañan a toda app en App Store y Google Play Store. En lugar de simples pantallazos esta herramienta permite aplicar diseños más elaborados y creativos. Todo ello, sin necesidad de conocimientos de diseño. Además, se encarga del trabajo más tedioso, ya que genera las capturas necesarias para todos los dispositivos (distintos tamaños de iPhone, iPad…).
Si te planteas completar tu formación en Diseño Gráfico, Bellas Artes, Comunicación u otra especialidad con conocimientos en Diseño UX (diseño de interacción, usabilidad, arquitectura de información y mucho más) no dudes en solicitar información sobre Curso UX. Además, te puedes llevar el libro Internetización (pdf) de regalo.