Disseny interactiu II

elements en pantalla

entorns multimedia orientats a la formació CAV UB

Mariona Grané. Laboratori de Mitjans Interactius. Universitat de Barcelona

elementos en pantalla

diseño de pantalla

diseño del entorno

disseny interactiu

elements en pantalla en un material multimèdia

Texto en la webImagen fotográficaImagen de ilustraciónSímbolos e iconosAnimaciónVídeoÁudio (música)Áudio (efectes)Áudio (llenguatge)TipografíaColorBotones

MenúsVentanas flotantesEnlaces (links)… etc

disseny interactiu

Elementos en pantalla

El textoLa imagenImagen fijaEn movimientoSonido

Elementos en pantallael 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

Visibilidad· marcar textos o palabras para destacar· usar listas· separar la información en párrafos· justificar

Claridad · breve y fàcil, · simple, preciso y objetivo· piramide invertida· titulos y subtítulos· resúmenes, tablas, frases clave, …

Legibilidad· tipos, estilos, indentación· contraste· tamaños· kerning

Elementos en pantallael texto, escribir para la web

Elementos en pantallala imagen

Tipos de imágenes

FotografíasIlustración realista, de caricatura, cómic,… Mapas geográficos o de conceptosEsquemas gráficosTablasIconosBotonesTridimensionalesAnimacionesVideos

Elementos en pantallala imagen

Funciones de la imagen

Estético – motivadoraExplicativaDe refuerzoInformativa en si mismaComo base análisisDe demarcación de temáticasDe comprensión de procesosEvaluativaNavegación

La imagen es el contenido

Elementos en pantallala imagen fija

Legibilidad (tamaño, contraste, estilos)Combinación adecuada de coloresConsistencia y coherencia entre imágenes de la pantalla

Diseño de la pantallala imagen es el contenido

"Durant més de 500 anys (data d'aparició de laimpremta), els dissenyadors (impressors i tipògrafs) enshem encarregat de generar interfícies llegibles, fàcilmentusables, i, sobretot amb una dimensió gràfica otridimensional que faciliti la comunicació entre l'usuari iel món no visible."

(Royo, 2004)

Diseño de la pantallala imagen es el contenido infografia

1933 Harry Beck diagrama urbà per a fer el mapa del metro

Diseño de la pantallala imagen es el contenido infografia

1920 Otto Neurath & Gerd Arntz IsotypeInternational System of Typographic Picture Education

Diseño de la pantallala imagen es el contenido infografia

1927, el Comité Especial de la Societat de Nacionsunificació de les senyals de circulació

Diseño de la pantallala imagen es el contenido infografia

Atlas Geo-Gràfic Mundial deHerbert Bayer acabat al 1953

Diseño de la pantallala imagen es el contenido infografia

1974, Manual de normesgràfiques del Programa deMillora del Disseny Federaldels USA que cobreixaspectes de disseny engairebé tots els àmbits:arquitectura, paisatgisme,planificació d'espais, idisseny gràfic

I alhora es va encarregar alAIGA (American Institute ofGraphic Arts) quedissenyés un sistema desímbols referents per altransport públic nacional quees va convertir en un sistemainternacional.

Diseño de la pantallala imagen es el contenido infografia

Infografia en diaris i revistes

Elementos en pantallala imagen en movimiento

Creación de guiones

Continuidad de estilos

Formatos

Transiciones y ritmos

Elementos en pantallala 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/

Elementos en pantallala imagen en movimiento

QTVR panoramic

Elementos en pantallala imagen en movimiento

QTVR de un objeto QTVR panoramico

Elementos en pantallala imagen en movimiento

Animación de un proceso

Animación 3D

Animación esquemática

Elementos en pantallala imagen en movimiento

Elementos en pantalla

La infografía animada

Elementos en pantallael 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/