wireframes y diseño web

Post on 26-Jun-2015

3.792 Views

Category:

Design

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

Utilización de wireframes en el diseño web, uso y modos constructivos.

TRANSCRIPT

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

jueves 1 de septiembre de 2011

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.

jueves 1 de septiembre de 2011

taller 6 - información y medios digitales

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

jueves 1 de septiembre de 2011

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

hipervínculos.}grafican

jueves 1 de septiembre de 2011

Elementos de información: contenidos de texto e

imágenes.}grafican

jueves 1 de septiembre de 2011

Elementos de interacción: herramientas o

funcionalidades que el usuario puede realizar.}grafican

jueves 1 de septiembre de 2011

Elementos promocionales: espacio dedicado a banners publicitarios o a destacados

internos del propio producto.}grafican

jueves 1 de septiembre de 2011

características

jueves 1 de septiembre de 2011

taller 6 - información y medios digitales

Son simples y no tienen distracciones visuales

jueves 1 de septiembre de 2011

taller 6 - información y medios digitales

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

jueves 1 de septiembre de 2011

taller 6 - información y medios digitales

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

jueves 1 de septiembre de 2011

taller 6 - información y medios digitales

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

jueves 1 de septiembre de 2011

taller 6 - información y medios digitales

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

jueves 1 de septiembre de 2011

ejemplos

jueves 1 de septiembre de 2011

taller 6 - información y medios digitales

Wireframe: home bancochile.cl

jueves 1 de septiembre de 2011

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

taller 6 - información y medios digitales

Wireframe: home duckpoolroad.org

jueves 1 de septiembre de 2011

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

}aplicacionesescritorio

FireworksOmnigraffle

Microsoft Visio

jueves 1 de septiembre de 2011

}aplicacionesweb

HotglooiPlotz

BalsamiqCacoo

jueves 1 de septiembre de 2011

top related