1. entorns multimedia orientats a la formació CAV UB
Disseny interactiu II
elements en pantalla
Mariona Grané.
Laboratori de Mitjans Interactius. Universitat de Barcelona

2. disseny interactiu
elementos en pantalla
diseño de pantalla
diseño del entorno

3. disseny interactiu
elements en pantalla en un material multimèdia
Menús
Texto en la web
Ventanas flotantes
Imagen fotográfica
Enlaces (links)
Imagen de ilustración
… etc
Símbolos e iconos
Animación
Vídeo
Áudio (música)
Áudio (efectes)
Áudio (llenguatge)
Tipografía
Color
Botones

4. Elementos en pantalla
El texto
La imagen
Imagen fija
En movimiento
Sonido

5. Elementos en pantalla
el texto, escribir para la web
“Lo primero al escribir para Internet es saber escribir…”
Garcia Márquez
· ¿el usuario no lee? = escribir para barrido visual, captar la atención
· el usuario lee, consulta, navega, o ojea, depende de sus objetivos
Claridad Legibilidad
· breve y fàcil, · tipos, estilos, indentación
· simple, preciso y objetivo · contraste
· piramide invertida · tamaños
· titulos y subtítulos · kerning
· resúmenes, tablas, frases clave, …
Visibilidad
· marcar textos o palabras para destacar
· usar listas
· separar la información en párrafos
· justificar

6. Elementos en pantalla
el texto, escribir para la web

7. Elementos en pantalla
la imagen
Tipos de imágenes
Fotografías
Ilustración realista, de caricatura, cómic,…
Mapas geográficos o de conceptos
Esquemas gráficos
Tablas
Iconos
Botones
Tridimensionales
Animaciones
Videos

8. Elementos en pantalla
la imagen
Funciones de la imagen
Estético – motivadora
Explicativa
De refuerzo
Informativa en si misma
Como base análisis
De demarcación de temáticas
De comprensión de procesos
Evaluativa
Navegación
La imagen es el contenido

9. Elementos en pantalla
la imagen fija
Legibilidad (tamaño, contraste, estilos)
Combinación adecuada de colores
Consistencia y coherencia entre imágenes de la pantalla

10. Diseño de la pantalla
la imagen es el contenido
quot;Durant més de 500 anys (data d'aparició de la
impremta), els dissenyadors (impressors i tipògrafs) ens
hem encarregat de generar interfícies llegibles, fàcilment
usables, i, sobretot amb una dimensió gràfica o
tridimensional que faciliti la comunicació entre l'usuari i
el món no visible.quot;
(Royo, 2004)

11. Diseño de la pantalla
la imagen es el contenido infografia
1933 Harry Beck diagrama urbà per a fer el mapa del metro

12. Diseño de la pantalla
la imagen es el contenido infografia
1920 Otto Neurath & Gerd Arntz Isotype
International System of Typographic Picture Education

13. Diseño de la pantalla
la imagen es el contenido infografia
1927, el Comité Especial de la Societat de Nacions
unificació de les senyals de circulació

14. Diseño de la pantalla
la imagen es el contenido infografia
Atlas Geo-Gràfic Mundial de
Herbert Bayer acabat al 1953

15. Diseño de la pantalla
la imagen es el contenido infografia
1974, Manual de normes
gràfiques del Programa de
Millora del Disseny Federal
dels USA que cobreix
aspectes de disseny en
gairebé tots els àmbits:
arquitectura, paisatgisme,
planificació d'espais, i
disseny gràfic
I alhora es va encarregar al
AIGA (American Institute of
Graphic Arts) que
dissenyés un sistema de
símbols referents per al
transport públic nacional que
es va convertir en un sistema
internacional.

16. Diseño de la pantalla
la imagen es el contenido infografia
Infografia en diaris i revistes

17. Elementos en pantalla
la imagen en movimiento
Creación de guiones
Continuidad de estilos
Formatos
Transiciones y ritmos

18. Elementos en pantalla
la imagen en movimiento, tipos y usos
Preguntar, explicar, presentar Mostrar processos o situacions
Science please: http://www.edu365.cat/eso/muds/ciencies/minut_de_ciencia/

19. Elementos en pantalla
la imagen en movimiento
QTVR panoramic

20. Elementos en pantalla
la imagen en movimiento
QTVR de un objeto QTVR panoramico

21. Elementos en pantalla
la imagen en movimiento
Animación de un proceso
Animación 3D
Animación esquemática

22. Elementos en pantalla
la imagen en movimiento

23. Elementos en pantalla
La infografía animada

24. Elementos en pantalla
el sonido
Memorizar, recordar, …
Refuerzo
Aprendizaje auditivo de idiomas
Adecuación del sonido a los objetivos y contenidos
Uso en contenidos, actividades, podcast, ..
http://www.romanicaintercom.com/