SlideShare uma empresa Scribd logo
1 de 22
Baixar para ler offline
Hierarquia Visual
                            Eduardo Novais - Design de Interfaces Gráficas




sexta-feira, 16 de março de 2012
Hoje começamos a ver sobre hierarquia
                         visual




sexta-feira, 16 de março de 2012
Esse processo começa na definição de
                         campos e normalmente inicia-se com a
                         definição de cabeçalhos tipográficos




sexta-feira, 16 de março de 2012
Esse processo começa na definição de
                         campos e normalmente inicia-se com a
                         definição de cabeçalhos tipográficos




sexta-feira, 16 de março de 2012
Para comecar, vamos pensar em como e
                         porque as pessoas lêem textos informativos
                         e também onde eles usam essa informação




sexta-feira, 16 de março de 2012
1. As pessoas tentam escanear textos
                         buscando detalhes que necessitam




sexta-feira, 16 de março de 2012
2. Cabeçalhos e listas ajudam na localização e
                         no processamento de informações




sexta-feira, 16 de março de 2012
3. Textos informativos são lidos por pessoas
                         distraídas e pressionadas pelo tempo




sexta-feira, 16 de março de 2012
4. Mesmo pessoas que lêem textos de forma
                         mais descontraída necessitam de sinais
                         organizacionais




sexta-feira, 16 de março de 2012
Exercício 01




sexta-feira, 16 de março de 2012
Leia o seguinte texto e, após retirar o texto
                         de vista, liste o maior número de pontos
                         possível que você consegue lembrar




sexta-feira, 16 de março de 2012
O procedimento é bastante simples. Primeiro,
                    você organiza as coisas em grupos distintos.
                    Claro, uma pilha pode ser suficiente,
                    dependendo de quanto se há para fazer. Se tiver
                    que modificar sua estratégia em função da
                    quantidade, ok. O importante é não exagerar.
                    Ou seja, é melhor fazer poucas coisas de uma só
                    vez do que muitas delas. No curto prazo isso
                    pode parecer importante, mas complicações
                    podem surgir. Logo, porém, ele se tornará
                    apenas outro fato da vida...


sexta-feira, 16 de março de 2012
sexta-feira, 16 de março de 2012
O resultado indica que leitores se apoiam em
                    cabeçalhos ou títulos para processar a
                    informação




sexta-feira, 16 de março de 2012
Cabeçalhos tendem a unificar a informação
                         quer através do uso de estratégias visuais ou
                         pelo uso de numerações




sexta-feira, 16 de março de 2012
O uso de diferentes cabeçalhos criam
                         diferentes percepções acerca da importância
                         da informação




sexta-feira, 16 de março de 2012
O que pode ser usado como recurso?




sexta-feira, 16 de março de 2012
Tamanho
                         Maiúsculas e Minúsculas
                         Posicionamento
                         Sublinhado ou Negritos




sexta-feira, 16 de março de 2012
Exercício 02




sexta-feira, 16 de março de 2012
Usando o MS Word, crie um novo
                         documento, escolha um dos estilos
                         disponíveis e identifique cerca de 5
                         cabeçalhos e anotem o maior número de
                         informações possíveis (tamanho, tipografia,
                         posição...)




sexta-feira, 16 de março de 2012
Faça o mesmo para outros dois esquemas.




sexta-feira, 16 de março de 2012
Que generalizações você pode fazer sobre os
                    estilos?




sexta-feira, 16 de março de 2012

Mais conteúdo relacionado

Destaque (6)

DiagramaçãO E Elementos Da Diagramacao
DiagramaçãO E Elementos Da DiagramacaoDiagramaçãO E Elementos Da Diagramacao
DiagramaçãO E Elementos Da Diagramacao
 
Aula 02 - Princípios da Gestalt
Aula 02 - Princípios da GestaltAula 02 - Princípios da Gestalt
Aula 02 - Princípios da Gestalt
 
