Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular....

50
Fundamentos de diseño 1

Transcript of Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular....

Page 1: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Fundamentos de diseño

1

Page 2: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

El Color

2

Page 3: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Propiedades del color

3

1. Tono

2. Saturación

3. Brillo

Page 4: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Propiedades del color: Tono

4

Tono ( hue), matiz o croma es el atributo que diferencia el color y por la cual designamos los colores: verde, violeta, anaranjado.

Page 5: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Propiedades del color: Tono

5

Saturación ( saturation) es la intensidad cromática o pureza de un color.

Page 6: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Propiedades del color: Tono

6

Brillo ( brightness) es la cantidad de luz emitida por una fuente lumínica o reflejada por una superficie.

Page 7: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Modelos de

representación del color

7

Page 8: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

El círculo cromático

8

• El ojo humano distingue unos 10.000 colores.

• El círculo cromático, es una representación ordenada y circular de los colores de acuerdo con su matiz o tono, en donde se representa a los colores primarios y sus derivados.

• Su uso es compatible tanto con los modelos sustractivos de color (artísticos, pictóricos), como con los modelos aditivos (lumínicos).

Page 9: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

El círculo cromático

9

El círculo cromático que conocemos no es del todo correcto, ya que solo representa los tonos en su máxima saturación no teniendo en cuenta la luminosidad de cada uno.

Por tanto, cuando lo utilicemos como referencia para hacer esquemas de color, debemos ser conscientes de esta limitación.

Page 10: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Uso del color

10

Para escoger los colores, nos basaremos en la imagen corporativa de la empresa.

Si esto no existe, debemos definir la gama de colores:

• Basada en las reglas de la teoría del color.

• Basada en la psicología del color.

Page 11: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

11

Page 12: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

12

Podemos clasificar los colores en fríos y cálidos.

Page 13: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

13

Los colores que se eligen en el esquema de color pueden implicar impresiones sutiles y activar distintas asociaciones en los espectadores.

Page 14: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

14

Blanco: significa seguridad, pureza y limpieza. A diferencia del negro, el blanco tiene una connotación positiva y es el más utilizado para dar un aspecto minimalista. Su máximo poder es el de resaltar a los otros colores.

Page 15: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

15

Amarillo: simboliza la luz del sol. Representa alegría, felicidad, inteligencia y energía. Al amarillo simula entrar en calor, provoca alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención, es útil para destacar aspectos importantes de un documento.

Page 16: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

16

Naranja: Representa entusiasmo, felicidad, atracción, creatividad, determinación, éxito, ánimo y estímulo. Por su alta visibilidad también es útil para captar la atención y subrayar aspectos a destacar de un lugar.

Page 17: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

17

Rojo: representa fuego y sangre, está asociado al peligro, la guerra, la energía, fortaleza, determinación así como a la pasión, al deseo y al amor. Visibilidad alta, para avisos importantes, prohibiciones y llamadas de precaución. Adecuado para el mundo del motor (coches y motos), bebidas energéticas, juegos, deportes y actividades de riesgo.

Page 18: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

18

Violeta: se asocia a la realeza y simboliza poder, nobleza, lujo y ambición. Sugiere riqueza y extravagancia. Asociado con la sabiduría, la creatividad, la independencia, la dignidad.

Page 19: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

19

Azul: el color del cielo y del mar, asociado con la estabilidad y la profundidad. Adecuado para mostrar limpieza, para promocionar productos de alta tecnología o alta precisión.

Page 20: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

20

Verde: el color de la naturaleza. Representa armonía, crecimiento, exuberancia, fertilidad y frescura.

Page 21: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

21

Negro: representa poder, elegancia, formalidad, muerte y misterio. Puede dar imagen de elegancia y aumentar la sensación de profundidad y perspectiva. También lo podemos usar para diseños minimalistas.

Page 22: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

22

Neutros (grises, marrones…): representan la neutralidad, la seriedad y la calma. Son colores perfectos para acompañarlos de pequeños toques de colores vivos, ya que son colores monótonos y relajantes.

Page 23: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

23

Page 24: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

24

Algunas asociaciones son globalmente reconocidas, como la de que el amarillo es el color de la luz del Sol, otras son específicas de cada cultura.

Cualquier experiencia que un grupo de personas tenga en común puede crear una nueva asociación con determinados colores. La globalización está exponiendo a la mayoría del mundo a unas imágenes y elecciones de color comunes a través del mundo audiovisual.

Page 25: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Psicología del color

25

Psicología del color. Cómo actúan los colores sobre los sentimientos y la razón-Eva Heller.

