T5.2. Principios de composición

LOGO

Tecnologías Multimedia – Periodismo Online

Profesor: Manuel Gértrudix

Mapa 2/3 Principios de composición

Principios de composición y diseño visual

Consideraciones generales

Comunicación multimodal

Comunicación visual

Técnicas de composición

Color en el diseño web

Reglas y modelos

Estructuras modelo

Diseño de Interfaces

Diseño

Tipología

Tipografía web

Características

Recomendaciones

La comunicación multimedia

VISUAL• Fija

• Movimiento

AUDITIVA• Voz

• Música

• Efectos

INTERACTIVA

• Operaciones

• Itinerarios

TEXTUAL• Texto gráfico

• Texto escrito

¿Cómo producimos comunicación visual?

Lenguaje Alfabeto Sintaxis Comunicación

Comunicación visualCreación de significado con el concurso de

Técnicas visuales de composición

http://ares.cnice.mec.es/infantil

http://www.eveo.com/

¿Qué son las técnicas visuales de composición?

Son un conjunto de estrategias y técnicas que nos permiten construir el mensaje visual y “predecir” cuál será la “reinterpretación” estadísticamente posible del mensaje visual por parte del receptor.

Supone la interacción de pares opuestos e inseparables:

Contenido Forma

Creador Audiencia (Autolector)

Dodo Arslan.it

http://www.arslan.it/

http://www.arslan.it/

¿Cuáles son esas técnicas?

El mensaje visual se construye a través de la definición de varios factores que funcionan conjuntamente: Textura

Forma

Estructura

Módulo

Movimiento

Color…

Frank Gebhard - www.cpeach.de

http://www.cpeach.de/

Textura - sensibilizar

Forma - signo

Estructura y módulo

Elementos de la “sintaxis” visual

1. Polaridad entre Necesidad de Equilibrio – Tensión

2. Nivel semántico: Representación Simbolismo Abstracción

3. Nivel de iconicidad: Grado de figuratividad de la imagen

4. Dinámica del contraste

Abraham Espinosa - www.letca.com

http://www.letca.com/

http://www.letca.com/

Equilibrio y tensión

La necesidad humana de ordenación (horizontal, vertical)

La tensión = recuperar el equilibrio:

nivelación y aguzamiento, preferencia por el angulo inferior izquierdo, atracción y agrupamiento.

Nivel semántico

Representación = imagen fiel

Simbolismo = simplificación unívoca del significado

debe verse, reconocerse, recordarse, reproducirse

Abstracción = simplificación arbitraria

Superficial

Profundo

Dinámica del contraste

La explicación del contrario – compensación

El ojo busca patrones – aguzar el mensaje

Contraste de tonos, colores, contorno, escala

Técnicas de contraste

Equilibrio – Inestabilidad

Simetría – Asimetría

Regularidad – Irregularidad

Simplicidad – Complejidad

Sutileza – Audacia

Agudeza – Difusividad

etc.

Equilibrio

Inestabilidad

Simetría

Asimetría

Regularidad

Irregularidad

Simplicidad

Complejidad

Sutileza

Audacia

Uso del color en el diseño web

Herramientas online para color web

Herramienta en línea de Adobe: http://kuler.adobe.com/

http://kuler.adobe.com/

Modelos de diseño web

Modelo 1Menú en cabecera y contenido anidado debajo

http://www.20minutos.com/

Modelo 2Menú lateral con contenido central

Dietmar Halbauer- www.loftlinx.at

Modelo 3 Pantalla completa

Complejo Creativo- www.iberflor.com

http://www.iberflor.com/

Modelo 4 Composición con varios frames

Catherine Herberstein - www.marcellogiordani.com

http://www.marcellogiordani.com/

Diseño de Interfaces

¿Qué es una Interfaz? La Teoría de los procesos de

interacción persona-ordenador define la interfaz de un sistema interactivo como un dispositivo tecnológico que permite una interacción amigable con dicho sistema a través de modelos de representación de distinto tipo (textual, visual, sonoro, etc.)

Interfaz principal de la web “Same”

Interfaz principal de la web “VeraT”

Tipología de interfaces

PARC User Interface (PUI)

Touchscreen user interface (TUI)

Interfaces 3D

Zooming user interface (ZUI)

Interfaces multimodales

Experiencia más completa y real

Experiencia menos completa y real

Tipología de interfaces

PARC User Interface (PUI)

Touchscreen user interface (TUI)

Interfaces 3D

Tipología de Interfaces (GUI)

Zooming user interface (ZUI)(ej)

Touchscreen user interface (TUI) (ej1) (ej2)

http://www.youtube.com/watch?v=r12eUXJNbl8

http://www.youtube.com/watch?v=RPwaUp4gepU

http://www.youtube.com/watch?v=xC5uEe5OzNQ

http://www.youtube.com/watch?v=xC5uEe5OzNQ

Tipología de Interfaces (GUI)

Interfaces multimodales

GUI Proceso de realización

Procesos que intervienen en el desarrollo de una aplicación compuesta de diferentes interfaces de usuario:

1. Conceptualización: desarrollo de un prototipo de interfaz de usuario.

2. Creación de una línea de diseño: número reducido de pantallas (2 a 3) en las que se definen los elementos gráficos que caracterizarán a la aplicación.

3. Diseño de todas y cada una de las pantallas (interfaces) que componen la aplicación.

4. Programación de efectos visuales (si los hubiera: gif’s animados, Flash, etc.)

5. Programación “cliente”: desarrollo de las interfaces previamente diseñadas.

6. Programación “servidor”: programación de la/s interacción/es prevista/s en la interfaz.

Tipografía Web Reglas básicas

Legibilidad por encima de todo

Usar fuentes sans-serif para mostrar en pantalla

Usar medidas en “ems” e integradas en CSS (nunca píxeles)

Alto contraste letra-fondo

Preferentemente, usar colores seguros para la web

Fuentes “seguras”: Arial, Verdana y Georgia.

No utilizar “cursivas”

Los textos enlazados en azul y subrayados??

Fuentes tipográficas usuales

Nielsen (2006)

LOGO

Tecnologías Multimedia – Periodismo Online

Profesor: Manuel Gértrudix

T5.2. Principios de composición

Documents

Transcript of T5.2. Principios de composición