Wireframes y diseño web

presentación y diagramación de contenidos para la pantalla

Desarrollo de wireframes

taller_mediajueves 1 de septiembre de 2011

taller 6 - información y medios digitales

representación de la AI

jueves 1 de septiembre de 2011

diseño de lainformación{ blueprints

mock upswireframes


El Wireframe es una jerarquización de contenidosdistribuida visualmente y una esquematización de la interfaz.

Gráficamente, son estructuras muy simples y están enfocados a visualizar la distribución de loscontenidos dentro de una pantalla.



representación de la AI

El Wireframe es el puente queune la Arquitectura de

Información y Diseño. Pasa de la“mentalidad estructural” de un

mapa de contenidos, dóndedecidimos y ordenamos los

contenidos de nuestro sitio web, ala emocionalidad del Diseño de

Arquitectura de información Interfaz.}jueves 1 de septiembre de 2011

para que nos sirve


Elementos de navegación: menús, accesos directos e

hipervínculos.}grafican


Elementos de información: contenidos de texto e

imágenes.}grafican


Elementos de interacción: herramientas o

funcionalidades que el usuario puede realizar.}grafican


Elementos promocionales: espacio dedicado a banners publicitarios o a destacados

internos del propio producto.}grafican


características



Son simples y no tienen distracciones visuales



Pueden ser dibujados a mano o creados con algunaaplicación computacional



Cada página o pantalla de una interfaz estárepresentada en 1 wireframe



Siempre van acompañados de una explicaciónacerca de las zonas e interacciones


ejemplos



Wireframe: home bancochile.cl


taller 6 - información y medios digitalesjueves 1 de septiembre de 2011


Wireframe: home duckpoolroad.org


taller 6 - información y medios digitalesjueves 1 de septiembre de 2011

}aplicacionesescritorio

FireworksOmnigraffle

Microsoft Visio


}aplicacionesweb

HotglooiPlotz

BalsamiqCacoo


Wireframes y diseño web

Design

Transcript of Wireframes y diseño web