t5.2. principios de composición
TRANSCRIPT
![Page 1: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/1.jpg)
LOGO
Tecnologías Multimedia – Periodismo Online
Profesor: Manuel Gértrudix
![Page 2: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/2.jpg)
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
![Page 3: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/3.jpg)
La comunicación multimedia
VISUAL• Fija
• Movimiento
AUDITIVA• Voz
• Música
• Efectos
INTERACTIVA
• Operaciones
• Itinerarios
TEXTUAL• Texto gráfico
• Texto escrito
![Page 4: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/4.jpg)
¿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
![Page 5: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/5.jpg)
¿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
![Page 6: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/6.jpg)
¿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
![Page 7: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/7.jpg)
Textura - sensibilizar
![Page 8: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/8.jpg)
![Page 9: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/9.jpg)
Forma - signo
![Page 10: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/10.jpg)
![Page 11: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/11.jpg)
Estructura y módulo
![Page 12: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/12.jpg)
![Page 13: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/13.jpg)
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
![Page 14: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/14.jpg)
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.
![Page 15: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/15.jpg)
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
![Page 16: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/16.jpg)
Dinámica del contraste
La explicación del contrario – compensación
El ojo busca patrones – aguzar el mensaje
Contraste de tonos, colores, contorno, escala
![Page 17: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/17.jpg)
Técnicas de contraste
Equilibrio – Inestabilidad
Simetría – Asimetría
Regularidad – Irregularidad
Simplicidad – Complejidad
Sutileza – Audacia
Agudeza – Difusividad
etc.
![Page 18: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/18.jpg)
Equilibrio
![Page 19: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/19.jpg)
Inestabilidad
![Page 20: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/20.jpg)
Simetría
![Page 21: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/21.jpg)
Asimetría
![Page 22: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/22.jpg)
Regularidad
![Page 23: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/23.jpg)
Irregularidad
![Page 24: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/24.jpg)
Simplicidad
![Page 25: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/25.jpg)
Complejidad
![Page 26: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/26.jpg)
Sutileza
![Page 27: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/27.jpg)
Audacia
![Page 28: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/28.jpg)
Uso del color en el diseño web
![Page 29: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/29.jpg)
Uso del color en el diseño web
![Page 30: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/30.jpg)
Uso del color en el diseño web
![Page 31: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/31.jpg)
Uso del color en el diseño web
![Page 32: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/32.jpg)
Uso del color en el diseño web
![Page 33: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/33.jpg)
Uso del color en el diseño web
![Page 34: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/34.jpg)
Uso del color en el diseño web
![Page 35: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/35.jpg)
Uso del color en el diseño web
![Page 36: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/36.jpg)
Uso del color en el diseño web
![Page 37: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/37.jpg)
Uso del color en el diseño web
![Page 38: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/38.jpg)
Uso del color en el diseño web
![Page 39: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/39.jpg)
Uso del color en el diseño web
![Page 40: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/40.jpg)
Uso del color en el diseño web
![Page 41: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/41.jpg)
Uso del color en el diseño web
![Page 42: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/42.jpg)
Uso del color en el diseño web
![Page 43: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/43.jpg)
Uso del color en el diseño web
![Page 44: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/44.jpg)
Uso del color en el diseño web
![Page 45: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/45.jpg)
Uso del color en el diseño web
![Page 46: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/46.jpg)
Uso del color en el diseño web
![Page 47: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/47.jpg)
Uso del color en el diseño web
![Page 48: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/48.jpg)
Uso del color en el diseño web
![Page 49: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/49.jpg)
Uso del color en el diseño web
![Page 50: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/50.jpg)
Uso del color en el diseño web
![Page 51: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/51.jpg)
Uso del color en el diseño web
![Page 52: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/52.jpg)
Uso del color en el diseño web
![Page 53: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/53.jpg)
Uso del color en el diseño web
![Page 54: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/54.jpg)
Uso del color en el diseño web
![Page 55: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/55.jpg)
Uso del color en el diseño web
![Page 56: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/56.jpg)
Uso del color en el diseño web
![Page 57: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/57.jpg)
Uso del color en el diseño web
![Page 58: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/58.jpg)
Uso del color en el diseño web
![Page 59: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/59.jpg)
Uso del color en el diseño web
![Page 60: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/60.jpg)
Uso del color en el diseño web
![Page 61: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/61.jpg)
Uso del color en el diseño web
![Page 62: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/62.jpg)
Herramientas online para color web
Herramienta en línea de Adobe: http://kuler.adobe.com/
![Page 63: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/63.jpg)
Modelos de diseño web
![Page 65: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/65.jpg)
Modelo 2Menú lateral con contenido central
Dietmar Halbauer- www.loftlinx.at
![Page 67: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/67.jpg)
Modelo 4 Composición con varios frames
Catherine Herberstein - www.marcellogiordani.com
![Page 68: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/68.jpg)
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”
![Page 69: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/69.jpg)
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
![Page 70: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/70.jpg)
Tipología de interfaces
PARC User Interface (PUI)
Touchscreen user interface (TUI)
Interfaces 3D
![Page 71: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/71.jpg)
Tipología de Interfaces (GUI)
Zooming user interface (ZUI)(ej)
Touchscreen user interface (TUI) (ej1) (ej2)
![Page 72: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/72.jpg)
Tipología de Interfaces (GUI)
Interfaces multimodales
![Page 73: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/73.jpg)
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.
![Page 74: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/74.jpg)
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??
![Page 75: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/75.jpg)
Fuentes tipográficas usuales
Nielsen (2006)
![Page 76: T5.2. Principios de composición](https://reader033.vdocuments.net/reader033/viewer/2022052901/5571f26f49795947648c9003/html5/thumbnails/76.jpg)
LOGO
Tecnologías Multimedia – Periodismo Online
Profesor: Manuel Gértrudix