SlideShare uma empresa Scribd logo
1 de 4
O design equilibrado. O contraste 
O contraste permite ressaltar o peso visual, podemos consegui-lo através 
de diversos meios: tons, cores, contornos e escala. 
O contraste é o efeito que permite ressaltar o peso visual de um ou mais elementos 
ou zonas de uma composição mediante a oposição ou diferença apreciável entre 
elas, permitindo-nos atrair a atenção de espectador para eles. 
O contraste pode ser conseguido através de diferentes oposições entre elementos: 
Contraste de tons 
Obtemos contraste entre elementos que possuem tons (claridade-escuridão) 
opostos. Neste caso, o maior peso terá o elemento mais escuro, destacando o mais 
claro sobre ele com mais intensidade quanto maior for a diferença tonal. 
Conforme se diminui a tonalidade do elemento mais escuro o contraste vai 
perdendo intensidade, sendo necessário redimensioná-lo se quisermos manter o 
mesmo contraste.
Este tipo de contraste é talvez o mais intenso, e é muito usado em composições 
gráficas. 
Contraste de cores 
Dois elementos com cores complementares se reforçam entre si, assim como uma 
cor quente e outra fria. 
O contraste criado entre duas cores será maior quanto mais afastadas estiverem no 
círculo cromático. As cores opostos contrastam muito, enquanto que as análogas 
apenas fazem, perdendo importância visual ambas. 
Este efeito pode ser usado para dar maior dimensão ou sensação de proximidade a
um elemento em uma composição, situando-o sobre uma cor que contraste com 
ele. 
Este tipo de contraste é especialmente indicado para os conteúdos textuais, nos 
quais deve primar pela facilidade de leitura. O ideal será o texto negro sobre fundo 
branco, já que é o que mais contraste cria (contraste de tom). Porém, em certos 
elementos, nos quais este jogo de cores não for possível, haverá que buscar 
sempre um texto cálido sobre um fundo frio ou vice-versa. 
Contraste de contornos 
Os contornos irregulares destacam de forma importante sobre os regulares ou 
reconhecíveis. 
Este tipo de contrastes é adequado para dirigir a atenção do usuário a certos 
elementos de uma composição ou página web, como botões importantes, banners 
publicitários, etc. Não obstante, há que ser comedidos em seu uso, sobretudo se se 
combinam com outros tipos de contraste, já que podem ser um foco de atração 
visual potente demais. Além disso, criam muita tensão no espaço que lhes rodeia. 
Contraste de escala 
É o produzido pelo uso de elementos a diferentes escalas das normais ou de 
proporções irreais, conseguindo-se o contraste por negação da percepção 
aprendida.
Este sistema de contraste não é muito usado nas páginas web, onde se busca 
sempre a escala adequada, porém sim é freqüente em fotografia e pintura, 
conseguindo atrair a atenção do espectador de forma muito efetiva. 
Autoria e outras referências sobre este artigo 
Dentro deste artigo: 
+ 1 manual relacionado 
+ 2 Categorias relacionadas 
+ 1 Comentário sem rever 
Informe de Luciano Moreno 
URL: http://www.htmlweb.net/ 
Acrescentar um comentário do artigo 
Manuais relacionados com este artigo 
Dentro de Curso prático de Web Design 
Seguinte: O design equilibrado. Os agrupamentos 
Anterior: O design equilibrado. A escala 
< Índice de Curso prático de Web Design 
Categorias relacionadas 
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados 
com este artigo: 
+ Entrar em Design 
+ Entrar em Guias de desenho

Mais conteúdo relacionado

Destaque

Fabioribeiro, joao pereira nº10 e nº13
Fabioribeiro, joao pereira nº10 e nº13Fabioribeiro, joao pereira nº10 e nº13
Fabioribeiro, joao pereira nº10 e nº13jotaboxexas
 
Vp4 estudo - Promotores da Paz
Vp4 estudo - Promotores da PazVp4 estudo - Promotores da Paz
Vp4 estudo - Promotores da Pazrenatomclopes
 
