SlideShare una empresa de Scribd logo
1 de 4
O design equilibrado. As simetrias 
Outro condicionante para que o design da web tenha uma organização 
natural. 
Se observarmos a Natureza, grande arquiteta e desenhista onde estiver, 
poderemos observar rapidamente que um dos elementos que mais utiliza para criar 
suas organismos é a simetria, manifestando-se em quase todos os seres que 
existem ao longo e largo de nosso planeta. 
O Homem pretendeu imitar este desenho simétrico natural em todos e cada um de 
seus aspectos criadores, desde os primeiros objetos de artesanato até os modernos 
automóveis. 
Se partirmos desta base, devemos aceitar que a busca de uma simetria estrutural, 
gráfica e textual deve ser uma das primeiras metas de todo web designer, já que 
confere às composições de uma organização natural a qual o espectador está 
acostumado. 
Por definição, uma forma ou imagem é simétrica quando um eixo central pode 
dividi-la em duas partes iguais e opostas entre si. Este conceito, aplicado a uma 
composição gráfica pode se aplicar tanto aos próprios elementos individuais da 
mesma como a sua totalidade. Neste caso, obter uma simetria exata pode resultar 
difícil (inclusive inconveniente), porém sim que podemos buscar uma simetria de 
blocos e espaçamentos em nossa rede.
O design simétrico sugere estabilidade, equilíbrio, resultando estético, ordenado, 
atrativo e agradável de contemplar. Do contrário, o assimétrico mostra 
irregularidade, desigualdade nas formas e desequilíbrio. 
Há que ter em conta que a simetria usada não deve de ser de todo exata, já que a 
simetria perfeita não é natural, é "perfeita" demais, vale a redundância, fazendo 
aparecer as composições artificiais e pré-meditadas. Pequenas variações na 
distribuição simétrica dão esse toque de ruptura que torna sua contemplação mais 
amena e natural. 
No caso de uma página web, a concepção simétrica da mesma começa com o 
reticulado escolhido, já que será o que define a distribuição básica de elementos 
nela. Há que tender então a desenhar um reticulado o mais simétrico possível. 
Uma forma aceitada de romper o esquema simétrico de uma página é criar blocos 
entortados visualmente para um lado, alternando-os na página de forma inversa, 
ou seja, o primeiro mais torto à direita, o segundo mais à esquerda, etc. Outra 
técnica é o uso de um único menu lateral de navegação, que descompensa o peso 
visual para a zona na qual se encontra. 
Se na disposição de blocos no reticulado podemos ser algo permissivos, nos 
conteúdos de nossas páginas a simetria deve ser uma norma quase inflexível, 
sobretudo na construção de certos elementos. É missão fundamental de todo 
designer ser capaz de construir conteúdos simétricos sem que pareçam rígidos, 
artificiais. 
Exemplos claros desta regra são a criação de formulários e de fichas. Constroem-se
geralmente apoiando-se em uma tabela construtor, pela qual deveremos buscar a 
simetria nesta tabela, embora logo, devido às diferentes longitudes e natureza dos 
campos, o resultado final "pareça" não sê-lo. 
Distribuição simétrica em uma ficha 
Em relação aos textos, se nossa página é eminentemente textual, e em textos de 
uma só linha, como esta que vocês têm adiante, o conteúdo será simétrico por 
própria construção. Porém, se desejarmos distribuir o conteúdo em várias colunas, 
deveremos prestar especial atenção a que estas sejam equilibradas, evitando o 
remarcado forte de porções de texto ou de uma ou mais colunas mediante cores de 
fundo, textos em negrito, etc. 
Colunas textuais e simetria 
A regra geral é buscar sempre a harmonia, mesmo quando introduzamos pequenos 
elementos diferenciadores. 
Outro aspecto fundamental é manter simetrias no tratamento dos ares em nossa 
página. Entendemos por "ar" o espaço livre que fica entre elementos e entre estes 
e os limites da página. É o que em qualquer documento chamamos "margens", 
porém estendido a todos os elementos e conteúdos. 
Se nossa página tem um espaço livre entre sua margem esquerda e o primeiro 
conteúdo por esse lado, o mesmo ar deve ficar entre a margem direita e o 
conteúdo por esse lado. Igualmente, os espaços livres entre os elementos internos 
da página devem ser simétricos e iguais, buscando com isso o equilíbrio na 
composição. 
Este conceito é aplicável a todos e cada um dos elementos de nossas páginas. 
Assim, se temos uma lista de conteúdos, podemos criar uns espaços entre cada 5-7 
elementos, que evitarão a sensação de opressão produzida quando as listas têm 
muitos elementos. Então, deveremos repetir este espaço separador 
constantemente ao longo da lista.
Da mesma forma, quando trabalhamos com formulários é muito importante 
desenhá-los de tal forma que o ar que fique entre os diferentes elementos que o 
formem seja simétrico, criando um total claro e harmonioso. 
E o mesmo podemos dizer dos demais elementos de nossa página: ares simétricos, 
bem repartidos, equilibrados. 
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: O design equilibrado. O equilíbrio entre conteúdos 
Anterior: O design equilibrado. Os alinhamentos 
< Í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

