Plane j Visual 2

7/23/2019 Plane j Visual 2

1/32

noes bsicas deplanejamento visual

recursos grficos e animao webevandro manara miletto

INSTITUTO FEDERAL

Campus Porto Alegre


2/32

Baseado no livroDESIGN PARA QUEM NO DESIGNER

Robin Williams, 2 edioSo Paulo : Callis. 2006


3/32

motivao


4/32

Good design Is as Easy

as 1-2-3

1. Learn the principles

Theyre simpler than you might think.2. Recognize when youre no using them.

Put it into words -- name the problem3. Apply the principles.

Youll be amazed.

exemplo

um anncio comum

alinhamento?

uso do espaos? (preenchimento)quantos tpicos? 1 por linha?

os elementos so individuais?

relao entre elementos?

similaridade entre fontes?

como est a consistncia?


5/32

d pra melhorar?de que forma?


6/32

princpios bsicos

aplicar ordenao e distribuiode elementos grficos e objetosda interface para melhorconduo do fluxo de leitura eapresentao visual

C

RA

Proximidade

linhamento

epetio

ontraste


7/32

contraste

diferenciar as coisas diferentes

destacar elementos dominantes

atenuar elementos secundriosdesperta o interesse

criar dinamismo

cria ponto focal

cria hierarquia

direciona a ateno


8/32

contraste -como usar?

usando opostosfrente - fundo / escuro - claro / perto - longe

formas

cores

texto

grficos

tamanhos

Good designis as easy as ...

Learn the principles

Theyre simpler than you might think.

Recognize when youre no using them.

Put it into words -- name the problem

Apply the principles.

Youll be amazed.

1

2

3

1

2

3

4

5


9/32

contraste -dicas

no tenha medo do contraste

aumente coisas importantes, diminua as demais

se 2 objetos se parecem, faa-os pareceremse 2 objetos so diferentes, diferencie-os

use contraste entre texto e fundo

est demais? no! - evite distrao visual


10/32

contraste - exemplo


11/32

contraste?


12/32

repetio

numa pgina simples

cria organizao

cria interesse

unifica os elementos da pgina

em todo o site

estabelece uma identidade grfica consistente

torna o site distinto e memorvel

permite que se aprenda como usar o site

princpio da consistncia


13/32

repetir padres (elementos visuais) dodesign na tela e em toda o site



Theyre simpler than you might think




Youll be amazed

1

2

3

1

2

3

4

repetio -como usar?

coresilustraes

leiaute

tipografia

navegaologo/marca


14/32

repetio -dicas

use uma grade de leiaute

estabelea um estilo. repita-o

pense nas funcionalidades que podem ser repetidas


15/32

repetiolinks, listas e ttulos inconsistentes


16/32

alinhamento

fornece um visual limpo e sofisticado

a pgina parece bem projetada

organiza a pginaajuda na visualizao

cria linhas invisveis, dirigindo o olho para onde

tem que ir


17/32

alinhamento -como usar?cada elemento tem que ter umaconexao visual com outros elementos

na tela

nada deve ser colocado

arbitrariamente







Youll be amazed

2

3

1

2 3

41


18/32

alinhamento -dicas

blocos centralizados, ok. texto, melhor no!

enfatize alinhamentos naturais

alinhe tanto vertical como horizontalmenteusar grade de leiaute

considerar balano e simetria

lembrar da regra dos teros


19/32

alinhamento -exemplo


20/32

alinhamento?


21/32

proximidade

quando itens esto prximos, eles formamuma unidade visual em vez de vrias

unidades separadasajuda a organizar a informao e reduzir a

desordem


22/32







Youll be amazed

2

3

proximidade -como usar?agrupe conjuntamente elementosrelacionados

usar espao em branco para comunicarelementos diferentes

ateno: espao entre objetos

sua posio no contexto

a distncia entre objetos

e borda da pgina

1

2 3

1


23/32

proximidade -dicas

agrupar elementos de navegao comuns

aproximar ttulos do seu texto (legenda)

reduzir espaos entre imagens e seu textocorrespondente

usar espao branco


24/32

proximidade?mesmo espao antes e depois dos ttulos, frases, subtitulos, etc.


25/32

Good designis as easy as ...Learn the principles





Youll be amazed

23

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

ttulo

1

subttulo

ordem/numerao

ponto principal

ponto secundrio


26/32

outro exemplo


27/32

verso original


28/32

aplicando proximidade


29/32

aplicando alinhamento


30/32

aplicando contraste


31/32

aplicando repetio


32/32

antes e depois

Plane j Visual 2

Documents

Transcript of Plane j Visual 2