Wireframes y diseño web
-
Upload
pandresnet -
Category
Design
-
view
3.794 -
download
0
description
Transcript of Wireframes y diseño web
![Page 1: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/1.jpg)
presentación y diagramación de contenidos para la pantalla
Desarrollo de wireframes
taller_mediajueves 1 de septiembre de 2011
![Page 2: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/2.jpg)
taller 6 - información y medios digitales
representación de la AI
jueves 1 de septiembre de 2011
![Page 3: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/3.jpg)
diseño de lainformación{ blueprints
mock upswireframes
jueves 1 de septiembre de 2011
![Page 4: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/4.jpg)
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
![Page 5: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/5.jpg)
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
![Page 6: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/6.jpg)
para que nos sirve
jueves 1 de septiembre de 2011
![Page 7: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/7.jpg)
Elementos de navegación: menús, accesos directos e
hipervínculos.}grafican
jueves 1 de septiembre de 2011
![Page 8: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/8.jpg)
Elementos de información: contenidos de texto e
imágenes.}grafican
jueves 1 de septiembre de 2011
![Page 9: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/9.jpg)
Elementos de interacción: herramientas o
funcionalidades que el usuario puede realizar.}grafican
jueves 1 de septiembre de 2011
![Page 10: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/10.jpg)
Elementos promocionales: espacio dedicado a banners publicitarios o a destacados
internos del propio producto.}grafican
jueves 1 de septiembre de 2011
![Page 11: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/11.jpg)
características
jueves 1 de septiembre de 2011
![Page 12: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/12.jpg)
taller 6 - información y medios digitales
Son simples y no tienen distracciones visuales
jueves 1 de septiembre de 2011
![Page 13: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/13.jpg)
taller 6 - información y medios digitales
Pueden ser dibujados a mano o creados con algunaaplicación computacional
jueves 1 de septiembre de 2011
![Page 14: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/14.jpg)
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
![Page 15: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/15.jpg)
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
![Page 16: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/16.jpg)
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
![Page 17: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/17.jpg)
ejemplos
jueves 1 de septiembre de 2011
![Page 18: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/18.jpg)
taller 6 - información y medios digitales
Wireframe: home bancochile.cl
jueves 1 de septiembre de 2011
![Page 19: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/19.jpg)
taller 6 - información y medios digitalesjueves 1 de septiembre de 2011
![Page 20: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/20.jpg)
taller 6 - información y medios digitales
Wireframe: home duckpoolroad.org
jueves 1 de septiembre de 2011
![Page 21: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/21.jpg)
taller 6 - información y medios digitalesjueves 1 de septiembre de 2011
![Page 22: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/22.jpg)
}aplicacionesescritorio
FireworksOmnigraffle
Microsoft Visio
jueves 1 de septiembre de 2011
![Page 23: Wireframes y diseño web](https://reader034.fdocuments.ec/reader034/viewer/2022052323/558c8a3dd8b42a5c678b4578/html5/thumbnails/23.jpg)
}aplicacionesweb
HotglooiPlotz
BalsamiqCacoo
jueves 1 de septiembre de 2011