English 91 399 58 81
Compartir

Prototipando para Responsive Web Design

16 mayo, 2013

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:

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?

Etiquetas
Autor

Compartir

Suscríbete a nuestra newsletter

También te puede interesar

  • ¿Cómo trabajar los customer journey maps?

    Investigación

    17 enero 2019

    Los customer journey maps no son más que una técnica que se aplica dentro del método del DCU y que principalmente está diseñada para...

  • Investigar mola, pero…. ¿qué herramientas puedo utilizar?

    Investigación

    5 julio 2018

    Herramientas de investigación UX La investigación es un campo de actuación en el que la credibilidad, la seriedad y el expertise es muy valorado por los clientes ya que estamos trabajando con datos, emociones, percepciones, interpretaciones,… etc y hemos...

Usamos cookies de terceros para mejorar nuestros servicios y obtener datos estadísticos de tus hábitos de navegación. Si continúas navegando consideramos que aceptas su uso. Puedes obtener más información en Política de privacidad y cookies

En esta web utilizamos tecnologías como cookies de terceros, y procesamos datos personales, como las direcciones IP y los identificadores de cookies.    Ver Política de cookies