Wireframe.

Objetivo: Establecer la distribucin del sitio Web a

travs de su diagramacin.

Es un esquema de pgina
o plano de pantalla, es una
gua visual que representa
el esqueleto o estructura
visual de un sitio web.
Qu es Wireframe?

Ejemplo.

Que es
toma en
consideraci
n

Los tipos de informacin que ser mostrada

La cantidad de las funciones disponibles
Las prioridades relativas de la informacin y las
funciones
Las reglas para mostrar ciertos tipos de informacin
El efecto de los distintos escenarios en la pantalla

Porqu un
Wireframe?

Los
wireframes
ayudan
a
establecer
funcionalidad, y las relaciones entre las
diferentes plantillas de pantallas de un sitio web.
Un proceso iterativo de creacin de wireframes es
una forma efectiva de hacer prototipos de
pginas rpidos, mientras se mide la practicidad de
un concepto de diseo.

 Baja fidelidad Caracterizado por un dibujo en bruto o

un boceto rpido, los wireframes de baja fidelidad
tienen menos detalles y son rpidos de producir.

Tipos.

Alta fidelidad Los wireframes de alta fidelidad son

usados a menudo para documentar, porque ellos
incorporan un nivel de detalle que se acerca ms al
diseo final de una pgina web, pero toma ms
tiempo para ser creado.

El esqueleto de un sitio web puede ser dividido en tres

componentes:

Elementos.

Diseo de informacin
Diseo de navegacin
Diseo de interfaz.

Es la ubicacin en la
presentacin y priorizacin
de informacin de manera
que
facilite
el
entendimiento.
Diseo de Informacin

Provee un conjunto de
elementos en pantalla que
permiten
al
usuario
moverse entre pginas del
mismo sitio web.
Diseo de Navegacin

Es seleccionar y ordenar los

elementos de la interfaz para
permitir
a
los
usuarios
interactuar con la funcionalidad
del sistema.
Diseo de la Interfaz