noções básicas de planejamento visual

recursos gráficos e animação webevandro manara miletto

INSTITUTO FEDERAL Campus Porto Alegre

Baseado no livro DESIGN PARA QUEM NÃO É DESIGNER

Robin Williams, 2ª edição São Paulo : Callis. 2006

motivação

Good design Is as Easyas 1-2-3

1. Learn the principlesThey’re simpler than you might think.

2. Recognize when you’re no using them.Put it into words -- name the problem

3. Apply the principles.You’ll be amazed.

exemplo

um anúncio comum

alinhamento?

uso do espaços? (preenchimento)quantos tópicos? 1 por linha?

os elementos são individuais?

relação entre elementos?

similaridade entre fontes?

como está a consistência?

dá pra melhorar?de que forma?

princípios básicos

aplicar ordenação e distribuição de elementos gráficos e objetos da interface para melhor condução do fluxo de leitura e apresentação visual

C R

A P roximidade

linhamento

epetição

ontraste

contraste

diferenciar as coisas diferentesdestacar elementos dominantesatenuar elementos secundáriosdesperta o interessecriar dinamismocria ponto focalcria hierarquiadireciona a atenção

contraste - como usar?usando opostos

frente - fundo / escuro - claro / perto - longe

formascorestextográficostamanhos

Good design Is As Easyas 1-2-3

1. Learn the principlesThey’re simpler than you might think.

2. Recognize when you’re no using them.Put it into words -- name the problem

3. Apply the principles.You’ll be amazed.

Good design is as easy as ...

Learn the principlesThey’re simpler than you might think.

Recognize when you’re no using them.Put it into words -- name the problem

Apply the principles.You’ll be amazed.

123

1

2

3

4

5

contraste - dicas

não tenha medo do contrasteaumente coisas importantes, diminua as demaisse 2 objetos se parecem, faça-os pareceremse 2 objetos são diferentes, diferencie-osuse contraste entre texto e fundo

está demais? não! - evite distração visual

contraste - exemplo

contraste?

repetição

numa página simplescria organização

cria interesse

unifica os elementos da página

em todo o siteestabelece uma identidade gráfica consistente

torna o site distinto e memorável

permite que se aprenda como usar o site

princípio da consistência

repetir padrões (elementos visuais) do design na tela e em toda o site

Good design Is As Easyas 1-2-3

1. Learn the principlesThey’re simpler than you might think.

2. Recognize when you’re no using them.Put it into words -- name the problem

3. Apply the principles.You’ll be amazed.

Good design is as easy as ...

Learn the principlesThey’re simpler than you might think

Recognize when you’re no using them.Put it into words -- name the problem

Apply the principles.You’ll be amazed

123

1

2

3

4

repetição - como usar?

cores

ilustrações

leiautetipografia

navegação

logo/marca

repetição - dicas

use uma grade de leiauteestabeleça um estilo. repita-opense nas funcionalidades que podem ser repetidas

repetiçãolinks, listas e títulos inconsistentes

alinhamento

fornece um visual limpo e sofisticadoa página parece bem projetadaorganiza a páginaajuda na visualizaçãocria linhas invisíveis, dirigindo o olho para onde tem que ir

alinhamento - como usar?cada elemento tem que ter uma conexao visual com outros elementos na tela

nada deve ser colocado arbitrariamente

Good design Is As Easyas 1-2-3

1. Learn the principlesThey’re simpler than you might think.

2. Recognize when you’re no using them.Put it into words -- name the problem

3. Apply the principles.You’ll be amazed.

Good design is as easy as ...

Learn the principlesThey’re simpler than you might think

Recognize when you’re no using them.Put it into words -- name the problem

Apply the principles.You’ll be amazed

23

1

2 3

41

alinhamento - dicas

blocos centralizados, ok. texto, melhor não!enfatize alinhamentos naturaisalinhe tanto vertical como horizontalmenteusar grade de leiauteconsiderar balanço e simetrialembrar da regra dos terços

alinhamento - exemplo

alinhamento?

proximidade

quando itens estão próximos, eles formam uma unidade visual em vez de várias unidades separadasajuda a organizar a informação e reduzir a desordem

Good design is as easy as ...

Learn the principlesThey’re simpler than you might think

Recognize when you’re no using them.Put it into words -- name the problem

Apply the principles.You’ll be amazed

23

proximidade - como usar?agrupe conjuntamente elementos relacionados

usar espaço em branco para comunicar elementos diferentes

atenção:

espaço entre objetos

sua posição no contexto

a distância entre objetos

e borda da página

Good design Is As Easyas 1-2-3

1. Learn the principlesThey’re simpler than you might think.

2. Recognize when you’re no using them.Put it into words -- name the problem

3. Apply the principles.You’ll be amazed.

1

2 3

1

proximidade - dicas

agrupar elementos de navegação comunsaproximar títulos do seu texto (legenda)reduzir espaços entre imagens e seu texto correspondenteusar espaço branco

proximidade?mesmo espaço antes e depois dos títulos, frases, subtitulos, etc.

Good design is as easy as ...

Learn the principlesThey’re simpler than you might think

Recognize when you’re no using them.Put it into words -- name the problem

Apply the principles.You’ll be amazed

23

como o olho é guiado?CRAP dá dica de como proceder a leitura

título

1subtítulo

ordem/numeração

ponto principal

ponto secundário

outro exemplo

versão original

aplicando proximidade

aplicando alinhamento

aplicando contraste

aplicando repetição

antes e depois