O Cartaz
O CartazO Cartaz
O Cartaz
 
Design Editorial | Elementos Editoriais
Design Editorial | Elementos EditoriaisDesign Editorial | Elementos Editoriais
Design Editorial | Elementos Editoriais
 
Design Editorial | Introdução
Design Editorial | IntroduçãoDesign Editorial | Introdução
Design Editorial | Introdução
 
Design Editorial | Estruturas
Design Editorial | EstruturasDesign Editorial | Estruturas
Design Editorial | Estruturas
 

Mais de 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 interfacesEduardo 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
 
[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 áureaEduardo 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] 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
 

Hierarquia Visual Design Interfaces

  • 1. Hierarquia Visual Eduardo Novais - Design de Interfaces Gráficas sexta-feira, 16 de março de 2012
  • 2. Hoje começamos a ver sobre hierarquia visual sexta-feira, 16 de março de 2012
  • 3. Esse processo começa na definição de campos e normalmente inicia-se com a definição de cabeçalhos tipográficos sexta-feira, 16 de março de 2012
  • 4. Esse processo começa na definição de campos e normalmente inicia-se com a definição de cabeçalhos tipográficos sexta-feira, 16 de março de 2012
  • 5. Para comecar, vamos pensar em como e porque as pessoas lêem textos informativos e também onde eles usam essa informação sexta-feira, 16 de março de 2012
  • 6. 1. As pessoas tentam escanear textos buscando detalhes que necessitam sexta-feira, 16 de março de 2012
  • 7. 2. Cabeçalhos e listas ajudam na localização e no processamento de informações sexta-feira, 16 de março de 2012
  • 8. 3. Textos informativos são lidos por pessoas distraídas e pressionadas pelo tempo sexta-feira, 16 de março de 2012
  • 9. 4. Mesmo pessoas que lêem textos de forma mais descontraída necessitam de sinais organizacionais sexta-feira, 16 de março de 2012
  • 10. Exercício 01 sexta-feira, 16 de março de 2012
  • 11. Leia o seguinte texto e, após retirar o texto de vista, liste o maior número de pontos possível que você consegue lembrar sexta-feira, 16 de março de 2012
  • 12. O procedimento é bastante simples. Primeiro, você organiza as coisas em grupos distintos. Claro, uma pilha pode ser suficiente, dependendo de quanto se há para fazer. Se tiver que modificar sua estratégia em função da quantidade, ok. O importante é não exagerar. Ou seja, é melhor fazer poucas coisas de uma só vez do que muitas delas. No curto prazo isso pode parecer importante, mas complicações podem surgir. Logo, porém, ele se tornará apenas outro fato da vida... sexta-feira, 16 de março de 2012
  • 13. sexta-feira, 16 de março de 2012
  • 14. O resultado indica que leitores se apoiam em cabeçalhos ou títulos para processar a informação sexta-feira, 16 de março de 2012
  • 15. Cabeçalhos tendem a unificar a informação quer através do uso de estratégias visuais ou pelo uso de numerações sexta-feira, 16 de março de 2012
  • 16. O uso de diferentes cabeçalhos criam diferentes percepções acerca da importância da informação sexta-feira, 16 de março de 2012
  • 17. O que pode ser usado como recurso? sexta-feira, 16 de março de 2012
  • 18. Tamanho Maiúsculas e Minúsculas Posicionamento Sublinhado ou Negritos sexta-feira, 16 de março de 2012
  • 19. Exercício 02 sexta-feira, 16 de março de 2012
  • 20. Usando o MS Word, crie um novo documento, escolha um dos estilos disponíveis e identifique cerca de 5 cabeçalhos e anotem o maior número de informações possíveis (tamanho, tipografia, posição...) sexta-feira, 16 de março de 2012
  • 21. Faça o mesmo para outros dois esquemas. sexta-feira, 16 de março de 2012
  • 22. Que generalizações você pode fazer sobre os estilos? sexta-feira, 16 de março de 2012