Más contenido relacionado

Similar a O design equilibrado7

aula-6_principios_design.pdf
aula-6_principios_design.pdfaula-6_principios_design.pdf
aula-6_principios_design.pdfLivioPortelaLages
 
Planej Visual Os Quatros PrincíPios BáSicos
Planej Visual   Os Quatros PrincíPios BáSicosPlanej Visual   Os Quatros PrincíPios BáSicos
Planej Visual Os Quatros PrincíPios BáSicosrenatamruiz
 
4 principios planejamento visual
4 principios planejamento visual4 principios planejamento visual
4 principios planejamento visualrenatamruiz
 
Aula 5 - Comunicação Gráfica e Design
Aula 5   - Comunicação Gráfica e DesignAula 5   - Comunicação Gráfica e Design
Aula 5 - Comunicação Gráfica e DesignCíntia Dal Bello
 
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoRicardo Pereira Rodrigues
 
Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Jolvani Morgan
 

Similar a O design equilibrado7 (20)

Aula 05 layout e composição do site
Aula 05   layout e composição do siteAula 05   layout e composição do site
Aula 05 layout e composição do site
 
O design equilibrado9
O design equilibrado9O design equilibrado9
O design equilibrado9
 
aula-6_principios_design.pdf
aula-6_principios_design.pdfaula-6_principios_design.pdf
aula-6_principios_design.pdf
 
Bootstrap.pdf
Bootstrap.pdfBootstrap.pdf
Bootstrap.pdf
 
A cor na web 1 3
A cor na web 1 3A cor na web 1 3
A cor na web 1 3
 
Princípios básicos II
Princípios básicos IIPrincípios básicos II
Princípios básicos II
 
Formas básicas em design gráfico 4 o quadrado
Formas básicas em design gráfico 4   o quadradoFormas básicas em design gráfico 4   o quadrado
Formas básicas em design gráfico 4 o quadrado
 
Planej Visual Os Quatros PrincíPios BáSicos
Planej Visual   Os Quatros PrincíPios BáSicosPlanej Visual   Os Quatros PrincíPios BáSicos
Planej Visual Os Quatros PrincíPios BáSicos
 
4 principios planejamento visual
4 principios planejamento visual4 principios planejamento visual
4 principios planejamento visual
 
Aula 5 - Comunicação Gráfica e Design
Aula 5   - Comunicação Gráfica e DesignAula 5   - Comunicação Gráfica e Design
Aula 5 - Comunicação Gráfica e Design
 
Se Liga Concórdia
Se Liga ConcórdiaSe Liga Concórdia
Se Liga Concórdia
 
Diagramacao ua
Diagramacao uaDiagramacao ua
Diagramacao ua
 
Aula 4 - Direção de Arte
Aula 4 - Direção de ArteAula 4 - Direção de Arte
Aula 4 - Direção de Arte
 
Planejamento visual os 4 principios basicos
Planejamento visual os 4 principios basicosPlanejamento visual os 4 principios basicos
Planejamento visual os 4 principios basicos
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
 
Composição gráfica
Composição gráficaComposição gráfica
Composição gráfica
 
Aula 06 linguagem visual
Aula 06   linguagem visualAula 06   linguagem visual
Aula 06 linguagem visual
 
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
 
Revista Scena (Apresentação)
Revista Scena (Apresentação)Revista Scena (Apresentação)
Revista Scena (Apresentação)
 
Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)
 

Más de Blogotipos - Diário das Marcas

