Diseño y Producción Gráfica Digital

28/9/21 21:56 20210609-S4-P4-P5
Publicada con documentos de Google Más información Notificar uso inadecuado
Actualizado automáticamente cada 5

20210609-S4-P4-P5 minutos
FACSO | CS | S4-P4 - S4-P5
Diseño y producción
gráfica y digital
La asignatura tiene por objeto desarrollar en el
estudiante un aprendizaje concreto de la
producción gráfica y digital, como un recurso
profesional contemporáneo; a partir de sus
fundamentos teórico conceptuales, semióticos,
de recursos tecnológicos – técnicos
colaborativos y metodológicos para su
correcta aplicación.
Temas de trabajo: S4-P4 = Fútbol barrial | S4-
P5 = Mercados cercanos.
*Todos los enlaces de este documento deben
abrirse en una pestaña nueva.
Unidad 1
Fundamentos teóricos, semioticos y

metodológicos de la producción gráfica y
digital
Semana 1
Ejemplos de referencia: ilustración digital,

producción digital:
¿Qué es el diseño?
Diseño, arquitectura, ingeniería
“Configuración mental que permite
trasladar la imaginación a un objeto
determinado” (AC).
El proceso del diseño es mental, la aplicación
del diseño es instrumental (operativo).
Imaginamos - utilidad - componentes -
materialización (tecnología). Protocolo -
proceso.
https://docs.google.com/document/d/e/2PACX-1vRZbqjGF3RxNq-uleRMRKwX6CysJ3En-NJ6ilaNdxCO2eoeOLVVRDfCMcGSukHIhq5NXJFMe… 1/28
28/9/21 21:56 20210609-S4-P4-P5
Soportes: analógicos (soportes físicos), digital

Publicada con documentos de (código
Google binario) Más información Notificar uso inadecuado
Tipos de archivos: imagen: jpg, png, gif;

video: mov, mp4, dv, avi; audio: mp3, ogg,
wave, pcm.
¿Qué es la producción de productos
comunicativos?
“La comunicación intermediada tiene que
ver con los productos comunicativos, es
decir con objetos concretos que contienen
mensajes y que propenden a impulsar,
motivar, reforzar un proceso comunicativo”
(AC).
Producción editorial: producción gráfica -
producción digital
“Tiene el fin de generar un producto
comunicativo (mensajes) cuyo soporte
puede ser físico o digital” (AC)
Fuente: Issu
Diseño (proyección mental), diagramación

(ordenamiento del espacio), maquetación
28/9/21 21:56 20210609-S4-P4-P5
(estructuración, de acuerdo a jerarquía).

Diagramación Actualizado automáticamente cada 5

Fuente: Schema
Maquetación
Fuente: Asistperu
El diseño siempre contiene instrucción (índice
- menú - estructura capitular).
Semana 2
Producto comunicativo - proceso de

producción
Ejemplos para identificar el proceso de
producción: Video de la BBC, información de
El Universo. Los dos son productos
comunicativos informativos, pero tienen un
soporte diferente -a pesar de ser digitales- y
por tanto un tipos de archivo diferente; el
video puede tener formato en youtube está
formato mp4, mientras que la página web está
en formato html. A pesar de las diferencia el
proceso de realización es el mismo, tiene los
28/9/21 21:56 20210609-S4-P4-P5
mismos momentos. Con el tiempo y la

Publicada con documentos de experiencia
Google Más
pueden obviarse pasos y información Notificar uso inadecuado
profundizar aquellos que fuesen necesarios.

Fuente: elaboración propia

Ejemplo producción audiovisual
Fuente: freepng
Ejemplo de escaleta
Secuencia jerárquica y ordenada de
conceptos que orienta sobre el contenido a
buscar (AC).
1. Juego (gente jugando): goles, acción,
cansancio, lesiones.
2. Jugadores: en el banquillo, saltan a la
cancha, uniformes, indumentaria.
3. Canchas: tipo de cancha, graderío,
arcos, banderines.
4. Arbitraje: arbitra, federado, condición
física, indumentaria.
5. Hinchas: aficionados, director técnico,
vocales, dueños de entradas.
6. Familiares: grado de parentesco,
muestras de afecto.
Storyboard
28/9/21 21:56 20210609-S4-P4-P5

