PROTOTIPADO
DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2015
WIREFRAMES Y MOCKUPS
CLASE 01
INTRODUCCIÓN
PRESENTACIÓN
Hola, soy Rodrigo Vera, y bienvenidos
al taller de prototipos
¿Diseñadores?
¿Periodistas?
¿Ingenieros?
¿Bibliotecarios?
¿UX?
USER EXPERIENCE
Es un conjunto de factores, cuyo resultado es la
creación de un producto o servicio.

No depende sólo de factores de diseñ...
Para hacer UX hay que entender el producto, la
situación, el contexto y los hábitos de uso de un
determinado grupo de pers...
https://www.youtube.com/watch?v=m9R9z7P1eME
USER EXPERIENCE
https://vimeo.com/19131028I<3 UX DESIGN (PARTE I)
UX DESIGN
https://vimeo.com/19131028
https://vimeo.com/21691333I<3 UX DESIGN (PARTE II)
UX DESIGN
USER EXPERIENCE
USER EXPERIENCE
USER EXPERIENCE
USER EXPERIENCE
USER EXPERIENCE
U S E R
E X P E R I E N C E
( U X )
E T H O S
S E R V I C I O
I N T E R FA Z
USER EXPERIENCE
ETHOS: La forma común de vida...
U S E R E X P E R I E N C E
U S A B I L I D A D
D I S E Ñ O
A C C E S I B I L I D A D
M A R K E T I N G
O P T I M I Z A C ...
Henry Dreyfuss, autor del libro Designing for people (1955) popularizó la concepción del diseño
como proceso a partir de s...
USER EXPERIENCE
USER EXPERIENCE
INTERACCIÓN HUMANO
COMPUTADOR (HCI)
INTERACCIÓN HUMANO COMPUTADOR (HCI)
Es la disciplina que estudia el intercambio de
información mediante software entre las...
INTERACCIÓN HUMANO COMPUTADOR (HCI)
Se encarga del diseño, evaluación e implementación
de los aparatos tecnológicos intera...
Lo primero y principal es la persona, el usuario

que utiliza el sistema.
INTERACCIÓN HUMANO COMPUTADOR (HCI)
El buen diseño ayuda a la gente a hacer

cosas que nos importan.
INTERACCIÓN HUMANO COMPUTADOR (HCI)
El buen diseño ayuda a la gente a hacer

cosas que nos importan.
INTERACCIÓN HUMANO COMPUTADOR (HCI)
El buen diseño ayuda a la gente a hacer

cosas que nos importan.
INTERACCIÓN HUMANO COMPUTADOR (HCI)
El buen diseño ayuda a la gente a hacer

cosas que nos importan.
INTERACCIÓN HUMANO COMPUTADOR (HCI)
El mal diseño es frustrante.
INTERACCIÓN HUMANO COMPUTADOR (HCI)
El mal diseño es frustrante e incluso cuesta vidas.
INTERACCIÓN HUMANO COMPUTADOR (HCI)
El mal diseño es frustrante e incluso cuesta vidas.
INTERACCIÓN HUMANO COMPUTADOR (HCI)
…e incluso cuesta vidas.
INTERACCIÓN HUMANO COMPUTADOR (HCI)
A veces, las mejores interfaces
se convierten en invisibles
para nosotros, cuando
pasamos de manipular la
interfaz, a real...
INTERACCIÓN HUMANO COMPUTADOR (HCI)
INTERACCIÓN HUMANO COMPUTADOR (HCI)
7 PRINCIPIOS DEL
DISEÑO UNIVERSAL
7 PRINCIPIOS DEL DISEÑO UNIVERSAL
1. Igualdad de uso
El diseño debe ser fácil de usar y adecuado para todas las personas
i...
1. Igualdad de uso
El diseño debe ser fácil de usar y adecuado para todas las personas
independientemente de sus capacidad...
2. Flexibilidad
El diseño debe poder adecuarse a un amplio rango de preferencias

y habilidades individuales.
7 PRINCIPIOS...
2. Flexibilidad
El diseño debe poder adecuarse a un amplio rango de preferencias

