Mockups en el diseño web
La palabra wireframe o muckups en el diseño web es un dibujo a mano alzada que permite definir, de forma gráfica, todas las pantallas que corresponen al funcionamiento de la web. Es una forma ágil para poder coordinar con el cliente, de forma visual, todo lo que nuestro visitante puede encontrarse durante el recorrido en nuestro desarrollo web.
No es tan importante definir en este paso el diseño real que va a tener la web, sino lo que es importante es que definamos todas las acciones o funciones que se va a encontrar el usuario cuando aterrice en esa página. Por ejemplo, si estamos definiendo un listado de productos en un ecommerce o tienda virtual, es importante definir para cada elemento del listado que vamos a mostrar al usuario: Título del producto, fotografía, precio, pequeña descripción, botón de favoritos, botón de añadir al carrito, valoración, etc. Todos los elementos que definan cada caja de producto, aunque no sea su ubicación definitiva. Si tendremos un buscador, que campos de filtros aparecerán, si tendremos paginación, etc. O si estamos en la página de producto, que elementos van a mostrarse en este detalle.
Una vez acordado y revisado con el cliente estas interfaces, es cuando pasaremos a la fase de diseño. Pero hacer este paso previo nos da la ventaja de no tener que esperar a que el cliente esté conforme con el diseño gráfico para poder ir trabajando el resto del sistema de información: Definición de la base de datos, campos de los productos, funcionalidades, etc. Podemos ir construyendo esos aspectos más internos, mientras el diseño evoluciona a partir de los mockups y el cliente puede tener cierto margen de tiempo, para determinar el diseño que más se adapte a sus intereses y gustos.
Herramientas para definir mockups para diseño web
Existen varias herramientas que permiten definir mockups para el diseño web, para representar de forma gráfica cada interfaz de nuestro futuro site. Enumeraremos algunas de ellas.
Cada una tiene sus características concretas y su enfoque. En algunas, como el caso de marvelapp, puedes incluso crear interacción entre las diferentes pantallas, para hacer aún más real y más inmersiva la experiencia previa al desarrollo app o desarrollo web de tu sistema de información.
No hay comentarios