Fuente: Storyboard That
Semana 3
Superficie significante
De la caverna al mundo exterior.
Del framework (entorno de trabajo para
resolución de problemas) al canvas.
Signo gestual - signo lingüístico - signo
gráfico - signo textual - símbolo.
Lengua = Grafema + fonema + sonido.
Gramática textual.
El mundo de la imagen
Visual Literacy (alfabetidad visual)
Caracterización de las imágenes
(intervención): icono, gráfico, ilustración,
fotografía, captura de pantalla, composición
gráfica, texto ilustrado. Las imágenes pueden
ser estáticas y dinámicas
Lenguaje visual.
Gramática visual = percepción - interpretación
28/9/21 21:56 20210609-S4-P4-P5

Fuente: Paredro
Elementos principales: punto, línea, contorno,
textura, color, textura, material.
Fuente: lunesdesign
28/9/21 21:56 20210609-S4-P4-P5

Fuente: Cultura inquieta
Fuente: Cultura inquieta

Composición de imágenes
Ubicación en el plano
Puntos dorados (ley de tercios)
Fuente: Fotocurso
Zonas aureas
28/9/21 21:56 20210609-S4-P4-P5

Fuente: Neuromarketing
Simetría dinámica
Fuente: dZoom
Triángulo de oro
Fuente: Golden Takes

Diseño orientado a objetos
En los ecosistemas digitales todo es un objeto
Espacio basado en píxeles (4x3; 3x2; 16x9)
28/9/21 21:56 20210609-S4-P4-P5
Eye tracking: permite identificar los puntos de

Publicada con documentos de Google Más información
interés de una interfaz Notificar uso inadecuado

Fuente: UniMooc
Prácticas de aprendizaje y experimentación
(PAE para la conformación de memes)
El meme como unidad informativa
El meme es un relato.
Frases: Juan y la universidad
Oración = sujeto + verbo + predicado; Juan va
a la universidad (sentido completo y
autonomía sintáctica)
Sentido, intención y propósito del autor.
Interpretación del público.
Concepto: “Artefactos de expresión del
mundo digital”
Contenido lúdico, posibilidad de viralización,
tiende a procesos de reflexión y
comunicación.
Nace y representa una dinámica social.
Ejemplos de memes de fútbol de barrio:
28/9/21 21:56 20210609-S4-P4-P5

Fuente: pinterest Fuente:

AhSeeit Fuente: MEME
Ejemplos de memes de mercado:
Fuente: Facebook Fuente:

pinterest Fuente: ballmemes.com
Estructura de un meme
https://docs.google.com/document/d/e/2PACX-1vRZbqjGF3RxNq-uleRMRKwX6CysJ3En-NJ6ilaNdxCO2eoeOLVVRDfCMcGSukHIhq5NXJFM… 10/28
28/9/21 21:56 20210609-S4-P4-P5

Semana 4
Producción gráfica caracterización

Proceso de impresión de un medio impreso:
Diario El Nuevo Día.
Proceso de impresión offset: documental.
Composición tipográfica del NYT:
microsiervos - documental.
Material impreso en soportes físicos, desde
hojas volantes hasta enciclopedias, revistas,
periódicos, afiches, circulares, postales, libros,
calendarios, tarjetas de presentación, entre
otros.
Momentos clave: 1) generación de contenido
(acceso a fuentes) y 2) generación del
producto: soporte físico y soporte digital.
Diseño gráfico Diseño digital
superficie limitada superficie ilimitada
soporte papel código binario
CMYK - tintas grasas RGB (adobe rgb,

(pantone) prophoto, exadecimal)
artes finales masterización ej: epub,

pdf
placas publicación
impresión
acabados
distribución acceso inmediato
accesibilidad de los
públicos
periódicos permanentes
costo gratuito
28/9/21 21:56 20210609-S4-P4-P5
Fuente: realización propia

