Wireframes y diseño web

4,492 views

Published on

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

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,492
On SlideShare
0
From Embeds
0
Number of Embeds
924
Actions
Shares
0
Downloads
121
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Wireframes y diseño web

  1. 1. Desarrollo de wireframes presentación y diagramación de contenidos para la pantalla taller_mediajueves 1 de septiembre de 2011
  2. 2. representación de la AI taller 6 - información y medios digitalesjueves 1 de septiembre de 2011
  3. 3. diseño de la información { blueprints mock ups wireframesjueves 1 de septiembre de 2011
  4. 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. 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 digitalesjueves 1 de septiembre de 2011
  6. 6. para que nos sirvejueves 1 de septiembre de 2011
  7. 7. Elementos de navegación: } menús, accesos directos e hipervínculos. graficanjueves 1 de septiembre de 2011
  8. 8. Elementos de información: } contenidos de texto e imágenes. graficanjueves 1 de septiembre de 2011
  9. 9. Elementos de interacción: herramientas o } funcionalidades que el usuario puede realizar. graficanjueves 1 de septiembre de 2011
  10. 10. Elementos promocionales: espacio dedicado a banners } publicitarios o a destacados internos del propio producto. graficanjueves 1 de septiembre de 2011
  11. 11. característicasjueves 1 de septiembre de 2011
  12. 12. Son simples y no tienen distracciones visuales taller 6 - información y medios digitalesjueves 1 de septiembre de 2011
  13. 13. Pueden ser dibujados a mano o creados con alguna aplicación computacional taller 6 - información y medios digitalesjueves 1 de septiembre de 2011
  14. 14. Cada página o pantalla de una interfaz está representada en 1 wireframe taller 6 - información y medios digitalesjueves 1 de septiembre de 2011
  15. 15. Siempre van acompañados de una explicación acerca de las zonas e interacciones taller 6 - información y medios digitalesjueves 1 de septiembre de 2011
  16. 16. Siempre van acompañados de una explicación acerca de las zonas e interacciones taller 6 - información y medios digitalesjueves 1 de septiembre de 2011
  17. 17. ejemplosjueves 1 de septiembre de 2011
  18. 18. Wireframe: home bancochile.cl taller 6 - información y medios digitalesjueves 1 de septiembre de 2011
  19. 19. taller 6 - información y medios digitalesjueves 1 de septiembre de 2011
  20. 20. Wireframe: home duckpoolroad.org taller 6 - información y medios digitalesjueves 1 de septiembre de 2011
  21. 21. taller 6 - información y medios digitalesjueves 1 de septiembre de 2011
  22. 22. Fireworks Omnigraffle } Microsoft Visio aplicaciones escritoriojueves 1 de septiembre de 2011
  23. 23. Hotgloo } iPlotz Balsamiq Cacoo aplicaciones webjueves 1 de septiembre de 2011

×