Importancia de la creación de bocetos y prototipos durante un proyecto web. Presentación efectuada durante el drupalcamp 2011 en Costa Rica

1. WIREFRAMES de la teoría a la práctica
Byron Corrales Rivas
@byroncor
byroncorrales.blogspot.com
byroncorrales@gmail.com
licencia Creative Commons Atribución-CompartirIgual 3.0 Unported.
Servicio de Información Mesoamericano sobre Agricultura Sostenible
www.simas.org.ni

3. 4 Sitios webs
1
Planeta
1
Grupos de trabajo
SIMAS y DRUPAL

4. CONTEXTO

5. El cliente casi nunca tiene la razón :(
Tenemos que ayudarle :)

6. www.theoatmeal.com

18. ➔ 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

19. 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 deben
ser claramente distinguibles dentro de la interfaz
ARQUITECTURA DE LA INFORMACIÓN

20. El Card Sorting es una técnica sencilla en el diseño de la
experiencia del usuario, donde se guía a un grupo de "expertos"
o de usuarios, pero sin tener experiencia alguna de diseño de
mapa de sitio; ésta técnica es utilizada para generar un árbol de
categorías.
Es un enfoque útil para el
diseño de la arquitectura de
información, flujos de trabajo,
la estructura del menú, o rutas
de navegación del sitio.
Tipos: Abiertas y Cerradas
CARD SORTING

21. WIREFRAMES

22. Básicamente, un wireframe es
una guía visual que se suele
utilizar para definir la
estructura de un sitio web y
las relaciones entre sus páginas,
siendo una base que determina
la disposición de los elementos
fundamentales en la interfaz de
la web
Gráficamente, son estructuras
muy simples y están
enfocados a visualizar la
distribución de los contenidos
dentro de una pantalla

23. ➔ 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 al
diseñador tener plena libertad al momento de diseñar la interfaz
VENTAJAS

24. CARACTERÍSTICAS

25. Simples y sin distracciones visuales

26. Se pueden hacer a mano

27. Explicación de secciones

28. Escala de Grises

29. 1234567890¿?
abcdefghijklmn
ñopqrstuvwxyz
Una tipografía

30. EJEMPLOS

38. EYE TRACKING

40. MALAS PRÁCTICAS

41. Mezcla de imágenes y colores

42. Mezcla con interfaz real

43. Sobrecargar

44. HERRAMIENTAS

45. FREEMIND

46. www.wireframeshowcase.com

47. http://speckyboy.com/2010/07/14/a-collection-of-printable-web-browser-sketching-and-wireframe-templates/

48. PENCIL PROJECT

49. http://cursorlibre.com/2010/09/coleccion-de-widgets-para-la-creacion-de-wireframes-en-inkscape/
INKSCAPE

50. GOOGLE DOCS

51. CACOO.COM

52. Gracias a
Gráficos
http://deleket.deviantart.com/
theoatmeal.com
http://www.gracesmith.co.uk/an-interview-with-sketchnote-king-mike-rohde/
Fuentes
http://www.slideshare.net/ypezzopane/taller-de-wireframes-5543793
http://www.dinamiclearning.es/diseno/uso-de-wireframes
http://www.nosolousabilidad.com/articulos/cardsorting_unicauca.htm
http://www.polargeek.net/mejora-tu-desarrollo-con-wireframes/
http://es.scribd.com/doc/50614286/Usabilidad-de-Sitios-Web

53. Byron Corrales Rivas
@byroncor
byroncorrales.blogspot.com
byroncorrales@gmail.com
PREGUNTAS
Experiencias
LUNCH TIME !!!!