Más 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 equilibrado7

  • 1. O design equilibrado. As simetrias Outro condicionante para que o design da web tenha uma organização natural. Se observarmos a Natureza, grande arquiteta e desenhista onde estiver, poderemos observar rapidamente que um dos elementos que mais utiliza para criar suas organismos é a simetria, manifestando-se em quase todos os seres que existem ao longo e largo de nosso planeta. O Homem pretendeu imitar este desenho simétrico natural em todos e cada um de seus aspectos criadores, desde os primeiros objetos de artesanato até os modernos automóveis. Se partirmos desta base, devemos aceitar que a busca de uma simetria estrutural, gráfica e textual deve ser uma das primeiras metas de todo web designer, já que confere às composições de uma organização natural a qual o espectador está acostumado. Por definição, uma forma ou imagem é simétrica quando um eixo central pode dividi-la em duas partes iguais e opostas entre si. Este conceito, aplicado a uma composição gráfica pode se aplicar tanto aos próprios elementos individuais da mesma como a sua totalidade. Neste caso, obter uma simetria exata pode resultar difícil (inclusive inconveniente), porém sim que podemos buscar uma simetria de blocos e espaçamentos em nossa rede.
  • 2. O design simétrico sugere estabilidade, equilíbrio, resultando estético, ordenado, atrativo e agradável de contemplar. Do contrário, o assimétrico mostra irregularidade, desigualdade nas formas e desequilíbrio. Há que ter em conta que a simetria usada não deve de ser de todo exata, já que a simetria perfeita não é natural, é "perfeita" demais, vale a redundância, fazendo aparecer as composições artificiais e pré-meditadas. Pequenas variações na distribuição simétrica dão esse toque de ruptura que torna sua contemplação mais amena e natural. No caso de uma página web, a concepção simétrica da mesma começa com o reticulado escolhido, já que será o que define a distribuição básica de elementos nela. Há que tender então a desenhar um reticulado o mais simétrico possível. Uma forma aceitada de romper o esquema simétrico de uma página é criar blocos entortados visualmente para um lado, alternando-os na página de forma inversa, ou seja, o primeiro mais torto à direita, o segundo mais à esquerda, etc. Outra técnica é o uso de um único menu lateral de navegação, que descompensa o peso visual para a zona na qual se encontra. Se na disposição de blocos no reticulado podemos ser algo permissivos, nos conteúdos de nossas páginas a simetria deve ser uma norma quase inflexível, sobretudo na construção de certos elementos. É missão fundamental de todo designer ser capaz de construir conteúdos simétricos sem que pareçam rígidos, artificiais. Exemplos claros desta regra são a criação de formulários e de fichas. Constroem-se
  • 3. geralmente apoiando-se em uma tabela construtor, pela qual deveremos buscar a simetria nesta tabela, embora logo, devido às diferentes longitudes e natureza dos campos, o resultado final "pareça" não sê-lo. Distribuição simétrica em uma ficha Em relação aos textos, se nossa página é eminentemente textual, e em textos de uma só linha, como esta que vocês têm adiante, o conteúdo será simétrico por própria construção. Porém, se desejarmos distribuir o conteúdo em várias colunas, deveremos prestar especial atenção a que estas sejam equilibradas, evitando o remarcado forte de porções de texto ou de uma ou mais colunas mediante cores de fundo, textos em negrito, etc. Colunas textuais e simetria A regra geral é buscar sempre a harmonia, mesmo quando introduzamos pequenos elementos diferenciadores. Outro aspecto fundamental é manter simetrias no tratamento dos ares em nossa página. Entendemos por "ar" o espaço livre que fica entre elementos e entre estes e os limites da página. É o que em qualquer documento chamamos "margens", porém estendido a todos os elementos e conteúdos. Se nossa página tem um espaço livre entre sua margem esquerda e o primeiro conteúdo por esse lado, o mesmo ar deve ficar entre a margem direita e o conteúdo por esse lado. Igualmente, os espaços livres entre os elementos internos da página devem ser simétricos e iguais, buscando com isso o equilíbrio na composição. Este conceito é aplicável a todos e cada um dos elementos de nossas páginas. Assim, se temos uma lista de conteúdos, podemos criar uns espaços entre cada 5-7 elementos, que evitarão a sensação de opressão produzida quando as listas têm muitos elementos. Então, deveremos repetir este espaço separador constantemente ao longo da lista.
  • 4. Da mesma forma, quando trabalhamos com formulários é muito importante desenhá-los de tal forma que o ar que fique entre os diferentes elementos que o formem seja simétrico, criando um total claro e harmonioso. E o mesmo podemos dizer dos demais elementos de nossa página: ares simétricos, bem repartidos, equilibrados. 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: O design equilibrado. O equilíbrio entre conteúdos Anterior: O design equilibrado. Os alinhamentos < Í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