Este documento presenta una introducción a los wireframes. Explica que los wireframes son representaciones esquemáticas de pantallas digitales que muestran la estructura y contenido sin elementos gráficos. Detalla que sirven para comunicar ideas entre el equipo, permitir pruebas tempranas y evitar errores costosos. También provee consejos sobre el uso de herramientas para crear wireframes y recomienda recursos adicionales sobre el tema.

1. WIREFRAMES
clase 02
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
Referencias!

7. REPRESENTACIÓN

8. DIAGRAMACIÓN
El primer paso en el diseño de objetos o
procesos es la representación mediante
diagramas de su estructura,
funcionamiento y comportamiento,
concretando así las primeras ideas
abstractas.

9. DIAGRAMACIÓN
En el caso de productos interactivos con
interfaz, como por ejemplo los sitios web,
esta interfaz también es objeto de
diagramación, especificando cuál será la
organización y estructuración visual de los
diferentes elementos.

10. DIAGRAMACIÓN
Los diagramas se deben realizar a partir
de la información recogida durante las
etapas de investigación de la audiencia, en
las que se estudia a los usuarios con el
objetivo de crear un producto que satisfaga
sus necesidades.
!
http://www.nosolousabilidad.com/articulos/diagramacion.htm#sthash.x7e0bp0o.dpuf

11. REPRESENTACIÓN EN LA AI
http://www.nosolousabilidad.com/articulos/diagramacion.htm

12. QUÉ ES UN WIREFRAME

13. UN POCO DE HISTORIA…

14. ¿UN BOCETO?
Un boceto es un dibujo hecho a mano
alzada, utilizando lápiz, papel y goma de
borrar, realizado generalmente sin
instrumentos de dibujo auxiliares.
Puede ser un primer apunte del objeto
ideado que aún no está totalmente
definido. Es un dibujo rápido de lo que
luego llegará a ser un dibujo definido o la
obra de arte final en sí.

15. UN POCO DE HISTORIA…
Bocetos Da Vinci 1495 - 1497

16. UN POCO DE HISTORIA…
Bocetos Da Vinci 1495 - 1497

17. UN POCO DE HISTORIA…
Bocetos Da Vinci 1495 - 1497

18. UN POCO DE HISTORIA…
Planos Da Vinci

19. DIBUJO TÉCNICO
El dibujo técnico es un sistema de
representación gráfica de diversos tipos de
objetos, con el propósito de proporcionar
información suficiente para facilitar su
análisis, ayudar a elaborar su diseño y
posibilitar su futura construcción y
mantenimiento. Suele realizarse con el auxilio
de medios informatizados o, directamente,
sobre el papel u otros soportes planos.

20. UN POCO DE HISTORIA…
Blueprint

21. UN POCO DE HISTORIA…
Blueprint

22. UN POCO DE HISTORIA…
Blueprint

23. MODELADO 3D
Wireframe (marco o malla de alambre) es un
algoritmo de renderización del que resulta una
imagen semitransparente, de la cual solo se
dibujan las aristas de la malla que constituye al
objeto (de ahí su nombre).
Casi nunca se emplea en la representación
final de una imagen, pero sí en su edición,
debido a la escasa potencia de cálculo
necesaria (comparada con otros métodos).

24. UN POCO DE HISTORIA…
Wireframes 3D

25. UN POCO DE HISTORIA…
Wireframes 3D

26. LOS WIREFRAMES SON…

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

28. LOS WIREFRAMES SON…
Es la metodología que permite
hacer diseños simplificados
detallando su estructura y los
elementos relevantes que se
incorporarán para atender a las
“personas” que llegan a visitar el
sitio web o espacio digital que
se desarrolla.

29. LOS WIREFRAMES SON…
Mediante esta forma de trabajo se
obliga a los participantes en el
desarrollo, a definir en forma
anticipada los elementos que se deben
incorporar en la interfaz, colaborando
de modo eficaz a la toma de las
decisiones más relevantes acerca
del contenido y la interacción, junto
con establecer la ubicación de dichas
zonas en la pantalla.

30. LOS WIREFRAMES SON…
Adicionalmente el hecho de utilizar
wireframes en el diseño, permite
llevar a cabo pruebas tempranas
de las interfaces y determinar si
cumplen con los objetivos que se
espera conseguir a través de ellas

