Clase 03 de Wireframes, Diplomado Arquitectura de Información y Experiencia de Usuario 2014 #daiux14

1. WIREFRAMES
clase 03
DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2014

2. INTRODUCCIÓN

3. PRESENTACIÓN
Hola, soy Rodrigo Vera, y
bienvenidos al taller de
Wireframes.

4. RODRIGO VERA YERKO PEZZOPANE
Diseñador Gráfico
Diseñador UX Diseñador UX
@rots @ypezzopane

5. RODRIGO VERA YERKO PEZZOPANE
Diseñador Gráfico
Diseñador UX Diseñador UX
@rots @ypezzopane

6. LO QUE VEREMOS HOY
Representación
¿Qué es un Wireframe?
Características y Ventajas
Malas Prácticas
Otros Usos
Herramientas para hacer WF

7. LOS WIREFRAMES SON…

8. LOS WIREFRAMES SON…
En interfaces digitales, un
wireframe es una representación
esquemática de una pantalla, sin
elementos gráficos, que muestran
contenido y comportamiento de
las páginas.

9. ALTA
Alta fidelidad: Los wireframes de alta
fidelidad son usados a menudo para
documentar, porque ellos incorporan
un nivel de detalle que se acerca más
al diseño final de una página web, pero
toma más tiempo para ser creado.

10. ALTA

11. BAJA
Baja fidelidad: Caracterizado por un dibujo
en bruto o un boceto rápido, los wireframes
de baja fidelidad tienen menos detalles y son
rápidos de producir. Ayudan a un equipo de
proyecto a colaborar más efectivamente
debido a que son más abstractos, usando
rectángulos y etiquetas para representar el
contenido. Muestra o contenido simbólico
son utilizados para representar datos cuando
el contenido real no está disponible.

12. BAJA

13. ELEMENTOS ESENCIALES
Un Wireframe debería, al menos,
contar con:
Elementos de navegación,
información, interacción y de
apoyo.

14. ELEMENTOS ESENCIALES
Elementos de navegación: menúes, breadcrumbs e hipervínculos.
Tab Tab Tab Tab Tab
Estas en : Inicio / Lorem Ipsum / Lorem Ipsum / detalle
Nulla facilisi. Nullam quis turpis sem, ut egestas lectus.

15. ELEMENTOS ESENCIALES
Elementos de información: contenidos de texto, imágenes,
audio y video.
Sed vestibulum, ipsum lacinia
vulputate vulputate, arcu nisi
iaculis risus, sed auctor quam
augue id odio.
Cras hendrerit blandit nulla sed
volutpat. Vestibulum sollicitudin
quam sed lectus fringilla
blandit.
Quisque ut enim in erat
tincidunt convallis.
16:9
This is the Title of the Video
One morning, when Gregor Samsa
woke from troubled dreams, he
found himself transformed... More...
0:00 / 4:59
URL
Embed

16. ELEMENTOS ESENCIALES
Elementos de interacción: botones, formularios, tooltips, sliders, etc.
Done or Cancel
Error message goes here.
Error messageM geosessa ghee rgeo. es here.
Message goes Mherses.age goes here.
Message goes here.
Comentar

17. ELEMENTOS ESENCIALES
Elementos de apoyo: validaciones y alertas.
Your XXX has been saved.
View in XXX.
* Campo requerido

18. WIREFRAME = /
DISEÑO
Un Wireframe no es el aspecto
final del sitio, sino una mera
representación gráfica de su
contenido.

19. WIREFRAMES =/ DISEÑO

20. WIREFRAMES =/ DISEÑO

21. WIREFRAMES =/ DISEÑO

22. WIREFRAMES =/ DISEÑO

23. WIREFRAMES =/ DISEÑO

24. WIREFRAMES =/ DISEÑO

25. WIREFRAMES = DISEÑO

26. WIREFRAMES = DISEÑO

27. GUÍAS VISUALES

28. GUÍAS VISUALES
Son estructuras simples conformados principalmente
de líneas y cajas.

29. GUÍAS VISUALES
Están diseñados en escala de grises.

30. GUÍAS VISUALES
Todos los elementos que lo componen están representados de
forma esquemática.

31. GUÍAS VISUALES
Se utiliza una sola familia tipográfica.
1234567890¿?
abcdefghijklmn
ñopqrstuvwxyz

