WIREFRAMES de la teoría a la prácticaByron Corrales Rivas@byroncorbyroncorrales.blogspot.combyroncorrales@gmail.comlicenci...
4   Sitios webs1    Planeta1    Grupos de trabajo              SIMAS y DRUPAL
CONTEXTO
El cliente casi nunca tiene la razón :(Tenemos que ayudarle :)
www.theoatmeal.com
➔   Incremento de costos➔   Aumento en los tiempos de diseño y desarrollo➔   Frustrada relación con el cliente➔   Problema...
Definir claramente el árbol de contenidos, secciones, niveles,contenidos relacionados, etc.Definición de sistema de navega...
El Card Sorting es una técnica sencilla en el diseño de laexperiencia del usuario, donde se guía a un grupo de "expertos"o...
WIREFRAMES
Básicamente, un wireframe esuna guía visual que se sueleutilizar para definir laestructura de un sitio web ylas relaciones...
➔   Definen qué quiere tu cliente y cuáles son sus objetivos.➔   Permite la comunicación fluida entre el equipo de trabajo...
CARACTERÍSTICAS
Simples y sin distracciones visuales
Se pueden hacer a mano
Explicación de secciones
Escala de Grises
1234567890¿?abcdefghijklmnñopqrstuvwxyz   Una tipografía
EJEMPLOS
EYE TRACKING
MALAS PRÁCTICAS
Mezcla de imágenes y colores
Mezcla con interfaz real
Sobrecargar
HERRAMIENTAS
FREEMIND
www.wireframeshowcase.com
http://speckyboy.com/2010/07/14/a-collection-of-printable-web-browser-sketching-and-wireframe-templates/
PENCIL PROJECT
http://cursorlibre.com/2010/09/coleccion-de-widgets-para-la-creacion-de-wireframes-en-inkscape/                           ...
GOOGLE DOCS
CACOO.COM
Gracias aGráficoshttp://deleket.deviantart.com/theoatmeal.comhttp://www.gracesmith.co.uk/an-interview-with-sketchnote-king...
Byron Corrales Rivas          @byroncor  byroncorrales.blogspot.com   byroncorrales@gmail.comPREGUNTAS Experiencias   LUNC...
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
Upcoming SlideShare
Loading in …5
×

Wireframe de la teoría a la práctica - DrupalCamp2011

3,005 views

Published on

Importancia de la creación de bocetos y prototipos durante un proyecto web.

Presentación efectuada durante el drupalcamp 2011 en Costa Rica

Published in: Design, Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
3,005
On SlideShare
0
From Embeds
0
Number of Embeds
1,106
Actions
Shares
0
Downloads
57
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Wireframe de la teoría a la práctica - DrupalCamp2011

  1. 1. WIREFRAMES de la teoría a la prácticaByron Corrales Rivas@byroncorbyroncorrales.blogspot.combyroncorrales@gmail.comlicencia Creative Commons Atribución-CompartirIgual 3.0 Unported. Servicio de Información Mesoamericano sobre Agricultura Sostenible www.simas.org.ni
  2. 2. 4 Sitios webs1 Planeta1 Grupos de trabajo SIMAS y DRUPAL
  3. 3. CONTEXTO
  4. 4. El cliente casi nunca tiene la razón :(Tenemos que ayudarle :)
  5. 5. www.theoatmeal.com
  6. 6. ➔ Incremento de costos➔ Aumento en los tiempos de diseño y desarrollo➔ Frustrada relación con el cliente➔ Problemas de comunicación con el equipo CONSECUENCIAS
  7. 7. Definir claramente el árbol de contenidos, secciones, niveles,contenidos relacionados, etc.Definición de sistema de navegación, elementos concretos,tales como menús, guías, botones y otros elementos que debenser claramente distinguibles dentro de la interfazARQUITECTURA DE LA INFORMACIÓN
  8. 8. El Card Sorting es una técnica sencilla en el diseño de laexperiencia del usuario, donde se guía a un grupo de "expertos"o de usuarios, pero sin tener experiencia alguna de diseño demapa de sitio; ésta técnica es utilizada para generar un árbol decategorías.Es un enfoque útil para eldiseño de la arquitectura deinformación, flujos de trabajo,la estructura del menú, o rutasde navegación del sitio.Tipos: Abiertas y Cerradas CARD SORTING
  9. 9. WIREFRAMES
  10. 10. Básicamente, un wireframe esuna guía visual que se sueleutilizar para definir laestructura de un sitio web ylas relaciones entre sus páginas,siendo una base que determinala disposición de los elementosfundamentales en la interfaz dela webGráficamente, son estructurasmuy simples y estánenfocados a visualizar ladistribución de los contenidosdentro de una pantalla
  11. 11. ➔ Definen qué quiere tu cliente y cuáles son sus objetivos.➔ Permite la comunicación fluida entre el equipo de trabajo y el cliente➔ Las correcciones son objetivas, basadas en contenidos y funcionalidad.➔ Se evitan las discusiones gráficas.➔ Se reducen los tiempos de trabajo y costos.➔ Permiten visualizar interacciones y flujos.➔ Se pueden identificar problemas de Interacción, Usabilidad, accesibilidad.➔ Como es una estructura simple y enfocada en los contenidos, permite aldiseñador tener plena libertad al momento de diseñar la interfaz VENTAJAS
  12. 12. CARACTERÍSTICAS
  13. 13. Simples y sin distracciones visuales
  14. 14. Se pueden hacer a mano
  15. 15. Explicación de secciones
  16. 16. Escala de Grises
  17. 17. 1234567890¿?abcdefghijklmnñopqrstuvwxyz Una tipografía
  18. 18. EJEMPLOS
  19. 19. EYE TRACKING
  20. 20. MALAS PRÁCTICAS
  21. 21. Mezcla de imágenes y colores
  22. 22. Mezcla con interfaz real
  23. 23. Sobrecargar
  24. 24. HERRAMIENTAS
  25. 25. FREEMIND
  26. 26. www.wireframeshowcase.com
  27. 27. http://speckyboy.com/2010/07/14/a-collection-of-printable-web-browser-sketching-and-wireframe-templates/
  28. 28. PENCIL PROJECT
  29. 29. http://cursorlibre.com/2010/09/coleccion-de-widgets-para-la-creacion-de-wireframes-en-inkscape/ INKSCAPE
  30. 30. GOOGLE DOCS
  31. 31. CACOO.COM
  32. 32. Gracias aGráficoshttp://deleket.deviantart.com/theoatmeal.comhttp://www.gracesmith.co.uk/an-interview-with-sketchnote-king-mike-rohde/Fuenteshttp://www.slideshare.net/ypezzopane/taller-de-wireframes-5543793http://www.dinamiclearning.es/diseno/uso-de-wireframeshttp://www.nosolousabilidad.com/articulos/cardsorting_unicauca.htmhttp://www.polargeek.net/mejora-tu-desarrollo-con-wireframes/http://es.scribd.com/doc/50614286/Usabilidad-de-Sitios-Web
  33. 33. Byron Corrales Rivas @byroncor byroncorrales.blogspot.com byroncorrales@gmail.comPREGUNTAS Experiencias LUNCH TIME !!!!

×