WIREFRAMES 
clase 02 
DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2014
INTRODUCCIÓN
PRESENTACIÓN 
Hola, soy Rodrigo Vera, y 
bienvenidos al taller de 
Wireframes.
RODRIGO VERA YERKO PEZZOPANE 
Diseñador Gráfico 
Diseñador UX Diseñador UX 
@rots @ypezzopane
RODRIGO VERA YERKO PEZZOPANE 
Diseñador Gráfico 
Diseñador UX Diseñador UX 
@rots @ypezzopane
LO QUE VEREMOS HOY 
Representación 
¿Qué es un Wireframe? 
Características y Ventajas 
Malas Prácticas 
Otros Usos 
Herram...
REPRESENTACIÓN
DIAGRAMACIÓN 
El primer paso en el diseño de objetos o 
procesos es la representación mediante 
diagramas de su estructura...
DIAGRAMACIÓN 
En el caso de productos interactivos con 
interfaz, como por ejemplo los sitios web, 
esta interfaz también ...
DIAGRAMACIÓN 
Los diagramas se deben realizar a partir 
de la información recogida durante las 
etapas de investigación de...
REPRESENTACIÓN EN LA AI 
http://www.nosolousabilidad.com/articulos/diagramacion.htm
QUÉ ES UN WIREFRAME
UN POCO DE HISTORIA…
¿UN BOCETO? 
Un boceto es un dibujo hecho a mano 
alzada, utilizando lápiz, papel y goma de 
borrar, realizado generalment...
UN POCO DE HISTORIA… 
Bocetos Da Vinci 1495 - 1497
UN POCO DE HISTORIA… 
Bocetos Da Vinci 1495 - 1497
UN POCO DE HISTORIA… 
Bocetos Da Vinci 1495 - 1497
UN POCO DE HISTORIA… 
Planos Da Vinci
DIBUJO TÉCNICO 
El dibujo técnico es un sistema de 
representación gráfica de diversos tipos de 
objetos, con el propósito...
UN POCO DE HISTORIA… 
Blueprint
UN POCO DE HISTORIA… 
Blueprint
UN POCO DE HISTORIA… 
Blueprint
MODELADO 3D 
Wireframe (marco o malla de alambre) es un 
algoritmo de renderización del que resulta una 
imagen semitransp...
UN POCO DE HISTORIA… 
Wireframes 3D
UN POCO DE HISTORIA… 
Wireframes 3D
LOS WIREFRAMES SON…
LOS WIREFRAMES SON… 
En interfaces digitales, un 
wireframe es una representación 
esquemática de una pantalla, sin 
eleme...
LOS WIREFRAMES SON… 
Es la metodología que permite 
hacer diseños simplificados 
detallando su estructura y los 
elementos...
LOS WIREFRAMES SON… 
Mediante esta forma de trabajo se 
obliga a los participantes en el 
desarrollo, a definir en forma 
...
LOS WIREFRAMES SON… 
Adicionalmente el hecho de utilizar 
wireframes en el diseño, permite 
llevar a cabo pruebas temprana...
LOS WIREFRAMES SON…
LOS WIREFRAMES SON…
LOS WIREFRAMES SON…
RELACIÓN CON AI 
Un proyecto de interfaz digital, 
tiene a lo menos 4 etapas 
fundamentales: Estrategia, 
Arquitectura de ...
RELACIÓN CON AI 
ESTRATEGIA AI WIREFRAMES UI DESARROLLLO 
El Wireframe es el paso intermedio entre Arquitectura de 
Inform...
REPRESENTACIÓN EN LA AI 
http://training.ayerviernes.com/ 
WIREFRAMES
++ COMUNICACIÓN 
Sirven como herramienta de 
comunicación y discusión entre 
arquitectos de información, 
programadores, d...
++ COMUNICACIÓN
UTILIDAD 
Ofrece una perspectiva basada 
principalmente en la arquitectura 
del contenido 
Ayudan a que el proyecto no se ...
TIPOS DE WIREFRAME
ALTA 
Alta fidelidad: Los wireframes de alta 
fidelidad son usados a menudo para 
documentar, porque ellos incorporan 
un ...
ALTA
BAJA 
Baja fidelidad: Caracterizado por un dibujo 
en bruto o un boceto rápido, los wireframes 
de baja fidelidad tienen m...
BAJA
CARACTERÍSTICAS 
Y VENTAJAS
CARACTERÍSTICAS
CARACTERÍSTICAS 
Se utilizan en la creación de todas las interfaces digitales (web, 
móviles, ATM, etc.).
CARACTERÍSTICAS 
Se diseñan sólo las páginas tipo (plantillas). 
Home 
Verduras Jugos y Bebidas Comida no Perecible Fiambr...
CARACTERÍSTICAS 
Pueden ser dibujados a mano o creados con alguna aplicación 
computacional.
CARACTERÍSTICAS 
Son simples y no tienen distracciones visuales tales como color o 
imágenes.
CARACTERÍSTICAS 
Siempre van acompañados de una explicación acerca de las 
zonas e interacciones.
ventajas
VENTAJAS 
Las correcciones son objetivas, basadas en contenidos y 
funcionalidad, no en diseño.
VENTAJAS 
Se reducen los tiempos de trabajo y gastos involucrados en el 
proyecto.
VENTAJAS 
Permite la comunicación fluida entre el equipo de trabajo y el 
cliente.
VENTAJAS 
Como es una estructura simple y enfocada en los contenidos, 
permite al diseñador tener plena libertad al moment...
VENTAJAS 
Permiten visualizar interacciones y flujos.
VENTAJAS 
Permiten identificar problemas que puedan presentarse más 
adelante.
MALAS PRÁCTICAS
MALAS PRÁCTICAS 
Uso de color e imágenes.
MALAS PRÁCTICAS 
Mezcla con interfaz real.
MALAS PRÁCTICAS 
Wireframes muy complejos, mezclando formas y colores.
MALAS PRÁCTICAS 
Wireframes muy simples.
OTROS USOS
MAPA DE DIVS
MAPA DE DIVS
MAPA DE DIVS
HERRAMIENTAS PARA 
DISEÑAR WIREFRAMES
HERRAMIENTAS PARA DISEÑAR WIREFRAMES 
Lápiz y papel.
HERRAMIENTAS PARA DISEÑAR WIREFRAMES 
Lápiz y papel. 
1024 960 800 800 960 1024
HERRAMIENTAS PARA DISEÑAR WIREFRAMES 
Lápiz y papel.
HERRAMIENTAS PARA DISEÑAR WIREFRAMES 
Prototipos en papel: Es ideal para hacer los primeros esbozos del 
funcionamiento de...
HERRAMIENTAS PARA DISEÑAR WIREFRAMES 
https://www.youtube.com/watch?v=GrV2SZuRPv0
HERRAMIENTAS PARA DISEÑAR WIREFRAMES 
Herramientas digitales: Es la manera para crear wireframes 
detallados y de alta cal...
REFERENCAS!
PARA LEER 
INFORMATION ARQUITECTURE FOR DE WORLD WIDE WEB (Morvile & Rosenfield) 
Parte III - Wireframes (Pags. 307 - 313)
PARA VER 
THE ELEMENTS OF THE USER EXPERIENCE (Jesse James Garret) 
Chapter 6 - The Skeleton Plane (Pags. 128-131)
PARA VER 
THE GUIDE TO WIREFRAMING (Chris Bank) 
http://uxpin.com/guide-to-wireframing.html
PARA VER 
http://www.wireframeshowcase.com/ 
https://www.flickr.com/groups/ilovewireframes/ 
http://moobileframes.tumblr.c...
FIN CLASE 02
Próxima SlideShare
Cargando en…5
×

