diseÑo_y_color
TRANSCRIPT
-
8/8/2019 DISEO_Y_COLOR
1/36
DISEANDO Y APLICANDOCOLOR
A DOCUMENTOS, POWERPOINT
Y
PGINAS WEBPor Silvia Sowa
-
8/8/2019 DISEO_Y_COLOR
2/36
En Power Point y
iseando, sigue estos pa
-
8/8/2019 DISEO_Y_COLOR
3/36
1.PLANEAR:utilizarimg
enesycontenidoen
baseaobjetivos,aunconcepto,laaudiencia,
tiempo,nivel,tema,.
2.PREPARAR:texto,diseo,
letras,template,contenido,
colores,cantidad
3.D
ESAR
ROLL
AR:ela
bora
r,
inserta
relem
ento
s:video
,
sonid
o,im
gene
s,co
mbinar
,
verif
icar,ins
erta
r,pr
obar
4.PRESENTAR:seguirnormas,contactovisual,expresinnoverbal,conocimientodeltema,esquemasdeco
-
8/8/2019 DISEO_Y_COLOR
4/36
Bien, el color que percibimos de un objeto es el rayode luz que refleja.
As, un objeto es rojo porque absorbe los rayos
azules y amarillos y rechaza los rojos y por tanto, elprocesamiento que hace nuestro cerebro para estetipo de rayos, es lo que denominamos color rojo.
Qu funcin tiene el COLORen cuanto al diseo?
-
8/8/2019 DISEO_Y_COLOR
5/36
Qu hacer parausar el color el base a objetivos?
Hacer conexin con la realidad, aadir sentido
Discriminar visualmente
Centrar la atencin en determinados elementos
Enlazar elementos que van relacionados
-
8/8/2019 DISEO_Y_COLOR
6/36
Y por supuesto
hayque saber
qu significan loscolores pues quieres
saber qu mensaje eststransmitiendo.
-
8/8/2019 DISEO_Y_COLOR
7/36
Roj
o
Alegra, entusiasmo, pasin, emocin, accin, agresividad, peligro.
Azul Es un color reservado, confianza, elegancia, armona,afecto, amistad, fidelidad, amor.
VerdeReservado y esplendoroso, esperanza, naturaleza,
juventud, deseo, descanso, equilibrio.
Amarillo
Irradia emocin, es el color de la luz, egosmo, celos,envidia, odio, adolescencia, tambin expresa risa, placer.
-
8/8/2019 DISEO_Y_COLOR
8/36
Naranja Es el color del fuego flameante, ha sido escogido comoseal de precaucin, regocijo, fiesta, aurora, presencia de sol
RosadoIngenuidad, bondad, ternura, buen sentimiento, ausencia detodo mal.
VioletaEs el color que indica ausencia de tensin, calma, autocontrol,dignidad, aristocracia, pero tambin violencia, o engao.
BlancoInocencia, paz. infancia, divinidad, estabilidad absoluta,calma, armona.
Negro
Es lo opuesto a la luz, separacin, tristeza. muerte, noche,
tambin tiene sensaciones positivas como: seriedad, nobleza
-
8/8/2019 DISEO_Y_COLOR
9/36
Cmocomplementarlos?
-
8/8/2019 DISEO_Y_COLOR
10/36
Busca a tucomplementario
que marcha siemprecontigoy suele ser tu contrario(Antonio Machado)
-
8/8/2019 DISEO_Y_COLOR
11/36
Para proporcionar mayorescontrastes,los colores se
complementan as
PRIMARIOS con SECUNDARIOSSECUDARIOS con PRIMARIOSINTERMEDIOS con INTERMEDIOSEs decir:
FROS CON CLIDOS Y VICEVERSASi as! y ..Las GAMAS de un mismo color con susdiversos tonos
-
8/8/2019 DISEO_Y_COLOR
12/36
Para aprendercmohacerlo.
veamoselcrculocromtico..
-
8/8/2019 DISEO_Y_COLOR
13/36
-
8/8/2019 DISEO_Y_COLOR
14/36
Tambin se utilizan las gamas de un mismo color paradar realce y aadir significado o profundidad.
Se pueden utilizar tambin los colores metales.
-
8/8/2019 DISEO_Y_COLOR
15/36
-
8/8/2019 DISEO_Y_COLOR
16/36
COMBINACIONES EN COLORESCOMPLEMENTARIOS
del amarillo (P)ser el violeta (S)
mezcla de losprimarios azul
y rojo
El complementario de un primario (P) es la mezcla de los otrosdos primarios
-
8/8/2019 DISEO_Y_COLOR
17/36
El complementariodel azul
ser el anaranjadose obtiene mediante
la mezcla del rojoy del amarillo
-
8/8/2019 DISEO_Y_COLOR
18/36
complementariodel rojo es
el verde,mezcla del
amarilloy el azul
-
8/8/2019 DISEO_Y_COLOR
19/36
El complementario de un color secundario(S) ser un primario (P) el cual no interviene
en la mezcla para su composicin
-
8/8/2019 DISEO_Y_COLOR
20/36
-
8/8/2019 DISEO_Y_COLOR
21/36
COLORen
pginasWeb
-
8/8/2019 DISEO_Y_COLOR
22/36
Recordemos algunas pautas generales
Nodemasiados
objetos
Uso de
navegacin
Sub
pginas
Incluirinformacin
TablasCon Bordes
visibles
Ttulosignificativo
WEB
Mismo estiloPara
Iconos
-
8/8/2019 DISEO_Y_COLOR
23/36
El texto Mismo tipode fuente
No abusar demaysculas
No abusar deEfectos en texto
Utilizar
Tablas
Adecuadotamao de
Fuentes
-
8/8/2019 DISEO_Y_COLOR
24/36
Enlaces
enp
ginas
-
8/8/2019 DISEO_Y_COLOR
25/36
Indicarclaramente
el vinculo que
poseen
Limitar elnmero de
enlaces
Texto breve
Si est formado por unaimagen
y un textosimultneamente,
ambos deben aparecerjuntos
Agrupar los enlacesPor listas organizadas
No dejarpginas
hurfanas,
sin enlaces
Verificar sufuncionamiento,
actualizar
COLOR
-
8/8/2019 DISEO_Y_COLOR
26/36
COLOR
Elije un fondo y un color de texto de contraste.
Mantn la coherencia con el formato del texto:
Evita:
Cambios de color bruscos o sin sentido.
Abusar de cursivas (dificultad en la lectura)Subrayado (confunde con links)
Textos demasiado largos
Fondos con texturas o imgenes y texto sobrepuesto
en exageracin
Utilizar imgenes con movimiento, slo cuando
cumplan un objetivo determinado o complementen la informacin.
-
8/8/2019 DISEO_Y_COLOR
27/36
Fondo Imgenes ytexto
Resaltadores obordes
Blanco Azul, negro,verde
Rojo, naranja
Gris claro Azul, verde,
negro
Rojo
Azul Amarillo,blanco
Rojo, amarillo
Azul claro oceleste
Azul oscuro,verde oscuro
Rojo, naranja
Amarillo claro
(oscuro)
Violeta, caf,(negro)
Rojo
SI
SI
SI
SI
SI
-
8/8/2019 DISEO_Y_COLOR
28/36
FONDO IMGENES YTEXTO
RESALTADORESO BORDES
Rojo Azul, verde Rojo, naranja
Morado Rojo, corinto Rojo
Azul Rojos Rojo, amarillo
verde Celeste, azul Rojos
Amarillo claro,beige, salmn
Violeta, caf,(negro)
Celeste, blanco
NO
NO
NO
NO
NO
-
8/8/2019 DISEO_Y_COLOR
29/36
Cmo utilizar los colores en pginas?
NEGRO
ROJO
ROJOCORINTO
AZUL
GRIS
Interttulos y texto en general
Links, enlaces o vnculos no visitados
Al pasar el puntero por el mouse
Links visitados
Ttulos y marco superior del cuadro deMens de informacin complementaria
-
8/8/2019 DISEO_Y_COLOR
30/36
Las 5
clases de imgenesa utilizar en diseo WebPara
agregar contenidoy significado al sitio
-
8/8/2019 DISEO_Y_COLOR
31/36
1. Decorativas
-
8/8/2019 DISEO_Y_COLOR
32/36
2.
Repre
senta
tivas
-
8/8/2019 DISEO_Y_COLOR
33/36
3. Organizacionales
-
8/8/2019 DISEO_Y_COLOR
34/36
4. explicativas
-
8/8/2019 DISEO_Y_COLOR
35/36
5. transformadoras
-
8/8/2019 DISEO_Y_COLOR
36/36
A empezar a trabajar!