SlideShare uma empresa Scribd logo
1 de 3
O design equilibrado. O reticulado 
Como harmonizar os blocos de conteúdo que formarão a composição do 
desenho. 
Uma composição gráfica deve ser equilibrada não só em conteúdos, como também 
visualmente, até tal ponto que podemos dizer que a ordem na disposição espacial 
dos elementos da mesma é um dos fatores mais importantes para seu sucesso. 
O espectador que contempla uma obra gráfica (folheto, cartaz tríptico ou página 
web) busca subconscientemente nela uma ordem e uam estabilidade que lhe 
permitam passear a vista pela mesma de forma organizada e limpa. 
O sistema plano de referência habitual nos seres humanos é o formado por um eixo 
horizontal e outro vertical, ou seja, por duas retas que se cortam em um ângulo de 
90º. Neste sistema, o eixo horizontal sugere equilíbrio e estabilidade, enquanto que 
o vertical facilita a elevação da vista, marcando prioridades ou níveis na 
composição. 
Visto que as composições gráficas (e dentro delas, as páginas web) se representam 
em suportes planos, é fácil deduzir que este sistema de referência é também o 
mais adequado para a distribuição de seus elementos. Se a isto somamos o caráter 
eminentemente retangular da maioria dos suportes, obtemos por extensão o 
sistema de organização ideal para nossas composições: o reticulado. 
Um reticulado ou rede é um sistema de referência formado por diferentes linhas 
horizontais e verticais que marcam a localização de elementos e zonas em uma 
composição gráfica, linhas que não tem porquê ter uma representação real (não 
têm porquê fazer parte do grafismo), mas sim mental. São as guias imaginárias 
sobre as que vamos ir colocando os elementos, a espinha dorsal de uma 
composição gráfica. 
Mediante o reticulado, o designer vai situando com harmonia os blocos de conteúdo 
que formarão a composição: zonas principais e secundárias, títulos e subtítulos,
blocos de texto, fotografias, ilustrações, gráficos, sistemas de navegação, botões, 
ícones, etc, dando com isso um estilo próprio visualmente lógico à mesma. 
Uma composição gráfica não é um sistema padrão, único, e sim que os mesmos 
elementos se podem organizar segundo diferentes esquemas lógicos. Mas sempre 
deverão estar dispostos segundo uma retícula que lhes traga equilíbrio e 
estabilidade visual. É tarefa do designer buscar o conjunto localização-reticulado 
que melhor se adapte a sua obra. 
A localização de elementos em uma composição segundo um reticulado 
determinado não requer a introdução dos elementos finais da mesma. Ou seja, se 
pode perfeitamente desenhar a organização de um grafismo simplesmente com 
retângulos de cores. Mais ainda, com retângulos de uma só cor. O que importa não 
é o aspecto visual final, e sim a organização lógica e regular dos elementos. 
No caso concreto de uma página web, o designer pode perfeitamente distribuir em 
tela uma série de retângulos que representem as zonas que vão ter a página. Se a 
distribuição segue um reticulado conforme as zonas estão localizadas com lógica, a 
página que resultar disso terá um 50% de possibilidades de ser correta. 
Reticulado de Terra 
Esta estrutura lógica criada com o reticulado deve se manter logo em todas as 
páginas que formam website, proporcionando com isso consistência e 
homogeneidade ao mesmo. 
Se definirmos uma separação entre o cabeçalho de uma formulário e o início dos 
elementos do mesmo de 15 pixels, todos os formulários, fichas, textos, etc, que 
tiverem cabeçalho, devem manter o mesmo espaço separador. Se definirmos umas 
margens vazias entre a página que desenharmos e as bordas da janela do 
navegador de 30 pixels, todas as páginas do site devem manter constantes essas 
margens.
Reticulado em um formulário construído com tabela 
Uma vantagem adicional de desenhar um reticulado correto será a comodidade na 
hora de construir depois a página com tabelas, já que a estrutura natural destas é 
reticular. 
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. Os alinhamentos 
Anterior: O design equilibrado. Os agrupamentos 
< Í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

Semelhante a Reticulado guia composiçã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)Jolvani Morgan
 
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
 
Criação de Impressos
Criação de ImpressosCriação de Impressos
Criação de Impressosclafajardo
 
mapas_conceptuais.pdf
mapas_conceptuais.pdfmapas_conceptuais.pdf
mapas_conceptuais.pdfBeacarol
 
Diagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de GarrettDiagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de GarrettLuiz Agner
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPressMarconi Pacheco
 

Semelhante a Reticulado guia composição (20)

O design equilibrado4
O design equilibrado4O design equilibrado4
O design equilibrado4
 
O design equilibrado6
O design equilibrado6O design equilibrado6
O design equilibrado6
 
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)
 
Ratchet Framework
Ratchet FrameworkRatchet Framework
Ratchet Framework
 
O design equilibrado0
O design equilibrado0O design equilibrado0
O design equilibrado0
 
Boneco
BonecoBoneco
Boneco
 
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
 
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
 
Formas básicas em design gráfico 6 contornos mistos
Formas básicas em design gráfico 6   contornos mistosFormas básicas em design gráfico 6   contornos mistos
Formas básicas em design gráfico 6 contornos mistos
 
Criação de Impressos
Criação de ImpressosCriação de Impressos
Criação de Impressos
 
Navegação
NavegaçãoNavegação
Navegação
 
mapas_conceptuais.pdf
mapas_conceptuais.pdfmapas_conceptuais.pdf
mapas_conceptuais.pdf
 
Bootstrap.pdf
Bootstrap.pdfBootstrap.pdf
Bootstrap.pdf
 
