Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)

Aula 3:
PhotoShop (part. 1)
prof. Gustavo Zimmermann
Curso: Introdução ao Web Design E-mail: contato@gust4vo.com

Vetor vs. Bitmap
tipos de imagens

Introdução a Web Design – Aula 3: PhotoShop (part. 1)
Vetor vs. Bitmap

The Bézier Game: http://bezier.method.ac

Modos de Cor
web ou impressão?

RGB: luz
Modos de Cor

CMYK: tinta
Modos de Cor

5 PRINCÍPIOS
salvando o design

Salve o Design
5 Princípios
1. Contraste
2. Tipografia
3. Paleta de Cores
4. Imagens
5. Alinhamento e Espaçamento

5 Princípios
[1/5]: Contraste
Você já notou como em um jogo de basquete
profissional, todos os jogadores parecem iguais uns aos
outros? Mas se você colocar um deles ao lado de uma
pessoa comum, vai notar que ele é muito mais alto. Isto é
contraste. No design, elementos grandes e pequenos,
texto preto e branco, quadrados e círculos podem criar
contraste no design.

5 Princípios
[1/5]: Contraste
O contraste ocorre quando dois elementos são
diferentes, e quanto maior a diferença maior o contraste.
A dica mais importante é fazer com que a diferença seja
óbvia - pouca diferença pode dar a aparência de ser um
erro por parte do designer. Os métodos mais comuns de
contraste são criar diferenças em tamanho, valor, cor e
tipo.

5 Princípios
[1/5]: Contraste
Utilizamos o contraste no design para dar ênfase ao que é
mais importante ou para direcionar o olhar do observador. Em
uma página sem contraste ou pouco contraste, o leitor não
sabe por onde começar. Mas cuidado: é possível exagerar no
contraste, então você deve usá-lo com cuidado. Se todos os
elementos gerarem contraste, o observador não vai saber por
onde começar.

5 Princípios
[1/5]: Contraste

5 Princípios
[2/5]: Alinhamento
1. Alinhamento
2. Proximidade
3. Repetição
4. Balanço

5 Princípios
[2/5]: Alinhamento: Alinhamento
O alinhamento traz ordem ao caos, ajuda a organizar itens similares,
cria grupos e conexões visuais. Bom alinhamento deve passar
despercebido pelo observador, já um mal alinhamento faz o erro
(intencional ou não) muito visível.
A falta de alinhamento cria um visual desleixado e desorganizado,
assim como misturar vários alinhamentos diferentes. No entanto, não é
errado quebrar o alinhamento de propósito afim de criar tensão ou
chamar a atenção para algum elemento específico na página.

5 Princípios
[2/5]: Alinhamento: Alinhamento

5 Princípios
[2/5]: Alinhamento: Proximidade
Quando um observador encontra vários elementos em uma
página, o cérebro dele automaticamente vai tentar associar
conexões a eles. O designer pode utilizar isto a seu favor,
arranjando objetos (textos e/ou imagens) em grupos para
ajudar a criar um significado e melhor disseminar a
mensagem. Isto chama-se proximidade.

5 Princípios
A proximidade cria um vínculo entre os elementos de uma
página. Objetos próximos uns dos outros sugerem algum tipo
de relacionamento, já se estiverem mais longe um dos outros
pode sugerir diferença. Um exemplo disto seriam parágrafos
de um texto: frases em um mesmo parágrafo simbolizam que
fazem parte da mesma linha de pensamento, e em outro
parágrafo sugere uma mudança desta linha.

5 Princípios
A proximidade, como já diz o nome, é manter elementos
próximos um do outro. Mas quando um objeto está distante
de outro, é possível fazer uma vinculação através de um
terceiro. Por exemplo: uma flecha que conecta um texto com
um objeto no meio de um mapa - embora o texto e o meio
do mapa estejam distantes, a flecha aproxima os dois
similares.

5 Princípios

5 Princípios
[2/5]: Alinhamento: Repetição
Imagine se a Coca-Cola tivesse uma diferente
identidade visual em cada país? Imagine se o "M"
dourado da McDonalds fosse mais reto em
alguns dos restaurantes, ou se fosse trocado por
um "D" em outras? Repetição e consistência é
tudo no design.

5 Princípios
Pegue qualquer revista. Você vai ver como o layout se repete muitas vezes,
seguindo um certo padrão. Algumas páginas tem o mesmo número de
colunas, as fotos ficam na mesma posição ou diferem um pouco,
elementos visuais (como o número das páginas ou o assunto daquela
coluna) se repetem em todas as páginas. Manter uma consistência visual
quando um texto se expande por várias páginas ajuda a aumentar a
legibilidade.
Repetir elementos gráficos ou até mesmo um layout inteiro ajuda a manter
uma experiência consistente em todos os seus trabalhos.

5 Princípios

5 Princípios
[2/5]: Alinhamento: Balanço
No geral, nossos olhos ficam mais confortáveis
com layouts balanceados onde os gráficos
não subjugam o texto e a página não tende a
parecer desequilibrada.

5 Princípios
De início, existem três tipos de balanço no design:
• Simétrico
• Assimétrico
• Radial
Basta dizer que todo elemento gráfico tem um peso e cabe
ao designer saber balancear ele.

5 Princípios

5 Princípios
[3/5]: Tipografia
NÃO USE MAIS
DE 3 FONTES!
Cabo!

5 Princípios
[3/5]: Tipografia

5 Princípios
[4/5]: Paleta de Cores
NÃO USE MAIS DE 3 CORES!
Reutilize as cores da imagem!
Cabo!

5 Princípios
[4/5]: Paleta de Cores

5 Princípios
[5/5]: Paleta de Cores: Circulo Cromático

Adobe Color CC: https://color.adobe.com

5 Princípios
[5/5]: Imagens
NÃO
DISTORÇA!

5 Princípios
[5/5]: Imagens

<fim />
Gustavo Zimmermann
e-mail: contato@gust4vo.com

Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de Gustavo Zimmermann

Mais de Gustavo Zimmermann (20)

Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)