Wireframes

Wireframes y anotaciones

• Los wireframes o bocetos sirven para identificar el contenido propuesto y los comportamientos funcionales de una página web o aplicación.
• Ayudanna crear una claridad visual de la dirección que va a tomar el proyecto.
• Se presentan en escalas de grises (sin elementos gráficos) y se utilizan marcadores para resaltar el contenido. Se identifican elementos que se mostrará en la página tales como:
  • La navegación
  • Las secciones de contenido
  • Imágenes
  • Formas
  • Llamadas de atención
• Junto con site maps y task flows son útiles para identificar escenarios de prototipos y pruebas
• Se pueden usar como guía en el diseño visual.

En los últimos años se ha dado una evolución respecto a la muestra del site. Ahora los desarrolladores utilizan los wireframes para representar el sitio web o la aplicación a sus clientes, diseñadores y demás miembros del equipo. Es usual mostrarselo a los clientes para obtener su validación del “design thinking” antes de que el proyecto haya comenzado a desarrollarse. Los wireframes también son mostrados a los usuarios para obtener un feedback y poder llevat acabo las modificaciones pertinentes.

Qué son las anotaciones?

Son simples explicaciones de los elementos o interacciones del wireframe que contienen información acerca de la identificación, la fuente, las relgas de interacción, del proceso, del monitor y sobre el contenido erroneo que se puedan encontrar en el contenido. Es mejor anotarlo todo y se debe tener en cuenta las diferencia entre debería y deberá (shall & should) para no dar lugar a confusiones.

Quién utiliza los Wireframes?

Hay que tener muy claro quién es la audiencia del wireframe para porder obtener buenos resultados. Dependiendo de la audiencia cambiará el propósito de estas en cuanto a esta herramienta. Estas son las audiencias que pueden utilizar wireframe:

• Los que se dedican a la gestión de proyectos
• Los analistas de negocio
• Diseñadores visuales
• Creadores de contenido
• Especialiastas en SEO
• Desarrolladores
• Aseguradores de calidad
• Usuarios
• Clientes

Creando wireframes

Necesitamos requistios que pueden provenir de cualquier parte pero reultan necesaios para tener un conocimiento genérico de las limitaciones tecnológcas y expectativas.

Herramientas y comercio

Se pueden utilizar las mismas aplicaciones de los task flows y site maps para los wireframes y las anotaciones. Lo más importante es comenzar desde lo más básico, con un lápiz y un papel, para no tener que estar forzado a escoger una herramienta tecnológica de buenas a primeras.

• Según Leah Burley, cuando uno empieza a dibujar sus ideas en un wireframe obtiene una o dos ideas buenas. Estas probablemente provengan de algo que se ha visto anteriormente o algo familiar. Sin embargo, la mente tiene que esforzarse por sacar ideas nuevas e interesante, y según Burley es lo que empieza a pasar a partir de la idea 4 o 5. Para ello, se utilizan la six-up template, un esquema que cuenta con 6 huecos para bocetos.
• La diseñadora remarca el hecho de que es mejor comenzar con un papel y un boli porque al principio se cometerán muchos errores que podrán a la versión digital posteriormente.
• Recomienda coger una pequeña parte del contenido, revisarla con tu equipo interno y después con el equipo del cliente, para asegurarte que tu visión y comprensión estan encaminadas y no vas a perder mucho tiempo en reorganizarlo todo.

Comienzo simple: Diseño de un wireframe básico

Se puede comnezar con un simple site map. Los requisitos para este wireframe son muy pocos:

• La página principal (home page, numerada como 1.0) es el nivel máximo de navegación y debe contar con el elemento footer (pie de página) que tiene que contar con los términos y condiciones (terms and conditions).
• Otros elementos pirncipales de navegación son: About (sobre nosotros, 3.0), Work ( trabajo, 4.0) , Contacto(5.0) y Blog(2.0 o 2.x porque cuenta con una forma de navegación que cuenta con “anterior y “siguiente”).
• El encabezado y el pie de página será siempre igual.

Este ejemplo funciona porque cuenta con unos elementos conctreots y unos detalles limitados. Sin embargo se ha de remarcar que el wireframe sirve como una guía, no es el producto final.

Un ejercicio: Wireframe de la página principal de una agencia de viajes

• Todo tiene que estar bien anotado
• El footer y el header han de ser diempre los mismos.
• el footer ha de contener:
  • registro para recibir más mails
  • sobre nosotros
  • contacto
  • FAQs
  • Site Map
  • Legal info
  • Política de privacidad
  • Información copyright…

  Asimismo el sitio web debe tener:

  • Capacidad de presentar promociones diversas
  • Mostrar titulares y noticias
  • Buscador
  • Listado de mejores itinerarios
  • Listado de itinerarios nuevos
  • etc.

  Los resultados del ejercicio por Will Evan (diseñador web)

  • Coger la audiencia primaria para resilver un objetivo de manera rápida
  • Sibujar muchas alternativas diferentes al primer wireframe para tener varias ideas.

  Continuidad del ejercicio de diseño: ¿Cuál esta bien y cuál mal?

  • No hay malos o buenos diseños, simplemente se deben adecuar a los requisitos.
  • Se le debe presentar al cliente el que más le convenga
  • Muchas veces habrá una ronda de iteraciones y renovaciones
  • Se ha de comparar nuestro wireframe a otros dos ejemplos presentados para examinar las diferencias y similitudes entre ambos.
  • Muchas veces lo más dificil es comenzar con el papel y el lápiz. Hay que buscar diferentes ideas con aproximaciones diferenciadas y testar estos ante compañeros de trabajo o familiares.

  Presetar los wireframes

NO tood le mundo entiende el esfuero y el tiempo que supone realizar un wireframe. Por ese motivo, antes de presentar el wireframe se ha de expicar claramente lo que son, como se ven respecto al resultado final y cuál es su propósito.

Estas son las recomendaciones:

• Atrae al cliente durante el proceso de creación si es posible para que se sienta involucrado.
• Crea metáforas para transmirir las diferencias que hay del wireframe respecto al producto final: “ es como un plano de…”
• Hay qu recordar a los asistentes que no se reata de la representación final y que habrá elementos interactivos.
• Contratar a diseñadores visuales para que creen maquetas de diseño y de ese modo puedan ver las diferencias entre los wireframes y el diseño final.
• Explica como otras personas del proyecto utilizarán el wireframe para constatar su relevancia y la importancia de que opinen sobre ella o la aprueben.