Serv. prevencion ident.-peligros_(1)
Serv. prevencion ident.-peligros_(1)Serv. prevencion ident.-peligros_(1)
Serv. prevencion ident.-peligros_(1)Siriamkattyarcerios
 
Crucigrama de movimientos rapidos en la hoja
Crucigrama de movimientos rapidos en la hojaCrucigrama de movimientos rapidos en la hoja
Crucigrama de movimientos rapidos en la hojaNikolas Caro
 
Sentença do processo Nº 0131051-20.2006.8.12.0001 (TJ-MS)
Sentença do processo Nº 0131051-20.2006.8.12.0001 (TJ-MS)Sentença do processo Nº 0131051-20.2006.8.12.0001 (TJ-MS)
Sentença do processo Nº 0131051-20.2006.8.12.0001 (TJ-MS)DeMolay Brasil
 
Portfolio fabrícialeme
Portfolio fabrícialemePortfolio fabrícialeme
Portfolio fabrícialemeguest2975fb
 
Produção de conteúdo para blogs femininos II - Unisinos - Abril de 2012 - Pau...
Produção de conteúdo para blogs femininos II - Unisinos - Abril de 2012 - Pau...Produção de conteúdo para blogs femininos II - Unisinos - Abril de 2012 - Pau...
Produção de conteúdo para blogs femininos II - Unisinos - Abril de 2012 - Pau...Paula Coruja
 
Atvi2unid3 terezinhagomesdesousadacosta
Atvi2unid3 terezinhagomesdesousadacostaAtvi2unid3 terezinhagomesdesousadacosta
Atvi2unid3 terezinhagomesdesousadacostaTerezinhagomes
 
Contract number
Contract numberContract number
Contract numberkamalbba
 
Tech romancer manual dreamcast ntsc
Tech romancer manual dreamcast ntscTech romancer manual dreamcast ntsc
Tech romancer manual dreamcast ntscmuseodreamcast
 
Facts Behind the England Shirt £90 Price Tag Infographic
Facts Behind the England Shirt £90 Price Tag Infographic Facts Behind the England Shirt £90 Price Tag Infographic
Facts Behind the England Shirt £90 Price Tag Infographic infogr8
 
Manual de incapacidades , licencias de maternidad y paternidad (1)
Manual de incapacidades , licencias de maternidad y paternidad (1)Manual de incapacidades , licencias de maternidad y paternidad (1)
Manual de incapacidades , licencias de maternidad y paternidad (1)Johen Moreno
 
Morning meeting semanal 14 maio 2012
Morning meeting semanal 14 maio 2012Morning meeting semanal 14 maio 2012
Morning meeting semanal 14 maio 2012João Pinto
 

Destaque (20)

Quiz
QuizQuiz
Quiz
 
Eti Cronograma 12mai2010
Eti Cronograma 12mai2010Eti Cronograma 12mai2010
Eti Cronograma 12mai2010
 
Fabioribeiro, joao pereira nº10 e nº13
Fabioribeiro, joao pereira nº10 e nº13Fabioribeiro, joao pereira nº10 e nº13
Fabioribeiro, joao pereira nº10 e nº13
 
Vp4 estudo - Promotores da Paz
Vp4 estudo - Promotores da PazVp4 estudo - Promotores da Paz
Vp4 estudo - Promotores da Paz
 
Serv. prevencion ident.-peligros_(1)
Serv. prevencion ident.-peligros_(1)Serv. prevencion ident.-peligros_(1)
Serv. prevencion ident.-peligros_(1)
 
Crucigrama de movimientos rapidos en la hoja
Crucigrama de movimientos rapidos en la hojaCrucigrama de movimientos rapidos en la hoja
Crucigrama de movimientos rapidos en la hoja
 
andres
andresandres
andres
 
Sentença do processo Nº 0131051-20.2006.8.12.0001 (TJ-MS)
Sentença do processo Nº 0131051-20.2006.8.12.0001 (TJ-MS)Sentença do processo Nº 0131051-20.2006.8.12.0001 (TJ-MS)
Sentença do processo Nº 0131051-20.2006.8.12.0001 (TJ-MS)
 
Portfolio fabrícialeme
Portfolio fabrícialemePortfolio fabrícialeme
Portfolio fabrícialeme
 
