SlideShare uma empresa Scribd logo
1 de 3
O design equilibrado. Os agrupamentos 
Como os elementos web devem se agrupar para obter um resultado 
coerente. 
O ser humano, tanto por seu caráter racional como por herança cultural, tende a 
organizar os elementos que percebe ao redor como conjuntos significativos 
organizados. Esta inclinação a agrupar elementos relacionados em um fator que 
influi de forma notória na percepção que temos de nosso entorno, do que vemos ao 
nosso redor. 
As composições gráficas não escapam a esta tendência, portanto um corret o 
agrupamento de seus elementos lhes outorga um caráter lógico, racional, que 
aumenta seu valor comunicativo. 
O agrupamento de nossos elementos gráficos e textuais pode se basear em 
diferentes critérios: 
 Proximidade: Tendemos a agrupar aqueles objetos que estão próximos, 
mais pertos entre si. 
 Semelhança: Tendemos a agrupar os elementos iguais ou parecidos. 
 Continuidade: Nossa mente tende a agrupar aqueles elementos que têm 
uma continuidade significativa. 
 Simetria: Tendemos a agrupar os elementos para que apareçam ordenados 
formando figuras conhecidas. 
No caso concreto das páginas web, os agrupamentos são muito úteis e totalmente 
necessários, sobretudo no que diz respeito a elementos similares ou de 
funcionalidade análoga, como componentes de menus de navegação, ícones, dados 
relacionados, botões, etc.
Os agrupamentos também são muito úteis em casos de formulários ou fichas de 
muitos campos, sendo muito conveniente dividir estes em grupos de informação 
análoga, separando logo cada grupo dos demais mediante franjas horizontais ou 
verticais em branco. 
Com isso, o formulário não só ganha em beleza visual, como também fica mais 
claro, lógico w fácil de completar pelo usuário. 
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 reticulado 
Anterior: O design equilibrado. O contraste 
< Í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

Zombie revenge manual dreamcast ntsc
Zombie revenge manual dreamcast ntscZombie revenge manual dreamcast ntsc
Zombie revenge manual dreamcast ntscmuseodreamcast
 
CUENTO EL INDIO I
CUENTO EL INDIO ICUENTO EL INDIO I
CUENTO EL INDIO Iamonlop
 
Klöckner & Co - Roadshow Presentation November, 2007
Klöckner & Co - Roadshow Presentation November, 2007Klöckner & Co - Roadshow Presentation November, 2007
Klöckner & Co - Roadshow Presentation November, 2007Klöckner & Co SE
 
Recuperación de informática
Recuperación de informáticaRecuperación de informática
Recuperación de informáticacristian1616
 
Lançamento Ano I Assembleia Distrital Palhoça 28abr2012
Lançamento Ano I Assembleia Distrital Palhoça 28abr2012Lançamento Ano I Assembleia Distrital Palhoça 28abr2012
Lançamento Ano I Assembleia Distrital Palhoça 28abr2012Wan Chih
 
Apres quali dout_jun2012
Apres quali dout_jun2012Apres quali dout_jun2012
Apres quali dout_jun2012gabicarneiro
 
CHALLENGER 850 14 SEATS FOR LONG RANGE FLIGHTS
CHALLENGER 850 14 SEATS FOR LONG RANGE FLIGHTS CHALLENGER 850 14 SEATS FOR LONG RANGE FLIGHTS
CHALLENGER 850 14 SEATS FOR LONG RANGE FLIGHTS CEO Kevelair
 
El correu electrònic imad
El correu electrònic imadEl correu electrònic imad
El correu electrònic imadmgonellgomez
 
Historia de los computadores
Historia de los computadoresHistoria de los computadores
Historia de los computadoresOskar Naavii
 
Wwf attitude manual dreamcast ntsc
Wwf attitude manual dreamcast ntscWwf attitude manual dreamcast ntsc
Wwf attitude manual dreamcast ntscmuseodreamcast
 