32. GUÍAS VISUALES
Se debe usar contenido real.
Lorem ipsum
¿o no?...

33. HERRAMIENTAS PARA
DISEÑAR WIREFRAMES

34. HERRAMIENTAS PARA DISEÑAR WIREFRAMES
Lápiz y papel.

35. HERRAMIENTAS PARA DISEÑAR WIREFRAMES
Lápiz y papel.
1024 960 800 800 960 1024

36. HERRAMIENTAS PARA DISEÑAR WIREFRAMES
Lápiz y papel.

37. HERRAMIENTAS PARA DISEÑAR WIREFRAMES
Prototipos en papel: Es ideal para hacer los primeros esbozos del
funcionamiento de una futura aplicación constituyéndose en un
elemento de testado y debate rápido (económico) que evitará futuros
y costosos errores en fases posteriores de desarrollo.

38. HERRAMIENTAS PARA DISEÑAR WIREFRAMES

39. HERRAMIENTAS PARA DISEÑAR WIREFRAMES
Herramientas digitales: Es la manera para crear wireframes
detallados y de alta calidad.
Apliaciones
escritorio
Omnigraffle
Visio
Axure
Balsamiq
Fireworks
Keynote
Apliaciones
web
Prototyper
Hotgloo
iplotz
Balsamiq
Cacoo

40. 10 CONSEJOS ESENCIALES

41. 10 CONSEJOS ESENCIALES
• Simple sobre todas las cosas
• Usa la mayor cantidad de contenido real posible
• Siempre trabaja en escala de grises
• Evita usar imágenes, logos e iconografía
• No te limites a usar una aplicación digital, ¡dibuja!
• Define muy bien la estrategia y los contenidos antes de empezar
• Siempre haz wireframes antes de diseñar
• Explica las zonas e interacciones
• Discute los wireframes con tu equipo de trabajo
• Corrige problemas detectados en wireframes, no en diseño

42. CÓMO CREAR UN
WIREFRAME

43. CONSIDERACIONES
Los antecedentes del proyecto
son claves para la definición y
diseño de los wireframes. Es
importante tener presente las
definiciones provenientes del
Brief, Estrategia, Benchmark,
Investigación de Usuarios y AI.

44. CONSIDERACIONES DEL PROYECTO
Consideraciones del Proyecto: Brief, Estrategia, Benchmark,
Investigación de Usuario y AI.
BRIEF ESTRATEGI
A
BENCH INVESTIGACIÓ
N
USUARIOS
AI
WIREFRAMES

45. CONSIDERACIONES DEL
DISEÑO DE INTERACCIÓN
Una vez creado el mapa de
contenidos podemos representar,
gráficamente, las interacciones
complejas en Mapas de
Interacción y Partituras de
Interacción.

46. PARTITURAS DE INTERACCIÓN
Acá, se pueden definir el número de páginas y elementos de la
interfaz para un flujo de interacción en la misma partitura. Un
ejemplo práctico, es la definición de un flujo de formulario.

47. PASAR DE LA AI AL WF

48. EL PROCESO
Debemos definir que es lo mas importante que queremos
representar en nuestra página.

49. INTERPRETACIÓN DEL MAPA DE CONTENIDO
Es importante saber leer y distinguir distintas profundidades de
contenido en un mapa de contenidos para poder traspasar a una
adecuada jerarquía.
INICIO
No Jugos y Bebidas Perecibles Fiambres y Quesos
Marca
Nivel Auxiliar
Ubicación
Primer Nivel
Preguntas
Frecuentes
Doña Juana Contacto
Verduras Artículos de Aseo
Jugos Bebidas
Segundo Nivel
Arroz Fideos Jamones Quesos Hortalizas Tubérculos Útiles de Baño Útiles de Cocina
Tercer Nivel
Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha

50. INTERPRETACIÓN DEL MAPA DE CONTENIDO
Es importante saber leer y distinguir distintas profundidades de
contenido en un mapa de contenidos para poder traspasar a una
adecuada jerarquía.
Home
Verduras Jugos y Bebidas Comida no Perecible Fiambres y Quesos Artículos de Aseo
Lechugas
Tomates
Cebollas
Jugos Watts
Bebidas
Coca Cola
Sprite
Fanta
Arroz
Fideos
Conservas
Jamón
Quesos
Chanco
Cabra
Gauda
Papel Higiénico
Útiles de Aseo
Útiles de Cocina
Redes
Sociales
Ubicación Login/Registro Doña Juana Contacto
Sociabilizar
en Redes
Imprimir Comentar
Agregar a
Favoritos
Descarga
PDF
Funcionalidades Generales