Produção de conteúdo para blogs femininos II - Unisinos - Abril de 2012 - Pau...
Produção de conteúdo para blogs femininos II - Unisinos - Abril de 2012 - Pau...Produção de conteúdo para blogs femininos II - Unisinos - Abril de 2012 - Pau...
Produção de conteúdo para blogs femininos II - Unisinos - Abril de 2012 - Pau...
 
Contenidoinformaticaenlaeducacion
ContenidoinformaticaenlaeducacionContenidoinformaticaenlaeducacion
Contenidoinformaticaenlaeducacion
 
Actividad13 grupal chero
Actividad13 grupal cheroActividad13 grupal chero
Actividad13 grupal chero
 
Mundial 2010
Mundial 2010Mundial 2010
Mundial 2010
 
Atvi2unid3 terezinhagomesdesousadacosta
Atvi2unid3 terezinhagomesdesousadacostaAtvi2unid3 terezinhagomesdesousadacosta
Atvi2unid3 terezinhagomesdesousadacosta
 
Contract number
Contract numberContract number
Contract number
 
Nxt programming
Nxt programmingNxt programming
Nxt programming
 
Tech romancer manual dreamcast ntsc
Tech romancer manual dreamcast ntscTech romancer manual dreamcast ntsc
Tech romancer manual dreamcast ntsc
 
Facts Behind the England Shirt £90 Price Tag Infographic
Facts Behind the England Shirt £90 Price Tag Infographic Facts Behind the England Shirt £90 Price Tag Infographic
Facts Behind the England Shirt £90 Price Tag Infographic
 
Manual de incapacidades , licencias de maternidad y paternidad (1)
Manual de incapacidades , licencias de maternidad y paternidad (1)Manual de incapacidades , licencias de maternidad y paternidad (1)
Manual de incapacidades , licencias de maternidad y paternidad (1)
 
Morning meeting semanal 14 maio 2012
Morning meeting semanal 14 maio 2012Morning meeting semanal 14 maio 2012
Morning meeting semanal 14 maio 2012
 

Semelhante a O design equilibrado3 (6)

O design equilibrado9
O design equilibrado9O design equilibrado9
O design equilibrado9
 
O design equilibrado1
O design equilibrado1O design equilibrado1
O design equilibrado1
 
Teoria da cor6
Teoria da cor6Teoria da cor6
Teoria da cor6
 
A cor na web 1 4
A cor na web 1 4A cor na web 1 4
A cor na web 1 4
 
O design equilibrado7
O design equilibrado7O design equilibrado7
O design equilibrado7
 
Aula 06 linguagem visual
Aula 06   linguagem visualAula 06   linguagem visual
Aula 06 linguagem visual
 

Mais de Blogotipos - Diário das Marcas

Mais de Blogotipos - Diário das Marcas (20)

Teoria das cores
Teoria das coresTeoria das cores
Teoria das cores
 
Significado das cores para outros paises
Significado das cores para outros paisesSignificado das cores para outros paises
Significado das cores para outros paises
 
Significado das cores riccardo benetti
Significado das cores   riccardo benettiSignificado das cores   riccardo benetti
Significado das cores riccardo benetti
 
Hsv
HsvHsv
Hsv
 
Entendendo as cores e seus significados
Entendendo as cores e seus significadosEntendendo as cores e seus significados
Entendendo as cores e seus significados
 
Daltonismo
DaltonismoDaltonismo
Daltonismo
 
Cor
CorCor
Cor
 
Cor nas artes visuais
Cor nas artes visuaisCor nas artes visuais
Cor nas artes visuais
 
Cor na teatro
Cor na teatroCor na teatro
Cor na teatro
 
Cor na sinalização
Cor na sinalizaçãoCor na sinalização
Cor na sinalização
 
Cor na psicologia
Cor na psicologiaCor na psicologia
Cor na psicologia
 
Cor na moda
Cor na modaCor na moda
Cor na moda
 
Cor na arquitectura
Cor na arquitecturaCor na arquitectura
Cor na arquitectura
 
Cor azul
Cor azulCor azul
Cor azul
 
