O documento discute elementos visuais de design gráfico como tipos de texto, fontes, layout e como deixar o conteúdo mais legível. Ele fornece dicas sobre como especificar texto, usar cabeçalhos, listas, menos texto e fontes adequadas para tela.

1. Noções de Design Gráfico
Unidade II – Elementos Visuais
Prof. Nécio de Lima Veras
http://lattes.cnpq.br/8284657916723590

2. Objetivo
Perceber 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. 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. Texto impresso
Prof. Nécio Veras

5. Deixando o texto mais
legível
Prof. Nécio Veras

6. Especificando um texto
1. 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. Layout
Prof. Nécio Veras

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. 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. 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. 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. Deixando o texto mais
legível
Prof. Nécio Veras

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. Circule cabeçalhos e listas
da página
Prof. Nécio Veras

15. Cabeçalhos e listas
Prof. Nécio Veras

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. Fontes com e sem serifa
Prof. Nécio Veras

18. Fontes com serifa
Prof. Nécio Veras

19. Fontes sem serifa
Prof. Nécio Veras

20. Fontes Manuscritas
Prof. Nécio Veras

21. Google Web Fonts
Prof. Nécio Veras

22. Visual final do site
Prof. Nécio Veras

23. Exercícios
Prof. Nécio Veras

24. Referências
Esta apresentação foi baseada nos materiais
didáticos de:
– Prof. Régis Pires (Curso de Introdução ao Web
Design) -
https://sites.google.com/site/ifpiregis/pronatec/intro
ducao-ao-web-design
Também no livro Use a Cabeça – WebDesign
Prof. Nécio Veras