SlideShare una empresa de Scribd logo
1 de 58
EQUILÍBRIO
Eduardo Novais - UFC - 03.11
EQUILÍBRIO
De forma semelhante aos objetos físicos, os elementos de um
                  layout possuem peso.
A simetria em uma
composição se produz
quando massas iguais e
opostas se situam em ambos
os lados de um eixo
horizontal ou vertical.

Uma composição é dita
equilibrada quando o peso
dos elementos se compensa.
                             Nenúfares - Claude Monet (1904)
Há duas formas principais de equilíbrio visual:
simétrica e assimétrica.
EQUILÍBRIO
  SIMÉTRICO
Acontece quando os
elementos de uma
composição são os mesmos
em ambos os lados de uma
linha axial.
                           Contemplation - David Lanham
Como o equilíbrio simétrico funciona em um layout?
EQUILÍBRIO SIMÉTRICO

• Não  é prático para todos os
 clientes e designs

• Pode ser aplicado aos
 layouts centralizando-se o
 conteúdo ou organizando-o
 proporcionalmente em
 colunas
vejamos outros exemplos de equilíbrio simétrico.
EQUILÍBRIO
ASSIMÉTRICO
Em vez de preocupar-se com
imagens reflexas em ambos
os lados do layout, o balanço
assimétrico envolve objetos
de diferentes tamanhos,         Starry Night - Van Gogh (1889)
formas, tonalidades ou
posicionamento.
vejamos outros exemplos de equilíbrio assimétrico.
UNIDADE

•É a forma com que os
 diferentes elementos de
 uma composição interagem.

•A unidade em um layout
 pode ser empregada de
 duas formas:
 proximidade e
 repetição.
PROXIMIDADE
Objetos posicionados
próximos uns dos outros em
determinado layout criam um
ponto focal pelo qual o olho
se orienta.
                               Dalmatian - Melissa Mariko Kieselburg
REPETIÇÃO
A repetição de cores, formas,
texturas ou objetos
semelhantes ajuda a manter a
coerência do design da página.

                                 Sky and Water I - M. C. Escher (1938)
EXERCÍCIO
Analise os seguintes layout de páginas e aplicativos para iPhone,
destacando suas características quanto ao equilíbrio e
unidade.
REFERÊNCIAS
BEAIRD, Jason. Princípios do Web Design Maravilhoso. Alta Books: Rio de Janeiro, 2008.


Simplifying Interfaces. Expertise. Disponível em: http://www.simplifyinginterfaces.com/category/
expertise/

Astheria. The Elements of Design Applied to the Web. Disponível em: http://
astheria.com/design/the-elements-of-design-applied-totheweb


Smashing Magazine. Five More Principles Of Effective Web Design. Disponível em:
http://www.smashingmagazine.com/2008/04/24/5-more-principles-of-effective-web-design/

Más contenido relacionado

Más de Eduardo Novais

[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um grid
Eduardo Novais
 
[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismo[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismo
Eduardo Novais
 
[dig2012] 11 - interfaces online
[dig2012] 11 - interfaces online[dig2012] 11 - interfaces online
[dig2012] 11 - interfaces online
Eduardo Novais
 
[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobile[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobile
Eduardo Novais
 
[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo
Eduardo Novais
 
[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02
Eduardo Novais
 
[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01
Eduardo Novais
 
[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina
Eduardo Novais
 
[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual
Eduardo Novais
 
[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web
Eduardo Novais
 
[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina
Eduardo Novais
 
[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores
Eduardo Novais
 
[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual
Eduardo Novais
 
[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids
Eduardo Novais
 
[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)
Eduardo Novais
 
[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids
Eduardo Novais
 
[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea
Eduardo Novais
 
[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativo[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativo
Eduardo Novais
 

Más de Eduardo Novais (20)

[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um grid
 
[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismo[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismo
 
[dig2012] 11 - interfaces online
[dig2012] 11 - interfaces online[dig2012] 11 - interfaces online
[dig2012] 11 - interfaces online
 
[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobile[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobile
 
[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo
 
[HA2012] 06 - Cubismo
[HA2012] 06 - Cubismo[HA2012] 06 - Cubismo
[HA2012] 06 - Cubismo
 
[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02
 
[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01
 
[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina
 
[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces
 
[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual
 
[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web
 
[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina
 
[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores
 
[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual
 
[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids
 
[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)
 
[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids
 
[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea
 
[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativo[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativo
 

[dig - 2011.1] 08 - equlíbrio e unidade

  • 2. EQUILÍBRIO De forma semelhante aos objetos físicos, os elementos de um layout possuem peso.
  • 3. A simetria em uma composição se produz quando massas iguais e opostas se situam em ambos os lados de um eixo horizontal ou vertical. Uma composição é dita equilibrada quando o peso dos elementos se compensa. Nenúfares - Claude Monet (1904)
  • 4. Há duas formas principais de equilíbrio visual: simétrica e assimétrica.
  • 5. EQUILÍBRIO SIMÉTRICO Acontece quando os elementos de uma composição são os mesmos em ambos os lados de uma linha axial. Contemplation - David Lanham
  • 6.
  • 7.
  • 8.
  • 9.
  • 10. Como o equilíbrio simétrico funciona em um layout?
  • 11. EQUILÍBRIO SIMÉTRICO • Não é prático para todos os clientes e designs • Pode ser aplicado aos layouts centralizando-se o conteúdo ou organizando-o proporcionalmente em colunas
  • 12.
  • 13.
  • 14.
  • 15.
  • 16. vejamos outros exemplos de equilíbrio simétrico.
  • 17.
  • 18.
  • 19.
  • 20. EQUILÍBRIO ASSIMÉTRICO Em vez de preocupar-se com imagens reflexas em ambos os lados do layout, o balanço assimétrico envolve objetos de diferentes tamanhos, Starry Night - Van Gogh (1889) formas, tonalidades ou posicionamento.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29. vejamos outros exemplos de equilíbrio assimétrico.
  • 30.
  • 31.
  • 32.
  • 33. UNIDADE •É a forma com que os diferentes elementos de uma composição interagem. •A unidade em um layout pode ser empregada de duas formas: proximidade e repetição.
  • 34. PROXIMIDADE Objetos posicionados próximos uns dos outros em determinado layout criam um ponto focal pelo qual o olho se orienta. Dalmatian - Melissa Mariko Kieselburg
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43. REPETIÇÃO A repetição de cores, formas, texturas ou objetos semelhantes ajuda a manter a coerência do design da página. Sky and Water I - M. C. Escher (1938)
  • 44.
  • 45.
  • 46.
  • 47.
  • 49. Analise os seguintes layout de páginas e aplicativos para iPhone, destacando suas características quanto ao equilíbrio e unidade.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 58. BEAIRD, Jason. Princípios do Web Design Maravilhoso. Alta Books: Rio de Janeiro, 2008. Simplifying Interfaces. Expertise. Disponível em: http://www.simplifyinginterfaces.com/category/ expertise/ Astheria. The Elements of Design Applied to the Web. Disponível em: http:// astheria.com/design/the-elements-of-design-applied-totheweb Smashing Magazine. Five More Principles Of Effective Web Design. Disponível em: http://www.smashingmagazine.com/2008/04/24/5-more-principles-of-effective-web-design/

Notas del editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n