Layout-Digital

53
Apresentação Visual de Informações G1000 Grupo de Mídia Interativa da Unifor Adaptado do Livro terça-feira, 3 de maio de 2011

description

G1000 Grupo de Mídia Interativa da Unifor Adaptado do Livro terça-feira, 3 de maio de 2011 Contraste Repetição Nada deve ser colocado arbitrariamente em uma página. Cada item deve ter uma conexão visual com algo na página. Itens relacionados entre si devem ser agrupados visualmente. Algum aspecto do design deve repetir-se no material inteiro. terça-feira, 3 de maio de 2011

Transcript of Layout-Digital

Page 1: Layout-Digital

Apresentação Visual de Informações

G1000Grupo de Mídia Interativa da Unifor

Adaptado do Livro

terça-feira, 3 de maio de 2011

Page 2: Layout-Digital

Princípios de organização visual

AlinhamentoNada deve ser colocado arbitrariamente em uma página. Cada item deve ter uma conexão visual com algo na página.

ProximidadeItens relacionados entre si devem ser agrupados visualmente.

RepetiçãoAlgum aspecto do design deve repetir-se no material inteiro.

Contraste

terça-feira, 3 de maio de 2011

Page 3: Layout-Digital

AlinhamentoNada deve ser colocado arbitrariamente em uma página. Cada item deve ter uma conexão visual com algo na página.

terça-feira, 3 de maio de 2011

Page 4: Layout-Digital

AlinhamentoNada deve ser colocado arbitrariamente em uma página. Cada item deve ter uma conexão visual com algo na página.

terça-feira, 3 de maio de 2011

Page 5: Layout-Digital

AlinhamentoNada deve ser colocado arbitrariamente em uma página. Cada item deve ter uma conexão visual com algo na página.

terça-feira, 3 de maio de 2011

Page 6: Layout-Digital

AlinhamentoNada deve ser colocado arbitrariamente em uma página. Cada item deve ter uma conexão visual com algo na página.

terça-feira, 3 de maio de 2011

Page 7: Layout-Digital

AlinhamentoNada deve ser colocado arbitrariamente em uma página. Cada item deve ter uma conexão visual com algo na página.

terça-feira, 3 de maio de 2011

Page 8: Layout-Digital

AlinhamentoNada deve ser colocado arbitrariamente em uma página. Cada item deve ter uma conexão visual com algo na página.

terça-feira, 3 de maio de 2011

Page 9: Layout-Digital

ProximidadeItens relacionados entre si devem ser agrupados visualmente.

terça-feira, 3 de maio de 2011

Page 10: Layout-Digital

ProximidadeItens relacionados entre si devem ser agrupados visualmente.

terça-feira, 3 de maio de 2011

Page 11: Layout-Digital

ProximidadeItens relacionados entre si devem ser agrupados visualmente.

terça-feira, 3 de maio de 2011

Page 12: Layout-Digital

ProximidadeItens relacionados entre si devem ser agrupados visualmente.

terça-feira, 3 de maio de 2011

Page 13: Layout-Digital

ProximidadeItens relacionados entre si devem ser agrupados visualmente.

terça-feira, 3 de maio de 2011

Page 14: Layout-Digital

ProximidadeItens relacionados entre si devem ser agrupados visualmente.

terça-feira, 3 de maio de 2011

Page 15: Layout-Digital

ProximidadeItens relacionados entre si devem ser agrupados visualmente.

terça-feira, 3 de maio de 2011

Page 16: Layout-Digital

ProximidadeItens relacionados entre si devem ser agrupados visualmente.

terça-feira, 3 de maio de 2011

Page 17: Layout-Digital

ProximidadeItens relacionados entre si devem ser agrupados visualmente.

terça-feira, 3 de maio de 2011

Page 18: Layout-Digital

RepetiçãoAlgum aspecto do design deve repetir-se no material inteiro.

terça-feira, 3 de maio de 2011

Page 19: Layout-Digital

RepetiçãoAlgum aspecto do design deve repetir-se no material inteiro.

terça-feira, 3 de maio de 2011

Page 20: Layout-Digital

RepetiçãoAlgum aspecto do design deve repetir-se no material inteiro.

terça-feira, 3 de maio de 2011

Page 21: Layout-Digital

RepetiçãoAlgum aspecto do design deve repetir-se no material inteiro.

terça-feira, 3 de maio de 2011

Page 22: Layout-Digital

RepetiçãoAlgum aspecto do design deve repetir-se no material inteiro.

