Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es...
Transcript of Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es...
![Page 1: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/1.jpg)
Diseño Web
COLOR
![Page 2: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/2.jpg)
COLOR
Elegir un conjunto de colores depende: Estética Identidad / Negocio Reutilización Visitantes
![Page 3: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/3.jpg)
Psicologia del COLOR
ROJO: Presión, Sangre,... PASIÓN INCREMENTA el metabolismo HUMANO! Exitante, dramático
![Page 4: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/4.jpg)
Psicologia del COLOR
NARANJA: Creatividad, entusiasmo.. Felicidad! La salida del sol!
![Page 5: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/5.jpg)
Psicologia del COLOR
Amarillo: Actividad, COLOR VISIBLE!, Felicidad
![Page 6: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/6.jpg)
Psicologia del COLOR
VERDE: Naturaleza! Crecimiento, frescura, esperanza Agradable para los ojos VS FONDO NEGRO
![Page 7: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/7.jpg)
Psicologia del COLOR
Purpura: Nobleza y poder! Salud y extravagancia, flores, apuestas de sol!
![Page 8: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/8.jpg)
Psicologia del COLOR
AZUL: Juvenil! Inteligencia, la fé, extroversión Espacios abiertos, el infinito! Ufff poco original!!!
![Page 9: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/9.jpg)
Psicologia del COLOR
Blanco: Puro, limpio, perfección... Detergentes, bodas...
![Page 10: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/10.jpg)
Psicologia del COLOR
Negro: Tristeza, diabólico...? Elegancia, poder, dureza...
![Page 11: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/11.jpg)
Psicologia del COLOR
Temperatura!!! Colores Cálidos
Colores Frios
¿Por qué? Cultura y naturaleza!
![Page 12: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/12.jpg)
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.
![Page 13: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/13.jpg)
Propiedades del COLOR
![Page 14: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/14.jpg)
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
![Page 15: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/15.jpg)
Esquemas de COLOR
Monocromático: 1 sólo color, con tonos más claros y oscuros:
Acromático (Sin color: blanco y negro)
![Page 16: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/16.jpg)
Esquemas de COLOR
Análogos: Colores adyacentes en la rueda...
![Page 17: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/17.jpg)
Esquemas de COLOR
Complementarios: Colores opuestos unos a otros en la rueda...
Contraste simultaneo !!! NO GRACIAS
![Page 18: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/18.jpg)
Esquemas de COLOR Contraste simultaneo!
![Page 19: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/19.jpg)
Jugando con Colores
¡¡¡¡JUGUEMOS!!!! http://roble.pntic.mec.es/apuente/tefond.html
![Page 20: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/20.jpg)
COLOR
En HTML! El color se representa en hexadecimal:
#000000 (NEGRO), #FFFFFF(BLANCO),
![Page 21: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/21.jpg)
Wheel COLOR
¡¡¡¡JUGUEMOS!!!! www.wellstyled.com/tools/colorscheme2/
![Page 22: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/22.jpg)
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!
![Page 23: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/23.jpg)
COLOR
Antes de comenzar a realizar una web...
Hay que diseñar la paleta de colores!
![Page 24: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/24.jpg)
Buenos ejemplos
http://www.mozilla-europe.org/es/
![Page 25: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/25.jpg)
Buenos ejemplos
No todo tiene porque ser azul http://www.lastfm.es/
![Page 26: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/26.jpg)
Buenos ejemplos
Ni colores alegres: http://subscene.com/
![Page 27: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/27.jpg)
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.
![Page 28: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/28.jpg)
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....
![Page 29: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/29.jpg)
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
![Page 30: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/30.jpg)
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....
![Page 31: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/31.jpg)
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!
![Page 32: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/32.jpg)
Creación de imagenes
Herramientas: Photoshop! $
Inksckape! Free
http://www.inkscape.org/
![Page 33: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/33.jpg)
Imagenes Free!
¡¡¡¡JUGUEMOS!!!! http://www.sxc.hu/ http://www.morguefile.com/
![Page 34: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/34.jpg)
¡¡¡ Actividad !!!
![Page 35: Diseño Web - cursodweb.files.wordpress.com€¦ · Diseño: Tipografía La fuente adecuada es aquella leida sin ning n tipo de esfuerzo: ú ni visual, ni mental. La fuente adecuada](https://reader034.fdocumento.com/reader034/viewer/2022052021/60356093762d2d13781dad7a/html5/thumbnails/35.jpg)
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/