y habilidades individuales.
7 PRINCIPIOS...
3. Simple e intuitivo
El diseño debe ser fácil de entender independientemente de la experiencia, los
conocimientos, las ha...
3. Simple e intuitivo
El diseño debe ser fácil de entender independientemente de la experiencia, los
conocimientos, las ha...
4. Información fácil de percibir
El diseño comunica de manera eficaz la información necesaria para el usuario.
7 PRINCIPIOS...
4. Información fácil de percibir
El diseño comunica de manera eficaz la información necesaria para el usuario.
7 PRINCIPIOS...
5. Tolerante a errores
El diseño debe minimizar las acciones accidentales o fortuitas que

puedan tener consecuencias fata...
5. Tolerante a errores
El diseño debe minimizar las acciones accidentales o fortuitas que

puedan tener consecuencias fata...
6. Escaso esfuerzo
El diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible.
7 PRINCIPIOS DEL DISEÑO UNI...
6. Escaso esfuerzo
El diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible.
7 PRINCIPIOS DEL DISEÑO UNI...
7. Dimensiones apropiadas
Los tamaños y espacios deben ser apropiados para el alcance, manipulación y uso
por parte del us...
7. Dimensiones apropiadas
Los tamaños y espacios deben ser apropiados para el alcance, manipulación y uso
por parte del us...
PROTOTIPOS
PROTOTIPO
Un prototipo es un ejemplar o primer molde en que
se fabrica una figura u otra cosa.
PROTOTIPO
Un prototipo también se puede referir a cualquier
tipo de máquina en pruebas, o un objeto diseñado
para una demo...
PROTOTIPO
Un prototipo o prototipado puede ser un modelo del
ciclo de vida del software, tal como el desarrollo en
espiral...
TIPOS DE
PROTOTIPOS
DIGITALES
WIREFRAME
WIREFRAME
WIREFLOW
WIREFRAME MOCKUP
https://www.youtube.com/watch?v=zNoBmjg-NnQ
QUÉ ES UN WIREFRAME
UN POCO DE
HISTORIA
Bocetos Da Vinci
UN POCO DE HISTORIA…
Planos Da Vinci
UN POCO DE HISTORIA…
Blueprint
UN POCO DE HISTORIA…
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
elementos...
LOS WIREFRAMES SON…
LOSWIREFRAMESSON…
LOSWIREFRAMESSON…
RELACIÓN CON AI
El Wireframe es el paso intermedio entre Arquitectura de
Información y Diseño, pasa de la “mentalidad estr...
COMUNICACIÓN
Herramienta de comunicación y discusión entre arquitectos de
información, programadores, diseñadores y client...
ELEMENTOS
ESENCIALES
ELEMENTOS ESENCIALES
Un Wireframe debería, al menos, contar con elementos de:
•navegación
•información
•interacción
•apoyo.
Elementos de navegación: menúes, breadcrumbs e hipervínculos.
Estas en : Inicio / Lorem Ipsum / Lorem Ipsum / detalle
TabT...
Elementos de información: contenidos de texto, imágenes,
audio y video.
Sed vestibulum, ipsum lacinia
vulputate vulputate,...
Elementos de interacción: botones, formularios, tooltips, sliders, etc.
Done or Cancel
Error message goes here.
Error mess...
Elementos de apoyo: Explicaciones e instrucciones.
ELEMENTOS ESENCIALES
FUNDAMENTACIÓN Y ENTREGABLES
Tiene como objetivo explicar, de forma detallada, cada
decisión de diseño dentro de cada wire...
WIREFRAME = DISEÑO/
WIREFRAMES = DISEÑO/
Un Wireframe no es el aspecto final del
sitio, sino una mera representación
gráfica de su contenido.
WIREFRAMES = DISEÑO/
WIREFRAMES = DISEÑO/
WIREFRAMES = DISEÑO/
UTILIDAD
Ofrece una perspectiva basada
principalmente en la arquitectura
del contenido
Ayudan a que el proyecto no se
retr...
CARACTERÍSTICAS
DE LOS WIREFRAMES
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 Fiambres ...
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 DEL
PROTOTIPADO
VENTAJAS
Las correcciones son objetivas, basadas en contenidos y
funcionalidad, no en diseño.
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 momento de diseña...
Permiten visualizar interacciones y flujos.
VENTAJAS
Permiten identificar problemas que puedan
presentarse más adelante.
VENTAJAS
MALAS PRÁCTICAS
MALAS PRÁCTICAS
Uso de color e imágenes.
Mezcla con interfaz real.
MALAS PRÁCTICAS
Wireframes muy complejos, mezclando formas y colores.
MALAS PRÁCTICAS
Wireframes muy simples.
MALAS PRÁCTICAS
HERRAMIENTAS PARA
DISEÑAR WIREFRAMES
Lápiz y papel.
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
1024 960 800 1024960800
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
Lápiz y papel.
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
Lápiz y papel.
Prototipos en papel: Es ideal para hacer los primeros esbozos del funcionamiento de
una futura aplicación constituyéndose ...
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
https://www.youtube.com/watch?v=GrV2SZuRPv0
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
Herramientas digitales: Es la manera para crear wireframes
detallados y de alta calid...
10 CONSEJOS
ESENCIALES
10 CONSEJOS ESENCIALES
• Simple sobre todas las cosas
• Usa la mayor cantidad de contenido real posible
• Siempre trabaja ...
CÓMO CREAR UN
WIREFRAME
CONSIDERACIONES
CONSIDERACIONES DEL PROYECTO
Los antecedentes del proyecto son claves para
la definición y diseño de los wireframes. Es
imp...
CONSIDERACIONES DEL PROYECTO
Consideraciones del Proyecto: Brief, Estrategia, Benchmark,
Investigación de Usuario y AI.
BR...
PASAR DE LA AI AL WF
EL PROCESO
Debemos definir que es lo mas importante que queremos
representar en nuestra página.
INTERPRETACIÓN DEL MAPA DE CONTENIDO
Es importante saber leer y distinguir distintas profundidades de
contenido en un mapa...
Es importante saber leer y distinguir distintas profundidades de
contenido en un mapa de contenidos para poder traspasar a...
Comúnmente se diseñan los wireframes para las pantallas más
importantes, complejas y recurrentes a lo largo de la interfaz...
DEFINICIÓN DE ÁREAS
La definición de áreas es el primer paso para la creación de un
wireframe. Acá, se jerarquizan las área...
JERARQUIZACIÓN DE CONTENIDOS
Una vez definida las áreas, debemos ordenar y jerarquizar los
contenidos de éstos, donde es mu...
ALGUNOS PRINCIPIOS BÁSICOS DE DISEÑO
• Similitud entre elementos.