terça-feira, 3 de maio de 2011

Page 23: Layout-Digital

ContrasteSe dois itens não pertencerem à mesma categoria, diferencie-os completamente.

terça-feira, 3 de maio de 2011

Page 24: Layout-Digital

ContrasteSe dois itens não pertencerem à mesma categoria, diferencie-os completamente.

terça-feira, 3 de maio de 2011

Page 25: Layout-Digital

ContrasteSe dois itens não pertencerem à mesma categoria, diferencie-os completamente.

terça-feira, 3 de maio de 2011

Page 26: Layout-Digital

ContrasteSe dois itens não pertencerem à mesma categoria, diferencie-os completamente.

terça-feira, 3 de maio de 2011

Page 27: Layout-Digital

Erros e acertos em design de páginas

Grupo de Mídia Interativa da Unifor

Adaptado dos Livros

terça-feira, 3 de maio de 2011

Page 28: Layout-Digital

Erros

1 Texto todo em maiúsculas.

terça-feira, 3 de maio de 2011

Page 29: Layout-Digital

Erros

1 Texto todo em maiúsculas.

terça-feira, 3 de maio de 2011

Page 30: Layout-Digital

Erros

1 Texto todo em maiúsculas.

terça-feira, 3 de maio de 2011

Page 31: Layout-Digital

Erros

2 Quebra de linhas.

terça-feira, 3 de maio de 2011

Page 32: Layout-Digital

Erros

2 Quebra de linhas.

terça-feira, 3 de maio de 2011

Page 33: Layout-Digital

Erros

2 Quebra de linhas.

terça-feira, 3 de maio de 2011

Page 34: Layout-Digital

Erros

3 “Botões” que não são botões.

terça-feira, 3 de maio de 2011

Page 35: Layout-Digital

Erros

3 “Botões” que não são botões.

terça-feira, 3 de maio de 2011

Page 36: Layout-Digital

Erros

3 “Botões” que não são botões.

terça-feira, 3 de maio de 2011

Page 37: Layout-Digital

Erros

4 Exagero no tamanho dos botões.

terça-feira, 3 de maio de 2011

Page 38: Layout-Digital

Erros

4 Exagero no tamanho dos botões.

terça-feira, 3 de maio de 2011

Page 39: Layout-Digital

Erros

4 Exagero no tamanho dos botões.

terça-feira, 3 de maio de 2011

Page 40: Layout-Digital

Erros

5 Uso de fundo que não permita um bom contraste.

terça-feira, 3 de maio de 2011

Page 41: Layout-Digital

Erros

5 Uso de fundo que não permita um bom contraste.

terça-feira, 3 de maio de 2011

Page 42: Layout-Digital

Erros

5 Uso de fundo que não permita um bom contraste.

terça-feira, 3 de maio de 2011

Page 43: Layout-Digital

Erros

6 Formato da página que ultrapassa o tamanho do monitor do seu cliente (800 x 600 pixels).

terça-feira, 3 de maio de 2011

Page 44: Layout-Digital

Erros

6 Formato da página que ultrapassa o tamanho do monitor do seu cliente (800 x 600 pixels).

terça-feira, 3 de maio de 2011

Page 45: Layout-Digital

Erros

6 Formato da página que ultrapassa o tamanho do monitor do seu cliente (800 x 600 pixels).

terça-feira, 3 de maio de 2011

Page 46: Layout-Digital

Erros

7 Páginas orfãs que não permitem voltar.

terça-feira, 3 de maio de 2011

Page 47: Layout-Digital

Erros

7 Páginas orfãs que não permitem voltar.

terça-feira, 3 de maio de 2011

Page 48: Layout-Digital

Erros

7 Páginas orfãs que não permitem voltar.

terça-feira, 3 de maio de 2011

Page 49: Layout-Digital

Acertos

1 Clareza e limpeza.

terça-feira, 3 de maio de 2011

Page 50: Layout-Digital

Acertos

2 Consistência e repetição.

terça-feira, 3 de maio de 2011

Page 51: Layout-Digital

Acertos

3 Uso inteligente do espaço em branco.

terça-feira, 3 de maio de 2011

Page 52: Layout-Digital

Referências

Web design para não designersRobin Williams e John TollettEditora Ciência Moderna

terça-feira, 3 de maio de 2011

Page 53: Layout-Digital

Apresentação Visual de Informações

G1000Grupo de Mídia Interativa da Unifor

Adaptado dos Livros

terça-feira, 3 de maio de 2011