Wireframes, Definiciones.

965 visualizaciones

Publicado el

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

Publicado en: Diseño
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
965
En SlideShare
0
De insertados
0
Número de insertados
6
Acciones
Compartido
0
Descargas
44
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

Wireframes, Definiciones.

  1. 1. WIREFRAMES clase 02 DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2014
  2. 2. INTRODUCCIÓN
  3. 3. PRESENTACIÓN Hola, soy Rodrigo Vera, y bienvenidos al taller de Wireframes.
  4. 4. RODRIGO VERA YERKO PEZZOPANE Diseñador Gráfico Diseñador UX Diseñador UX @rots @ypezzopane
  5. 5. RODRIGO VERA YERKO PEZZOPANE Diseñador Gráfico Diseñador UX Diseñador UX @rots @ypezzopane
  6. 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. 7. REPRESENTACIÓN
  8. 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. 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. 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. 11. REPRESENTACIÓN EN LA AI http://www.nosolousabilidad.com/articulos/diagramacion.htm
  12. 12. QUÉ ES UN WIREFRAME
  13. 13. UN POCO DE HISTORIA…
  14. 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. 15. UN POCO DE HISTORIA… Bocetos Da Vinci 1495 - 1497
  16. 16. UN POCO DE HISTORIA… Bocetos Da Vinci 1495 - 1497
  17. 17. UN POCO DE HISTORIA… Bocetos Da Vinci 1495 - 1497
  18. 18. UN POCO DE HISTORIA… Planos Da Vinci
  19. 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. 20. UN POCO DE HISTORIA… Blueprint
  21. 21. UN POCO DE HISTORIA… Blueprint
  22. 22. UN POCO DE HISTORIA… Blueprint
  23. 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. 24. UN POCO DE HISTORIA… Wireframes 3D
  25. 25. UN POCO DE HISTORIA… Wireframes 3D
  26. 26. LOS WIREFRAMES SON…
  27. 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. 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. 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. 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. 31. LOS WIREFRAMES SON…
  32. 32. LOS WIREFRAMES SON…
  33. 33. LOS WIREFRAMES SON…
  34. 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. 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. 36. REPRESENTACIÓN EN LA AI http://training.ayerviernes.com/ WIREFRAMES
  37. 37. ++ COMUNICACIÓN Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes.
  38. 38. ++ COMUNICACIÓN
  39. 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. 40. TIPOS DE WIREFRAME
  41. 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. 42. ALTA
  43. 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. 44. BAJA
  45. 45. CARACTERÍSTICAS Y VENTAJAS
  46. 46. CARACTERÍSTICAS
  47. 47. CARACTERÍSTICAS Se utilizan en la creación de todas las interfaces digitales (web, móviles, ATM, etc.).
  48. 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. 49. CARACTERÍSTICAS Pueden ser dibujados a mano o creados con alguna aplicación computacional.
  50. 50. CARACTERÍSTICAS Son simples y no tienen distracciones visuales tales como color o imágenes.
  51. 51. CARACTERÍSTICAS Siempre van acompañados de una explicación acerca de las zonas e interacciones.
  52. 52. ventajas
  53. 53. VENTAJAS Las correcciones son objetivas, basadas en contenidos y funcionalidad, no en diseño.
  54. 54. VENTAJAS Se reducen los tiempos de trabajo y gastos involucrados en el proyecto.
  55. 55. VENTAJAS Permite la comunicación fluida entre el equipo de trabajo y el cliente.
  56. 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. 57. VENTAJAS Permiten visualizar interacciones y flujos.
  58. 58. VENTAJAS Permiten identificar problemas que puedan presentarse más adelante.
  59. 59. MALAS PRÁCTICAS
  60. 60. MALAS PRÁCTICAS Uso de color e imágenes.
  61. 61. MALAS PRÁCTICAS Mezcla con interfaz real.
  62. 62. MALAS PRÁCTICAS Wireframes muy complejos, mezclando formas y colores.
  63. 63. MALAS PRÁCTICAS Wireframes muy simples.
  64. 64. OTROS USOS
  65. 65. MAPA DE DIVS
  66. 66. MAPA DE DIVS
  67. 67. MAPA DE DIVS
  68. 68. HERRAMIENTAS PARA DISEÑAR WIREFRAMES
  69. 69. HERRAMIENTAS PARA DISEÑAR WIREFRAMES Lápiz y papel.
  70. 70. HERRAMIENTAS PARA DISEÑAR WIREFRAMES Lápiz y papel. 1024 960 800 800 960 1024
  71. 71. HERRAMIENTAS PARA DISEÑAR WIREFRAMES Lápiz y papel.
  72. 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. 73. HERRAMIENTAS PARA DISEÑAR WIREFRAMES https://www.youtube.com/watch?v=GrV2SZuRPv0
  74. 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. 75. REFERENCAS!
  76. 76. PARA LEER INFORMATION ARQUITECTURE FOR DE WORLD WIDE WEB (Morvile & Rosenfield) Parte III - Wireframes (Pags. 307 - 313)
  77. 77. PARA VER THE ELEMENTS OF THE USER EXPERIENCE (Jesse James Garret) Chapter 6 - The Skeleton Plane (Pags. 128-131)
  78. 78. PARA VER THE GUIDE TO WIREFRAMING (Chris Bank) http://uxpin.com/guide-to-wireframing.html
  79. 79. PARA VER http://www.wireframeshowcase.com/ https://www.flickr.com/groups/ilovewireframes/ http://moobileframes.tumblr.com/
  80. 80. FIN CLASE 02

×