Page 26: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Esquemas de color

26

Page 27: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Esquemas de color

27

Se componen del conjunto de colores principales que aparecen en la imagen.

• Crea una primera impresión.

• Ayuda a establecer el estado de ánimo de la escena.

• Da cohesión a todos los elementos de la imagen.

• Ayuda a destacar unos elementos sobre otros sin crear estridencias.

Page 28: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Esquemas de color

28

Ningún color puede ser considerado un valor absoluto, de hecho los colores se influyen mutuamente si se acercan. Los colores tienen diferente realce según el contexto en el que se dispongan o se encuentren.

Page 29: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Monocromático Complementario AnálogoComplementario

DivididoTriaxial

Varias intensidades del mismo color.

Colores opuestos en el círculo.Permite introducir colores fríos y cálidos en el esquema.Puede resultar estridente

Colores adyacentes en el círculo, con un color común.

Combina un color con dos análogos de su complementario.

Combina tres colores equidistantes.

Esquemas de color: armonía

29

Page 30: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Esquemas de color: generadores

30

Para crear nuestros esquemas de color podemos utilizar generadores online gratuitos como el siguiente:

https://color.adobe.com/

Page 31: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Sistemas de trabajo con

color

31

Page 32: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Sistemas de trabajo con color: RGB

32

Colores luz primarios: rojo, verde y azul.

• Al sumarse el resultado es blanco.

• Al apagarse el resultado es negro.

Page 33: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Sistemas de trabajo con color: RGB

33

Page 34: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Sistemas de trabajo con color: RGB

34

Page 35: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Sistemas de trabajo con color: CMYK

35

Colores pigmento primarios: amarillo, cian, magenta y negro.

• Al sumarse el resultado es negro.

• Al eliminar cantidad el resultado es blanco.

Page 36: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Sistemas de trabajo con color: CMYK

36

Page 37: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Sistemas de trabajo con color: CMYK

37

En impresoras domésticas se usan dos sistemas de cartuchos:

4 cartuchos(o 2 si el de color va todo en uno)

6 cartuchos(impresiones más precisas)

Page 38: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Sistemas de trabajo con color: CMYK

38

Proceso impresión offset – Impresión profesional

Page 39: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Sistemas de trabajo con color: CMYK

39

Proceso impresión offset – Impresión profesional

Page 40: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Sistemas de trabajo con color: CMYK

40

Proceso impresión Pantone – Impresión profesional y forma más precisa de conseguir colores exactos.

Page 41: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Sistemas de trabajo con color: CMYK

41

Existen códigos que permiten traducir los pantones a CMYK: por ejemplo, el Pantone Coated 100 C (amarillo canario) se convierte al RGB con el código 246, 235 97 y al CMYK con 0, 41, 61, 4.

Pero, no siempre es posible convertir un color Pantone en un código CMYK. Por el hecho de que las tintas Pantone nacen de barnices y no de la unión de cuatro colores, a veces es imposible encontrar el equivalente exacto en un sistema diferente.

https://store.pantone.com/es/es/color-of-the-year-2017

Page 42: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Sistemas de trabajo con color:

Hexadecimal

42

Se utiliza en diseño web para definir los colores.

Este es el selector de Google, que podemos usar desde nuestro navegador buscado “Selector de color hexadecimal”

Page 43: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Imágenes

43

Page 44: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Imágenes para pantalla

44

• Se miden en píxeles.

• Resolución de 72 ppp.

• Si son para web es muy importante que su peso sea pequeño.

Page 45: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Imágenes para pantalla

45

Usaremos estos formatos:

• Jpg: fotografías e ilustraciones con mucha variación de colores.

• Gif: imágenes animadas.

• Png: ilustraciones de colores planos.

jpg png gif

Page 46: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Imágenes para pantalla

46

Cuando guardamos una imagen de colores planos en jpg aparecen los errores conocidos como artefactos jpg:

png jpg

Page 47: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Imágenes para pantalla

47

Cuando guardamos una imagen de colores planos en jpg aparecen los errores conocidos como artefactos jpg:

png jpg

Page 48: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Imágenes para impresión

48

• Se miden en mm o cm (aunque se trabajen en píxeles).

• Resolución de 150-300 ppp.

• Pesan mucho más que las imágenes para pantalla.

Page 49: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Imágenes para impresión

49

Existen tamaños estándares de papel:

Tamaño folio

Page 50: Fundamentos de diseño · alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida. Por su eficacia para atraer la atención,

Resolución

50

Podemos hablar de tres estándares:

• 72ppp: pantalla.

• 150ppp: impresora casera

• 300ppp: imprenta