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

Reglas y modelos

Diseño de Interfaces

Tipografía web

Comunicación multimodal

Estructuras modelo

Diseño

Características

Comunicación visual

Tipología

Recomendaciones

Técnicas de composición

Color en el diseño web

La comunicación multimedia

VISUAL
• Fija • Movimiento

INTERACTIVA • Operaciones • Itinerarios

AUDITIVA
• Voz • Música • Efectos

TEXTUAL
• Texto gráfico • Texto escrito

¿Cómo producimos comunicación visual?
Lenguaje Alfabeto  Sintaxis  Comunicación

Comunicación visual
Creación de significado con el concurso de Técnicas visuales de composición

¿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

¿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

Textura - sensibilizar

Forma - signo

Estructura y módulo

Elementos de la “sintaxis” visual

Abraham Espinosa - www.letca.com

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

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

Superficial

debe verse, reconocerse, recordarse, reproducirse
Profundo

 Abstracción = simplificación arbitraria

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

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Uso del color en el diseño web

Herramientas online para color web

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

Modelos de diseño web

Modelo 1
 Menú en cabecera y contenido anidado debajo

Modelo 2
 Menú lateral con contenido central

Dietmar Halbauer- www.loftlinx.at

Modelo 3
 Pantalla completa

Complejo Creativo- www.iberflor.com

Modelo 4
 Composición con varios frames

Catherine Herberstein - www.marcellogiordani.com

Diseño de Interfaces
 ¿Qué es una Interfaz?

La Teoría de los procesos de interacción personaordenador 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
Experiencia menos completa y real

PARC User Interface (PUI)

Touchscreen user interface (TUI)

Interfaces 3D

Zooming user interface (ZUI)

Interfaces multimodales

Experiencia más 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)

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.
Diseño de todas y cada una de las pantallas (interfaces) que componen la aplicación.

3.

4. 5. 6.

Programación de efectos visuales (si los hubiera: gif’s animados, Flash, etc.)
Programación “cliente”: desarrollo de las interfaces previamente diseñadas. 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

Sign up to vote on this title
UsefulNot useful