Requieren aplicaciones dedicadas, pero su
configuración es diferente, por tanto aún
20210609-S4-P4-P5 requieren de intervención humana. minutos
Diseño - maquetación - diagramación - arte
final
Fuente: Marcelo Braz
Fuente: darobledo
Proyecto = contenido + público
Tecnología asociada: PIXLR

Unidad 2
El diseño plano y digital. Fundamentos y

análisis visual de casos
28/9/21 21:56 20210609-S4-P4-P5

Semana 5

Ecosistema digital de comunicación
Comunicación interpersonal y comunicación
intermediada.
Fuente: Pinterest
Diálogo - interlocutores (comunicación no
verbal)
Tecnología - intermediación - producto
comunicativo.
Procesos sincrónicos - asincrónicos
Conformación de interfaces
Somos humanos en tanto tecnología.
Ntics - tics - ti
Fuente: maaz.ihmc.us
Diseño de representaciones.
La interfaz como representación - metáfora
La posta: modelo de negocio, política
editorial, ideología, contenido, entre otros.
Contactos: personajes
Corruptómetro: contenidos futuros
Quiénes somo: representando a los
realizadores
Pauta con nosotros: modelo de negocio
(modelo económico)
Ubicación: donde encontrarlos
Marca: filosofía
Representaciones iconográficas
Representación: política editorial
28/9/21 21:56 20210609-S4-P4-P5
Publicada con documentos de Semana

Google 6 Más información Notificar uso inadecuado
Estudio de caso: reportaje multimedia Actualizado automáticamente cada 5

Método de lectura
1. Contenidos - mensajes - relato
2. Estética (composición)
3. Tecnológica
Riders
Lectura dispersa, de acuerdo a rutas
propuestas (enlaces)
Inmersión (simulación)
Gamificación (descubre la información
mediante un juego)
Diseño a nivel proyecto (varios componentes
y varios productos)
Intuitivo - interacción.
Proyección social del tema (extrangeros,
drogas, discriminación, xenofobia).
Información (tipo de productos, costos,
tiempos, funcionamiento de una aplicación de
repartición).
Composición: elementos, color, textura.
Ciudades Vacías
Video 360 (inmersión - intuitividad -
instrucción - interacción)
Tecnología (registro de imágenes con cámaras
360)
Contenido: ciudades vacías
Edición: montaje - edición - ambientación -
atmósfera
Sin interacción = monotonía, estático, cambio
de sentido, virtualidad,
Interacción = acceso a la información
(contenidos - mensajes)
Relato = historia
Composición (todos los elementos con carga
informativa)
Robots que pueden salvarte la vida
Contenido y mensaje (intencionalidad y
propósito) no son lo mismo.
Estética: color.
Trump vs Biden
Sin interactividad = texto lineal.
Sin interactividad no se puede acceder a la
información.
Covid vacunación
Lenguajes de programación y el diseño

HTML = lenguaje de marcado
28/9/21 21:56 20210609-S4-P4-P5

Fuente: Elaboración propia

Partes de un archivo digital

Hipertexto e hiperconexión
Estructura: hipertextualidad, interactividad,
medialidad, navegabilidad.
¿Qué es la interactividad? ¿Hasta dónde puede
llegar la interactividad?
Evolución de las pantallas: cine, televisión,
ordenador, móvil.
Evento = Desencadenante (gesto - acción) +
destino (respuesta)
Estudio de caso: documental multimedia
“Xavier Berenguer (2004) considera el
documental interactivo como un tipo de
narrativa que emergió con los hipertextos y
los juegos de los años 80. Según Berenguer,
cuando la narrativa pasa a ser interactiva
mediante el uso de los medios digitales, se
puede propagar en tres direcciones
principales: narrativa interactiva, documental
interactivo y juegos. Carolyn Handler Miller,
autora del libro Digital Storytelling (2004),
también considera el documental interactivo
como un tipo de película interactiva de no
ficción. La autora dice que los espectadores
'can be given the opportunity of choosing
what material to see and in what order. They
28/9/21 21:56 20210609-S4-P4-P5
might also get to choose among several audio

