El Wireframe en el proceso del diseño web

ene26

Aprender diseño web hoy es mucho más complicado que hace algunos años, aunque no menos apasionante. 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.

La construcción de un buen sitio web se lleva a cabo 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 los dibujos en HTML y CSS, y los especialistas en marketing buscan que el contenido sea lo más visible posible. Y eso que no contamos a los programadores ni a los creadores de contenido.

Travis Isaacs, un reconocido diseñador que trabajó en numerosos proyectos, propone un proceso de diseño web bastante tradicional, que tiene como centro al Wireframe.

  • 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.

Isaacs considera que en el wireframe está el verdadero corazón del diseño, donde se toman las decisiones clave que pueden convertir una buena idea en un gran sitio Web. Es el momento de mayor discusión, donde el equipo de desarrollo más interactúa con el cliente. Ese es el punto donde los buenos diseñadores hacen la diferencia.

Esta entrada fue posteada on Miércoles, enero 26th, 2011 at 8:05 pm and is filed under Diseño Web, Proyect One. Puedes seguir cualquier respuesta a esta entrada a través del RSS 2.0 feed. Puedes dejar una respuesta, o trackback desde nuestro sitio.

Dejar una respuesta