Wireframes

491 visualizaciones

Publicado el

Revisión de la utilidad de los wireframes en el proceso de creación de una herramienta o sitio web.

Esta presentación se realizó en una de las juntas mensuales de Drupal Chile

Publicado en: Diseño
0 comentarios
3 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
491
En SlideShare
0
De insertados
0
Número de insertados
14
Acciones
Compartido
0
Descargas
10
Comentarios
0
Recomendaciones
3
Insertados 0
No insertados

No hay notas en la diapositiva.

Wireframes

  1. 1. WIREFRAMES ¿Qué son y para qué nos sirven?
  2. 2. Paula Serman •  Jefe de área de proyectos en Blue Company (@bluecompany) •  Arquitecta de información y UX •  Diseño web •  Diseñadora Gráfica Wireframes - @paulitzim 2
  3. 3. ¿Qué son? •  Un wireframe es un esquema visual que nos permite conocer la jerarquía de los contenidos en un sitio web. •  Son el plano de tu sitio web. Wireframes - @paulitzim 3
  4. 4. •  Nos permiten tener conversaciones con el cliente acerca de los contenidos y la distribución de estos y no de los aspectos gráficos que se van a utilizar. •  Es una excelente herramienta de comunicación entre los AI y desarrolladores. Wireframes - @paulitzim 4
  5. 5. ¿PARA QUÉ SIRVEN? Wireframes - @paulitzim 5
  6. 6. Todo es cuestión de percepciones… Wireframes - @paulitzim 6
  7. 7. ¿Qué produce? •  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 Wireframes - @paulitzim 7
  8. 8. Ventajas •  Te ayudan a definir qué quiere tu cliente y cuáles son sus objetivos. •  Permiten la comunicación fluida entre el equipo de trabajo y el cliente. •  Las correcciones son objetivas ya que se basan en contenidos y funcionalidades. •  Se reducen los tiempos de trabajo y costos. •  Permiten visualizar interacciones y flujos. •  Permiten evaluar la cantidad de HH que vas a utilizar. Wireframes - @paulitzim 8
  9. 9. ¿CÓMO SE HACEN? RECOMENDACIONES GENERALES Wireframes - @paulitzim 9
  10. 10. Zonas de interacción •  Con líneas y cajas (tal como se vería una casa en un plano). Wireframes - @paulitzim 10
  11. 11. Escala de grises •  En escala de grises, así la conversación sólo se basa en el contenido y la estructura. Wireframes - @paulitzim 11
  12. 12. Incluye todos los elementos •  Debes incluir todos los elementos que van a ir en la interfaz, formularios, radio buttons, selects, input, etc. Mientras más incluya, más certero será el resultado. Wireframes - @paulitzim 12
  13. 13. Una tipografía •  Utiliza sólo una familia tipográfica Wireframes - @paulitzim 13
  14. 14. Contenidos reales •  Prefiere utilizar contenidos reales para lograr un mejor acabado y no lorem ipsum. Wireframes - @paulitzim 14
  15. 15. Pueden tener notas de apoyo Wireframes - @paulitzim 15
  16. 16. Se pueden hacer a mano Wireframes - @paulitzim 16
  17. 17. Con herramientas digitales •  Axure •  Omnigraffle •  Balsamiq •  Cacoo •  Visio •  Google Docs Wireframes - @paulitzim 17
  18. 18. EJEMPLOS Wireframes - @paulitzim 18
  19. 19. Baja calidad Wireframes - @paulitzim 19
  20. 20. Alta calidad Wireframes - @paulitzim 20
  21. 21. Wireframes - @paulitzim 21
  22. 22. Wireframes - @paulitzim 22
  23. 23. Wireframes - @paulitzim 23
  24. 24. ¿PREGUNTAS? Wireframes - @paulitzim 24

×