Diseño de wireframes

3,463 views

Published on

Prototipos y wireframes como formas de representar la arquitectura de información, diseño de información, diseño visual.

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,463
On SlideShare
0
From Embeds
0
Number of Embeds
55
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Diseño de wireframes

  1. 1. PROTOTIPOS Y WIREFRAMES LUIS CARLOS ACEVES G.
  2. 2. OBJETIVOS <ul><li>Conocer cómo debe verse una página desde el punto de vista de la arquitectura </li></ul><ul><li>Representar la arquitectura del sitio, el diseño de información y el diseño visual </li></ul><ul><li>Proveer retroalimentación para que el arquitecto de información determine si sus decisiones fueron adecuadas </li></ul>PROHIBIDO UTILIZARSE O COPIARSE SIN PERMISO DEL AUTOR
  3. 3. DECISIONES <ul><li>¿Qué componentes serán visibles y accesibles para los usuarios </li></ul><ul><li>¿Cómo se agruparán los componentes de contenido? </li></ul><ul><li>¿Cómo se ordenarán? </li></ul><ul><li>¿Qué componentes tendrán mayor jerarquía? </li></ul>PROHIBIDO UTILIZARSE O COPIARSE SIN PERMISO DEL AUTOR
  4. 4. DECISIONES PROHIBIDO UTILIZARSE O COPIARSE SIN PERMISO DEL AUTOR Fuente: Information Architecture for the WWW
  5. 5. DISEÑO <ul><li>Crear wireframes únicamente para las páginas más importantes </li></ul><ul><li>Describir un sistema visual </li></ul><ul><li>No limitar a diseño de páginas únicamente </li></ul><ul><li>No son un reemplazo del diseño visual real/definitivo </li></ul>PROHIBIDO UTILIZARSE O COPIARSE SIN PERMISO DEL AUTOR
  6. 6. DISEÑO <ul><li>Puede haber ausencia de tipografías, colores y otras características visuales </li></ul><ul><li>Los detalles serán desarrollados por: </li></ul><ul><ul><li>Diseñadores gráficos: parte visual </li></ul></ul><ul><ul><li>Ing. en Sistemas: parte interacción </li></ul></ul>PROHIBIDO UTILIZARSE O COPIARSE SIN PERMISO DEL AUTOR
  7. 7. TIPOS <ul><li>Fidelidad </li></ul><ul><li>baja </li></ul>PROHIBIDO UTILIZARSE O COPIARSE SIN PERMISO DEL AUTOR
  8. 8. TIPOS <ul><li>Fidelidad baja </li></ul><ul><ul><li>No hay elementos gráficos </li></ul></ul><ul><ul><li>No hay contenido real </li></ul></ul><ul><ul><li>Enfoque en: </li></ul></ul><ul><ul><ul><li>Sistema visual y retícula ( layout ) </li></ul></ul></ul><ul><ul><ul><li>Ubicación de contenido y elementos visuales </li></ul></ul></ul><ul><ul><ul><li>Sistemas de navegación </li></ul></ul></ul>PROHIBIDO UTILIZARSE O COPIARSE SIN PERMISO DEL AUTOR
  9. 9. TIPOS <ul><li>Fidelidad </li></ul><ul><li>media </li></ul>PROHIBIDO UTILIZARSE O COPIARSE SIN PERMISO DEL AUTOR
  10. 10. TIPOS <ul><li>Fidelidad media </li></ul><ul><ul><li>Algunos elementos gráficos </li></ul></ul><ul><ul><li>Contenido aproximado al real </li></ul></ul><ul><ul><li>Enfoque en: </li></ul></ul><ul><ul><ul><li>Funcionalidades </li></ul></ul></ul><ul><ul><ul><li>Interacción </li></ul></ul></ul><ul><ul><ul><li>Sistemas de navegación </li></ul></ul></ul>PROHIBIDO UTILIZARSE O COPIARSE SIN PERMISO DEL AUTOR
  11. 11. TIPOS <ul><li>Fidelidad </li></ul><ul><li>alta </li></ul>PROHIBIDO UTILIZARSE O COPIARSE SIN PERMISO DEL AUTOR
  12. 12. TIPOS <ul><li>Fidelidad alta </li></ul><ul><ul><li>Elementos gráficos </li></ul></ul><ul><ul><li>Contenido real </li></ul></ul><ul><ul><li>Enfoque en: </li></ul></ul><ul><ul><ul><li>Diseño visual </li></ul></ul></ul><ul><ul><ul><li>Estándares web (HTML, CSS) </li></ul></ul></ul><ul><ul><li>Muy cercano al resultado final </li></ul></ul>PROHIBIDO UTILIZARSE O COPIARSE SIN PERMISO DEL AUTOR

×