Publicada con documentos de tracks' Más Desde
Google(Handler Miller, 2004:345). información
el Notificar uso inadecuado
punto de vista de Katherine Goodnow, los

documentales interactivos provienen de los
experimentos iniciales de las películas
interactivas, donde la actividad física, aunque
no la cognitiva, se utiliza para navegar en
directo a través del material existente (vídeo o
película).” Gifreu
La generación del hambre
Choqueyapu (detrás de la historia)
Parto respetado
Tabla comparativa de la estructura de los
productos comunicativos
Características La Choqueyapu El parto
generación respetado
del hambre
interactivo ilustración mujeres
parturientas
infográfico color tutorial
comparativo audiovisual
color fuente introducción
creativa
comic instrucciones
y propósito
navegación estructura
no capitular
tradicional
crónica usable
reportaje ensayo documental
Conceptuales Crisis Problema Situación del

ecológico
alimentaria parto
en
Venezuela
Estéticas Menú Comic Visual

Historieta
Línea de
tiempo
Técnicas Interactiva Interactiva Documental

Eventos en
rojo Se puede
pausar
Llamativo
Interactivo
Instrucciones
Enlaces
Públicos Parejas
28/9/21 21:56 20210609-S4-P4-P5


Actualidad o coyuntura
Periodístico - opinión personal
Visualización de datos (Google Public Data)
Construcción HTML
Semana 7
Relato, narrativa y lenguaje (Producción

digital caracterización)
Contenido visual = diseño (producto
comunicativo)
Relato = Historia
Narrativa = Estructura
Lenguaje = específico
La infografía como unidad de relato visual
28/9/21 21:56 20210609-S4-P4-P5
Infografía estática:
Publicada con documentos de Perros
Googlepopulares (Visually) Más información Notificar uso inadecuado
Dejar de fumar (Visually)
Ejemplos en: infografía periodística,
infografía comercial,
Infografía interactiva:
El riesgo de que un robot tome tu
trabajo (BBC)
El nuevo Nueva York (National Geographic)
Así se contagia el coronavirus (El país)
Tecnología asociada: Crello - Genially
Aplicaciones de autor y automatizadas
Estudio de caso
Semana 8
Procesos de diseño = acceso a la información

Arquitectura de información = puesta en
escena
Acontecimiento informativo
Generación de sentido
Proceso de comunicación especializado

Generación de contenido especializado
Unidad 3
Semana 9
28/9/21 21:56 20210609-S4-P4-P5
Google de caso de infografías Más información

Publicada con documentos de Estudios Notificar uso inadecuado

Fuente: wearecontent
Casos realizados por los estudiantes como
actividades de clase en Teams.
Retroalimentación y observaciones generales
a los mecanismos de composición
Espacios de color:
28/9/21 21:56 20210609-S4-P4-P5
● CMYK para productos comunicativos

Publicada con documentos de Googleimpresos Más información Notificar uso inadecuado
● RGB para productos comunicativos

digitales Actualizado automáticamente cada 5
Construcción de paletas de colores: Adobe
Color
Fuente: Adobe Color

Uso de fuentes:
● No más de tres fuentes
● Énfasis en el manejo de fuentes:
negrillas, itálicas
● Uso de comillas (dobles = citas
textuales; únicas = referencias al pie)
● Fuente para título (H1)
● Fuente para subtítulo (H2)
● Fuente para contenido (p)
● Uso de fuentes en productos impresos
(se incluyen en los archivos de
impresión)
● Uso de fuentes en productos digitales
(se incluyen en el navegador)
Semana 10
Ingeniería de proyectos y productos

gráficos y digitales
● Contenido complementario
● Contenido interdependiente
Relato
Narrativa
Lenguaje
Diseño de la información
● Acceso a la información
● Registro de información
28/9/21 21:56 20210609-S4-P4-P5
● Conformación de recursos
Publicada con documentos de Arquitectura
Google de la información Más información Notificar uso inadecuado
● Esquemas y diagramación
● Puesta en escena Actualizado automáticamente cada 5
● Sistematización de la información
Estudios de caso de contenidos informativos
publicados
Deporte barrial:
● A tomar solo colita en las ligas
● Islas Galápagos: un paraíso para el
fútbol barrial
Mercados:
● La gran cocina de Quito está en los
mercados
● El potencial económico de los
mercados de Quito
Semana 11
Composición gráfica: ejemplos trabajados en

