taller de sitios web > clase 1: estándares de diseño web cursos de verano 2009

14
Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

Upload: odalis-armenta

Post on 03-Jan-2015

7 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

Taller de sitios web> Clase 1: Estándares de diseño web

Cursos de verano 2009

Page 2: Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

1. Rueda de Colores(1)

> Principio  Los colores tienen unas propiedades inherentes que les permite

distinguirse de otros y acuñar distintas definiciones de tipo de color.

> Colores primarios  Son aquellos que no puedes crear, pero sí utilizar para crear

otros.

2

Page 3: Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

1. Rueda de Colores(2)

> Colores secundarios  Se obtienen mezclando 2 colores vecinos, y luego ubicando el

resultado en el 2do. bloque de cada grupo en blanco.

3

Page 4: Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

1. Rueda de Colores(3)

> Colores terciarios  Resultado de mezclar pares de colores (primarios y/o

secundarios) vecinos, y ubicar el resultado en el espacio en blanco.

4

Page 5: Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

2. Colores complementarios(1)

> Definición  Par de colores directamente opuestos en la rueda, que nos

garantizan un buen contraste.

> Ejemplo

5

Figura 2.2. Banner para V&M, utilizando la primera combinación de Colores Complementarios de la figura 1.4

Figura 2.1. Tres pares de Colores Complementarios.

Page 6: Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

2. Colores complementarios(2)

6

> Otro ejemplo

Figura 2.4. Aplicación de la tercera combinación de Colores

Complementarios de la figura 2.3

Figura 2.3. Tres pares de Colores Complementarios.

Page 7: Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

3. Tríadas de Colores(1)

7

> Ejemplo

Figura 3.2. Logotipo que utiliza la tríada mostrada en la figura 3.1

Figura 3.1. Tríada de colores

Page 8: Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

8

> Otro ejemplo

Figura 3.4. Mensaje al usuario que utiliza la tríada mostrada en la

figura 3.3

Figura 3.3. Tríada de colores

3. Tríadas de Colores(2)

Page 9: Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

9

> Tríadas de complemento dividido  Son aquellas que se forman eligiendo un color de la rueda, y

luego tomando los 2 colores vecinos a su complemento.

Figura 3.6. Menú de un sitio web que utiliza la tríada mostrada en la

figura 3.5

Figura 3.5. Tríada de colores de complemento dividido

3. Tríadas de Colores(3)

Page 10: Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

10

> Tríadas de complemento dividido  Son aquellas que se forman eligiendo un color de la rueda, y

luego tomando los 2 colores vecinos a su complemento.

Figura 3.7. Logotipo de un sitio que utiliza la tríada mostrada en la

figura 3.6

Figura 3.6. Tríada de colores de complemento dividido

3. Tríadas de Colores(3)

Page 11: Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

4. Colores análogos(1)

> Definición  Conjunto de colores adyacentes en la rueda, que al compartir

un color base, permiten una combinación armoniosa. Puedes ampliar tu selección, utilizando sombras y matices.

> Ejemplo

11

Figura 4.2. Banner y menú que utiliza los colores análogos mostrados

en la figura 4.1

Figura 4.1. Colores análogos

Page 12: Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

4. Colores análogos(2)

> Otro ejemplo

12

Figura 4.4. Banner y menú que utiliza los colores análogos mostrados

en la figura 4.3

Figura 4.3. Colores análogos

Page 13: Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

5. Sombras y matices(1)> Definición

  Conjunto de nuevos colores que se forman agregando negro o blanco a la rueda, lo cual nos permite expandirla enormemente.

Si se toma una columna de colores, se obtiene un conjunto de colores conocido como Colores Monocromáticos.

13

Page 14: Taller de sitios web > Clase 1: Estándares de diseño web Cursos de verano 2009

5. Sombras y matices(2)> Ejemplos

14

Formulario de registro que utilizan algunos colores monocromáticos.

Banner e introducción de un sitio Web, que utilizan algunos Colores Monocromáticos.