Uno de los puntos más neurálgicos dentro de la metodología del diseño de interacción es la definición y distribución de contenidos, la imprescindible “Arquitectura de la Información”, pero ¿que tiene que ver los wireframes con la Arquitectura de la Información? mucho, ya que los wireframes son tan importantes para el diseño de interfaz, donde esquematizamos el diseño, como también para la Arquitectura de la Información, donde jerarquizamos y distribuimos el contenido.
Por ende, los wireframes son la distribución visual y jerarquización de contenidos; y la esquematización de la interfaz; creando así un puente que conecta las etapas de Arquitectura de la información y Diseño de Interfaz. Además los wireframes son imprescindibles para definir los comportamientos en la interacción (recepción / respuesta) entre sistema y el usuario.
Al diseñar los wireframes hay que tener en cuenta que es en esta etapa donde se toman las decisiones de estructura, jerarquización de contenido e interacción. Esto se debe que al momento de alguna corrección, estas se ejecutan mucho más rápido que en etapas posteriores, ahorrando una gran cantidad de tiempo, ya que se enfocan exclusivamente en la funcionalidad por sobre el diseño.
Tips para diseñar wireframes
Existen muchas herramientas (algunas específicas) para diseñar wireframes, dentro de los cuales personalmente utilizo Fireworks por su facilidad de manejo con vectores y textos.
Antes que todo, lo primero que se debe realizar es definir el tamaño de nuestro lienzo, que siempre debe estar optimizado para una resolución estándar, en este caso de 1024px de ancho.
Al momento de diseñar los wireframes pude detectar 4 puntos neurálgicos:
Detectar páginas tipo: Es el primer paso. Con mapa de navegación en mano se debe comenzar a definir la cantidad de wireframes por la variación de páginas tipo que tenga el sitio web. Las “páginas tipo” son las páginas o pantallas que son únicas entre si y cumplen la función de plantillas, ya que son perfectamente replicables y reutilizables entre otros contenidos similares.
Definir áreas críticas: es muy importante definir áreas y sub-áreas para diferenciar los contenidos. En el wireframe de ejemplo se puede observar que en un primer nivel hay una división de las 3 áreas principales: cabecera (header), estructura principal (main) y pie de página (footer); y en segunda instancia se sub-dividen según el contenido. Además es recomendable que estas áreas mantengan una misma distancia entre ellas, para así conservar una distribución homogénea.
Evitar cualquier tipo de distracción visual: como la función primordial de los wireframes es distribuir y jerarquizar visualmente los contenidos, en estos no debe haber ningún tipo de distracción que relegue la atención sobre estos aspectos. Por esto, siempre los wireframes deben ser diseñados en base a una paleta de grises, sin variación tipográfica, fotografías, logotipos (salvo que sea estrictamente necesario), ni ningún otro elemento gráfico que cause distracción con la lectura clara en la jerarquización visual de contenidos.
Esquematizar elementos gráficos: como los wireframes son esenciales para el diseño de interfaz, es acá donde se deben especificar la utilización de iconografía, fotografías y otros recursos gráficos, pero solo a nivel esquemático. Estos esquemas cumplen con la característica de ser replicables para reutilizarlos en los wireframes.
Conclusión
Los wireframes son un recurso primordial y es el nexo por naturaleza entre la arquitectura de la información y el diseño de interfaz, además nos facilita enormemente la etapa de diseño, ya que adelantamos muchas decisiones que, por error, se suelen definir en esta última.
Más adelante me enfocaré a la parte más técnica de cómo diseñar wireframes, donde pondré a disposición ejemplos y recursos para facilitar su creación. Por ahora, dejo un ejemplo de wireframe del próximo diseño de mi blog.
Publicado el 30.06.2008 por Yerko Pezzopane
Archivado en: AI, Diseño, Interacción, Interfaz
Excelente aporte, sobre todos para quienes deseamos comenzar el diseño de nuestro propios sitio web (WP). Gracias!
*vi el link desde el twiiter de Darcy
[...] Hace rato que quería reflexionar sobre un post buenísimo que escribió Yerko en su blog. [...]
[...] varias (algunas de las cuales ya hemos visto en el Blog) y van desde simples test heurísticos, wireframes y entrevistas a usuarios, hasta complejos Card Sortings, Laboratorios de usabilidad y estudios de [...]
[...] Una página que les puede servir con tips para diseñar [...]
[...] Una página que les puede servir con tips para diseñar [...]
[...] - bookmarked by 1 members originally found by memyself2357 on 2008-08-26 ¿Qué son los wireframes y cuál es su aporte dentro del diseño de … [...]
Hola Yerko, me parece interesante el artículo, solo acotar que en internet los estándares son muy relativos. 1024 fue un estándar hace mucho tiempo, hoy por hoy mucha gente accede desde equipos portátiles, donde la resolución es de 1280, o si estoy en un netbook, o si lo veo desde un móvil. Ahora, si mi sitio es ajustable y trabaja en un ancho porcentual, o si mi proyecto trata de un hotsite y es en flash, el estandar desaparece.
Tambien debemos mencionar que si trabajamos para una resolución de 1024 el ancho de mi sitio no debe ser de 1024, ya que de esta forma aparecera una barra de scroll horizontal dentro del navegador, lo óptimo es trabajar en este caso con 950px de ancho y focalizar la relevancia de la información desde el primer pantallazo, generalmente dentro de los primeros 600px hacia abajo.
Eso, un pequeño aporte.
Saludos.
Felipe.
Hola Felipe, gracias por tu acotación, tienes toda la razón.
No fuí bastante claro en explicar que el sitio debe ser optimizado para una de las tantas resoluciones estándar http://es.wikipedia.org/wiki/Resolucion_de_pantalla y eso se decide mediante estudios de usuario, entre otras cosas.
Además, como tu mencionas, la optimización del ancho para cada resolución es menor a ésta, para evitar el scroll horizontal.
Saludos
muy buen articulo
[...] Up o diagrama de contenido te lo cuenta mi tocaya Olga Carreras. Luego seguimos con cómo dar los primeros pasos creando wireframes. Aunque hay algunos detalles que no comparto, como el tamaño predeterminado de pantalla, para [...]