• Realce de elementos.

• Preferir siempre lo simple. 
...
CONSIDERACIONES DEL
DISEÑO DE INTERACCIÓN
PARTITURAS DE INTERACCIÓN
Una vez creado el mapa de contenidos podemos
representar, gráficamente, las interacciones complej...
PARTITURAS DE INTERACCIÓN
Acá, se pueden definir el número de páginas y elementos de la interfaz
para un flujo de interacció...
PARTITURAS DE INTERACCIÓN
Acá, se pueden definir el número de páginas y elementos de la interfaz
para un flujo de interacció...
ACTIVIDAD
ACTIVIDAD
La señora Juana tiene un negocio de abarrotes, y resulta que
le hablaron de internet y quiere que su comunidad q...
ACTIVIDAD
INICIO
No Perecibles Fiambres y QuesosJugos y Bebidas
Nivel Auxiliar
Marca
Ubicación
Primer Nivel
Verduras Artículos de As...
ACTIVIDAD
• Reunirse en grupos.
• Crear supuestos de entrevistas, benchmark, etc.

• Discutir estrategia.

• Crear un wire...
• Exponer supuestos

• Exponer estrategia

• Presentar wireframe
ACTIVIDAD PARTE 2
• Evaluar trabajos de compañeros

• Comparar trabajo propio y los revisados

• Listar comparativo (pseudo benchmark)

• Cr...
FIN CLASE
Próxima SlideShare
Cargando en…5
×

Taller de Prototipos #DAIEU15 - Clase 01

454 visualizaciones

Publicado el

Primera clase del "Taller de Prototipos" del "Diplomado de Arquitectura de Información y Experiencia de Usuario" 2015 en Universidad Central.

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

