• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Noções de Design Gráfico
 

Noções de Design Gráfico

on

  • 1,469 views

 

Statistics

Views

Total Views
1,469
Views on SlideShare
1,469
Embed Views
0

Actions

Likes
0
Downloads
31
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Noções de Design Gráfico Noções de Design Gráfico Presentation Transcript

    • Noções de Design GráficoUnidade II – Elementos Visuais Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590
    • 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
    • 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
    • Texto impresso Prof. Nécio Veras
    • Deixando o texto mais legível Prof. Nécio Veras
    • 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
    • Layout Prof. Nécio Veras
    • Leitura exploratória na Web• A tela é explorada em busca de palavras- chave, sentenças e parágrafos significativos. Prof. Nécio Veras
    • 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
    • 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
    • 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
    • Deixando o texto mais legível Prof. Nécio Veras
    • 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
    • Circule cabeçalhos e listas da página Prof. Nécio Veras
    • Cabeçalhos e listas Prof. Nécio Veras
    • 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
    • Fontes com e sem serifa Prof. Nécio Veras
    • Fontes com serifa Prof. Nécio Veras
    • Fontes sem serifa Prof. Nécio Veras
    • Fontes Manuscritas Prof. Nécio Veras
    • Google Web Fonts Prof. Nécio Veras
    • Visual final do site Prof. Nécio Veras
    • Exercícios Prof. Nécio Veras
    • 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