noções de planejamento visual
DESCRIPTION
Noções básicas de planejamento visual para não designers, uso dos conceitos C.R.A.P. visando distribuição harmônica dos elementos da tela.TRANSCRIPT
![Page 1: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/1.jpg)
noções básicas de planejamento visual
recursos gráficos e animação webevandro manara miletto
INSTITUTO FEDERAL Campus Porto Alegre
![Page 2: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/2.jpg)
Baseado no livro DESIGN PARA QUEM NÃO É DESIGNER
Robin Williams, 2ª edição São Paulo : Callis. 2006
![Page 3: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/3.jpg)
motivação
![Page 4: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/4.jpg)
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?
![Page 5: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/5.jpg)
dá pra melhorar?de que forma?
![Page 6: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/6.jpg)
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
![Page 7: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/7.jpg)
contraste
diferenciar as coisas diferentesdestacar elementos dominantesatenuar elementos secundáriosdesperta o interessecriar dinamismocria ponto focalcria hierarquiadireciona a atenção
![Page 8: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/8.jpg)
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
![Page 9: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/9.jpg)
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
![Page 10: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/10.jpg)
contraste - exemplo
![Page 11: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/11.jpg)
contraste?
![Page 12: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/12.jpg)
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
![Page 13: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/13.jpg)
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
![Page 14: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/14.jpg)
repetição - dicas
use uma grade de leiauteestabeleça um estilo. repita-opense nas funcionalidades que podem ser repetidas
![Page 15: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/15.jpg)
repetiçãolinks, listas e títulos inconsistentes
![Page 16: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/16.jpg)
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
![Page 17: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/17.jpg)
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
![Page 18: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/18.jpg)
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
![Page 19: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/19.jpg)
alinhamento - exemplo
![Page 20: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/20.jpg)
alinhamento?
![Page 21: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/21.jpg)
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
![Page 22: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/22.jpg)
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
![Page 23: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/23.jpg)
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
![Page 24: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/24.jpg)
proximidade?mesmo espaço antes e depois dos títulos, frases, subtitulos, etc.
![Page 25: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/25.jpg)
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
![Page 26: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/26.jpg)
outro exemplo
![Page 27: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/27.jpg)
versão original
![Page 28: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/28.jpg)
aplicando proximidade
![Page 29: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/29.jpg)
aplicando alinhamento
![Page 30: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/30.jpg)
aplicando contraste
![Page 31: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/31.jpg)
aplicando repetição
![Page 32: Noções de planejamento visual](https://reader035.vdocuments.net/reader035/viewer/2022062704/55614c36d8b42a857d8b4b12/html5/thumbnails/32.jpg)
antes e depois