Sin descargas
Visualizaciones
Visualizaciones totales
454
En SlideShare
0
De insertados
0
Número de insertados
5
Acciones
Compartido
0
Descargas
22
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

Taller de Prototipos #DAIEU15 - Clase 01

  1. 1. PROTOTIPADO DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2015 WIREFRAMES Y MOCKUPS CLASE 01
  2. 2. INTRODUCCIÓN
  3. 3. PRESENTACIÓN Hola, soy Rodrigo Vera, y bienvenidos al taller de prototipos
  4. 4. ¿Diseñadores? ¿Periodistas? ¿Ingenieros? ¿Bibliotecarios?
  5. 5. ¿UX?
  6. 6. USER EXPERIENCE
  7. 7. Es un conjunto de factores, cuyo resultado es la creación de un producto o servicio. No depende sólo de factores de diseño, sino también de las emociones y sentimientos que genera una marca en los usuarios. USER EXPERIENCE
  8. 8. Para hacer UX hay que entender el producto, la situación, el contexto y los hábitos de uso de un determinado grupo de personas. USER EXPERIENCE
  9. 9. https://www.youtube.com/watch?v=m9R9z7P1eME USER EXPERIENCE
  10. 10. https://vimeo.com/19131028I<3 UX DESIGN (PARTE I) UX DESIGN https://vimeo.com/19131028
  11. 11. https://vimeo.com/21691333I<3 UX DESIGN (PARTE II) UX DESIGN
  12. 12. USER EXPERIENCE
  13. 13. USER EXPERIENCE
  14. 14. USER EXPERIENCE
  15. 15. USER EXPERIENCE
  16. 16. USER EXPERIENCE
  17. 17. U S E R E X P E R I E N C E ( U X ) E T H O S S E R V I C I O I N T E R FA Z USER EXPERIENCE ETHOS: La forma común de vida o de comportamiento que adopta un grupo de individuos que pertenecen a una misma sociedad
  18. 18. U S E R E X P E R I E N C E U S A B I L I D A D D I S E Ñ O A C C E S I B I L I D A D M A R K E T I N G O P T I M I Z A C I Ó N E R G O N O M Í A H C I O P E R A C I Ó N USER EXPERIENCE
  19. 19. Henry Dreyfuss, autor del libro Designing for people (1955) popularizó la concepción del diseño como proceso a partir de sus diseños de teléfonos de la serie 500 para Bell Telephones. Este diseñador industrial, pionero del diseño centrado en el usuario, estudió cómo se construían los teléfonos, cómo se percibían y eran utilizados por las personas. Sus conclusiones fueron aplicadas a un nuevo diseño donde se corregían aspectos como la forma, el tamaño, las proporciones o el color http://www.nosolousabilidad.com/manual/3.htm DISEÑO CENTRADO EN EL USUARIO
  20. 20. USER EXPERIENCE
  21. 21. USER EXPERIENCE
  22. 22. INTERACCIÓN HUMANO COMPUTADOR (HCI)
  23. 23. INTERACCIÓN HUMANO COMPUTADOR (HCI) Es la disciplina que estudia el intercambio de información mediante software entre las personas y las computadoras.
  24. 24. INTERACCIÓN HUMANO COMPUTADOR (HCI) Se encarga del diseño, evaluación e implementación de los aparatos tecnológicos interactivos con el objetivo de que el intercambio sea más eficiente: minimizar errores, incrementar la satisfacción, disminuir la frustración y, en definitiva, hacer más productivas las tareas que rodean a las personas y los computadores.
  25. 25. Lo primero y principal es la persona, el usuario que utiliza el sistema. INTERACCIÓN HUMANO COMPUTADOR (HCI)
  26. 26. El buen diseño ayuda a la gente a hacer cosas que nos importan. INTERACCIÓN HUMANO COMPUTADOR (HCI)
  27. 27. El buen diseño ayuda a la gente a hacer cosas que nos importan. INTERACCIÓN HUMANO COMPUTADOR (HCI)
  28. 28. El buen diseño ayuda a la gente a hacer cosas que nos importan. INTERACCIÓN HUMANO COMPUTADOR (HCI)
  29. 29. El buen diseño ayuda a la gente a hacer cosas que nos importan. INTERACCIÓN HUMANO COMPUTADOR (HCI)
  30. 30. El mal diseño es frustrante. INTERACCIÓN HUMANO COMPUTADOR (HCI)
  31. 31. El mal diseño es frustrante e incluso cuesta vidas. INTERACCIÓN HUMANO COMPUTADOR (HCI)
  32. 32. El mal diseño es frustrante e incluso cuesta vidas. INTERACCIÓN HUMANO COMPUTADOR (HCI)
  33. 33. …e incluso cuesta vidas. INTERACCIÓN HUMANO COMPUTADOR (HCI)
  34. 34. A veces, las mejores interfaces se convierten en invisibles para nosotros, cuando pasamos de manipular la interfaz, a realizar tareas. INTERACCIÓN HUMANO COMPUTADOR (HCI)
  35. 35. INTERACCIÓN HUMANO COMPUTADOR (HCI)
  36. 36. INTERACCIÓN HUMANO COMPUTADOR (HCI)
  37. 37. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  38. 38. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 1. Igualdad de uso El diseño debe ser fácil de usar y adecuado para todas las personas independientemente de sus capacidades y habilidades.
  39. 39. 1. Igualdad de uso El diseño debe ser fácil de usar y adecuado para todas las personas independientemente de sus capacidades y habilidades. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  40. 40. 2. Flexibilidad El diseño debe poder adecuarse a un amplio rango de preferencias y habilidades individuales. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  41. 41. 2. Flexibilidad El diseño debe poder adecuarse a un amplio rango de preferencias y habilidades individuales. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  42. 42. 3. Simple e intuitivo El diseño debe ser fácil de entender independientemente de la experiencia, los conocimientos, las habilidades o el nivel del usuario. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  43. 43. 3. Simple e intuitivo El diseño debe ser fácil de entender independientemente de la experiencia, los conocimientos, las habilidades o el nivel del usuario. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  44. 44. 4. Información fácil de percibir El diseño comunica de manera eficaz la información necesaria para el usuario. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  45. 45. 4. Información fácil de percibir El diseño comunica de manera eficaz la información necesaria para el usuario. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  46. 46. 5. Tolerante a errores El diseño debe minimizar las acciones accidentales o fortuitas que puedan tener consecuencias fatales o no deseadas. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  47. 47. 5. Tolerante a errores El diseño debe minimizar las acciones accidentales o fortuitas que puedan tener consecuencias fatales o no deseadas. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  48. 48. 6. Escaso esfuerzo El diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  49. 49. 6. Escaso esfuerzo El diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  50. 50. 7. Dimensiones apropiadas Los tamaños y espacios deben ser apropiados para el alcance, manipulación y uso por parte del usuario, independientemente de su tamaño, posición, y movilidad. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  51. 51. 7. Dimensiones apropiadas Los tamaños y espacios deben ser apropiados para el alcance, manipulación y uso por parte del usuario, independientemente de su tamaño, posición, y movilidad. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  52. 52. PROTOTIPOS
  53. 53. PROTOTIPO Un prototipo es un ejemplar o primer molde en que se fabrica una figura u otra cosa.
  54. 54. PROTOTIPO Un prototipo también se puede referir a cualquier tipo de máquina en pruebas, o un objeto diseñado para una demostración de cualquier tipo.
  55. 55. PROTOTIPO Un prototipo o prototipado puede ser un modelo del ciclo de vida del software, tal como el desarrollo en espiral o el desarrollo en cascada.
  56. 56. TIPOS DE PROTOTIPOS DIGITALES
  57. 57. WIREFRAME
  58. 58. WIREFRAME
  59. 59. WIREFLOW
  60. 60. WIREFRAME MOCKUP https://www.youtube.com/watch?v=zNoBmjg-NnQ
  61. 61. QUÉ ES UN WIREFRAME
  62. 62. UN POCO DE HISTORIA
  63. 63. Bocetos Da Vinci UN POCO DE HISTORIA…
  64. 64. Planos Da Vinci UN POCO DE HISTORIA…
  65. 65. Blueprint UN POCO DE HISTORIA…
  66. 66. UN POCO DE HISTORIA… Wireframes 3D
  67. 67. LOS WIREFRAMES SON
  68. 68. LOS WIREFRAMES SON… En interfaces digitales, un wireframe es una representación esquemática de una pantalla, sin elementos gráficos, que muestran contenido jerarquizado y comportamiento de las páginas.
  69. 69. LOS WIREFRAMES SON…
  70. 70. LOSWIREFRAMESSON…
  71. 71. LOSWIREFRAMESSON…
  72. 72. RELACIÓN CON AI 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. ESTRATEGIA AI UI DESARROLLLOWIREFRAMES
  73. 73. COMUNICACIÓN Herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes.
  74. 74. ELEMENTOS ESENCIALES
  75. 75. ELEMENTOS ESENCIALES Un Wireframe debería, al menos, contar con elementos de: •navegación •información •interacción •apoyo.
  76. 76. Elementos de navegación: menúes, breadcrumbs e hipervínculos. Estas en : Inicio / Lorem Ipsum / Lorem Ipsum / detalle TabTabTabTabTab Nulla facilisi. Nullam quis turpis sem, ut egestas lectus. ELEMENTOS ESENCIALES
  77. 77. 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 ELEMENTOS ESENCIALES
  78. 78. Elementos de interacción: botones, formularios, tooltips, sliders, etc. Done or Cancel Error message goes here. Error message goes here.Message goes here. Message goes here.Message goes here. Message goes here. Comentar ELEMENTOS ESENCIALES
  79. 79. Elementos de apoyo: Explicaciones e instrucciones. ELEMENTOS ESENCIALES
  80. 80. FUNDAMENTACIÓN Y ENTREGABLES Tiene como objetivo explicar, de forma detallada, cada decisión de diseño dentro de cada wireframe. Carrier 12:00 PM f ConnectPara participar debes iniciar Sesión Comunidad LG Mobile ComparteComunidad LG Mobile Copyright 2010 LG ELECTRONICS. TODOS LOS DERECHOS RESERVADOS 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.
  81. 81. WIREFRAME = DISEÑO/
  82. 82. WIREFRAMES = DISEÑO/ Un Wireframe no es el aspecto final del sitio, sino una mera representación gráfica de su contenido.
  83. 83. WIREFRAMES = DISEÑO/
  84. 84. WIREFRAMES = DISEÑO/
  85. 85. WIREFRAMES = DISEÑO/
  86. 86. 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
  87. 87. CARACTERÍSTICAS DE LOS WIREFRAMES
  88. 88. CARACTERÍSTICAS Se utilizan en la creación de todas las interfaces digitales (web, móviles, ATM, etc.).
  89. 89. 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 Doña Juana ContactoLogin/Registro Sociabilizar en Redes Imprimir Comentar Agregar a Favoritos Descarga PDF Funcionalidades Generales
  90. 90. CARACTERÍSTICAS Pueden ser dibujados a mano o creados con alguna aplicación computacional.
  91. 91. CARACTERÍSTICAS Son simples y no tienen distracciones visuales tales como color o imágenes.
  92. 92. CARACTERÍSTICAS Siempre van acompañados de una explicación acerca de las zonas e interacciones.
  93. 93. VENTAJAS DEL PROTOTIPADO
  94. 94. VENTAJAS Las correcciones son objetivas, basadas en contenidos y funcionalidad, no en diseño.
  95. 95. Se reducen los tiempos de trabajo y gastos involucrados en el proyecto. VENTAJAS
  96. 96. Permite la comunicación fluida entre el equipo de trabajo y el cliente. VENTAJAS
  97. 97. Como es una estructura simple y enfocada en los contenidos, permite al diseñador tener plena libertad al momento de diseñar la interfaz. VENTAJAS
  98. 98. Permiten visualizar interacciones y flujos. VENTAJAS
  99. 99. Permiten identificar problemas que puedan presentarse más adelante. VENTAJAS
  100. 100. MALAS PRÁCTICAS
  101. 101. MALAS PRÁCTICAS Uso de color e imágenes.
  102. 102. Mezcla con interfaz real. MALAS PRÁCTICAS
  103. 103. Wireframes muy complejos, mezclando formas y colores. MALAS PRÁCTICAS
  104. 104. Wireframes muy simples. MALAS PRÁCTICAS
  105. 105. HERRAMIENTAS PARA DISEÑAR WIREFRAMES
  106. 106. Lápiz y papel. HERRAMIENTAS PARA DISEÑAR WIREFRAMES
  107. 107. 1024 960 800 1024960800 HERRAMIENTAS PARA DISEÑAR WIREFRAMES Lápiz y papel.
  108. 108. HERRAMIENTAS PARA DISEÑAR WIREFRAMES Lápiz y papel.
  109. 109. 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. HERRAMIENTAS PARA DISEÑAR WIREFRAMES
  110. 110. HERRAMIENTAS PARA DISEÑAR WIREFRAMES https://www.youtube.com/watch?v=GrV2SZuRPv0
  111. 111. HERRAMIENTAS PARA DISEÑAR WIREFRAMES
  112. 112. HERRAMIENTAS PARA DISEÑAR WIREFRAMES Herramientas digitales: Es la manera para crear wireframes detallados y de alta calidad. Omnigraffle Visio Axure Balsamiq Fireworks Keynote Apliaciones escritorio Apliaciones web Prototyper Hotgloo iplotz Balsamiq Cacoo Invision Marvelapp
  113. 113. 10 CONSEJOS ESENCIALES
  114. 114. 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
  115. 115. CÓMO CREAR UN WIREFRAME
  116. 116. CONSIDERACIONES
  117. 117. CONSIDERACIONES DEL PROYECTO 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.
  118. 118. CONSIDERACIONES DEL PROYECTO Consideraciones del Proyecto: Brief, Estrategia, Benchmark, Investigación de Usuario y AI. BRIEF ESTRATEGIA BENCH INVESTIGA CIÓN USUARIOS AI WIREFRAMES
  119. 119. PASAR DE LA AI AL WF
  120. 120. EL PROCESO Debemos definir que es lo mas importante que queremos representar en nuestra página.
  121. 121. 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 Perecibles Fiambres y QuesosJugos y Bebidas Nivel Auxiliar Marca Ubicación Primer Nivel Verduras Artículos de Aseo Doña Juana Contacto 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 Preguntas Frecuentes
  122. 122. 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 Doña Juana ContactoLogin/Registro Sociabilizar en Redes Imprimir Comentar Agregar a Favoritos Descarga PDF Funcionalidades Generales INTERPRETACIÓN DEL MAPA DE CONTENIDO
  123. 123. 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 Doña Juana ContactoLogin/Registro Sociabilizar en Redes Imprimir Comentar Agregar a Favoritos Descarga PDF Funcionalidades Generales INTERPRETACIÓN DEL MAPA DE CONTENIDO
  124. 124. 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
  125. 125. 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.
  126. 126. ALGUNOS PRINCIPIOS BÁSICOS DE DISEÑO • Similitud entre elementos. • 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 al usuario. • Reducir la complejidad de las tareas. • Diseñar a prueba de errores.
  127. 127. CONSIDERACIONES DEL DISEÑO DE INTERACCIÓN
  128. 128. PARTITURAS 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.
  129. 129. 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.
  130. 130. 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.
  131. 131. ACTIVIDAD
  132. 132. 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
  133. 133. ACTIVIDAD
  134. 134. INICIO No Perecibles Fiambres y QuesosJugos y Bebidas Nivel Auxiliar Marca Ubicación Primer Nivel Verduras Artículos de Aseo Doña Juana Contacto 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 Preguntas Frecuentes ACTIVIDAD
  135. 135. ACTIVIDAD • Reunirse en grupos. • Crear supuestos de entrevistas, benchmark, etc. • Discutir estrategia. • Crear un wireframe.
  136. 136. • Exponer supuestos • Exponer estrategia • Presentar wireframe ACTIVIDAD PARTE 2
  137. 137. • Evaluar trabajos de compañeros • Comparar trabajo propio y los revisados • Listar comparativo (pseudo benchmark) • Crear en drive carpeta del grupo (con los apellidos) • Subir a drive registro propio de wireframes (fotos) • Subir a drive supuestos y comparativo (texto) ACTIVIDAD PARTE 3
  138. 138. FIN CLASE

×