Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es...
35
Diseño Web COLOR
Transcript of Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es...
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/
