Disseny comunicatiu elements

Disseny comunicatiu
elements
entorns multimedia orientats a la formació
CAV UB
disseny interactiu
elementos en pantalla
diseño de pantalla
diseño del entorno
disseny interactiu
elements en pantalla en un material multimèdia
Texto en la web
Imagen fotográfica
Imagen de ilustración
Símbolos e iconos
Animación
Vídeo
Áudio (música)
Áudio (efectes)
Áudio (llenguatge)
Tipografía
Color
Botones
Menús
Ventanas flotantes
Enlaces (links)
… etc
disseny interactiu
disseny de la interfície
Distribució visual
Senzillesa visual
Percepcions visuals
Atenció visual
Models i referents mentals
Organització dels continguts
Estètica
Legibilitat
Color
Interacció a la Interficie
Usabilitat en la interacció
disseny interactiu
disseny de l’entorn web
Consistència
Coherencia
Repeticions
Dreceres
Ergonomia
Economia
Narració
Sistemes i estructures de
navegació:
Estructura lineal
Estructura jeràrquica
Estructura de xarxa
Hipertext-Hipermedia
Desestructuració
Elementos en pantalla
El texto
La imagen
Imagen fija
En movimiento
Sonido
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
· brevedad, sencillez y claridad, precisión
· piramide invertida
· no usar lenguaje complejo ni barbarismos
Escribir pensando en visual
· titulos y subtítulos
· resúmenes, tablas, frases clave, …
· marcar textos o palabras para destacar
· usar listas
· separar la información en párrafos, en pantallas
Elementos en pantalla
el texto, escribir para la web
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
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
La imagen es el contenido
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
Elementos en pantalla
la imagen fija
http://www.eendar.com
Elementos en pantalla
la imagen fija
http://www. lovelydesign.com
Elementos en pantalla
la imagen fija
http://www.andyfouds.co.uk
Elementos en pantalla
la imagen fija
http://www.eyad.com
Diseño de la pantalla
la imagen
http://www.thecooker.com
Diseño de la pantalla
la imagen es el contenido
"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."
(Royo, 2004)
Diseño de la pantalla
la imagen es el contenido
infografia
1933 Harry Beck diagrama urbà per a fer el mapa del metro
Diseño de la pantalla
la imagen es el contenido
1920 Otto Neurath Isotype
International System of Typographic Picture Education
infografia
Diseño de la pantalla
la imagen es el contenido
1927, el Comité Especial de la Societat de Nacions
unificació de les senyals de circulació
infografia
Diseño de la pantalla
la imagen es el contenido
infografia
Atlas Geo-Gràfic Mundial de
Herbert Bayer acabat al 1953
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.
Diseño de la pantalla
la imagen es el contenido
Infografia en diaris i revistes
infografia
Elementos en pantalla
la imagen en movimiento
Creación de guiones
Continuidad de estilos
Formatos
Transiciones y ritmos
Elementos en pantalla
la imagen en movimiento, tipos y usos
QTVR panoramic
Elementos en pantalla
la imagen en movimiento, tipos y usos
Video 1, explicar de viva voz
Video 2, mostrar para entender
Science please: http://www.edu365.cat/eso/muds/ciencies/minut_de_ciencia/
Elementos en pantalla
la imagen en movimiento, tipos y usos
QTVR de un objeto
QTVR panoramico
Elementos en pantalla
la imagen en movimiento, tipos y usos
QTVR panoramic
http://www.lejourduseigneur.com/sacrecoeur/hd/visitesc.html
Elementos en pantalla
la imagen en movimiento, tipos y usos
QTVR con efectos
Elementos en pantalla
la imagen en movimiento, tipos y usos
animacion de un proceso
Animaciones
3d
http://www.4dvirtual.com
Elementos en pantalla
La infografia animada
http://mapsofwar.com/ind/history-of-religion.html
Elementos en pantalla
abuseweb.net/
Elementos en pantalla
el sonido
Escoger músicas y sonidos
Utilizarlos según objetivos
Discernir ante la necesidad y la ilustración
Adecuación del sonido al estilo y los contenidos
http://www.14bits.com.br/index2.htm
http://www.tesisweb.com.br/site.htm
Sonido como contenido
La usabilitat en el disseny interactiu
Un esquema:
Garret, J.J. (2000). Los elementos de la experiencia del usuario.
http://www.jjg.net/elements/translations/elements_es.pdf
Un article:
Hassan, Y; Fernández, FJ; M., & Iazza, G. (2004). Diseño web
centrado en el usuario: Usabilidad y arquitectura de la información.
http://www.hipertext.net/web/pag206.htm
Un blog:
http://usalo.es/
Una revista:
Faz, revista de diseño de interacción.
http://revistafaz.org/
Un llibre:
Krug, S. (2006). No me hagas pensar: Una aproximación a la
usabilidad en la web. Madrid: Prentice Hall.