Anexo lista de cores
Anexo   lista de coresAnexo   lista de cores
Anexo lista de cores
 
A cor
A corA cor
A cor
 
Teoria da cor estudo de algumas cores ii
Teoria da cor   estudo de algumas cores iiTeoria da cor   estudo de algumas cores ii
Teoria da cor estudo de algumas cores ii
 
Teoria da cor estudo de algumas cores i
Teoria da cor   estudo de algumas cores iTeoria da cor   estudo de algumas cores i
Teoria da cor estudo de algumas cores i
 
Teoria da cor estudo de algumas cores ii
Teoria da cor   estudo de algumas cores iiTeoria da cor   estudo de algumas cores ii
Teoria da cor estudo de algumas cores ii
 
Teoria da cor estudo de algumas cores i
Teoria da cor   estudo de algumas cores iTeoria da cor   estudo de algumas cores i
Teoria da cor estudo de algumas cores i
 

O design equilibrado3

  • 1. O design equilibrado. O contraste O contraste permite ressaltar o peso visual, podemos consegui-lo através de diversos meios: tons, cores, contornos e escala. O contraste é o efeito que permite ressaltar o peso visual de um ou mais elementos ou zonas de uma composição mediante a oposição ou diferença apreciável entre elas, permitindo-nos atrair a atenção de espectador para eles. O contraste pode ser conseguido através de diferentes oposições entre elementos: Contraste de tons Obtemos contraste entre elementos que possuem tons (claridade-escuridão) opostos. Neste caso, o maior peso terá o elemento mais escuro, destacando o mais claro sobre ele com mais intensidade quanto maior for a diferença tonal. Conforme se diminui a tonalidade do elemento mais escuro o contraste vai perdendo intensidade, sendo necessário redimensioná-lo se quisermos manter o mesmo contraste.
  • 2. Este tipo de contraste é talvez o mais intenso, e é muito usado em composições gráficas. Contraste de cores Dois elementos com cores complementares se reforçam entre si, assim como uma cor quente e outra fria. O contraste criado entre duas cores será maior quanto mais afastadas estiverem no círculo cromático. As cores opostos contrastam muito, enquanto que as análogas apenas fazem, perdendo importância visual ambas. Este efeito pode ser usado para dar maior dimensão ou sensação de proximidade a
  • 3. um elemento em uma composição, situando-o sobre uma cor que contraste com ele. Este tipo de contraste é especialmente indicado para os conteúdos textuais, nos quais deve primar pela facilidade de leitura. O ideal será o texto negro sobre fundo branco, já que é o que mais contraste cria (contraste de tom). Porém, em certos elementos, nos quais este jogo de cores não for possível, haverá que buscar sempre um texto cálido sobre um fundo frio ou vice-versa. Contraste de contornos Os contornos irregulares destacam de forma importante sobre os regulares ou reconhecíveis. Este tipo de contrastes é adequado para dirigir a atenção do usuário a certos elementos de uma composição ou página web, como botões importantes, banners publicitários, etc. Não obstante, há que ser comedidos em seu uso, sobretudo se se combinam com outros tipos de contraste, já que podem ser um foco de atração visual potente demais. Além disso, criam muita tensão no espaço que lhes rodeia. Contraste de escala É o produzido pelo uso de elementos a diferentes escalas das normais ou de proporções irreais, conseguindo-se o contraste por negação da percepção aprendida.
  • 4. Este sistema de contraste não é muito usado nas páginas web, onde se busca sempre a escala adequada, porém sim é freqüente em fotografia e pintura, conseguindo atrair a atenção do espectador de forma muito efetiva. Autoria e outras referências sobre este artigo Dentro deste artigo: + 1 manual relacionado + 2 Categorias relacionadas + 1 Comentário sem rever Informe de Luciano Moreno URL: http://www.htmlweb.net/ Acrescentar um comentário do artigo Manuais relacionados com este artigo Dentro de Curso prático de Web Design Seguinte: O design equilibrado. Os agrupamentos Anterior: O design equilibrado. A escala < Índice de Curso prático de Web Design Categorias relacionadas Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo: + Entrar em Design + Entrar em Guias de desenho