Prototipando para Responsive Web Design

Este año he tenido la ocasión de acudir al UX Spain en Valladolid. Además de disfrutar la experiencia me sirvió para inspirarme y para reflexionar sobre mi trabajo como Interaction Designer en Redbility.

Participé en el UXLab ¿Para móvil dices? ¡Ningún problema! que impartieron Belén Barros y Bernard Tyers . Me sorprendió mucho la solución de fabricar un dispositivo casero de Eye Tracking para móviles. En el camino de vuelta no dejaba de reflexionar sobre lo visto allí y pensé que había echado de menos que se hablara más sobre Responsive Web Design.

Pensar en diferentes situaciones y momentos de uso a la hora de prototipar exige un esfuerzo extra.

Por eso me decidí a escribir este post que espero sea de utilidad para alguien, una recopilación de soluciones que pueden servir de ayuda si vas a enfrentarte a un proyecto Responsive Web Design.

UXpin

UXpin es una de las opciones más completas para crear prototipos Responsive Web Design, permite organizar los proyectos en carpetas donde se alojan los wireframes y además podemos incluir documentos de trabajo como persona, kickoffs… Los puntos fuertes de este servicio en la nube son:

• Trabajar de forma colaborativa dando acceso a los prototipos a todas las personas implicadas en el proyecto.
• La posibilidad de crear iteraciones y poder volver atrás en cualquier momento.
• El editor de wireframes y una amplia librería con los elementos de interfaz más utilizados en web y dispositivos móviles
• La forma en que una vez que tenemos creado un wireframe con la estructura de una web para escritorio se puede elegir un breakpoint diferente para crear la adaptación con los mismos elementos y así poder reestructurar los contenidos modificando el tamaño de los elementos, la estructura…
• El sistema de anotaciones que se incluyen directamente sobre los wireframes y que además se pueden comentar y marcar como resueltos.

EightShapes Blocks

EightShapes Blocks es una prometedora herramienta para crear prototipos responsive web design interactivos en HTML con elementos modulares y que además permite incluir comentarios para cada una de las páginas. Lo peor de esta herramienta que hay que tener unos buenos conocimientos de HTML y CSS para utilizarla. Se echan en falta más ejemplos y documentación. Yo estaré observando su evolución con interés.

Frameworks para prototipado

Existen otras opciones para crear wireframes funcionales Responsive Web Design en HTML y que ahorran mucho tiempo gracias a que vienen con retículas flexibles, elementos de interfaz con estilos CSS predefinidos y una amplia documentación con ejemplos. Algunas de ellas son:

• Foundation
• Bootstrap
• Wirefy

Para mi, a día de hoy, utilizar esta solución es la mejor opción porque se puede usar con conocimientos básicos de HTML y CSS y evitamos así depender de aplicaciones de terceros.
Tenemos claro que no existe la herramienta perfecta y la metodología de trabajo en proyectos Responsive Web Design todavía tiene mucho que madurar, pero elegir la adecuada y saber cambiar a tiempo para adaptarse a las nuevas necesidades que demandan los proyectos puede suponer un gran cambio.

Yo sigo explorando nuevas herramientas. ¿Conocéis alguna interesante?