clase, a partir de ello planteo actividades de
clase. Revisamos:
● Lienzo de trabajo (canvas)
● Dimensiones de imagen
● Gestión de las capas
● Gestión del color
● Gestión de fuentes
● Composición
● Recorte y silueteado de las imágenes
● Puntos de fuga
● Mezclas
● Tipos de archivo (jpg = imágenes; png
= transparencias)
Actividad de clase: acuario (recursos
compartidos por Teams)
Fuente: elaboración propia en Pixlr
28/9/21 21:56 20210609-S4-P4-P5
Actividad de clase: sistema solar (recursos

Publicada con documentos de compartidos
Google Más información Notificar uso inadecuado
por Teams)

Fuente: elaboración propia en Pixlr
Semana 12
Composición fotográfica: ejemplos trabajados

en clase, a partir de ello planteo actividades de
clase. Revisamos:
● Diseño (proyección mental del
contenido que se quiere representar)
● Producción: tema, registro, edición,
corrección mínima, publicación
● Fotografía = una imagen
representativa
● Representación de la realidad desde la
perspectiva del fotógrafo
● Fotografía periodística informativa =
retrata el acontecimiento informativo
● Requiere relato textual para su
comprensión
● Actividad periodística que requiere
acceso a la fuente
● La tecnología asociada determina el
registro de la imagen
● Composición = disposición de
elementos para la construcción del
contenido y el mensaje
● Tipos de archivo (jpg = imágenes; png
= transparencias)
● No admite manipulación o
intervención
● Investigación previa antes de
reportería
● Anticipación al momento
28/9/21 21:56 20210609-S4-P4-P5


Estudio de casos
Instantáneas
Fuente: El Comercio
Fuente: El Universo
Retratos
28/9/21 21:56 20210609-S4-P4-P5

Fuente: National Geographic
Fuente: National Geographic

Fotorreportajes
Una visión íntima de las mujeres afganas: La
fotógrafa Lynsey Addario nos ofrece en esta
galería de fotos una visión íntima y personal
de los cambios en la vida de las mujeres
afganas durante los últimos 20 años.
Simuladores para la comprensión de la
conformación de la imagen
Triángulo de exposición: CameraSim
● Óptica
● Procesamiento
● Almacenamiento
28/9/21 21:56 20210609-S4-P4-P5
Mecanismos de control de la cámara

Publicada con documentos de Google
● Apertura (óptica) Más información Notificar uso inadecuado
● Velocidad (tiempo de exposición)

● ISO (sensibilidad) Actualizado automáticamente cada 5
Comprensión del manejo de la óptica:
Objetivos Fuji
Unidad 4
Proyecto de fin de semestre
Semana 13
Pre producción (S4-P4 = Deporte barrial | S4-

P5 = Mercados cercanos)
● Conformación de relato informativo
● Tema propuesto
● Acceso a la información
● Consecución de fuentes
Posproducción de imágenes fotográficas
● En entornos informativos es preferible
evitar la intervención
● Acondicionar la imagen para presentar
un mensaje y contenido claro.
● La posproducción no es arreglar la
imagen manipulando herramientas,
consiste en darle un sentido a la
imagen, de acuerdo al contexto
informativo representado y al contexto
de la información en conformación.
● Evitar la transferencia por wasap
Etapas
● Diagnóstico de la imagen
● Recorte y reencuadre de imagen
● Correción de color (histograma,
niveles, curvas)
● Inserción de metadatos
● Adaptación del tamaño de salida
● Exportación (mejor calidad, menor
tamaño)
28/9/21 21:56 20210609-S4-P4-P5

