Noções de Design Gráfico

2,158 views
1,905 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,158
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
48
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Noções de Design Gráfico

  1. 1. Noções de Design GráficoUnidade II – Elementos Visuais Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590
  2. 2. ObjetivoPerceber os diferentes tipos de textos e fontes Página da disciplina na Web Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590
  3. 3. Leitura em tela x Leitura de impresso● A leitura em tela é cerca de 15% mais lenta que a leitura em página impressa.● Leitura em tela mais cansativa que leitura de página impressa● Resolução de página impressa mais alta que resolução de telas.● Tela emite luz. Prof. Nécio Veras
  4. 4. Texto impresso Prof. Nécio Veras
  5. 5. Deixando o texto mais legível Prof. Nécio Veras
  6. 6. Especificando um texto1. O texto deve ter 3 colunas para facilitar a grande quantidade de conteúdo e manter a aparência de jornal.2. Se for para a WEB, todas as marcações (HTML e CSS) devem ser validadas com ferramentas de validação do W3C.3. Deve haver uma área principal para colocar uma imagem que servirá de elemento visual para o artigo apresentado.4. O título The Hipster Intelligencer deve aparecer no terço superior.5. Use pelo menos um esquema de 3 cores. Prof. Nécio Veras
  7. 7. Layout Prof. Nécio Veras
  8. 8. Leitura exploratória na Web• A tela é explorada em busca de palavras- chave, sentenças e parágrafos significativos. Prof. Nécio Veras
  9. 9. Pirâmide invertida•Resumo geral no início.•Detalhes depois.•Usuários podem parar de ler a qualquer momento e ainda assim terem a confiança de que já leram as partes mais importantes do texto. Prof. Nécio Veras
  10. 10. Menos texto•Um site deve ter pelo menos 15% menos texto que um documento impresso.•Remova conteúdo desnecessário.•Escreva frases curtas e dois ou três parágrafos concisos.•Reduza advérbios e substitua voz passiva por voz ativa. Prof. Nécio Veras
  11. 11. Listas● Use listas para dividir grandes blocos de texto e dar aos usuários pontos para que possam fixar a visão ao explorar a página.● Permite a extração de informações do texto apenas com uma rápida olhada.● Onde usar? – Conteúdo principal – Barras laterais – Navegação e cabeçalhos Prof. Nécio Veras
  12. 12. Deixando o texto mais legível Prof. Nécio Veras
  13. 13. Cabeçalhos● Facilitam a exploração do texto.● Quebram grandes blocos de texto.● Dizem sobre o que o texto fala.● O nível do cabeçalho mostraa importância do texto e não o seu tamanho. – Em HTML: <h1> a <h6> Prof. Nécio Veras
  14. 14. Circule cabeçalhos e listas da página Prof. Nécio Veras
  15. 15. Cabeçalhos e listas Prof. Nécio Veras
  16. 16. Fontes● Há duas categorias principais de fontes: – com serifa (Ex: Times New Roman) ● muito usadas em impressos – sem serifa (Ex: Arial, Helvetica) ● A mistura entre com e sem serifa pode melhorar o visual e ajudar a separar o conteúdo do cabeçalho. ● Fontes sem serifa são mais fáceis de ler em tela que fontes com serifa, especialmente em tamanhos pequenos.● Serifas pequenas aparecem borradas na tela.● Use somente se elas puderem ter um bom tamanho para serem lidas pelos usuários.● Sugestão: – sem serifa no conteúdo – com serifa nos cabeçalhos Prof. Nécio Veras
  17. 17. Fontes com e sem serifa Prof. Nécio Veras
  18. 18. Fontes com serifa Prof. Nécio Veras
  19. 19. Fontes sem serifa Prof. Nécio Veras
  20. 20. Fontes Manuscritas Prof. Nécio Veras
  21. 21. Google Web Fonts Prof. Nécio Veras
  22. 22. Visual final do site Prof. Nécio Veras
  23. 23. Exercícios Prof. Nécio Veras
  24. 24. ReferênciasEsta apresentação foi baseada nos materiaisdidáticos de: – Prof. Régis Pires (Curso de Introdução ao Web Design) - https://sites.google.com/site/ifpiregis/pronatec/intro ducao-ao-web-designTambém no livro Use a Cabeça – WebDesign Prof. Nécio Veras

×