Si un prototipo es una maqueta, el prototipado web es el proceso por el que se desarrolla precisamente eso: una maqueta visual de lo que será la futura web. ¿Sabes que si no le dedicas el tiempo suficiente a esta fase previa puedes acabar con un sitio web imposible de usar? Hay que empezar a construir por los cimientos para tener una base sólida; y en el caso de un sitio web, esos cimientos son el prototipado.
El prototipado web: clave en el diseño web
Los escultores, los pintores y hasta los escritores hacen esbozos antes de emprender sus respectivas obras. Sin el esbozo, la anatomía de una escultura humana podría parecerse a cualquier otro ser vivo o no parecerse a nada. Lo mismo ocurre con una página web, por eso decimos que el prototipado web es clave en el diseño web. Y es que en esta fase se genera una primera idea de cómo será un sitio web.
Una de las funciones del prototipado es ayudar a establecer la jerarquía de contenidos de un sitio y diseñar el viaje del usuario. Este es el momento de definir cómo quieres que tus clientes potenciales se comporten en tu futura página web.
Por supuesto, para que el proceso de prototipado web tenga sentido, es necesaria una labor previa igualmente importante: definir los objetivos para los que se crea el sitio web.
Las 4 fases del prototipado web
Cuando nos referimos al proceso de prototipado, hablamos de las cuatro fases que componen la creación de esa maqueta web, desde el diseño primario de la idea hasta llegar al prototipo real:
- Sketching: en un primer momento se diseña el aspecto general que tendrá la web. Una tarea que bien puede llevarse a cabo con lápiz y papel. Se trata de establecer las bases de manera tosca para que empiecen a quedar claros bloques de contenido y flujos.
- Wireframing: es la fase en la que empieza a verse la estructura de la web. Aquí se introducen elementos de la misma tales como imágenes, cajas de texto y botones.
- Mockuping: en este momento entran en juego decisiones de diseño tales como escoger la paleta de colores, tipografía y aspecto general del sitio web.
- Prototipo funcional: el resultado de las tres fases anteriores debe ser un prototipo funcional y navegable que nos permita experimentar el funcionamiento de la web futura. El prototipo nos permite interactuar con la web y nos ofrece una visión casi idéntica a la que tendrá el sitio final.
7 herramientas de prototipado web imprescindibles
Si bien apuntábamos antes que un simple lápiz y un papel son las rudimentarias herramientas de diseño que permiten comenzar a esbozar la idea, para avanzar en las diferentes fases de la creación de prototipos es necesario apoyarse en otras herramientas amparadas en las nuevas tecnologías. Estas son siete de las más interesantes:
InVision
- Perfecta para la fase de mockuping, InVision permite cargar diseños estáticos para transformarlos en prototipos interactivos.
- Cuenta con una versión gratuita, un plan premium y un plan personalizado para grandes empresas.
- Fácil de usar en la nube.
- Empleado por empresas como Twitter, PayPal o LinkedIn.
Marvel
- Usable desde la fase de wireframing, Marvel ofrece ayuda para crear maquetas interactivas.
- Permite validar el diseño sobre la marcha.
- Específica para agencias, consultorías y negocios financieros.
- Tiene un plan de precios que va desde cero hasta 27 euros al mes, dependiendo de las funcionalidades.
Sketch
- Sketch funciona en la nube mediante la técnica de arrastrar elemento, por lo que su uso es muy intuitivo.
- Se recomienda para la fase de mockuping.
- Cuenta con multitud de plugins.
- Tiene prueba gratuita.
- El precio es de 9,99 dólares al mes o 99 dólares al año.
- Es la elegida por empresas como Google, Facebook o Xbox.
Balsamiq
- Recomendada desde la fase de wireframing.
- Ofrece prueba gratuita.
- Se puede usar desde la nube o en versión escritorio.
- Centrada en la interfaz de usuario.
- Los precios van desde 2 euros al mes hasta 200 euros al mes, dependiendo del número de proyectos web.
Proto.io
- Usable desde cero en el proceso de prototipado web.
- Ofrece plantillas personalizables.
- Cuenta con biblioteca de efectos de sonido, iconos e iconos animados.
- Permite trabajar con vídeo.
- Sus planes de precios oscilan entre los 24 dólares al mes y los 160 dólares, dependiendo del número de proyectos y usuarios activos.
Origami Studio
- En la actualidad es propiedad de Facebook.
- Se usa sobre todo para iOS, pero permite el desarrollo web de prototipos en Android.
- Con esta herramienta se han desarrollado apps como Instagram o Paper.
- Incorpora plugins para Photoshop.
- Permite exportar el código del proyecto.
- Su uso es gratuito, basta con descargarla para empezar a usarla.
Framer
- Framer se presenta como una herramienta completa con la que realizar el prototipado web en su totalidad.
- Se trata de una herramienta interactiva desde la primera fase del prototipado.
- Usa bloques de arrastre en pantalla.
- Cuenta con plan gratuito, plan premium desde 19 euros al mes y plan personalizado para grandes empresas
- Es la herramienta escogida por Spotify, HBO o Adidas
Como ves, el prototipado web permite prever el comportamiento de los usuarios de un sitio web. Además, se obtiene un control exhaustivo sobre el proceso de diseño web, lo cual ofrece una manera sencilla de atajar problemas futuros. Por estos motivos es una etapa del diseño de páginas web de la que no debes prescindir. Dejándola en manos expertas tendrás la garantía de contar con un sitio que ofrezca una buena experiencia de usuario.