Diseño Web

COLOR

COLOR

Elegir un conjunto de colores depende: Estética Identidad / Negocio Reutilización Visitantes

Psicologia del COLOR

ROJO: Presión, Sangre,... PASIÓN INCREMENTA el metabolismo HUMANO! Exitante, dramático

Psicologia del COLOR

NARANJA: Creatividad, entusiasmo.. Felicidad! La salida del sol!

Psicologia del COLOR

Amarillo: Actividad, COLOR VISIBLE!, Felicidad

Psicologia del COLOR

VERDE: Naturaleza! Crecimiento, frescura, esperanza Agradable para los ojos VS FONDO NEGRO

Psicologia del COLOR

Purpura: Nobleza y poder! Salud y extravagancia, flores, apuestas de sol!

Psicologia del COLOR

AZUL: Juvenil! Inteligencia, la fé, extroversión Espacios abiertos, el infinito! Ufff poco original!!!

Psicologia del COLOR

Blanco: Puro, limpio, perfección... Detergentes, bodas...

Psicologia del COLOR

Negro: Tristeza, diabólico...? Elegancia, poder, dureza...

Psicologia del COLOR

Temperatura!!! Colores Cálidos

Colores Frios

¿Por qué? Cultura y naturaleza!

Propiedades del COLOR

Matiz: es el estado puro del color,sin blanco o negro agregados.

Saturación o intensidad: pureza delmismo. Añadiendo gris → color menos saturado Mezclarlo con el complementario → color neutro

Brillo: la claridad o la oscuridad. Mezclando con blanco.

Propiedades del COLOR

Consideraciones: el color!

El color se representa:

En un monitor > 1 pixel > 3 ”bombillas” RGB

Negro rgb = { 0, 0, 0 } Blanco rgb = {255, 255, 255}

RED GREEN BLUE

Esquemas de COLOR

Monocromático: 1 sólo color, con tonos más claros y oscuros:

Acromático (Sin color: blanco y negro)

Esquemas de COLOR

Análogos: Colores adyacentes en la rueda...

Esquemas de COLOR

Complementarios: Colores opuestos unos a otros en la rueda...

Contraste simultaneo !!! NO GRACIAS

Esquemas de COLOR Contraste simultaneo!

Jugando con Colores

¡¡¡¡JUGUEMOS!!!! http://roble.pntic.mec.es/apuente/tefond.html

COLOR

En HTML! El color se representa en hexadecimal:

#000000 (NEGRO), #FFFFFF(BLANCO),

Wheel COLOR

¡¡¡¡JUGUEMOS!!!! www.wellstyled.com/tools/colorscheme2/

Conclusión: Combinando Colores

¡No existen las reglas! Pero si las buenas maneras

Consejos: Tonos Pasteles = Colores suaves! Letras con colores suaves y nítidos. Con un alto

contraste respecto al fondo. Hola! Hola! Hola! Hola! Hola! Hola! Hola! Hola!

El fondo alegre, suave, progresivo y sin repetir patrones. ¡No ha de tomar el protagonismo de la web!

COLOR

Antes de comenzar a realizar una web...

Hay que diseñar la paleta de colores!

Buenos ejemplos

http://www.mozilla-europe.org/es/

Buenos ejemplos

No todo tiene porque ser azul http://www.lastfm.es/

Buenos ejemplos

Ni colores alegres: http://subscene.com/

Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú

ni visual, ni mental.

La fuente adecuada es aquella leida sin ningún tipo de esfuerzo: ni visual, ni mental.

La fuente adecuada es aquella leida sin ning n tipo de esfuerzo ú :ni visual ni mental, .

La fuente adecuada es aquella leida sin ningún tipo de esfuerzo: ni visual, ni mental.

Fuentes: Importancia y distinción

Normal

Entretenido

Genial

Fantástico Maravilloso Inconmesurable

Paz !!! Israel  decide  irse  de Palestina.El  gobierno  israelita  ha  decidido dejar tierras palestinas debido....

Fuente

No todas las lenguas tienen los mismos caracteres: ñ, l·l, ç, ¿, ¡,

No todos tienen acentos ni diéresis: ô, ü, à, ó Hay fuentes comunes en la mayoría de

sistemas operativos: Times New Roman Courier Nimbus Roman

Fuentes y COLOR

Normal

Entretenido

Genial

Fantástico Maravilloso Inconmesurable

Paz !!! Israel  decide  irse  de Palestina.El  gobierno  israelita  ha  decidido dejar tierras palestinas debido....

Más conceptos a tener en cuenta:

Texturas! 3D – Volumen, Degradados, Usar con moderación

Imagenes! Imagenes Vectoriales!... JPEG, PNG, SVG? Cuidado con los derecho de autor!

Hazlas tu mismo! Compralas! Contrata a un profesional!

Creación de imagenes

Herramientas: Photoshop! $

Inksckape! Free

http://www.inkscape.org/

Imagenes Free!

¡¡¡¡JUGUEMOS!!!! http://www.sxc.hu/ http://www.morguefile.com/

¡¡¡ Actividad !!!

A debate: Análisis de Web Páginas

1. http://www.once.es/

2. http://www.amazon.com/

3. http://www.telefonicaonline.com/

4. http://www.elpais.com/

5. http://www.emaya.es/

6. http://www.zara.es/

7. http://www.apple.com/es/

8. http://www.maec.es/