Concepto ..[1]
Concepto ..[1]Concepto ..[1]
Concepto ..[1]atilamagno
 
DeMolay Internacional - Tradução Juramentada
DeMolay Internacional - Tradução JuramentadaDeMolay Internacional - Tradução Juramentada
DeMolay Internacional - Tradução JuramentadaDeMolay Brasil
 
Certics – Gestão de Negócios
Certics – Gestão de NegóciosCertics – Gestão de Negócios
Certics – Gestão de NegóciosLucas Amaral
 

Destaque (20)

Vuelta valle2013etapa5
Vuelta valle2013etapa5Vuelta valle2013etapa5
Vuelta valle2013etapa5
 
Métodos de interpretação bíblica
Métodos de interpretação bíblicaMétodos de interpretação bíblica
Métodos de interpretação bíblica
 
Zombie revenge manual dreamcast ntsc
Zombie revenge manual dreamcast ntscZombie revenge manual dreamcast ntsc
Zombie revenge manual dreamcast ntsc
 
Francisco 10ºF
Francisco 10ºFFrancisco 10ºF
Francisco 10ºF
 
CUENTO EL INDIO I
CUENTO EL INDIO ICUENTO EL INDIO I
CUENTO EL INDIO I
 
Klöckner & Co - Roadshow Presentation November, 2007
Klöckner & Co - Roadshow Presentation November, 2007Klöckner & Co - Roadshow Presentation November, 2007
Klöckner & Co - Roadshow Presentation November, 2007
 
Recuperación de informática
Recuperación de informáticaRecuperación de informática
Recuperación de informática
 
trata de personas en el peru
trata de personas en el perutrata de personas en el peru
trata de personas en el peru
 
Lançamento Ano I Assembleia Distrital Palhoça 28abr2012
Lançamento Ano I Assembleia Distrital Palhoça 28abr2012Lançamento Ano I Assembleia Distrital Palhoça 28abr2012
Lançamento Ano I Assembleia Distrital Palhoça 28abr2012
 
Apres quali dout_jun2012
Apres quali dout_jun2012Apres quali dout_jun2012
Apres quali dout_jun2012
 
CHALLENGER 850 14 SEATS FOR LONG RANGE FLIGHTS
CHALLENGER 850 14 SEATS FOR LONG RANGE FLIGHTS CHALLENGER 850 14 SEATS FOR LONG RANGE FLIGHTS
CHALLENGER 850 14 SEATS FOR LONG RANGE FLIGHTS
 
El correu electrònic imad
El correu electrònic imadEl correu electrònic imad
El correu electrònic imad
 
Historia de los computadores
Historia de los computadoresHistoria de los computadores
Historia de los computadores
 
Branding Week - Apresentação de Breno Salek
Branding Week - Apresentação de Breno SalekBranding Week - Apresentação de Breno Salek
Branding Week - Apresentação de Breno Salek
 
Testabilidade
TestabilidadeTestabilidade
Testabilidade
 
Wwf attitude manual dreamcast ntsc
Wwf attitude manual dreamcast ntscWwf attitude manual dreamcast ntsc
Wwf attitude manual dreamcast ntsc
 
Concepto ..[1]
Concepto ..[1]Concepto ..[1]
Concepto ..[1]
 
DeMolay Internacional - Tradução Juramentada
DeMolay Internacional - Tradução JuramentadaDeMolay Internacional - Tradução Juramentada
DeMolay Internacional - Tradução Juramentada
 
Certics – Gestão de Negócios
Certics – Gestão de NegóciosCertics – Gestão de Negócios
Certics – Gestão de Negócios
 
Constitucionalismo generalidades
Constitucionalismo generalidadesConstitucionalismo generalidades
Constitucionalismo generalidades
 

Semelhante a O design equilibrado4 (20)

O design equilibrado5
O design equilibrado5O design equilibrado5
O design equilibrado5
 
O design equilibrado9
O design equilibrado9O design equilibrado9
O design equilibrado9
 
