WIREFRAMES
¿Qué son y para qué nos sirven?
Paula Serman
•  Jefe de área de proyectos en Blue Company (@bluecompany)
•  Arquitecta de información y UX
•  Diseño web
•...
¿Qué son?
•  Un wireframe es un esquema
visual que nos permite
conocer la jerarquía de los
contenidos en un sitio web.
•  ...
•  Nos permiten tener
conversaciones con el cliente
acerca de los contenidos y la
distribución de estos y no de
los aspect...
¿PARA QUÉ SIRVEN?
Wireframes - @paulitzim 5
Todo es cuestión de percepciones…
Wireframes - @paulitzim 6
¿Qué produce?
•  Incremento de costos
•  Aumento en los tiempos de diseño y desarrollo
•  Frustrada relación con el client...
Ventajas
•  Te ayudan a definir qué quiere tu cliente y cuáles son sus
objetivos.
•  Permiten la comunicación fluida entre...
¿CÓMO SE HACEN?
RECOMENDACIONES GENERALES
Wireframes - @paulitzim 9
Zonas de interacción
•  Con líneas y cajas (tal como se vería una casa en un plano).
Wireframes - @paulitzim 10
Escala de grises
•  En escala de grises, así la conversación sólo se basa en el
contenido y la estructura.
Wireframes - @p...
Incluye todos los elementos
•  Debes incluir todos los elementos que van a ir en la interfaz,
formularios, radio buttons, ...
Una tipografía
•  Utiliza sólo una familia tipográfica
Wireframes - @paulitzim 13
Contenidos reales
•  Prefiere utilizar contenidos reales para lograr un mejor acabado
y no lorem ipsum.
Wireframes - @paul...
Pueden tener notas de apoyo
Wireframes - @paulitzim 15
Se pueden hacer a mano
Wireframes - @paulitzim 16
Con herramientas digitales
•  Axure
•  Omnigraffle
•  Balsamiq
•  Cacoo
•  Visio
•  Google Docs
Wireframes - @paulitzim 17
EJEMPLOS
Wireframes - @paulitzim 18
Baja calidad
Wireframes - @paulitzim 19
Alta calidad
Wireframes - @paulitzim 20
Wireframes - @paulitzim 21
Wireframes - @paulitzim 22
Wireframes - @paulitzim 23
¿PREGUNTAS?
Wireframes - @paulitzim 24
Próxima SlideShare
Cargando en…5
×

Wireframes

502 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
502
En SlideShare
0
De insertados
0
Número de insertados
15
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

×