APUNTES


Más información sobre Wireframes

Las principales características o ventajas de los prototipos (se refiere a los prototipos en general, no a los Wireframes en particular) según el doctor Granollers son:

  • Son formidables herramientas de:
    • Comunicación entre todos los componentes del equipo de desarrollo y los usuarios
    • Participación, para integrar activamente a los usuarios en el desarrollo.
  • Dan soporte a los diseñadores a la hora de escoger entre varias alternativas.
  • Permiten a los diseñadores explorar diversos conceptos del diseño antes de establecer los definitivos.
  • Permiten evaluar el sistema desde las primeras fases del desarrollo (facilitan la exploración de ideas sobre nuevos conceptos tecnológicos).
  • Son esenciales para la documentación, tanto de conceptos funcionales del sistema como de tareas concretas del mismo.
  • Son el primer paso para que ideas abstractas sean concretas, visibles y testables.
  • Fomentan la iteratividad.
  • Mejoran la calidad y la completitud de las especificaciones funcionales del sistema.
  • Son herramientas de propósito general, pues sirven para comprobar la fiabilidad técnica de una idea, clarificar requisitos que quedaron “indeterminados” o ver como responde con el resto de la aplicación.

¿Qué información debe contener un Wireframe?

Como bien indica “Using Wireframes” de Strange Systems:

  • Inventario de contenido. Qué contenido debe estar presente en cada página
  • Elementos de la página. Cabeceras, enlaces, listas, imágenes, formularios, etc.
  • Etiquetado. De vínculos, títulos, etc.
  • Layout. Ubicación, colocación y agrupación de los elementos de la página (cabeceras, pies, navegación, áreas de contenido, titulares, etc.) Muestra la estrategia de navegación y la priorización de contenidos dentro de la página, así como la agrupación en barras laterales, barras de navegación, áreas de contenido, etc.
  • Comportamiento. Mediante notas asociadas a los elementos para indicar cómo se deben mostrar (nº de elementos, visualización por defecto) o definir el comportamiento funcional cunado un elemento se activa (enlace externo, etc.)

Tipos de Wireframe

Como especifica “Using Wireframes” de Strange Systems, pueden ser más o menos detallados:

¿De cuántas páginas creamos un Wireframe?

De la página principal y de los principales tipos de subpáginas o plantillas, entre las que deberán incluirse, una página de formulario, una página de resultado búsqueda y una página de error. Si estamos ante una aplicación deberá incluir una página de ingreso de datos, una página de detalle y una página de listado.

¿Cómo se hace un Wireframe?

37signals propone en “Una introducción a la utilización de patrones de diseño en la web” una metodología para hacer un Wireframe que consta de 6 pasos. No ha de tomarse como una receta mágica, pero puede orientarnos:

  • Haz una lista numerada de toda la información que debe tener tu página (no sólo datos, sino también acciones, actitudes), lo que llaman “bit”.
  • Agrupa los “bits” que se relacionan entre sí. A cada grupo lo llamarías con una letra y asociada a esa letra pondrías los números de la información que relaciona. Por ejemplo A:1,3,5
  • Prioriza qué grupos son los más importantes desde un punto funcional, agrupando los grupos en tres prioridades: Lo más importante, Lo necesario y Lo que es bueno tener.
  • Diseña cada fragmento, cada agrupación de “bits”. Lo podemos hacer sin preocuparnos de los conflictos porque ya sabemos que incluyen a todos los elementos relacionados entre si.
  • Junta los fragmentos teniendo en cuenta la prioridad y el equilibrio.
  • Hazlo real. Hasta ahora todo lo hemos hecho en papel, es el momento de pasarlo a pantalla y hacer los ajustes necesarios para ello.

Errores en la creación de Wireframes

Hay tres errores típicos:

  • Realizar Wireframes demasiado complejos en su forma
  • Realizar Wireframes con algo diseño gráfico
  • Incluir un exceso de información

Para evitarlos es bueno seguir las recomendaciones de Liz Danzico en “The Devil’s in the Wireframes”

  • Amplifica a través de la simplificación:
    El Wireframe debe ser claro, sin diseño, ni iconos, ni color. Por ello Gene Smith propone usar una única figura, un único color y un único tipo de letra. Tampoco es necesario ser tan estrictos, pero ayuda a entender la filosofía del Wireframe.
  • Quita los detalles innecesarios: debe contener el mínimo número de elementos necesarios para que no distraigan la atención.
  • Anota cuidadosamente pero sólo lo realmente relevante.
    Habrá que tener en cuenta además como se va a presentar, si va a ser un entregable deberá ser autoexplicativo por si mismo, pero si se va a presentar personalmente al cliente (como debería hacerse siempre para evitar interpretaciones subjetivas) no necesitará anotaciones tan detalladas.

¿Cómo planteo un Wireframe para una aplicación RIA?

Recomiendo el artículo “The Guided Wireframe Narrative for Rich Internet Applications” de Andrés Zapata, comentado por Torres Burriel.

También es recomendable “Crear prototipos de Rich Internet Applications en Visio” de Usolab.

¿Qué herramienta utilizo para realizar un Wireframe?

Depende de cual manejes con mayor fluidez. Puedes usar Illustrator, Photoshop, PowerPoint, Visio, OpenOffice Draw, Omnigraffe, etc.

Pero sí que existen herramientas específicas para realizar Wireframes, como Axure RP Pro 4.

Pantallazo de Axure RP Pro 4

[Ver imagen “Pantallazo de Axure RP Pro 4” más grande]

Permite exportar como:

  • imagen para obtener tu Wireframe
  • “Prototype”: lo exporta como HTML
  • “Especificación”: lo exporta en formato Word.

Torres Burriel comenta cuatro Herramientas online para hacer prototipos

Recursos para Wireframes

Anuncios

Los comentarios están cerrados.