¿QUÉ ES DISEÑO?
CONTENIDOS DIGITALES
Conceptos básicos
Comunicación Visual
Mediante el uso de texto, imágenes y símbolos.
¿CUALES SON LAS 3 ÁREAS DE HABILIDADES?
CONTENIDOS DIGITALES
Habilidades básicas
Artes visuales Fotografía, ilustraciones, pintura, entre otras.
Habilidades básicas
TIPOGRAFÍA Establecer, organizar y diseño de tipos.
Habilidades básicas
COMPOSICIÓN DE PÁGINA La disposición visual de los elementos en una pagina.
¿CÓMO CREAR UN GRAN DISEÑO?
CONTENIDOS DIGITALES
3F ( Form, Feeling, function )
FORMA - SENTIMIENTO - FUNCIÓN
FORMA
Visualmente muy atractivo
Los colores están en armonía Las tipografías bien elegidas
SENTIMIENTO
El mensaje
Estado de ánimo Evoca la respuesta emocional adecuada
FUNCIÓN
Sirve a su propósito
Fácil de leer y entender Debe ser reproducible
Todo mensaje tiene una señal emocional
CONTENIDOS DIGITALES
EJEMPLOS DE DISEÑO
EJEMPLOS DE DISEÑO
EJEMPLOS DE DISEÑO
EJEMPLOS DE DISEÑO
EJEMPLOS DE DISEÑO
EJEMPLOS DE DISEÑO
EJEMPLOS DE DISEÑO
EJEMPLOS DE DISEÑO
EJEMPLOS DE DISEÑO
EJEMPLOS DE DISEÑO
6 PRINCIPIOS BASICOS PARA UN
BUEN DISEÑO CONTENIDOS DIGITALES
PRINCIPIOS BÁSICOS
Equilibrio y balance Proximidad Alineación Repetición Contraste Espacio blanco
PRINCIPIOS BÁSICOS
EQUILIBRIO
Posición o distribución visual de los objetos.
PRINCIPIOS BÁSICOS - EQUILIBRIO
EQUILIBRIO SIMETRICO Misma importancia y peso visual en ambos lados. Sensación de orden, jerarquía y seguridad.
PRINCIPIOS BÁSICOS - EQUILIBRIO
PRINCIPIOS BÁSICOS - EQUILIBRIO
EQUILIBRIO ASIMETRICO Ilusión de la igualdad. Transmite agitación, tensión y alegría.
PRINCIPIOS BÁSICOS - EQUILIBRIO
PRINCIPIOS BÁSICOS - EQUILIBRIO
PRINCIPIOS BÁSICOS - EQUILIBRIO
EQUILIBRIO RADIAL Disponer alrededor del punto central. Trasmite dinamismo y vitalidad.
PRINCIPIOS BÁSICOS - EQUILIBRIO
PRINCIPIOS BÁSICOS - EQUILIBRIO
PRINCIPIOS BÁSICOS
PROXIMIDAD Agrupación o cercanía de los elementos de una composición. La proximidad le da al receptor una sensación de orden, armonía y cohesión
PRINCIPIOS BÁSICOS
ALINEACIÓN Mantener objetos en línea uno con otro.
PRINCIPIOS BÁSICOS
REPETICIÓN
Es un esfuerzo consciente por unificar un diseño repitiendo elementos a lo largo de toda la pieza. Utilizando una paleta de colores, formas, texturas, tamaños y tipografias
PRINCIPIOS BÁSICOS - REPETICIÓN
PRINCIPIOS BÁSICOS - REPETICIÓN
PRINCIPIOS BÁSICOS - REPETICIÓN
PRINCIPIOS BÁSICOS
CONTRASTE
Genera distinciones que nos permiten enfatizar o resaltar los elementos clave. Presente en el tamaño, color, la tipografía.
PRINCIPIOS BÁSICOS - CONTRASTE
PRINCIPIOS BÁSICOS - CONTRASTE
PRINCIPIOS BÁSICOS
ESPACIOS EN BLANCO El espacio en blanco expresa la necesidad de evitar el exceso de información, y reducir el diseño a lo esencial.
PRINCIPIOS BÁSICOS – E. BLANCO
PRINCIPIOS BÁSICOS – E. BLANCO
EJERCICIO ENTREGABLE
Busca 10 diseños que consideres mal realizados (feos o que les falta estética, belleza), y explica (captura de pantalla) en cada caso qué es lo que está faltando en ellos o como violan los principios que hemos visto.
Busca 10 diseños que entiendes se ven muy bien y cumplen con los principios estéticos que vimos en este módulo y explica qué hace que se vean bien ( captura de pantalla).
APLICANDO CREATIVIDAD
CONTENIDOS DIGITALES
CREATIVIADAD EN EL PROCESO DE DISEÑO
MENSAJE Como puedo transmitir de forma precisa y concisa lo que debe comunicar; con el mayor impacto y usando menos palabras
CREATIVIADAD EN EL PROCESO DE DISEÑO
SENTIMIENTO Determinar que colores, texturas hacen brotar tal o cual sensación en este diseño en particular
CREATIVIADAD EN EL PROCESO DE DISEÑO
ESTRUCTURA Como puedo hacer que lo mas importante resalte primero y que el resto de los elementos queden balanceados en la composición
CREATIVIADAD EN EL PROCESO DE DISEÑO
DISEÑO Cómo traslado los sentimientos a elementos gráficos concretos con el aspecto óptimo y sin sacrificar el mensaje
CREATIVIADAD EN EL PROCESO DE DISEÑO
ATMOSFERA Qué elementos adicionales o ajustes necesito para resaltar aún mas el impacto pero sin exagerar ni sobre-maquillar.
REFERENCIARSE
CONTENIDOS DIGITALES
¿QUÉ ES LO QUE VES?
CONTENIDOS DIGITALES
¿Qué es lo que ves?
¿Qué emoción o sensación genera?
¿Qué mensaje transmite?
¿Cuál es su paleta de color?
¿Qué aprendo del diseño?
¿Qué es lo que ves?
¿Qué es lo que ves?
¿Qué es lo que ves?
¿Qué es lo que ves?
¿Qué es lo que ves?
EJERCICIO ENTREGABLE
Busca 10 buenos diseños y responde los siguientes interrogantes
¿Qué emoción o sensación genera ese diseño? ¿Qué mensaje transmite el diseño? ¿Cuál es su paleta de color del diseño? ¿Qué aprendo del diseño?
APRENDE A REFERENCIARTE
CONTENIDOS DIGITALES
REFERENCIANDOSE
EJERCICIO ENTREGABLE Busca 10 buenos diseños y de cada uno extrae su estructura y paleta de colores, al mismo tiempo de la enseñanza que te deja ese gráfico como diseñador (un párrafo es suficiente para cada uno).
PSICOLOGÍA DE LAS FORMAS
CONTENIDOS DIGITALES
LAS FORMAS - PREMISA
TODO LO QUE SE VE TIENE UNA FORMA
LAS FORMAS – ¿QUÉ VES?
LAS FORMAS – ¿QUÉ VES?
La mente lo completa
LAS FORMAS – ¿QUÉ VES?
LAS FORMAS – ¿QUÉ VES?
LAS FORMAS – ¿QUÉ VES?
LAS FORMAS - SIGNIFICADO
CIRCULO Las percibimos como amigables e inofensivas. Invitan a acercarnos, a jugar con ellas Físicamente son fáciles de mover, no tienen esquinas que nos lastimen. Son adecuadas para transmitir las ideas y sentimientos de amor, soporte, plenitud, compromiso, infinidad
LAS FORMAS - CIRCULO
LAS FORMAS - CIRCULO
LAS FORMAS - SIGNIFICADO
RECTANGULO Los asociamos con cosas sobrias, formales y masculinas. Inspiran respeto. Físicamente tienen estabilidad. No esperamos que se mueva Son adecuadas para transmitir las ideas de poder, confianza, fuerza, dominio, seriedad y tranquilidad
LAS FORMAS - RECTANGULOS
LAS FORMAS - RECTANGULOS
LAS FORMAS - SIGNIFICADO
TRIANGULO Las figuras triangulares evocan crecimiento, enfoque, soporte, inspiración, vitalidad, igualdad, justicia, ciencia y poder. Al rotarlos pueden transmitir cambio de dirección, avance, retroceso y en algunos casos hasta caída.
LAS FORMAS - TRIANGULO
LAS FORMAS - TRIANGULO
EJERCICIO ENTREGABLE Trabajo Individual: Busca 5 logos de empresas reconocidas a nivel internacional (logos famosos) e identifica dentro del mismo las formas básicas que lo componen. Puedes hacerlo en PowerPoint o en algún programa de edición gráfica que manejes actualmente. Trabajo en grupo: cada miembro de cada grupo va a elegir UNA forma (la que desee, de cualquier tipo) y va a buscar 5 logos o diseños que estén basados en esa forma o que la usen. Al entregar el trabajo el grupo va a crear UN SOLO documento recopilando lo realizado por cada quien (una hoja por participante).
EL COLOR
CONTENIDOS DIGITALES
CONCEPTOS BASICOS
¿COMO AFECTA EL COLOR A NUESTRO CEREBRO? Todo color provoca una sensación y respuesta del espectador
COLORES CÁLIDOS Y FRIOS
SENSACIONES DE LOS COLORES
LOS EFECTOS DEL AMARILLO Activa la memoria Estimula el sistema nervioso Estimula el proceso mental Color mas feliz del espectro
SENSACIONES DE LOS COLORES
LOS EFECTOS DEL VERDE Crea una sensación de calma Te relaja tanto mental como físicamente Ayuda a aliviar el nerviosismo y la ansiedad Ofrece sensación de armonía y renovación
SENSACIONES DE LOS COLORES
LOS EFECTOS DEL AZUL Crea una sensación de calma Considerado como un color frio Promueve la productividad Considerado un color fiable y confiable
SENSACIONES DE LOS COLORES
LOS EFECTOS DEL PÚRPURA Considerado como muy edificante Crea una sensación de calma A menudo relacionado con la espiritualidad Fomenta la creatividad Combina la estimulación del rojo con la calma del azul
SENSACIONES DE LOS COLORES
LOS EFECTOS DEL ROSA Te da una sensación de energía Como el rojo aumenta la presión arterial Inspira confianza Considerado juvenil, divertido y emocionante
SENSACIONES DE LOS COLORES LOS EFECTOS DEL ROJO Estimula la energía Puede elevar la presión arterial e inspirar a la acción Inspira confianza Nos da una sensación de protección Llama mas la atención que cualquier otro color
SENSACIONES DE LOS COLORES
LOS EFECTOS DEL NARANJA Estimula la actividad Aumenta el apetito Inspira el comportamiento social Considerado el color más controvertido
SENSACIONES DE LOS COLORES
LOS EFECTOS DEL MARRON Promueve sensación de tranquilidad Genera sensación de humildad Inspira comodidad y tranquilidad Es confortable y genera seguridad
SENSACIONES DE LOS COLORES
LOS EFECTOS DEL BLANCO Promueve una sensación de claridad Anima a suprimir elementos Simboliza nuevos comienzos y purificación Uno de los colores mas neutros del espectro
SENSACIONES DE LOS COLORES
LOS EFECTOS DEL GRIS Puede ser inquietante para algunas personas Tiende a crear expectativas Considerado como el color del intelecto
Visto como de larga duración, refinado y elega
SENSACIONES DE LOS COLORES
LOS EFECTOS DEL NEGRO Considerado como un color relajante Promueve una sensación de poder y autoridad Puede ser abrumador en grandes cantidades Puede evocar emociones fuertes
LAS REGLAS DEL COLOR
CONTENIDOS DIGITALES
COLORES PRIMARIOS SECUNDARIOS Y TERCIARIOS
No se pueden crear mezclando otros colores
Creados mediante la mezcla de los primarios
Combinación entre un primario y un secundario
ARMONIA DE COLOR Aquellos colores que se pueden combinar fácil en una paleta de colores.
CONTENIDOS DIGITALES
ARMONIAS DE COLOR
ARMONIAS DE COLOR
COMPLEMENTARIOS Son los colores que se encuentran de manera opuesta en el círculo cromático. Es muy recomendable utilizarlos
para
generar
buenos
contrastes con el buen uso del color blanco.
ARMONIAS DE COLOR - COMPLEMENTARIOS
ARMONIAS DE COLOR - COMPLEMENTARIOS
ARMONIAS DE COLOR - COMPLEMENTARIOS
ARMONIAS DE COLOR - COMPLEMENTARIOS
ARMONIAS DE COLOR
ADYACENTES Tomando como base un color de rueda y
después otros dos que
equidisten del complementario del primero. El contraste en este caso no es tan marcado
ARMONIAS DE COLOR - ADYACENTES
ARMONIAS DE COLOR
ANÁLOGOS Son los colores que se encuentran uno al lado de otro en el círculo cromático. Su uso es muy funcional debido a la sensación de variedad en los colores.
ARMONIAS DE COLOR - ANÁLOGOS
ARMONIAS DE COLOR - ANÁLOGOS
ARMONIAS DE COLOR COMPLEMENTARIOS DIVIDIDOS Esta combinación la podemos obtener escogiendo cualquier color del círculo cromático,
luego
apuntamos
al
color
opuesto; en vez de elegir el que nos sale; optamos por los colores que están a su lado. Técnicamente, se forma un triángulo isósceles en el círculo cromático.
ARMONIAS DE COLOR TRÍADAS Son los colores que se encuentran uno al lado de otro en el círculo cromático. Su uso es muy funcional debido a la sensación de variedad en los colores.
ARMONIAS DE COLOR -TRIADAS
TRÍADAS CON COLORES PRIMARIOS
ARMONIAS DE COLOR -TRIADAS
TRÍADAS CON COLORES SECUNDARIOS
ARMONIAS DE COLOR
TETRÁDICO Para
conseguir
esta
combinación
tenemos que crear un rectángulo en el círculo cromático, escogemos un par de colores que estén intercalados y luego buscamos sus opuestos.
ARMONIAS DE COLOR - TETRÁDICO
ARMONIAS DE COLOR CUADRADO DE COLORES Lo que tenemos que hacer es crear un cuadrado en el círculo cromático. Básicamente, es como escoger colores complementarios
y
formarlos
de
manera equitativa. Si tienes muchos colores a utilizar, esta combinación de podría ayudar mucho.
ARMONIAS DE COLOR MONOCROMATICOS La idea en sí es escoger un solo color y jugar con sus tonalidades claras hasta llegar al blanco.
ARMONIAS DE COLOR - MONOCROMATICOS
ARMONIAS DE COLOR - MONOCROMATICOS
ARMONIAS DE COLOR - MONOCROMATICOS
ARMONIAS DE COLOR ACROMÁTICO
Aquí solo se involucra a los colores blanco y negro, claro que también puedes combinar con algunos grises.
ARMONIAS DE COLOR - ACROMATICO
ARMONIAS DE COLOR - ACROMATICO
TIPOGRAFÍA Es elegir con criterio los tipos, componer los textos con ellos y presentarlos con un alto grado de cuidado estético.
CONTENIDOS DIGITALES
TIPOGRAFÍA
TIPOGRAFÍA
Es la estrella de toda
LA COMUNICACIÓN
TIPOGRAFÍA
La escritura va a controlar las emociones
TIPOFRAFÍA
Tipo
SOLO AL SOÑAR TENEMOS LIBERTAD Nicolás Fuente
Familia
Estilo
Regular – italica - Bold
Fuente: Garamond
TIPOFRAFÍA – TIPOS DE ARCHIVO
PostScript
TrueType
OpenType
TIPOFRAFÍA – PARTES LETRAS
TIPOFRAFÍA – PARTES LETRAS
TIPOFRAFÍA – PARTES LETRAS
TIPOFRAFÍA – PARTES LETRAS
TIPOFRAFÍA – PARTES LETRAS
TIPOFRAFÍA – PARTES LETRAS
TIPOFRAFÍA – PARTES LETRAS
TIPOFRAFÍA – PARTES LETRAS
TIPOFRAFÍA – PARTES LETRAS
TIPOFRAFÍA – PARTES LETRAS
TIPOFRAFÍA – PARTES LETRAS
TIPOFRAFÍA – PARTES LETRAS
TIPOFRAFÍA
CLASIFICACIÓN TIPOS LETRA La manera más sencilla y directa para clasificar un tipo de letra es observar su terminación.
TIPOFRAFÍA - CLASIFICACIÓN SERIF Son ideales para textos de larga lectura ya que esos “palitos” o serifas ayudan a crear una especie de línea imaginaria entre cada texto que hace que el ojo sienta que le van guiando. Por eso la mayoría de revistas y diarios impresos usan alguna fuente tipográfica con esta característica.
TIPOFRAFÍA - CLASIFICACIÓN SANS SERIF Estos tipos son preferidos en el mundo
del
desarrollo
web
y
situaciones donde se hace necesaria una lectura rápida y sin muchas distracciones. De igual forma son muy utilizadas estas fuentes para el diseño de logos por la frescura que imprimen a las marcas
TIPOFRAFÍA - CLASIFICACIÓN SCRIPT son todas aquellas familias tipográficas que tienen un aspecto humano, caligráfico, o como si estuvieran hechas “a mano alzada”. La impresión que dan de inmediato es que lo que se está promoviendo o comunicando tienen un toque natural, orgánico, o hasta personal en muchos casos.
TIPOFRAFÍA - CLASIFICACIÓN Góticas y de fantasía: Son esos tipos de letras basados en objetos del mundo real, en personajes o escenarios fantasiosos. También recogen el sentir y la estética de una época específica. Sin embargo tenemos que sacar aparte el caso de las góticas puesto que sí son tomadas más enserio aunque su uso no deja de ser limitado porque resultan ser muy pesadas y con tintes “oscuros” o medievales
TIPOFRAFÍA - CLASIFICACIÓN
A pesar esta clasificación te vas a encontrar con tipos que no caben en ninguna de las categorías anteriores o que incluso pertenecen a más de una categoría.
TIPOFRAFÍA
INTERLINEADO Espacio entre líneas de texto. Esta distancia, medida en puntos, se mide desde una línea base a otra.
TIPOFRAFÍA -INTERLINEADO
TIPOFRAFÍA
TRACKING Espacio entre caracteres a través de todo un bloque de texto
TIPOFRAFÍA - TRACKING
TIPOFRAFÍA
KERNING Espacio entre dos caracteres individuales dentro de un bloque de texto.
TIPOFRAFÍA - KERNING
TIPOFRAFÍA - KERNING
TIPOFRAFÍA
GLIFO O PICTOGRAMA Una representación de cada carácter dentro de un tipo de letra determinado.
TIPOFRAFÍA - GLIFO
REGLAS TIPOGRAFICAS Es elegir con criterio los tipos, componer los textos con ellos y presentarlos con un alto grado de cuidado estético.
CONTENIDOS DIGITALES
REGLAS TIPOGRAFICAS
Letras clásicas aseguran la legibilidad del proyecto Entre 1 y 3 tipos de letras deberían ser suficientes por proyecto No uses tipografía similares, es importante que se puedan distinguir No uses la mayúscula en exceso, no permite bien la lectura
REGLAS TIPOGRAFICAS Selecciona tamaño de fuentes legibles, según su medio de salida Elige un único estilo y tamaña para cada parte de texto Prestar atención al kerninig Los tipos de letra deben combinar Utiliza la alineación apropiada, sobre todo en los parrafos
REGLAS TIPOGRAFICAS La tipografía debe contrastar con el fondo siempre Mantener las características de las tipografías, no distorsionar, ni deformar. Ajusta configuración de párrafos para evitar las huérfanas Usar un buen alineado Para llamar la atención en un párrafo de una palabra o frase usa las cursivas y no el subrayado.
REGLAS TIPOGRAFICAS