Diseño web con prototipado

Raúl Carrión

Escrito por Raúl Carrión

Prototipado para diseño webTodos los que nos dedicamos al desarrollo web sabemos lo complicado que resulta lograr un diseño web que cumpla los requisitos de usabilidad y posicionamiento en buscadores y además agradable estéticamente al cliente final.

En Human Level llevamos trabajando en desarrollo web desde el año 2001 y parte del mérito de seguir siendo competitivos se lo debemos dar al prototipado web. Esta es nuestra historia:

El problema de diseñar sin prototipos

Durante mucho tiempo nuestra forma de trabajar consistía en preparar tres propuestas gráficas de la página home. Las presentabamos al cliente y éste debía decidir si le gustaba una de ellas, la fusión de varias o en el peor de los casos, no le gustaba nada de ninguna.

Esta forma de trabajar tenía principalmente tres desventajas:

Los diseñadores trabajaban de más

Los diseñadores se sentían frustrados por el esfuerzo extra de hacer dos diseños adicionales, cuando ya habían trabajado en un diseño que según ellos, era lo mejor que se podía hacer. Los diseños secundarios llevaban mucho tiempo y además solían ser peores.

El cliente tenía que trabajar de más

Es complicado argumentar al cliente que le estás presentado la mejor propuesta gráfica, cuando presentas 3 a la vez. Al cliente podía gustarle un diseño, pero también aspectos sueltos de los otros dos, así que comenzaba a pedir fusiones entre diseños que generaban diseños “frankenstein” que terminaba desechando y había que volver a comenzar de 0. Generando frustración al cliente.

Los diseñadores trabajaban aún más

Las sucesivas peticiones de cambios al equipo de diseñadores generaban un ambiente de trabajo tenso y además erosionaban nuestra cuentas de resultados. Definitivamente, había que cambiar la forma de trabajar.

La solución: el prototipado

Tras varias semanas buscando una solución, me topé con Balsamiq Mockups, una aplicación que permitía diseñar prototipos de webs de una forma extremadamente sencilla.

Fue dicho y hecho, incorporé una nueva fase en la planificación de proyecto, quedando así:

  1. Presupuesto
  2. Contrato
  3. Prototipos
  4. Documento de funcionalidades
  5. Diseño
  6. Maquetación
  7. Programación
  8. Contenidos
  9. Pruebas
  10. Publicación
  11. Garantía

La fase de prototipado

Para cada modelo de página diseñamos un prototipo teniendo en cuenta:

  • El objetivo de la página
  • La usabilidad
  • El posicionamiento en buscadores

Y solo cuando el cliente da su aprobación, se pasa al equipo de diseñadores para que creen un diseño atractivo, o como yo digo, “le den vidilla”.

La herramienta

Logo de Balsamiq MockupsBalsamiq Mockups está divida en dos partes: componentes y lienzo. Y el funcionamiento es muy sencillo, solo tienes que arrastrar componentes al lienzo, ubicarlos en la posición adecuada y redimensionarlos como sean necesario.

Dispone de una versión demo para probar la herramienta pero no podrás guardar el trabajo final, para ello deberás adquirir la versión completa.

Ventajas de prototipar

Esta forma de trabajar introduce multitud de ventajas:

Separas las funcionalidades del aspecto creativo

Diseñando el prototipo previamente nos evitamos que un diseño muy llamativo nos impida detectar carencias de usabilidad o incluso la ausencia de funcionalidades necesarias.

Los cambios cuestan menos

Hacer un cambio sobre el diseño tiene un coste muy superior a realizarlo sobre un prototipo. Además los cambios sobre el diseño suelen romper la armonía de la página y una vez que cambias algo suele venir acompañado por una cascada de cambios intentando restaurar el orden.

El cliente se implica antes en el proyecto

Con los prototipos conseguimos hacer partícipe al cliente en una fase muy temprana del proyecto. Con la metodología anterior, antes del diseño, el cliente debía aprobar un documento de funcionalidades donde explicábamos todo lo que tendría cada sección de su sitio web, pero gran parte de nuestros clientes no prestaban la suficiente atención a este documento pues es complicado imaginarse una web solo con descripciones de funcionalidades.

Gracias a los prototipos, ahora la fase de consultoría inicial es mucho más visual y desde el primer minuto el cliente colabora en el desarrollo de su sitio web. No olvidemos que nosotros somos expertos en marketing online, pero cada cliente es experto en su sector y debemos trabajar mano a mano para aportar lo mejor de los dos sectores.

Para ilustrar las posibilidades de Balsamiq Mockups adjunto el prototipo de la página principal de nuestro sitio web: www.humanlevel.com.

Prototipo de la home de Human Level Communications

Consejos a la hora de prototipar

Si a estas altura del artículo estás interesado en probar a prototipar en tu próximo proyecto web, estos son algunos aspectos a tener en cuenta:

No pierdas de vista el objetivo

Cada sección de una web tiene un objetivo y este debe quedar claro al ver el prototipo. Los objetivos pueden ser de diversa naturaleza:

  • Completar un formulario
  • Hacer clic en un botón
  • Ir a otra página
  • Etc.

Diseñar a tamaño real

Si no queremos tener choques con nuestros diseñadores debemos preparar los prototipos al mismo tamaño en el cual tienen que ser diseñadas las páginas.

Respetar el tamaño de las imágenes

En un sitio web gestionado desde un CMS el tamaño de las imágenes debe estar estandarizado, lo habitual es jugar con 3 tamaños por tipo de imagen y lógicamente estos deben ser proporcionales. Si quieres saber más sobre las imágenes de una web, este post puede interesarte.

Mantener la estructura de navegación

Cada sección del sitio web no tiene que ser un ejercicio de creatividad sin sentido. El usuario necesita que el sitio web presente en una coherencia de navegación. Mantén la estructura de navegación en todas los prototipos siempre que sea posible.

Introducir el prototipado en nuestros desarrollos webs ha sido fundamental para hacer mejores proyectos y en menos tiempo. ¡Probar una vez, y repetiréis!

Raúl Carrión
Autor: Raúl Carrión

Únete a la conversación

3 comentarios

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  1. En muchas ocasiones, en los primeros encuentros con el cliente es más rápido e intuitivo dibujar a mano que utilizar Balsamiq Mockups, por lo menos mi experiencia me dice que cuatro rayajos rápidos al principio hacen que el cliente ordene las ideas respecto a lo que quiere.

    1. Hola Mario, claro, en una primera reunión nuestro deber es comprender cuales son las inquietudes del cliente y mostrarle las guías básicas sobre las que recomendamos trabajar. Para este fin nos apoyamos en una libreta 1.0.

      Para una segunda reunión ya llevaremos el prototipado de las diversas secciones web con Balsamiq, lo que nos facilitará la edición de las plantillas en función del nuevo feedback del cliente.

      Muchas gracias por participar.