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

1. WIREFRAMES
¿Qué son y para qué nos sirven?

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. ¿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. • 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. ¿PARA QUÉ SIRVEN?
Wireframes - @paulitzim 5

6. Todo es cuestión de percepciones…
Wireframes - @paulitzim 6

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. 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. ¿CÓMO SE HACEN?
RECOMENDACIONES GENERALES
Wireframes - @paulitzim 9

10. Zonas de interacción
• Con líneas y cajas (tal como se vería una casa en un plano).
Wireframes - @paulitzim 10

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. 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. Una tipografía
• Utiliza sólo una familia tipográfica
Wireframes - @paulitzim 13

14. Contenidos reales
• Prefiere utilizar contenidos reales para lograr un mejor acabado
y no lorem ipsum.
Wireframes - @paulitzim 14

15. Pueden tener notas de apoyo
Wireframes - @paulitzim 15

16. Se pueden hacer a mano
Wireframes - @paulitzim 16

17. Con herramientas digitales
• Axure
• Omnigraffle
• Balsamiq
• Cacoo
• Visio
• Google Docs
Wireframes - @paulitzim 17

18. EJEMPLOS
Wireframes - @paulitzim 18

19. Baja calidad
Wireframes - @paulitzim 19

20. Alta calidad
Wireframes - @paulitzim 20

21. Wireframes - @paulitzim 21

22. Wireframes - @paulitzim 22

23. Wireframes - @paulitzim 23

24. ¿PREGUNTAS?
Wireframes - @paulitzim 24