Aula 04

DESIGN DE WEB I

Prof Fabiane

AULA 04
Layout e Composio:
Tipografia:
Tipografia e design do texto Fontes padres (lista segura) O que mudou com o @font-face (css3) Algumas recomendaes

cones:
Quando usar Algumas recomendaes
Prof Fabiane

TIPOGRAFIA

Prof Fabiane

Layout e Composio
TIPOGRAFIA

As fontes organizam a informao, facilitando a interpretao por parte do usurio.

Prof Fabiane

Layout e Composio
TIPOGRAFIA

A organizao clara e regular da tipografia em um site aumenta a legibilidade e a leiturabilidade da informao (Marcus, 1992). Variando o tamanho e o peso de uma fonte, percebe-se a ordem de leitura e sua relevncia.

Prof Fabiane

Layout e Composio

Prof Fabiane

Layout e Composio

Prof Fabiane

Layout e Composio
TIPOGRAFIA

Lista segura: 08 fontes padres suportado pelos navegadores . (Beaird, 2008).

Prof Fabiane

Layout e Composio
TIPOGRAFIA

Texto em forma de imagem: uma forma de apresentar fontes diferentes das suportadas pelos navegadores, trabalhando o texto como imagem.
Desvantagens: O texto no pode ser selecionado; No poder ser lido por um leitor de tela;

Prof Fabiane

Layout e Composio
TIPOGRAFIA

http://www.bearskinrug.co.uk/

Prof Fabiane

Layout e Composio
TIPOGRAFIA @font-face: um comando ccs3 usado para importar qualquer fonte para o site, carregando a fonte no site ainda que o computador no a tenha. Vantagens: Faz com que milhes de fontes possam ser usadas; O texto pode ser selecionado; A qualidade de renderizao est melhorando... Desvantagens: Alguns browsers ainda mostram as fontes com uma qualidade baixa; A qualidade nunca a mesma em todos os navegadores Os arquivos das fontes podem ser pesados no carregamento
Prof Fabiane

Layout e Composio

Prof Fabiane

Espaamento e Alinhamento

Prof Fabiane

Layout e Composio
TIPOGRAFIA Espaamento horizontal Espaamento entre letras: letter-spacing; (tracking) Espaamento entre palavras: word-spacing;

Prof Fabiane

Layout e Composio
TIPOGRAFIA Espaamento vertical Altura da linha: line-height; (leading)

Prof Fabiane

Layout e Composio
TIPOGRAFIA

Prof Fabiane

Layout e Composio
TIPOGRAFIA Alinhamento do texto Comportamento em relao as margens laterais: Text-aligment; (left, center, right, justify)

Prof Fabiane

Recomendaes

Prof Fabiane

Layout e Composio
TIPOGRAFIA Recomendaes (Nielsen, 2002)

Evitar usar textos com letras maisculas. Apenas em ttulos curtos, pois so mais difceis de ler;
Tamanhos de corpo de texto no devem ser menores que 12px, o tamanha varia em relao a fonte; Textos na web so melhores lidos em fontes no serifa. Por isso ao contrrio do material impresso, ttulos podem ser predominantes em fontes serifas e textos em no serifa.

Prof Fabiane

Layout e Composio

Prof Fabiane

Layout e Composio

Prof Fabiane

Layout e Composio

Prof Fabiane

Layout e Composio
TIPOGRAFIA

Prof Fabiane

Layout e Composio
TIPOGRAFIA

Prof Fabiane

Layout e Composio
TIPOGRAFIA

Prof Fabiane

Fontes Decorativas

Prof Fabiane

Layout e Composio
TIPOGRAFIA Fontes Novelty (Beaid, 2008)

So menos legveis; por serem decorativas.

Devem ser usadas com moderao, podem enriquecer o design com personalidade e estilo.

Prof Fabiane

Layout e Composio
TIPOGRAFIA

Prof Fabiane

Layout e Composio
TIPOGRAFIA

Prof Fabiane

Layout e Composio
TIPOGRAFIA

Prof Fabiane

Layout e Composio
TIPOGRAFIA

Prof Fabiane

Layout e Composio
TIPOGRAFIA

Prof Fabiane

Layout e Composio
TIPOGRAFIA

Prof Fabiane

Layout e Composio
TIPOGRAFIA

Prof Fabiane

Layout e Composio
TIPOGRAFIA

Prof Fabiane

Layout e Composio
TIPOGRAFIA

A escolha da fonte deve seguir o contexto do site

Prof Fabiane

Layout e Composio
TIPOGRAFIA

http://www.typetester.org/

Prof Fabiane

CONES

Prof Fabiane

Layout e Composio
CONE

cones so usados por toda a Web para representar objetos ou tarefas.

Prof Fabiane

Layout e Composio
CONE

Os cones podem: (Kalbach, 2009) Contribuir para a clareza ao reforar um rtulo; Ser uma maneira simples e eficaz de chamar a ateno de seus usurios;

Facilitar a habilidade dos usurios em aprender, entender e lembrar dos elementos funcionais do site;
Uma forma de passar rapidamente uma informao.

Prof Fabiane

Layout e Composio
CONE

Prof Fabiane

Layout e Composio
CONE

Prof Fabiane

Layout e Composio

Prof Fabiane

Layout e Composio
CONE

Prof Fabiane

Layout e Composio
CONE

Prof Fabiane

Layout e Composio
CONE

Prof Fabiane

Layout e Composio
CONE

Prof Fabiane

FIM! Agora vamos para a atividade

Prof Fabiane