O design equilibrado8
O design equilibrado8O design equilibrado8
O design equilibrado8
 
Diagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de GarrettDiagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de Garrett
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress
 
O design equilibrado1
O design equilibrado1O design equilibrado1
O design equilibrado1
 
Revista Scena (Apresentação)
Revista Scena (Apresentação)Revista Scena (Apresentação)
Revista Scena (Apresentação)
 
A cor na web 1 3
A cor na web 1 3A cor na web 1 3
A cor na web 1 3
 
Grade de diagramação
Grade de diagramaçãoGrade de diagramação
Grade de diagramação
 

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

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
 
Simulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfSimulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfAnnaCarolina242437
 
I.1 Boas Práticas fitossanitarias.pptxCC
I.1 Boas Práticas fitossanitarias.pptxCCI.1 Boas Práticas fitossanitarias.pptxCC
I.1 Boas Práticas fitossanitarias.pptxCCJudite Silva
 
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
 
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
 
I.2 Meios de Proteção das culturass.pptx
I.2 Meios de Proteção das culturass.pptxI.2 Meios de Proteção das culturass.pptx
I.2 Meios de Proteção das culturass.pptxJudite Silva
 
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaaGESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaayasminlarissa371
 
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
 

Último (9)

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
 
Simulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfSimulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdf
 
I.1 Boas Práticas fitossanitarias.pptxCC
I.1 Boas Práticas fitossanitarias.pptxCCI.1 Boas Práticas fitossanitarias.pptxCC
I.1 Boas Práticas fitossanitarias.pptxCC
 
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
 
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
 
I.2 Meios de Proteção das culturass.pptx
I.2 Meios de Proteção das culturass.pptxI.2 Meios de Proteção das culturass.pptx
I.2 Meios de Proteção das culturass.pptx
 
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaaGESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
 
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
 

Reticulado guia composição

  • 1. O design equilibrado. O reticulado Como harmonizar os blocos de conteúdo que formarão a composição do desenho. Uma composição gráfica deve ser equilibrada não só em conteúdos, como também visualmente, até tal ponto que podemos dizer que a ordem na disposição espacial dos elementos da mesma é um dos fatores mais importantes para seu sucesso. O espectador que contempla uma obra gráfica (folheto, cartaz tríptico ou página web) busca subconscientemente nela uma ordem e uam estabilidade que lhe permitam passear a vista pela mesma de forma organizada e limpa. O sistema plano de referência habitual nos seres humanos é o formado por um eixo horizontal e outro vertical, ou seja, por duas retas que se cortam em um ângulo de 90º. Neste sistema, o eixo horizontal sugere equilíbrio e estabilidade, enquanto que o vertical facilita a elevação da vista, marcando prioridades ou níveis na composição. Visto que as composições gráficas (e dentro delas, as páginas web) se representam em suportes planos, é fácil deduzir que este sistema de referência é também o mais adequado para a distribuição de seus elementos. Se a isto somamos o caráter eminentemente retangular da maioria dos suportes, obtemos por extensão o sistema de organização ideal para nossas composições: o reticulado. Um reticulado ou rede é um sistema de referência formado por diferentes linhas horizontais e verticais que marcam a localização de elementos e zonas em uma composição gráfica, linhas que não tem porquê ter uma representação real (não têm porquê fazer parte do grafismo), mas sim mental. São as guias imaginárias sobre as que vamos ir colocando os elementos, a espinha dorsal de uma composição gráfica. Mediante o reticulado, o designer vai situando com harmonia os blocos de conteúdo que formarão a composição: zonas principais e secundárias, títulos e subtítulos,
  • 2. blocos de texto, fotografias, ilustrações, gráficos, sistemas de navegação, botões, ícones, etc, dando com isso um estilo próprio visualmente lógico à mesma. Uma composição gráfica não é um sistema padrão, único, e sim que os mesmos elementos se podem organizar segundo diferentes esquemas lógicos. Mas sempre deverão estar dispostos segundo uma retícula que lhes traga equilíbrio e estabilidade visual. É tarefa do designer buscar o conjunto localização-reticulado que melhor se adapte a sua obra. A localização de elementos em uma composição segundo um reticulado determinado não requer a introdução dos elementos finais da mesma. Ou seja, se pode perfeitamente desenhar a organização de um grafismo simplesmente com retângulos de cores. Mais ainda, com retângulos de uma só cor. O que importa não é o aspecto visual final, e sim a organização lógica e regular dos elementos. No caso concreto de uma página web, o designer pode perfeitamente distribuir em tela uma série de retângulos que representem as zonas que vão ter a página. Se a distribuição segue um reticulado conforme as zonas estão localizadas com lógica, a página que resultar disso terá um 50% de possibilidades de ser correta. Reticulado de Terra Esta estrutura lógica criada com o reticulado deve se manter logo em todas as páginas que formam website, proporcionando com isso consistência e homogeneidade ao mesmo. Se definirmos uma separação entre o cabeçalho de uma formulário e o início dos elementos do mesmo de 15 pixels, todos os formulários, fichas, textos, etc, que tiverem cabeçalho, devem manter o mesmo espaço separador. Se definirmos umas margens vazias entre a página que desenharmos e as bordas da janela do navegador de 30 pixels, todas as páginas do site devem manter constantes essas margens.
  • 3. Reticulado em um formulário construído com tabela Uma vantagem adicional de desenhar um reticulado correto será a comodidade na hora de construir depois a página com tabelas, já que a estrutura natural destas é reticular. 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. Os alinhamentos Anterior: O design equilibrado. Os agrupamentos < Í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