Guion multimedia e interactivo para una app o una web

1. Guion Interactivo
Mariona Grané. LMI UB.

2. finalidad marco target cliente benchmarking
documentación diseño conceptual planing presupuesto
BRIEFING
diseño informativo
diseño comunicativo UI GUI HCI
flowchart storyboard
DISEÑO
diseño formativo
wireframes
elementos mm interfaz gráfica
programación integración y/o maquetación testeo
PRODUCCIÓN

3. Es una colección de documentos:
diseño conceptual
documentación
esquema de navegación
diagrama de flujo - flowchart
storyboard - wireframes/mockups
EL GUIÓN INTERACTIVO
OBJETIVO:
comunicación eficiente
entre creadores

4. STORYBOARD
&
WIREFRAMES

5. Referencia de la pantalla
Qué se visualizará pantalla (wireframes o mockups)
Qué se escuchará
Qué contenidos textuales o verbales aparecerán
Qué zonas activas hotspots existirán
Qué relaciones de navegación con otras pantallas
Qué interacción permite el sistema al usuario
Observaciones y comentario para el diseño visual
Observaciones y comentario para la programación
ESQUEMA BASE DE UN STORYBOARD

6. REFERENCIA PANTALLA (ID) TÍTULO O NOMBRE
BOCETO GRÁFICO
WIREFRAME
NAVEGACIÓN
entre pantallas,
archivos, documentos,
enlaces internos o externos
INTERACTIVIDAD
Anotaciones para la programación,
sobre la interacción HCI, feedbacks,
reacciones, opciones, …
CONTENIDOS
TEXTOS
SONIDOS
GRÁFICOS
AUDIOVISUALES
OBJETOS INTERACTIVOS
(listado de archivos o anotaciones)
VISUAL
Anotaciones para el
diseño visual del interfaz
ESTRUCTURA BASE DE UN STORYBOARD

8. EL GUIÓN INTERACTIVO
No existe un modelo de guion
adecuado a todos los diseños.
En cada caso es necesario
pensar un diseño a medida.

9. EL GUIÓN INTERACTIVO
Guiones a mano, con bosquejos de pantallas (wireframes), con
diseños visuales cerrados (mockups), prototipos funcionales, …

10. Los wireframes son diseños de baja fidelidad (low fidelity).
Son bocetos centrados en composición y distribución pero
sin los detalles de diseño visual ni estética.
EL GUIÓN INTERACTIVO

11. EL GUIÓN INTERACTIVO
Se usan en diseño de interactivos, apps, webs, …etc

12. Los wireframes son la parte visual de cualquier guion multimedia
y pueden usarse como guion con las anotaciones necesarias.
EL GUIÓN INTERACTIVO

14. Después de un diseño
de baja fidelidad se
p i e n s a e n u n
prototipo, que puede
ser físico (en papel o
cartón), o digital e
interactivo.
Cuando todo funciona
se prepara el diseño
de alta fidelidad o
Mockup.
EL GUIÓN INTERACTIVO

16. A veces se usa un boceto previo al wireframe pero solo
para idear, no para presentar ni probar.
EL GUIÓN INTERACTIVO

17. EL GUIÓN INTERACTIVO
Y un prototipo
puede crearse
antes o después
del diseño visual
de alta fidelidad.

18. WIREFRAME vs MOCKUP

19. WIREFRAME vs MOCKUP

20. EJEMPLOS DE GUIONES MM INTERACTIVOS

21. FDP - Xunta de Galicia

24. Guías formativas - Bankinter

26. Activa Multimedia - Plaza&Janés

31. Karencia- Nou ordre Mundial
Emaf 2006-07

35. Cuina Catalana - EMAF 2002

40. Columna Cervical - Inde

44. Videoconferencia - REAF

47. Learn off - EMAF 2007

50. Walk & Wiki

54. Fuga - EMAF 2001

56. The reconquest 2016

60. Entrenador personal
en forma de App 2016

62. Crea tu cuento - App 2016

64. DiscoveryCat - App 2016

66. GameClass - App 2016

68. Los misterios de Miss X
- App 2016

71. Melmac- EMAF 2011

72. Guió per a un videojoc
Diagrama de fluxe de l’acció i interacció
+
Guió literari

76. obrir guió

77. Acrossport 2018

80. AprendApp 2018

83. Ser Estar 2018

87. enigmaTIC 2019

92. Open Scripts
Open projects for mobile learning
LMI

94. obrir guió
Pantalla
Lorem ipsum dolor

95. Do it Your Path
Tablet

99. App
Esportiva T’EF

100. 1
2
3
4
5
6
7
8

102. Audio-guia com a suport alternatiu i/o
augmentatiu a la informació escrita per
via auditiva.
La utilització de l’audio-guia permetria
superar barreres d’accés a la informació
per a persones amb limitacions visuals
(canal auditiu alternatiu) o auditives
(augmentatiu).
Premeu damunt la imatge per observar
la simulació auditiva.
Font: Elaboració pròpia

103. Guió MICA
Mi Calendario Emocional

107. Guió
shake up

112. Guió
Be watter

117. Guió accio/akio
red social entre profes para compartir apps

122. GUION WEB SIMPLIFICADO

125. GUION APP SIMPLIFICADO

129. WEB WIREFRAMES

137. USER JOURNEY + GUION

140. APP WIREFRAMES

151. FLOWCHART + WIREFRAMES

152. Podemos combinar flowcharts
con wireframes de cada pantalla.

157. RECURSOS PARA PREPARAR NUESTROS GUIONES

158. http://marionagrane.cat/eroo/guio.html
HERRAMIENTAS PARA CREAR GUIONES
Contenidos y herramientas
https://www.pinterest.es/mariona05/ux-wireframes
Ejemplos

159. http://www.balsamiq.com
http://www.justinmind.com
https://www.axure.com/
https://www.mockflow.com/
HERRAMIENTAS PARA CREAR GUIONES
https://www.figma.com/

160. Sketch, material grà
fi
co para a crear guiones
HERRAMIENTAS PARA CREAR GUIONES

162. @mariona_lmi