Bootstrap.pdf
Bootstrap.pdfBootstrap.pdf
Bootstrap.pdf
 
O design equilibrado0
O design equilibrado0O design equilibrado0
O design equilibrado0
 
mapas_conceptuais.pdf
mapas_conceptuais.pdfmapas_conceptuais.pdf
mapas_conceptuais.pdf
 
O design equilibrado8
O design equilibrado8O design equilibrado8
O design equilibrado8
 
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
 
Se Liga Concórdia
Se Liga ConcórdiaSe Liga Concórdia
Se Liga Concórdia
 
Semiotica fundamentos da composição visual (atv07)
Semiotica   fundamentos da composição visual (atv07)Semiotica   fundamentos da composição visual (atv07)
Semiotica fundamentos da composição visual (atv07)
 
Mapas conceituais
Mapas conceituaisMapas conceituais
Mapas conceituais
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
 
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
 
O design equilibrado7
O design equilibrado7O design equilibrado7
O design equilibrado7
 
Análise multimodal de infográfico - Fábio Nunes Assunção
Análise multimodal de infográfico - Fábio Nunes AssunçãoAnálise multimodal de infográfico - Fábio Nunes Assunção
Análise multimodal de infográfico - Fábio Nunes Assunção
 
Aula 4 - Direção de Arte
Aula 4 - Direção de ArteAula 4 - Direção de Arte
Aula 4 - Direção de Arte
 
Mapa Conceitual e CMAP TOOLS
Mapa Conceitual e CMAP TOOLSMapa Conceitual e CMAP TOOLS
Mapa Conceitual e CMAP TOOLS
 
Navegação
NavegaçãoNavegação
Navegação
 
Design - Layout
Design - LayoutDesign - Layout
Design - Layout
 
Apresentação ontologia da colaboração
Apresentação ontologia da colaboraçãoApresentação ontologia da colaboração
Apresentação ontologia da colaboraçã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

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
 
Simulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfSimulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfAnnaCarolina242437
 
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
 
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
 
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaaGESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaayasminlarissa371
 
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
 
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
 
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
 

Último (9)

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
 
Simulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfSimulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.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
 
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...
 
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaaGESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
 
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Ô.
 
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
 
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
 

O design equilibrado4

  • 1. O design equilibrado. Os agrupamentos Como os elementos web devem se agrupar para obter um resultado coerente. O ser humano, tanto por seu caráter racional como por herança cultural, tende a organizar os elementos que percebe ao redor como conjuntos significativos organizados. Esta inclinação a agrupar elementos relacionados em um fator que influi de forma notória na percepção que temos de nosso entorno, do que vemos ao nosso redor. As composições gráficas não escapam a esta tendência, portanto um corret o agrupamento de seus elementos lhes outorga um caráter lógico, racional, que aumenta seu valor comunicativo. O agrupamento de nossos elementos gráficos e textuais pode se basear em diferentes critérios:  Proximidade: Tendemos a agrupar aqueles objetos que estão próximos, mais pertos entre si.  Semelhança: Tendemos a agrupar os elementos iguais ou parecidos.  Continuidade: Nossa mente tende a agrupar aqueles elementos que têm uma continuidade significativa.  Simetria: Tendemos a agrupar os elementos para que apareçam ordenados formando figuras conhecidas. No caso concreto das páginas web, os agrupamentos são muito úteis e totalmente necessários, sobretudo no que diz respeito a elementos similares ou de funcionalidade análoga, como componentes de menus de navegação, ícones, dados relacionados, botões, etc.
  • 2. Os agrupamentos também são muito úteis em casos de formulários ou fichas de muitos campos, sendo muito conveniente dividir estes em grupos de informação análoga, separando logo cada grupo dos demais mediante franjas horizontais ou verticais em branco. Com isso, o formulário não só ganha em beleza visual, como também fica mais claro, lógico w fácil de completar pelo usuário. 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 reticulado Anterior: O design equilibrado. O contraste < Í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:
  • 3. + Entrar em Design + Entrar em Guias de desenho