Aprender diseño web hoy puede ser bastante frustrante. Si en los comienzos alcanzaba con editar HTML en el bloc de notas, la evolución del sector y su profesionalización ha llevado a que cada vez haya que saber más cosas.
Salvo raras excepciones, un buen sitio web se trabaja en equipo. Desde la idea inicial hasta el producto terminado hay varias manos y cabezas que trabajan sobre diferentes partes del problema. Los directores o jefes de proyecto definen con el cliente los trazos gruesos y el objetivo de la web, los diseñadores de interacción buscan transformar los problemas en historias relatadas con sencillez, los artistas visuales pulen la gráfica, los codificadores transforman las dibujos en HTML y CSS y los especialistas en marketing buscan que el contenido sea los más visible. Y eso que no contamos a los programadores ni creadores de contenido.
Travis Isaacs, un reconocido diseñador que trabajó en numerosos proyecto, propone un proceso de diseño web bastante tradicional:
- Sketch: Se capturan con lápiz y papel las ideas principales y se piensa en una primera organización del contenido.
- Wireframe: Se diseñan las bases de la interfaz a partir de múltiples interacciones entre el equipo con el cliente.
- Comp: Se realiza la composición del sitio en Photoshop para ajustar la interfaz visualmente y agregar los detalles.
- Prototype: Se obtiene una página web funcionando con HTML, CSS, jQuery y todos los elementos que sean necesarios.
La clave de Isaacs está en el acento que pone sobre el wireframe. Aquí está el verdadero corazón del diseño y se toman las decisiones clave que pueden convertir una buena idea en un gran sitio web o hacer que fracase. Es el momento de mayor discusión y donde el equipo de desarrollo más interactúa con el cliente. Por eso, nos sugiere Isaacs, es el punto donde los buenos diseñadores hacen la diferencia.
Generalmente, el wireframe es un gráfico bastante esquemático donde se ubican los elementos principales que se mostrarán en pantallas y se analiza como el usuario interactúa con ellos. Sus ventajas son evidente para el diseñador pero los clientes, en general, no llegan a visualizar claramente que aspecto tendrá su página web.
Por eso Isaacs propone wireframes de alta fidelidad, un medio camino entre el wireframe tradicional y el composión del sitio final en Photoshop.
¿Cómo hacerlo? Con KeyNote, el programa de presentaciones de Mac. Es lo suficientemente sencillo como poder crear una diseño rápidamente y, a la vez, tiene varias opciones de dibujo que le dan bastante potencia.
Pero más allá del software específico lo interesante es la técnica de trabajo. El comienzo de todo es una historia donde se le dice al usuario que está en una situación A y va a llegar a una situación B. Luego, el diseño consiste en construir un guión sólido que relate de modo consistente como ocurre esta transformación. Y la película, por supuesto, siempre tiene final feliz.
Presentación completa de Trevis Isaacs
Vía: Mashable
Las imágenes del post pertenecen a la presentación del autor, salvo la último que está modificada por mí.