31. LOS WIREFRAMES SON…

32. LOS WIREFRAMES SON…

33. LOS WIREFRAMES SON…

34. RELACIÓN CON AI
Un proyecto de interfaz digital,
tiene a lo menos 4 etapas
fundamentales: Estrategia,
Arquitectura de Información,
Diseño de Interfaz y Desarrollo.

35. RELACIÓN CON AI
ESTRATEGIA AI WIREFRAMES UI DESARROLLLO
El Wireframe es el paso intermedio entre Arquitectura de
Información y Diseño, pasa de la “mentalidad estructural” de un
mapa de contenidos, dónde decidimos y ordenamos los contenidos
de nuestro sitio web, a la emocionalidad del Diseño de Interfaz.

36. REPRESENTACIÓN EN LA AI
http://training.ayerviernes.com/
WIREFRAMES

37. ++ COMUNICACIÓN
Sirven como herramienta de
comunicación y discusión entre
arquitectos de información,
programadores, diseñadores y
clientes.

38. ++ COMUNICACIÓN

39. UTILIDAD
Ofrece una perspectiva basada
principalmente en la arquitectura
del contenido
Ayudan a que el proyecto no se
retrase por falta de definición
Son imprescindibles para definir
los comportamientos en la
interacción

40. TIPOS DE WIREFRAME

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

42. ALTA

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

44. BAJA

45. CARACTERÍSTICAS
Y VENTAJAS

46. CARACTERÍSTICAS

47. CARACTERÍSTICAS
Se utilizan en la creación de todas las interfaces digitales (web,
móviles, ATM, etc.).

48. CARACTERÍSTICAS
Se diseñan sólo las páginas tipo (plantillas).
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

49. CARACTERÍSTICAS
Pueden ser dibujados a mano o creados con alguna aplicación
computacional.

50. CARACTERÍSTICAS
Son simples y no tienen distracciones visuales tales como color o
imágenes.

51. CARACTERÍSTICAS
Siempre van acompañados de una explicación acerca de las
zonas e interacciones.

52. ventajas

53. VENTAJAS
Las correcciones son objetivas, basadas en contenidos y
funcionalidad, no en diseño.

54. VENTAJAS
Se reducen los tiempos de trabajo y gastos involucrados en el
proyecto.

55. VENTAJAS
Permite la comunicación fluida entre el equipo de trabajo y el
cliente.

56. VENTAJAS
Como es una estructura simple y enfocada en los contenidos,
permite al diseñador tener plena libertad al momento de diseñar
la interfaz.

57. VENTAJAS
Permiten visualizar interacciones y flujos.

58. VENTAJAS
Permiten identificar problemas que puedan presentarse más
adelante.

59. MALAS PRÁCTICAS

60. MALAS PRÁCTICAS
Uso de color e imágenes.

61. MALAS PRÁCTICAS
Mezcla con interfaz real.

62. MALAS PRÁCTICAS
Wireframes muy complejos, mezclando formas y colores.

63. MALAS PRÁCTICAS
Wireframes muy simples.

64. OTROS USOS

65. MAPA DE DIVS

66. MAPA DE DIVS

67. MAPA DE DIVS

68. HERRAMIENTAS PARA
DISEÑAR WIREFRAMES

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

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

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

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

73. HERRAMIENTAS PARA DISEÑAR WIREFRAMES
https://www.youtube.com/watch?v=GrV2SZuRPv0

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

75. REFERENCAS!

76. PARA LEER
INFORMATION ARQUITECTURE FOR DE WORLD WIDE WEB (Morvile & Rosenfield)
Parte III - Wireframes (Pags. 307 - 313)

77. PARA VER
THE ELEMENTS OF THE USER EXPERIENCE (Jesse James Garret)
Chapter 6 - The Skeleton Plane (Pags. 128-131)

78. PARA VER
THE GUIDE TO WIREFRAMING (Chris Bank)
http://uxpin.com/guide-to-wireframing.html

79. PARA VER
http://www.wireframeshowcase.com/
https://www.flickr.com/groups/ilovewireframes/
http://moobileframes.tumblr.com/

80. FIN CLASE 02