SlideShare uma empresa Scribd logo
1 de 4
O quadrado 
Elementos de desenho: o quadrado. 
O quadrado é a figura geométrica formada por quatro linhas retas de mesma 
longitude, denominados lados, que formam ângulos perfeitamente retos nos pontos 
de união entre elas (esquinas a 90º). 
O quadrado é uma figura muito estável e de caráter permanente, associada a 
conceitos como estabilidade, permanência, honestidade, retidão, limpeza, esmero e 
equilíbrio. 
A figura derivada do quadrado por modificação de seus lados é o retângulo, de 
propriedades análogas ao quadrado, apesar de sugerir menos perfeição e 
estabilidade. 
O quadrado expressa direcionamento horizontal e vertical, referência primária com 
respeito ao equilíbrio e o bem-estar. É menos proponente e mais neutro que os 
retângulos, porém mais sólido. Convida a olhar seu centro e passear a olhada em 
espiral em volta desse ponto. 
Os retângulos horizontais aportam solidez, estabilidade, dão a sensação de ser 
difíceis de inverter. Quando são de tamanho grande permitem que o olhar do 
espectador passeie de um lado ao outro, em sentido horizontal.
Os retângulos verticais, pelo contrário, dá a sensação de menos solidez, é menos 
estável, parece que pode se inverter a qualquer momento. Neles, o olhar do 
espectador não pode passear de um lado ao outro, porém, pode mover-se 
verticalmente, dando sensação de elevação, e é apto para representar aqueles 
objetos que na verdade têm uma forma ascendente. 
Os quadrados e retângulos terão suas qualidades visuais modificadas segundo sua 
forma, tamanho, cor do contorno e área interna, localização, escala, etc. 
A projeção tridimensional do quadrado é o hexaedro ou o cubo, corpo geométrico 
muito associado às obras próprias do ser humano, como os edifícios. 
Os retângulos são as formas mais naturais para um computador, já que o monitor e 
as janelas dos sistemas operacionais gráficos são todos retângulos horizontais. Uma 
página web possui uma forma claramente retangular, definida pela janela do 
navegador. Ademais, os elementos web (tabelas, camadas, animações Flash, 
applets de Java, etc.) são de forma retangular. 
Isto faz com que os retângulos sejam especialmente adequados para seu uso nas 
páginas web, proporcionando equilíbrio e estabilidade às mesmas.
Entretanto, é conveniente seguir uma série de pautas na hora de usar retângulos, a 
fim de evitar a monotonia e o aspecto artificial de uma página quadriculada demais: 
· Cada retângulo deve estar alinhado com os demais objetos da página que 
lhe rodeiam. 
· O tamanho do retângulo deve ser maior que o conteúdo do mesmo, o 
suficiente como para que este se apresente livre, com espaçamentos 
convenientes pelos quatro lados. 
· Não usar nas tabelas bordas padronizadas, ou seja, cinzas e com efeitos de 
relevo. Se forem usadas para separar logicamente registros, é melhor lhes 
atribuir uma borda fina (sobre 1 píxel) de uma cor que contraste 
suficientemente com a borda, porém que não seja chamativa demais. De 
qualquer forma, é preferível utilizar outros métodos para obter a separação, 
como filas de duas cores alternativas (pijamas). 
· Se desejar situar na página vários retângulos de funcionalidade análoga 
(caso de elementos de um menu de navegação, por exemplo), é preferível 
posiciona-los em séries horizontais, já que se perceberão mais como uma 
linha do que como um conjunto retangular. 
A dureza visual dos retângulos pode-se suavizar adicionando-lhes outros elementos 
que os modifiquem em parte. Um exemplo disso, são as tabelas ou botões com 
esquinas arredondadas, que rompem a monotonia da forma retangular.
Outra forma de compensar a rigidez das formas retangulares é combina-las na 
composição com formas curvas que aportem liberdade e dinamismo. 
Autoria e outras referências sobre este artigo 
Dentro deste artigo: 
+ 1 manual relacionado 
+ 2 Categorias relacionadas 
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: A circunferência 
Anterior: O contorno 
< Í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

Mais procurados

5 projecoes cartograficas
5 projecoes cartograficas5 projecoes cartograficas
5 projecoes cartograficasLucas Cechinel
 
frisos,padrões, rosáceas//simetrias
frisos,padrões, rosáceas//simetrias frisos,padrões, rosáceas//simetrias
frisos,padrões, rosáceas//simetrias Ritinha Adao
 
Matemática trabalho
Matemática trabalhoMatemática trabalho
Matemática trabalho23809
 
Trabalho de matematica sobre as isometrias 8ªano
Trabalho de matematica sobre as isometrias 8ªanoTrabalho de matematica sobre as isometrias 8ªano
Trabalho de matematica sobre as isometrias 8ªanonelsoncampos11
 
