Dentro de las diferentes fases del proceso de diseño web, existen diversos productos que suelen ser desarrollados antes de llegar a la versión final, ya sea para que exista una mejor comunicación entre los distintos miembros de equipo o para ofrecer una mejor visualización de la versión final al cliente. Pero, ¿cuáles son estos productos y para qué sirven? A continuación, explicaremos brevemente qué son los wireframes, los mockups y los prototipos, de modo que al finalizar de leer este artículo no te quede duda alguna sobre la función de estos distintos y útiles productos.
¿Qué es un wireframe?
Un wireframe es la primera representación de un diseño. En el caso de un sitio web se muestran una serie de recuadros y líneas que indican qué tipo de contenido irá y donde será localizado. Aunque es usual que los wireframes empiecen en papel, luego se digitalizan para poder trabajar con medidas exactas. En el boceto en papel puedes tener una idea general de dónde van los elementos, pero al mejorar y digitalizar el boceto ya no se tratan con aproximados, sino de medidas exactas que deben seguirse cuando se pase a la siguiente fase de diseño. Queda claro, entonces, que los wireframes básicamente tienen dos objetivos:
- Mostrar el tipo de contenido que conforma el diseño del sitio
- Mostrar dónde se ubica ese contenido
Los wireframes son la primera representación que se tiene de la estructura del diseño. Al mismo tiempo, también se representan los principales elementos, pero a un nivel bastante básico. Es decir, se conoce qué tipo de elementos se colocarán, pero todavía no se cuenta con una aproximación del aspecto visual de dicho elemento.
Si bien es importante crear una representación fiel del diseño final, no se tiene detalle de ciertos elementos. Son como una guía que ayuda a los miembros de equipo a entender la estructura del sitio, pero aún se desconoce el aspecto de los elementos. Por esta razón se suele representar con recuadros las zonas donde irán elementos o botones, y con líneas los títulos y párrafos de texto.
Los wireframes son indispensables en las primeras fases del diseño ya que suelen servir como bocetos, ya sea para intercambiar ideas con los miembros de tu equipo o para explicar de manera más gráfica el concepto del diseño. Ya que se pueden crear en papel, son excelentes herramientas al trabajar en equipo. Al digitalizarlos también cumplen este propósito, aunque son igual de necesarios ya sea que trabajes en equipo o por cuenta propia pues es una guía que debes seguir en las próximas fases del diseño.
¿Qué es un mockup?
Un mockup es una representación visual y estática de un diseño. En el campo del diseño web los mockups se utilizan para que los miembros de equipo tengan una idea más clara de cómo lucirá el sitio web. De hecho, más que ser cercana, es una idea exacta de cómo se verá al sitio web una vez que se pase a la siguiente fase.
Los mockups se realizan en base a las medidas y a la organización previamente establecida en el wireframe, pero a diferencia de éste, un mockup ya tiene un sentido mayor para el cliente pues es más visual. Se ven todos los elementos como texto, iconos e imágenes.
Ya que es una representación visual estática, algunos elementos que quieras añadir como videos deberán ser representados mediante una imagen y el icono de reproducción. Asimismo, no existe interacción alguna entre los elementos de menú, botones, enlaces, etc. Lo que suelen hacer muchos diseñadores es crear mockups también de cómo lucirán los botones en sus diferentes modos, de esta manera el desarrollador web puede saber con exactitud que modificaciones debe hacer. Sirven también para explicar al cliente de manera más precisa cómo funcionan las interacciones en el sitio web.
Como ya hemos mencionado, los mockups son de gran ayuda cuando se trabaja en equipo, pues ayuda a visualizar mejor a todo el equipo el diseño final del sitio. Asimismo, son de gran utilidad para mostrar el diseño al cliente sin necesidad de añadir ningún tipo de interactividad. Son perfectos cuando quieres recibir comentarios o revisiones por parte del cliente.
¿Qué es un prototipo?
Un prototipo es también un representación de la versión final de un diseño web que, además, simula la interactividad. Se entiende que aunque es un prototipo, el diseño debe ser cercano a la versión final del diseño. A menudo, se realiza en base al wireframe y los mockups que proporciona el diseñador. Por esta razón, suele tener medidas exactas y, por supuesto, la estructura también se mantiene. Si el diseño es cercano a la versión final, las interacciones también deben ser desarrolladas con mucho cuidado, teniendo en cuenta su semejanza con la versión final del sitio web. Entonces, un prototipo sirve para examinar no sólo el contenido sino también la interactividad del sitio.
Un prototipo se suele usar para poner a prueba ciertas funciones del sitio y verificar si la usabilidad es la adecuada. En base a estas pruebas se puede proceder a realizar cambios según convenga. Ya que un prototipo es una aproximación cercana al producto final, tanto en diseño como en interacción, es un proceso que suele tomar más tiempo, pero puede ser necesario en ciertas páginas web. Por ejemplo, si se trata de una aplicación web, se deben realizar pruebas para verificar si ésta funciona correctamente antes de ofrecer dicho producto a los clientes.
En conclusión…
Como puedes ver, cada uno de estos productos tienen su propia función. En muchos casos, productos como los wireframes se consideran básicos al comenzar a diseñar, sin importar si se trata de un sitio web simple o una complicada aplicación web. Por otro lado, los prototipos no siempre son empleados, particularmente si el presupuesto y tiempo simplemente no alcanzan. Así que, aunque cada uno de ellos es de gran utilidad, no siempre todos estarán presentes en el proceso de diseño.
