Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,124 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

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 !!!!

×