SlideShare uma empresa Scribd logo
ÊNFASE
Eduardo Novais - UFC - ABR/2011
Ênfase não é simplesmente ajustar diversos
elementos de determinado design, mas procurar
atrair a atenção do observador a um elemento
particular.
PONTO FOCAL
Ponto focal é qualquer componente em uma
página capaz de atrair a atenção do observador e
não apenas provocar a sensação de que faz parte
da página como um todo.
Dispomos de alguns
métodos para se
chegar a um ponto
focal:

• Posicionamento     • Contraste

• Continuidade       • Proporção

• Isolamento
POSICIONAMENTO
O centro direito de uma composição é o
ponto para onde o observador olha primeiro e é
sempre a localização com maior poder de produzir
ênfase.
CONTINUIDADE
A ideia por trás da continuidade é a dos olhos
movendo-se em determinada direção; a tendência
é seguirem esse curso até que surja uma figura ou
informação dominante.
ISOLAMENTO
Do mesmo modo como a proximidade ajuda a
criar unidade no design, o isolamento promove a
ênfase.

Um item que se destaca fora da área geral
tende a chamar atenção.
CONTRASTE
O conceito é simples: quanto maior a diferença
entre o elemento gráfico e a área circunvizinha,
mais este elemento se destacará.

Pode ser criado empregando-se diferenças nas
cores, tamanho e forma.
PROPORÇÃO
A proporção lida com a diferença de escala
dos objetos.

Se colocarmos um objeto em um ambiente cuja
cuja escala é diferente, o objeto parecerá menor ou
maior. Essa diferença atrai a atenção do observador.
REFERÊNCIAS

•   BEAIRD, Jason. Princípios do Web Design Maravilhoso. Alta Books: Rio de Janeiro, 2008.

•   Smashing Magazine. Showcase Of Delicious Coffee Websites. Disponível em: <http://
    www.smashingmagazine.com/2010/08/10/showcase-of-delicious-coffee-websites/>. Última visita
    em: 05 de abril de 2011.

•   Smashing Magazine. 10 Useful Usability Findings and Guidelines. Disponível em:
    <http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/>.
    Última visita em: 05 de abril de 2011.

•   Usable World. You look where they look. Disponível em: <http://usableworld.com.au/
    2009/03/16/you-look-where-they-look/>. Última visita em: 05 de abril de 2011.

Mais conteúdo relacionado

Mais de Eduardo Novais

16 - design de marcas
16 - design de marcas16 - design de marcas
16 - design de marcas
Eduardo Novais
 
15 - escolha de tipos
15 - escolha de tipos15 - escolha de tipos
15 - escolha de tipos
Eduardo Novais
 
[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um gridEduardo Novais
 
[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismo[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismoEduardo Novais
 
[dig2012] 11 - interfaces online
[dig2012] 11 - interfaces online[dig2012] 11 - interfaces online
[dig2012] 11 - interfaces onlineEduardo Novais
 
[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobile[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobileEduardo Novais
 
[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo[HAD2012] 11 - Dadaismo
[HAD2012] 11 - DadaismoEduardo 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 - 02Eduardo 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 - 01Eduardo Novais
 
[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplinaEduardo Novais
 
[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
Eduardo Novais
 
[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visualEduardo 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 webEduardo Novais
 
[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplinaEduardo Novais
 
[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - coresEduardo 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 VisualEduardo 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 gridsEduardo 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 - gridsEduardo Novais
 

Mais de Eduardo Novais (20)

16 - design de marcas
16 - design de marcas16 - design de marcas
16 - design de marcas
 
15 - escolha de tipos
15 - escolha de tipos15 - escolha de tipos
15 - escolha de tipos
 
[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
 

[dig - 2011.1] 11 - ênfase

  • 1. ÊNFASE Eduardo Novais - UFC - ABR/2011
  • 2. Ênfase não é simplesmente ajustar diversos elementos de determinado design, mas procurar atrair a atenção do observador a um elemento particular.
  • 4. Ponto focal é qualquer componente em uma página capaz de atrair a atenção do observador e não apenas provocar a sensação de que faz parte da página como um todo.
  • 5. Dispomos de alguns métodos para se chegar a um ponto focal: • Posicionamento • Contraste • Continuidade • Proporção • Isolamento
  • 7. O centro direito de uma composição é o ponto para onde o observador olha primeiro e é sempre a localização com maior poder de produzir ênfase.
  • 8.
  • 10. A ideia por trás da continuidade é a dos olhos movendo-se em determinada direção; a tendência é seguirem esse curso até que surja uma figura ou informação dominante.
  • 11.
  • 12.
  • 13.
  • 14.
  • 16. Do mesmo modo como a proximidade ajuda a criar unidade no design, o isolamento promove a ênfase. Um item que se destaca fora da área geral tende a chamar atenção.
  • 17.
  • 18.
  • 20. O conceito é simples: quanto maior a diferença entre o elemento gráfico e a área circunvizinha, mais este elemento se destacará. Pode ser criado empregando-se diferenças nas cores, tamanho e forma.
  • 21.
  • 22.
  • 23.
  • 25. A proporção lida com a diferença de escala dos objetos. Se colocarmos um objeto em um ambiente cuja cuja escala é diferente, o objeto parecerá menor ou maior. Essa diferença atrai a atenção do observador.
  • 26.
  • 27.
  • 28. REFERÊNCIAS • BEAIRD, Jason. Princípios do Web Design Maravilhoso. Alta Books: Rio de Janeiro, 2008. • Smashing Magazine. Showcase Of Delicious Coffee Websites. Disponível em: <http:// www.smashingmagazine.com/2010/08/10/showcase-of-delicious-coffee-websites/>. Última visita em: 05 de abril de 2011. • Smashing Magazine. 10 Useful Usability Findings and Guidelines. Disponível em: <http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/>. Última visita em: 05 de abril de 2011. • Usable World. You look where they look. Disponível em: <http://usableworld.com.au/ 2009/03/16/you-look-where-they-look/>. Última visita em: 05 de abril de 2011.