51. PÁGINAS TIPO
Comúnmente se diseñan los wireframes para las pantallas más
importantes, complejas y recurrentes a lo largo de la interfaz.
Home
Verduras Jugos y Bebidas Comida no Perecible Fiambres y Quesos Artículos de Aseo
Lechugas
Tomates
Cebollas
Jugos Watts
Bebidas
Coca Cola
Sprite
Fanta
Arroz
Fideos
Conservas
Jamón
Quesos
Chanco
Cabra
Gauda
Papel Higiénico
Útiles de Aseo
Útiles de Cocina
Redes
Sociales
Ubicación Login/Registro Doña Juana Contacto
Sociabilizar
en Redes
Imprimir Comentar
Agregar a
Favoritos
Descarga
PDF
Funcionalidades Generales

52. DEFINICIÓN DE ÁREAS
La definición de áreas es el primer paso para la creación de un
wireframe. Acá, se jerarquizan las áreas de contenido, tales
como header, main, sidebar o footer, según su importancia.
HEADER
MAIN SIDEBAR
FOOTER

53. JERARQUIZACIÓN DE CONTENIDOS
Una vez definida las áreas, debemos ordenar y jerarquizar los
contenidos de éstos, donde es muy importante contar con la
totalidad de los contenidos para crear wireframes más reales
posibles.

54. ALGUNOS PRINCIPIOS BÁSICOS DE DISEÑO
• Similitud entre elementos.
• Recuerdo mejor que memoria.
• Realce de elementos.
• Preferir siempre lo simple. Siempre mostrar la información
necesaria.
• Considerar el patrón de lectura del usuario.
• Facilitar la navegación a tu usuario.
• Reducir la complejidad de las tareas.
• Diseñar a prueba de errores.

55. FUNDAMENTACIÓN Y ENTREGABLES
La fundamentación tiene como objetivo explicar, de forma
detallada, cada decisión de diseño dentro de cada wireframe.

56. FUNDAMENTACIÓN Y ENTREGABLES
La fundamentación tiene como objetivo explicar, de forma
detallada, cada decisión de diseño dentro de cada wireframe.
Carrier 12:00 PM
Comunidad LG Mobile
Para participar debes iniciar Sesión f Connect
Foro Comunidad
Lorem Ipsum dolor sit amet, consectetur.
Descargas
Lorem Ipsum dolor sit amet, consectetur.
Equipos
Lorem Ipsum dolor sit amet, consectetur.
Smartphones
Lorem Ipsum dolor sit amet, consectetur.
Código QR
Lorem Ipsum dolor sit amet, consectetur.
Comunidad LG Mobile Comparte
Copyright 2010 LG ELECTRONICS.
TODOS LOS DERECHOS RESERVADOS

57. ACTIVIDAD

58. ACTIVIDAD
La señora Juana tiene un negocio de abarrotes, y resulta que
le hablaron de internet y quiere que su comunidad que es en la
mayoría un barrio universitario ingrese a la “página web” de su
negocio para saber que productos tiene y los precios que maneja
Ella nos contó que quiere que su negocio se instale en internet
y le ayude a llegar a muchos mas usuarios de los que puede
llegar hoy en día. En su local ella vende:
!
• Verduras
• Jugos y Bebidas
• Comida no Perecible
• Fiambres y quesos
• Artículos de Aseo
!

59. ACTIVIDAD

60. v
INICIO
No Jugos y Bebidas Perecibles Fiambres y Quesos
Marca
Nivel Auxiliar
Ubicación
Primer Nivel
Preguntas
Frecuentes
Doña Juana Contacto
Verduras Artículos de Aseo
Jugos Bebidas
Segundo Nivel
Arroz Fideos Jamones Quesos Hortalizas Tubérculos Útiles de Baño Útiles de Cocina
Tercer Nivel
Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha

61. http://www.raincreativelab.com/paperbrowser/
http://960.gs/
DESCARGAS

62. FIN CLASE 03