Fuente: Actividad de clase
Fuente: Actividad de clase
Semana 14
Producción (S4-P4 = Deporte barrial | S4-P5 =

Mercados cercanos)
● Reportería (registro y conformación de
recursos)
● Sistematización
Producción digital interactiva
Contenido interactivo
Tecnología asociada: Sway
Escritorio de Sway
28/9/21 21:56 20210609-S4-P4-P5

Fuente: Sway
Área de conformación de contenido
Fuente: Sway
Sway permite:
● Conformación de páginas web
estáticas
● Es una aplicación que trabaja con base
a estructuras predefinidas (temas)
● El autor plantea una ruta de lectura, el
usuario puede seguir el itinerario o no
● La aplicación conforma la estructura
de forma automática de acuerdo al
dispositivo de visualización
● Es una aplicación que permite
conformar contenido multimedia
Semana 15
Post producción (S4-P4 = Deporte barrial |

S4-P5 = Mercados cercanos)
● Sistematización de contenido
● Confección de interfaz
● Publicación
28/9/21 21:56 20210609-S4-P4-P5
Publicada con documentos de Semana

Google 16 Más información Notificar uso inadecuado
Publicación (S4-P4 = Deporte barrial | S4-P5

= Mercados cercanos)
Armando Cuichán | @laimagenlibre |

Diseño y Producción Gráfica Digital

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño y Producción Gráfica Digital

Cargado por

Copyright:

Formatos disponibles

28/9/21 21:56 20210609-S4-P4-P5

Publicada con documentos de Google Más información Notificar uso inadecuado

Actualizado automáticamente cada 5

FACSO | CS | S4-P4 - S4-P5

Fundamentos teóricos, semioticos y

Ejemplos de referencia: ilustración digital,

Soportes: analógicos (soportes físicos), digital

Tipos de archivos: imagen: jpg, png, gif;

Diseño (proyección mental), diagramación

(estructuración, de acuerdo a jerarquía).

Diagramación Actualizado automáticamente cada 5

Producto comunicativo - proceso de

mismos momentos. Con el tiempo y la

profundizar aquellos que fuesen necesarios.

Fuente: elaboración propia

Publicada con documentos de Google Más información Notificar uso inadecuado

Actualizado automáticamente cada 5

Fuente: Storyboard That

Publicada con documentos de Google Más información Notificar uso inadecuado

Actualizado automáticamente cada 5

Publicada con documentos de Google Más información Notificar uso inadecuado

Actualizado automáticamente cada 5

Fuente: Cultura inquieta

Fuente: Cultura inquieta

Publicada con documentos de Google Más información Notificar uso inadecuado

Actualizado automáticamente cada 5

Fuente: Golden Takes

Eye tracking: permite identificar los puntos de

Actualizado automáticamente cada 5

Publicada con documentos de Google Más información Notificar uso inadecuado

Actualizado automáticamente cada 5

Fuente: pinterest Fuente:

Fuente: Facebook Fuente:

Publicada con documentos de Google Más información Notificar uso inadecuado

Actualizado automáticamente cada 5

Fuente: elaboración propia

Producción gráfica caracterización

superficie limitada superficie ilimitada

soporte papel código binario

CMYK - tintas grasas RGB (adobe rgb,

artes finales masterización ej: epub,

distribución acceso inmediato

Fuente: realización propia

Fuente: Marcelo Braz

El diseño plano y digital. Fundamentos y

Publicada con documentos de Google Más información Notificar uso inadecuado

Actualizado automáticamente cada 5

Publicada con documentos de Semana

Estudio de caso: reportaje multimedia Actualizado automáticamente cada 5

Lenguajes de programación y el diseño

Publicada con documentos de Google Más información Notificar uso inadecuado

Actualizado automáticamente cada 5

Fuente: Elaboración propia

Fuente: Elaboración propia

might also get to choose among several audio

punto de vista de Katherine Goodnow, los

reportaje ensayo documental

Conceptuales Crisis Problema Situación del

Estéticas Menú Comic Visual

Técnicas Interactiva Interactiva Documental

Publicada con documentos de Google Más información Notificar uso inadecuado

Actualizado automáticamente cada 5