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