lunes, 28 de mayo de 2012

Blueprint vs Wireframes :Tipos de diagramas o prototipos

Los dos principales tipos de diagramas o prototipos que se suelen utilizar para
representar la propuesta arquitectónica de una página web son los técnicamente
denominados blueprints y wireframes

Blueprints (plano o mapa): Se conocen también como “mapa de la página” o “mapa del sitio” (“sitemap”) y representan la estructura arquitectónica del sitio web con todas sus páginas, las relaciones existentes entre ellas y los contenidos que las componen.
Se utilizan para plasmar los aspectos esenciales de los sistemas de organización, etiquetado y navegación, y son una herramienta clave para trabajo de los desarrolladores del sitio web y para la orientación de los usuarios. Existen dos tipos de blueprints:
> Blueprints para la arquitectura general: muestran de forma esquemática, partiendo de la página principal, las páginas que conforman un sitio web, las relaciones existentes entre estas a través de los enlaces que las conectan y cómo se agrupan en el sistema de organización y navegación.
> Blueprints para la arquitectura detallada: muestran de forma esquemática, para cada página que conforma un sitio web, las páginas que a su vez cuelgan de éstas y el sistema de navegación que las articula.
Normalmente ambos van acompañados por una leyenda que explica el significado de los símbolos del lenguaje visual para que puedan ser correctamente interpretados.






Wireframes (o maquetas): Son prototipos arquitectónicos de cada tipo de página que conforma un sitio web. Son un esquema donde se representa el contenido y la arquitectura de la información de cada tipo de página, mostrando su aspecto desde la perspectiva de su arquitectura haciendo hincapié en cómo se agrupan y ordenan sus  componentes. Pueden ser considerados como la intersección entre la arquitectura de la información de una página con su diseño. En ellos se representan por ejemplo la posición del sistema de navegación, la ubicación de los enlaces o el sistema de búsqueda y la estructura de la página.
Dependiendo de la granulidad que presentan se distinguen tres tipos de wireframes:
> Wireframes de baja fidelidad: muestran los aspectos arquitectónicos básicos de una página sin incluir elementos gráficos y sin contenido real. Representan los elementos de navegación global, local y contextual de la página.
> Wireframes de fidelidad intermedia: muestran los aspectos arquitectónicos básicos de una página incluyendo algunos elementos gráficos y algunas unidades de contenido real. Representan los elementos de navegación global, local y contextual de la página completados con otros elementos finales que aparecerán en la versión de la página web que se ofrecerá al usuario. 
> Wireframes de fidelidad alta: muestran los aspectos arquitectónicos básicos de una página  incluyendo todos los elementos gráficos y el contenido real que completarán la página. Representan los elementos de navegación global, local y contextual de la página completados con todos los elementos finales que aparecerán en la versión de la página webque se ofrecerá al usuario.  
Algunas recomentaciones para el desarrollo de wireframes son:
  • Mantener la consistencia en cada tipo de página e implementarlos con un mismo nivel de granulidad (uniformidad y consistencia).
  • Establecer las leyendas y notas explicativas que regirán el lenguaje visual utilizado para construir el prototipado, que permiten explicar la funcionalidad de los elementos de la página y facilitan la comunicación de los aspectos de la arquitectura de la información.
  • Llevar un control y una gestión de wireframes, que permita una explotación más eficaz del prototipado, teniendo identificada y ubicada cada propuesta de representación.
  • A partir de la información recabada mediante estrategias de benchmarking, mediante el análisis de páginas web competidoras tratar de adoptar las mejores prácticas y evitar las malas prácticas arquitectónicas de sitios web. 
  • Tratar de incorporar algún tipo de interactividad a los wireframes que facilite la comunicación de las propuestas de prototipado con otros profesionales involucrados en el desarrollo del sitio web, y para su utilización en test de tareas con usuarios.  También se debe tratar de respetar los estándares de accesibilidad en el prototipado.
Ejemplos de wireframes
 Fuentes:

http://eserranomaster2.wordpress.com/unidad-didactica-1-10/
http://natiiionlyyou.blogspot.com.es/2010/05/blueprint-web-b-guided.html

No hay comentarios:

Publicar un comentario