Storyboard

Serie de diagramas que resumen la secuencia y la

disposicin del contenido (informacin y funcionalidad) a lo largo del sitio web y en cada una de las pginas

Diagramas de organizacin y funcionamiento

BluePrint Mostrar la estructura del sitio y su flujo de navegacin

Diagramas de presentacin I
Wireframe o StoryBoard (Prototipos de Baja fidelidad)
Dibujos que representan cmo estarn organizados los

elementos en las pginas

Diagramas de presentacin II
Maqueta o MockUp (Prototipo de Alta Fidelidad)
Representan aspectos ms precisos de forma

interactiva

Objetivos
Mostrar el contenido de las pginas En ningn caso significan un compromiso de diseo grfico

Sirven como herramienta de comunicacin y discusin entre arquitectos de informacin, programadores, diseadores y clientes

Ventajas
El equipo y el cliente se centran en el diseo de

contenidos y no en el diseo visual Se evitan cambios posteriores ms costosos

Atencin!
Es muy importante aclararle siempre al cliente qu

es un Wireframe, estar seguros de que entiende que ese no es el aspecto final del sitio, sino una mera representacin grfica de su contenido.

Informacin que contiene

Inventario de contenido
Contenidos de cada pgina

Elementos de la pgina
Cabeceras, enlaces, botones, imgenes, formularios, etc

Etiquetado
De vnculos, ttulos, etc.

Layout
Ubicacin, colocacin y agrupacin de los elementos de la pgina

Comportamiento
Mediante notas asociadas a los elementos para indicar cmo se deben mostrar

Nivel de detalle
Content-only
Nombre de la pgina y un listado de contenidos

Nivel de detalle
Diagrama de bloques
Informacin bsica a travs de bloques de

funcionalidad y agrupamiento de contenidos

Nivel de detalle
Diagrama de bloques: Ms ejemplos

Nivel de detalle
Diagrama de bloques: Ms ejemplos

Nivel de detalle
Diagrama de bloques: Ms ejemplos

Nivel de detalle
Wireframe detallado
Todo lo anterior ms notas de comportamiento

Cantidad de pginas
Principal Principales tipos de subpginas o plantillas (incluidos formularios, resultados de bsqueda, pgina de error, etc.)

Metodologa
Hacer una lista numerada
Informacin y funciones ("bit")

Metodologa
Priorizar grupos
Lo ms importante Lo necesario Lo que es bueno tener

Metodologa
Agrupar los "bits" que se relacionan entre s
Grupos con letra (ej. A:1,3,5)

Metodologa
Disear fragmentos
Dar forma a cada agrupacin de "bits"

Metodologa
Componer los fragmentos
Prioridad Equilibrio

Metodologa
Acabado
En pantalla

Recomendaciones
Simplificar
Menor cantidad posible de colores y tipos de letra

Quitar detalles innecesarios

Elementos que distraigan la atencin

Anotar slo lo relevante

Autoexplicativo Presentacin

Cdigos visuales
Jesse James Garret
URL

Rodrigo Ronda Len

URL