Post on 11-Jul-2020
Proceso y Elementos de Diseño
Diseñador Javier Reina http://multimediayanimacion3d.blogspot.com/
El proceso de diseño
• La Necesidad (problema)
Identificación del problema a investigar
proceso de solución de problemas o necesidades, "pre-figuración", que
requiere creatividad e innovación
El proceso de diseño
• La Necesidad (problema)
Identificación del problema a investigar
proceso de solución de problemas o necesidades, "pre-figuración", que
requiere creatividad e innovación
• Observar y analizar (Overview)
Proceso investigativo que hay y con que se cuenta
- Nombre del Proyecto
- Información de Cliente
- Información de Contactos
- Experiencia en producción de multimedios
- Descripción experiencia (análisis)
- Qué quiere el cliente?
- Tipo de proyecto
- Segmento del mercado
- Overview (de la empresa)
- Beneficios esperados (Empresa)
- Beneficios esperados (Usuarios)
- Acceso y uso (tipología usuarios)
- Tiempo de desarrollo
- Presupuesto
El proceso de diseño
El proceso de diseñoFormato Presupuesto Proyecto Interactivo
Proyecto: Fecha:
Datos Básicos
Porcentaje de imprevistos 10%
Impuestos 16%
Ganancia 15%
Código o Nombre Recurso Presupuesto
unidadsonal Días Int/Ext? Base Multi ValorArtista
Administrador de Proyecto/Director 30,0 I 0
Productor 30,0 I 0
Asesores 30,0 E 0
Especialistas en Software 30,0 I 0
Especialistas en redes 30,0 E 0
Especialista en hardware 30,0 E 0
Programadores 30,0 E 0
Programadores Internet 30,0 I 0
Diseñadores Gráficos 30,0 I 0
Asistente de diseño gráfico 30,0 I 0
Animador 2D e integrador 30,0 I 5.000.000
Animador 3D 30,0 E 4.800.000
Autor HTML 30,0 I
Especialista en contenido 30,0 I 0
Asistente para pruebas 30,0 E 0
Indexador 30,0 E 0
Fotografo 30,0 E 0
Especialista en video 30,0 I 0
Guionista y corrector de estilo 30,0 E
30,0 E 0
TOTAL unidadSONAL
(unidadson/días)
El proceso de diseño
Costos de producción Tiempo Costo/unidad ValorLicencias de información
Librerías de video 0Minutos 125 0
Librerías de música 0Minutos 100 30.000
Derechos de autor audio 0Minutos 250 0
Otros derechos de autor
Música compuesta
Librerías de imágenes (Blanco/Negro) 0unidad 100 0
Stills Library Licences (Color) 0unidad 150 0
Equipo de video 0días 800 0
Voces Normales 0horas 150 0
Voces artistas especiales
Codificación y Compresión de audio 0Minutos 15 0
Cintas de audio 0unidad 5 0
Copiado video/audio 0horas 50 0
Material fotografico 0rollos 7 0
Fotografias (Desarrollo/Impresión) 0rollos 10 40.000
Fotografias (Digitalización) 0imagenes 10 0
Software 500.000
CDROMs grabables 0unidad 2 0
CDROMs reescribibles 0unidad 2 15.000
Edición de sonido 0horas 40 0
Trabajos especiales de video 0horas 150 0
Edición de videos 0horas 30 0
Codificaciób y compresión de video 0Mins 50 0
Cintas de video 0unidad 15 0
Grabación de voces 0horas 100 0
Alquiler de equipos 0mes 125 0
Alquiles servidor 0año 3.000 0
Conexión Internet 0Mins 1 40.000
Servicios de telefonía 0mes 15 0
0horas 15 0
Transcripciones
Gastos generales
Gastosr representación
Seguros
Costos legales
Publicidad
Libros
Papeleria
Traducciones
Transportes
Viaticos y Viajes
Material Impreso
Misceláneos
El Guión
• Es una estructura altamente útil para desarrollar una aplicación de forma óptica ya que permite estimar recursos técnicos y humanos.
• Es un documento o documentos que orquestan, organizan y dirigen la estructura y los contenidos de una aplicación interactiva multimedia con la finalidad de llevar a buen fin el desarrollo de esta aplicación.
• Al igual que en el guión "clásico", el guión para una aplicación multimedia interactiva es un documento clave para su producción.
El proceso de diseño
http://beta.toonboom.com/
El Guión
• Es un elemento clave en el proceso de producción:
1. Es jerárquicamente el elemento inicial de la producción.
2. Es la herramienta directriz para la dirección técnica.
3. Es una guía para los desarrolladores.
4. Es una fuente para la previsión del presupuesto.
El proceso de diseño
1. Idea
2. Sinopsis
3. Presentación
4. Storyboard:
El proceso de diseño
El Guión
La idea es el motivo principal para la realización de la aplicación. Es
recomendable que se pueda escribir, describir y concretar en un
máximo de dos líneas. Debe ser sencilla y de rápida comprensión.
– Ejemplos:
-En Age of Empires, el usuario es el guía de una tribu en la edad de
piedra y su misión es dominar el mundo creando y conquistando
imperios.
-Crear una pagina que permita aprender a escribir cartas originales,
diseñar felicitaciones y continuar cuentos de forma muy imaginativa.
El proceso de diseño
El Guión
• La sinopsis es el desarrollo más amplio de la idea inicial, una
especie de resumen que debe dejar claro el resumen general de la
aplicación, la idea general.
En la sinopsis se deben establecer los puntos más destacables de la
aplicación. Se debe destacar lo esencial, y ofrecer una idea clara
del contenido de la aplicación o programa.
El proceso de diseño
El Guión
• La sinopsis
• Hombre – Insecto: En esta área se desarrollaron temas relacionados entre el hombre
y el insecto, tales como aportes a al humanidad en la medicina, tecnología y en la
guerra. También trabajamos insectos comestibles incluyendo sus aportes vitamínicos
y algunas recetas. Adicionalmente mostramos las fobias que existen hacia algunos
insectos.
• Habitad: En esta área mostramos la relación que existe entre insectos, plantas y su
medio ambiente. También se desarrollo el tema de morfología y comunicación de
insectos
• La Idea es: En esta área se realizó una breve descripción del proyecto en general
El proceso de diseño
El Guión
• La presentación
Debido a que las aplicaciones multimedia no suelen tener un flujo lineal, se redacta la presentación, unas páginas explicativas entre la sinopsis y el storyboard.
Se describen con mayor detalle las características del protagonista de la aplicación y el modo de interacción usuario-aplicación.
La misión de estas páginas es presentar al lector la idea de la aplicación, con más detalle del que se proporcionó en la sinopsis, a fin de que se entienda mejor el guión.
Las finalidades de la presentación son didácticas (explican con detalle el contenido) y persuasivas (contribuye a vender la aplicación)
El proceso de diseño
El Guión
• El storyboard
En un entorno clásico cinematográfico, el storyboard es una herramienta visual que constituye el boceto de un guión. Constituye una visualización del guión técnico en forma de cómic y cada viñeta corresponde a un plano. En el mundo multimedia la acción no es lineal. El storyboard es un diagrama de escenas con indicaciones de las posibles rutas que se pueden seguir en la navegación por la aplicación.
• Funciones del storyboard:
1. Plasmar de forma gráfica la estructura de los contenidos y
sus interacciones
2. Servir de guía, punto de referencia para todo el equipo,
incluido el cliente.
El proceso de diseñoEl Guión
• Funciones del storyboard:
• Ayuda a catalizar la idea de cómo será la aplicación, ayuda a visualizarla.
• Fuerza al autor a pensar de forma visual y a desarrollar un documento claro, en
el que se especifiquen los detalles con imágenes y texto
• Permite transcribir acciones, estructuras, interacciones complicadas de explicar
verbalmente y que podrían interpretarse de manera equívoca.
• Constituye un documento que todos pueden utilizar como punto de referencia.
Permite acordar diferentes puntos. Permite comprender y retener mejor la
información visual
• El storyboard es un documento flexible, que permite al autor y a su equipo mover
imágenes, secuencias
• Permite ver los enlaces entre las diferentes partes y discutir las interacciones. El
storyboard debe plasmar todos los enlaces
El proceso de diseño
• Funciones del storyboard:
• El storyboard puede servir para enseñar al cliente y que éste apruebe la línea,
antes de seguir con el desarrollo del proceso.
• La corrección de los problemas en el storyboard es menos costosa que en
estadios más avanzados.
• Un storyboard detallado puede significar un ahorro de tiempo en el proceso de
escritura.
• Ayuda a ver la estructura general del contenido de la aplicación y ver su
magnitud.
• En el caso que el producto multimedia incorpore algún elemento audiovisual,
éste debe guionarse independientemente.
El proceso de diseño
• El Boceto• Un boceto o esbozo es un dibujo hecho de forma esquemática y sin
preocuparse de los detalles o terminaciones para representar una
idea, un lugar, una persona, un aparato o cualquier cosa en general
El proceso de diseño
• El Boceto
El proceso de diseño
• Story board
El proceso de diseñoDescripción: El menú se caracteriza por ser vivo,
es decir, van a pasar cosas, los insectos estarán
en movimiento y algunos tendrán información. El
escorpión se moverá por toda la escena. Habrá
sonido ambiente y de apoyo en los botones. Una
voz dará la introducción al menú principal.
Audio Pantalla Menú Principal
Entra música (4 seg.)y sonido de
ambiente ( loop)
Audio Voz Intro:
Bienvenido a este gran mundo en
miniatura “el mundo de los insectos”!
1 Link Datos asombrosos
Over: sonido de piedras
Audio Voz: Datos Asombrosos
2 Link que es un insecto
Over: sonido de ramas y burbujas
Audio Voz: y que es un insecto...?
3 Link Señales visuales
Over: sonido de ramas y el mismo para el
movimiento Mariquita
Audio Voz: señales visuales
4 Link Señales químicas
Over: mismo hormiguita
Audio Voz: señales químicas
• Story board
El proceso de diseño
• Audio Voz Intro:
• Un sistema de comunicación muy utilizado entre los insectos son
la señales químicas. En este caso veremos algunos ejemplos de
cómo se comunican entre ellos y con las plantas. Da un click en
cada opción y observa que pasa en cada una de ellas.
• Comunicación insecto planta
• Audio: insecto Planta
• Audio Voz
• Secuencia 1 La planta al ser atacada por la oruga emana
feromonas
• Secuencia 2: estas son captadas por una avispa cercana ,
• Secuencia 3: la avispa acude al auxilio del vegetal , ubica al
agresor y deposita en el interior de la oruga un huevo .
• Secuencia 4: la oruga queda inmóvil y con el tiempo muere
dando vida a una nueva avispa.
• De esta forma la planta pidió ayuda al insecto.
• Comunicación Insecto-Insecto
• Audio: insecto - insecto
• Audio Voz
• Secuencia 1: Una abeja encuentra un campo con flores,
• Secuencia 2: al detectar su ubicación se devuelve al panal
• Secuencia 3: Y le comunica a las demás su ubicación mediante
señales químicas y movimientos.
El proceso de diseño
Descripción: Es una pantalla en entorno natural.
En la corteza el árbol aparecerán tres opciones
donde el usuario podrá ver tres tipos de
comunicación entre insectos. (Insecto- Insecto,
Planta – Insecto, Insecto - Planta). Las acciones se
desarrollaran en la parte derecha de la pantalla
Audio Pantalla Señales Químicas
Entra música (4 seg.) y sonido de ambiente
(loop)
El proceso de diseño
El proceso de diseño
Elementos del Diseño
• EL PUNTO:
Es el primer choque del grafo con el plano material. La
forma más usual de representarlo es un círculo simple,
compacto, carente de ángulos y de dirección. Es la
unidad gráfica más pequeña, el átomo, por así decir, de
toda expresión gráfica.
ContinuidadEstímulos similares crean una relación continua.Se relacionan y se organizan direccionalmente
Cierre o Constancia:
Cuando una figura esta abierta, tendemos a cerrarla para
terminar la figura que estamos observando.
Cierre o Constancia:
Cuando una figura esta abierta, tendemos a cerrarla para
terminar la figura que estamos observando.
Cierre o Constancia:
Cuando una figura esta abierta, tendemos a cerrarla para
terminar la figura que estamos observando.
Se da cuando una imagen da la sensación de que esta en movimiento,
pero no lo es.
Movimiento aparente
Se da cuando una imagen da la sensación de que esta en movimiento,
pero no lo es.
Movimiento aparente
Semejanza
Objetos y elementos similares tienden a agruparse por su forma, medida, color o peso.
Semejanza
Objetos y elementos similares tienden a agruparse por su forma, medida, color o peso.
Proximidad
Estímulos tienden a agruparse en bloques por su cercaníaEstimula lo similar vrs lo irregular
Proximidad
Estímulos tienden a agruparse en bloques por su cercaníaEstimula lo similar vrs lo irregular
Contraste
Los estímulos diferentes a su alrededor tienden a sobresalir por su irregularidad
Contraste Forma
Los estímulos diferentes a su alrededor tienden a sobresalir por su irregularidadLuz, color, peso, forma
Contraste Color
Los estímulos diferentes a su alrededor tienden a sobresalir por su irregularidadLuz, color, peso, forma
Contraste de Tamaño
Los estímulos diferentes a su alrededor tienden a sobresalir por su irregularidadLuz, color, peso, forma
Figura Fondo
LA LINEA
Se forma a partir de la unión de varios puntos siguiendo una trayectoria.
LA LINEA
Una misma línea tiene mayor peso si se la ubica en la parte inferior de
nuestra área de diseño que si se sitúa en la parte superior, donde
transmite una mayor sensación de ligereza.
LA LINEA
Podemos conferir dinamismo a nuestra línea variando su posición
espacial, sólo limitado a que en posición vertical se pueden producir
dificultades en la lectura del texto.
LA LINEA
• Peso visual de la Línea
LA LINEA
• Peso visual de la Línea
LA LINEA
LA LINEA
El Ritmo
• Permite tener una secuencia ordenada, repitiendo los elementos, los cuales irán
separados por espacios conocidos como intervalos. Movimiento, proporción y orden
son conceptos básicos del ritmo, pues el ritmo genera Movimiento visual
El Ritmo
• Permite tener una secuencia ordenada, repitiendo los elementos, los cuales irán
separados por espacios conocidos como intervalos. Movimiento, proporción y orden
son conceptos básicos del ritmo, pues el ritmo genera Movimiento visual
El Ritmo
• Permite tener una secuencia ordenada, repitiendo los elementos, los cuales irán
separados por espacios conocidos como intervalos. Movimiento, proporción y orden
son conceptos básicos del ritmo, pues el ritmo genera Movimiento visual
El Ritmo
• Por Color • Por Tamaño
• Por Progresión
• Por Dirección
Traslación
• Se da cuando se mueve una imagen sin cambiar la dirección.
Dilatación
Mediante la dilatación se ve alterado el tamaño de las figuras.
El Color
El color no es una característica de una imagen u objeto, sino que es
más bien una apreciación subjetiva nuestra. Se puede definir como, una
sensación que se produce en respuesta a la estimulación del ojo y de
sus mecanismos nerviosos, por la energía luminosa de ciertas longitudes
de onda.
El Color
Saturación
Cuanto mas saturado un color mas puro es, y menos cantidad de gris
contiene.
El Color
El Tono (Matiz)
Es el matiz del color, es decir el color en sí mismo, supone su cualidad
cromática, es simplemente- un sinónimo de color.
El Color
Valor
Consiste en el mayor grado de claridad o de oscuridad de un color
El Color
Colores primarios o
fundamentales
Colores
secundarios
Colores terciarios
o intermedios
El Color
RGB (Red, Green, Blue), los colores
básicos
CMYK (Cyan, Magenta, Yellow, Key)
Contraste
El contraste es un fenómeno con el que se pueden diferenciar colores
atendiendo a la luminosidad, al color de fondo sobre el que se
proyectan.
Modulación de un tono puro, saturándolo con
blanco, negro o gris
Contraste
Contraste de temperatura
Es el contraste producido al confrontar un color cálido con otro frío.
Contraste
Contraste de complementarios
Dos colores complementarios son los que ofrecen juntos mejores
posibilidades de contraste, aunque resultan muy violentos
visualmente combinar dos colores complementarios intensos.
Contraste
Dos colores claros brillantes puestos uno al lado de otro impactan en
nuestra vista, produciendo un efecto de rechazo, mientras que si
esos dos mismos colores los situamos uno dentro del otro el efecto
cambia por completo, resultando agradable.
Contraste
Un color aparecerá como más claro o más oscuro, según el color
que se encuentre cercano a él, al color con el que esté interactuando
Contraste
Psicología del Color
El color blanco se
asocia a limpieza
y pureza, la
limpieza es
exterior y la
pureza interior.
Psicología del Color
El color blanco se
asocia a limpieza
y pureza, la
limpieza es
exterior y la
pureza interior.
Psicología del Color
El blanco también es frío
Psicología del Color
AmarilloEs el color de la luz
solar, del mediodía, del
oro
Es el color de la
diversión, la amabilidad
y lo positivo, además de
simbolizar acción, poder,
arrogancia, voluntad y
estímulo
El florecer es amarillo, es el color más frecuente entre las flores
Psicología del Color
AmarilloEs el color de la luz
solar, del mediodía, del
oro
Es el color de la
diversión, la amabilidad
y lo positivo, además de
simbolizar acción, poder,
arrogancia, voluntad y
estímulo
Psicología del Color
NaranjaEl naranja significa
entusiasmo y exaltación,
y cuando es muy encendido
o más bien rojizo, denota
ardor y pasión. Kandinsky
afirma que el anaranjado
suscita sentimientos de
fuerza, energía, ambición,
determinación, alegría y
triunfo
Psicología del Color
NaranjaEl naranja significa
entusiasmo y exaltación,
y cuando es muy encendido
o más bien rojizo, denota
ardor y pasión. Kandinsky
afirma que el anaranjado
suscita sentimientos de
fuerza, energía, ambición,
determinación, alegría y
triunfo,
también favorece la
conversación y el sentido
del humor.
Es además un color lleno de sabor, es el color de lo
gustoso y lo aromático
Psicología del Color
El caféLlamado comúnmente
marrón o castaño, es el
color de la tierra.
Corresponde también al
color de una multitud de
materiales naturales, como
la madera, el cuero y la
lana. La mayoría de los
conceptos “típicamente
marrones” tiene un
significado negativo
Psicología del Color
El caféLlamado comúnmente
marrón o castaño, es el
color de la tierra.
Corresponde también al
color de una multitud de
materiales naturales, como
la madera, el cuero y la
lana. La mayoría de los
conceptos “típicamente
marrones” tiene un
significado negativo
Psicología del Color
El verde
Es más que un color,
es la esencia de la
naturaleza; es una
ideología, un estilo de
vida: es conciencia
medioambiental, amor a
la naturaleza y, al mismo
tiempo, rechazo de una
sociedad dominada por
la tecnología
Psicología del Color
El verde
Es más que un color,
es la esencia de la
naturaleza; es una
ideología, un estilo de
vida: es conciencia
medioambiental, amor a
la naturaleza y, al mismo
tiempo, rechazo de una
sociedad dominada por
la tecnología
Psicología del Color
El verde también es el
color de la libertad, la
confianza y la
seguridad
Psicología del Color
El oro Significa dinero, felicidad y
lujo, sentimiento de alegría
y viveza pero también un
aura sombrío y tradicional.
Es el color que más se
asocia a la belleza, pero
también es demasiado
materialista y arrogante
Psicología del Color
El oro Significa dinero, felicidad y
lujo, sentimiento de alegría
y viveza pero también un
aura sombrío y tradicional.
Es el color que más se
asocia a la belleza, pero
también es demasiado
materialista y arrogante
Psicología del Color
El gris es el color sin
fuerzaEl gris es la mediocridad, lo
aburrido, la resignación, la
pasividad y la humildad
Psicología del Color
El negro es la ausencia
de todos los colores
Psicología del Color
El negro también es el
color de lo misterioso, la
magia y la introversión
Psicología del Color
El negro hace referencia a
lo prohibido, el “mercado
negro” y lo ilegal
Psicología del Color
El rosa es el color del
encanto, la cortesía, la
sensibilidad y lo sentimental.
Psicología del Color
El rosa también representa
la infancia, lo manso y lo
pequeñorosa es además, el color de lo
femenino
Psicología del Color
El RojoEs el color del amor y del
odio, el rojo es el color de
todas las pasiones,
Psicología del Color
El RojoEs también el color de la
fuerza, el vigor, el valor y lo
atractivo.
Psicología del Color
El violeta
o púrpura es el color de
los sentimientoses también el color de la
penitencia y la sobriedad, y
uno de los colores de la
devoción y la fe
Psicología del Color
El violeta
o púrpura es el color de
los sentimientos
ambivalenteses también el color de la
penitencia y la sobriedad, y
uno de los colores de la
devoción y la fe
Psicología del Color
El azul
Simboliza, la profundidad
inmaterial y del frío. La
sensación de placidez que
provoca el azul es distinta
al de la calma o del reposo
terrestres propios del
verde
Psicología del Color
El azul:
Simboliza, la profundidad
inmaterial y del frío. La
sensación de placidez que
provoca el azul es distinta
al de la calma o del reposo
terrestres propios del
verdeEl color azul es refrescante y
relajante para nuestro
sistema, aquieta nuestras
energías y tiene efectos
antisépticos
Semiótica
Los signos gráficos, tienen significaciones
de acuerdo a los diversos contextos
donde se apliquen
• Tenemos el caso del objeto (prágmata) denominado HOMBRE. Persona del género
masculino.
• Los signos (semeión) gráficos para representar a ese objeto, son diversos :
• Representación gráfica de una figura humana masculina utilizada para indicar la
presencia de un baño de hombres.
• Dibujo de un hombre, elaborado por un niño mostrando sus referentes y cualidades
gráficas.
• Representación conceptual de las proporciones masculinas. "El Hombre de Vitruvio"
• Pictograma chino que representa "Hombre"
• Logotipo para los juegos olímpicos en Barcelona ´92 representando en abstracción
los elementos esenciales de la figura humana.
• En los ejemplos anteriores, podemos observar cómo los signos gráficos
asumen el significado cultural que les corresponde y que es aprendido en la
(micro o macro) sociedad en la que surgió.
La cinta roja representa la lucha contra el SIDA, la
cinta negra representa la lucha contra la violencia, y
la cinta blanca representa la lucha contra la
violencia contra la mujer.
Una fragancia que se diseña para reflejar
fuertemente la masculinidad
Connotar que el producto ofrecido realmente
seca a una velocidad sin precedente
Publicidad de ATyT
Publicidad de ATyT
Publicidad de ATyT
Publicidad de ATyT
Publicidad de ATyT
Publicidad de ATyT
Publicidad de ATyT
Publicidad de ATyT
Publicidad de ATyT
comunicar que la red de AT&T
tiene la mejor cobertura a lo
largo y ancho del mundo, 200
naciones alrededor del orbe.
http://www.aquafresh.co.uk
¿Se imagina a Cristo
usando Speed Stick?
¿Cómo vender papel de
colgadura de una manera
llamativa?