Noções de Design Gráfico

Prof. Nécio de Lima Verashttp://lattes.cnpq.br/8284657916723590

Noções de Design Gráfico

Unidade II – Elementos Visuais

Prof. Nécio de Lima Verashttp://lattes.cnpq.br/8284657916723590

Objetivo

Perceber os diferentes tipos de textos e fontes

Página da disciplina na Web

Prof. Nécio Veras

Leitura em tela x Leitura Leitura em tela x Leitura de impressode 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

Texto impressoTexto impresso

Prof. Nécio Veras

Deixando o texto mais Deixando o texto mais legívellegível

Prof. Nécio Veras

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.

Especificando um textoEspecificando um texto

Prof. Nécio Veras

LayoutLayout

Prof. Nécio Veras

Leitura exploratória na Leitura exploratória na WebWeb

•A tela é explorada em busca de palavras-chave, sentenças e parágrafos significativos.

Prof. Nécio Veras

•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.

Pirâmide invertidaPirâmide invertida

Prof. Nécio Veras

•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.

Menos textoMenos texto

Prof. Nécio Veras

● 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

ListasListas

Prof. Nécio Veras

Deixando o texto mais Deixando o texto mais legívellegível

Prof. Nécio Veras

● 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>

CabeçalhosCabeçalhos

Prof. Nécio Veras

Circule cabeçalhos e listas Circule cabeçalhos e listas da páginada página

Prof. Nécio Veras

Cabeçalhos e listasCabeçalhos e listas

Prof. Nécio Veras

FontesFontes

● 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

Fontes com e sem serifaFontes com e sem serifa

Prof. Nécio Veras

Fontes com serifaFontes com serifa

Prof. Nécio Veras

Fontes sem serifaFontes sem serifa

Prof. Nécio Veras

Fontes ManuscritasFontes Manuscritas

Prof. Nécio Veras

Google Web FontsGoogle Web Fonts

Prof. Nécio Veras

Visual final do siteVisual final do site

Prof. Nécio Veras

ExercíciosExercícios

Prof. Nécio Veras

ReferênciasReferê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/introducao-ao-web-design

Também no livro Use a Cabeça – WebDesign