Acertando o Alvo 58 - Simetria
Acertando o Alvo 58 - SimetriaAcertando o Alvo 58 - Simetria
Acertando o Alvo 58 - SimetriaProf. Materaldo
 
Isometrias na vida real -Rafael (6ºC)
Isometrias na vida real -Rafael (6ºC)Isometrias na vida real -Rafael (6ºC)
Isometrias na vida real -Rafael (6ºC)tuchav
 
Rosáceas, frisos e padrões
Rosáceas, frisos e padrõesRosáceas, frisos e padrões
Rosáceas, frisos e padrõesppaisaec
 
Isometrias
Isometrias Isometrias
Isometrias 7f14_15
 
Isometrias lisboa editora
Isometrias lisboa editoraIsometrias lisboa editora
Isometrias lisboa editoraPedro279
 
Isometrias 6º ano (translação, rotação, reflexão)
Isometrias   6º ano (translação, rotação, reflexão)Isometrias   6º ano (translação, rotação, reflexão)
Isometrias 6º ano (translação, rotação, reflexão)Ana Tapadinhas
 

Mais procurados (20)

5 projecoes cartograficas
5 projecoes cartograficas5 projecoes cartograficas
5 projecoes cartograficas
 
Isometrias
IsometriasIsometrias
Isometrias
 
Isometrias ficha de revisão
Isometrias   ficha de revisãoIsometrias   ficha de revisão
Isometrias ficha de revisão
 
Simetria
SimetriaSimetria
Simetria
 
frisos,padrões, rosáceas//simetrias
frisos,padrões, rosáceas//simetrias frisos,padrões, rosáceas//simetrias
frisos,padrões, rosáceas//simetrias
 
Isometrias
IsometriasIsometrias
Isometrias
 
Matemática trabalho
Matemática trabalhoMatemática trabalho
Matemática trabalho
 
Isometrias
IsometriasIsometrias
Isometrias
 
Trabalho de matematica sobre as isometrias 8ªano
Trabalho de matematica sobre as isometrias 8ªanoTrabalho de matematica sobre as isometrias 8ªano
Trabalho de matematica sobre as isometrias 8ªano
 
Geometria
GeometriaGeometria
Geometria
 
Acertando o Alvo 58 - Simetria
Acertando o Alvo 58 - SimetriaAcertando o Alvo 58 - Simetria
Acertando o Alvo 58 - Simetria
 
Isometrias revisão
Isometrias revisãoIsometrias revisão
Isometrias revisão
 
Isometrias na vida real -Rafael (6ºC)
Isometrias na vida real -Rafael (6ºC)Isometrias na vida real -Rafael (6ºC)
Isometrias na vida real -Rafael (6ºC)
 
Rosáceas, frisos e padrões
Rosáceas, frisos e padrõesRosáceas, frisos e padrões
Rosáceas, frisos e padrões
 
Isometrias
IsometriasIsometrias
Isometrias
 
Isometrias
Isometrias Isometrias
Isometrias
 
Perspectiva
PerspectivaPerspectiva
Perspectiva
 
Isometrias lisboa editora
Isometrias lisboa editoraIsometrias lisboa editora
Isometrias lisboa editora
 
Isometrias 6º ano (translação, rotação, reflexão)
Isometrias   6º ano (translação, rotação, reflexão)Isometrias   6º ano (translação, rotação, reflexão)
Isometrias 6º ano (translação, rotação, reflexão)
 
Dea aula 02tecnicabasica
Dea aula 02tecnicabasicaDea aula 02tecnicabasica
Dea aula 02tecnicabasica
 

Semelhante a Quadrado e retângulo: formas geométricas para web

Semelhante a Quadrado e retângulo: formas geométricas para web (6)

Formas básicas em design gráfico 2 a linha
Formas básicas em design gráfico 2   a linhaFormas básicas em design gráfico 2   a linha
Formas básicas em design gráfico 2 a linha
 
O design equilibrado7
O design equilibrado7O design equilibrado7
O design equilibrado7
 
O design equilibrado5
O design equilibrado5O design equilibrado5
O design equilibrado5
 
O design equilibrado6
O design equilibrado6O design equilibrado6
O design equilibrado6
 
1.desenho projetivo e_perspectivas
1.desenho projetivo e_perspectivas1.desenho projetivo e_perspectivas
1.desenho projetivo e_perspectivas
 
Repetição e estruturas poliédricas
Repetição e estruturas poliédricasRepetição e estruturas poliédricas
Repetição e estruturas poliédricas
 

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
 

Último

Simulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfSimulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfAnnaCarolina242437
 
Design para o futuro 2024 - Leiautar.pdf
Design para o futuro 2024 - Leiautar.pdfDesign para o futuro 2024 - Leiautar.pdf
Design para o futuro 2024 - Leiautar.pdfCharlesFranklin13
 
Antonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdfAntonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdfAnnaCarolina242437
 
MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024CarolTelles6
 
Simulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdfSimulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdfAnnaCarolina242437
 
Estudo de caso para o aplicativo SÓ FLÔ.
Estudo de caso para o aplicativo SÓ FLÔ.Estudo de caso para o aplicativo SÓ FLÔ.
Estudo de caso para o aplicativo SÓ FLÔ.Érica Pizzino
 
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...AnnaCarolina242437
 
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdfAVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdfAnnaCarolina242437
 

Último (8)

Simulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfSimulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdf
 
Design para o futuro 2024 - Leiautar.pdf
Design para o futuro 2024 - Leiautar.pdfDesign para o futuro 2024 - Leiautar.pdf
Design para o futuro 2024 - Leiautar.pdf
 
Antonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdfAntonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdf
 
MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024
 
Simulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdfSimulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdf
 
Estudo de caso para o aplicativo SÓ FLÔ.
Estudo de caso para o aplicativo SÓ FLÔ.Estudo de caso para o aplicativo SÓ FLÔ.
Estudo de caso para o aplicativo SÓ FLÔ.
 
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
 
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdfAVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
 

Quadrado e retângulo: formas geométricas para web

  • 1. O quadrado Elementos de desenho: o quadrado. O quadrado é a figura geométrica formada por quatro linhas retas de mesma longitude, denominados lados, que formam ângulos perfeitamente retos nos pontos de união entre elas (esquinas a 90º). O quadrado é uma figura muito estável e de caráter permanente, associada a conceitos como estabilidade, permanência, honestidade, retidão, limpeza, esmero e equilíbrio. A figura derivada do quadrado por modificação de seus lados é o retângulo, de propriedades análogas ao quadrado, apesar de sugerir menos perfeição e estabilidade. O quadrado expressa direcionamento horizontal e vertical, referência primária com respeito ao equilíbrio e o bem-estar. É menos proponente e mais neutro que os retângulos, porém mais sólido. Convida a olhar seu centro e passear a olhada em espiral em volta desse ponto. Os retângulos horizontais aportam solidez, estabilidade, dão a sensação de ser difíceis de inverter. Quando são de tamanho grande permitem que o olhar do espectador passeie de um lado ao outro, em sentido horizontal.
  • 2. Os retângulos verticais, pelo contrário, dá a sensação de menos solidez, é menos estável, parece que pode se inverter a qualquer momento. Neles, o olhar do espectador não pode passear de um lado ao outro, porém, pode mover-se verticalmente, dando sensação de elevação, e é apto para representar aqueles objetos que na verdade têm uma forma ascendente. Os quadrados e retângulos terão suas qualidades visuais modificadas segundo sua forma, tamanho, cor do contorno e área interna, localização, escala, etc. A projeção tridimensional do quadrado é o hexaedro ou o cubo, corpo geométrico muito associado às obras próprias do ser humano, como os edifícios. Os retângulos são as formas mais naturais para um computador, já que o monitor e as janelas dos sistemas operacionais gráficos são todos retângulos horizontais. Uma página web possui uma forma claramente retangular, definida pela janela do navegador. Ademais, os elementos web (tabelas, camadas, animações Flash, applets de Java, etc.) são de forma retangular. Isto faz com que os retângulos sejam especialmente adequados para seu uso nas páginas web, proporcionando equilíbrio e estabilidade às mesmas.
  • 3. Entretanto, é conveniente seguir uma série de pautas na hora de usar retângulos, a fim de evitar a monotonia e o aspecto artificial de uma página quadriculada demais: · Cada retângulo deve estar alinhado com os demais objetos da página que lhe rodeiam. · O tamanho do retângulo deve ser maior que o conteúdo do mesmo, o suficiente como para que este se apresente livre, com espaçamentos convenientes pelos quatro lados. · Não usar nas tabelas bordas padronizadas, ou seja, cinzas e com efeitos de relevo. Se forem usadas para separar logicamente registros, é melhor lhes atribuir uma borda fina (sobre 1 píxel) de uma cor que contraste suficientemente com a borda, porém que não seja chamativa demais. De qualquer forma, é preferível utilizar outros métodos para obter a separação, como filas de duas cores alternativas (pijamas). · Se desejar situar na página vários retângulos de funcionalidade análoga (caso de elementos de um menu de navegação, por exemplo), é preferível posiciona-los em séries horizontais, já que se perceberão mais como uma linha do que como um conjunto retangular. A dureza visual dos retângulos pode-se suavizar adicionando-lhes outros elementos que os modifiquem em parte. Um exemplo disso, são as tabelas ou botões com esquinas arredondadas, que rompem a monotonia da forma retangular.
  • 4. Outra forma de compensar a rigidez das formas retangulares é combina-las na composição com formas curvas que aportem liberdade e dinamismo. Autoria e outras referências sobre este artigo Dentro deste artigo: + 1 manual relacionado + 2 Categorias relacionadas 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: A circunferência Anterior: O contorno < Í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