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

1. Desarrollo de
wireframes
presentación y diagramación de contenidos para la
pantalla
taller_media
jueves 1 de septiembre de 2011

2. representación de la AI
taller 6 - información y medios digitales
jueves 1 de septiembre de 2011

3. diseño de la
información { blueprints
mock ups
wireframes
jueves 1 de septiembre de 2011

4. El Wireframe es una jerarquización de contenidos
distribuida visualmente y una esquematización de la
interfaz.
Gráficamente, son estructuras muy simples y están
enfocados a visualizar la distribución de los
contenidos dentro de una pantalla.
jueves 1 de septiembre de 2011

5. El Wireframe es el puente que
une la Arquitectura de
Información y Diseño. Pasa de la
“mentalidad estructural” de un
mapa de contenidos, dónde
decidimos y ordenamos los
contenidos de nuestro sitio web, a
la emocionalidad del Diseño de
Arquitectura de información Interfaz.
}
representación de la AI
taller 6 - información y medios digitales
jueves 1 de septiembre de 2011

6. para que nos sirve
jueves 1 de septiembre de 2011

7. Elementos de navegación:
}
menús, accesos directos e
hipervínculos.
grafican
jueves 1 de septiembre de 2011

8. Elementos de información:
}
contenidos de texto e
imágenes. grafican
jueves 1 de septiembre de 2011

9. Elementos de interacción:
herramientas o
}
funcionalidades que el usuario
puede realizar.
grafican
jueves 1 de septiembre de 2011

10. Elementos promocionales:
espacio dedicado a banners
}
publicitarios o a destacados
internos del propio producto.
grafican
jueves 1 de septiembre de 2011

11. características
jueves 1 de septiembre de 2011

12. Son simples y no tienen distracciones visuales
taller 6 - información y medios digitales
jueves 1 de septiembre de 2011

13. Pueden ser dibujados a mano o creados con alguna
aplicación computacional
taller 6 - información y medios digitales
jueves 1 de septiembre de 2011

14. Cada página o pantalla de una interfaz está
representada en 1 wireframe
taller 6 - información y medios digitales
jueves 1 de septiembre de 2011

15. Siempre van acompañados de una explicación
acerca de las zonas e interacciones
taller 6 - información y medios digitales
jueves 1 de septiembre de 2011

16. Siempre van acompañados de una explicación
acerca de las zonas e interacciones
taller 6 - información y medios digitales
jueves 1 de septiembre de 2011

17. ejemplos
jueves 1 de septiembre de 2011

18. Wireframe: home bancochile.cl
taller 6 - información y medios digitales
jueves 1 de septiembre de 2011

19. taller 6 - información y medios digitales
jueves 1 de septiembre de 2011

20. Wireframe: home duckpoolroad.org
taller 6 - información y medios digitales
jueves 1 de septiembre de 2011

21. taller 6 - información y medios digitales
jueves 1 de septiembre de 2011

22. Fireworks
Omnigraffle
}
Microsoft Visio
aplicaciones
escritorio
jueves 1 de septiembre de 2011

23. Hotgloo
}
iPlotz
Balsamiq
Cacoo
aplicaciones
web
jueves 1 de septiembre de 2011