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 Diseño de
Reglas y modelos Tipografía web
generales Interfaces

Comunicación
Estructuras modelo Diseño Características
multimodal

Comunicación
Tipología Recomendaciones
visual

Técnicas de
composición

Color en el diseño
web
La comunicación multimedia

VISUAL
• Fija
• Movimiento

INTERACTIVA
• Operaciones
• Itinerarios

AUDITIVA
• Voz
TEXTUAL
• Música • Texto gráfico
• Efectos • 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

Superficial
 Simbolismo = simplificación unívoca
del significado
 debe verse, reconocerse, recordarse,
reproducirse
 Abstracción = simplificación arbitraria
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
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 persona-
ordenador define la interfaz
de un sistema interactivo
como un dispositivo
tecnológico que permite
una interacción amigable Interfaz principal de la web “Same”

con dicho sistema a través

de modelos de
representación de distinto
tipo (textual, visual, sonoro,
etc.)

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.
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