Multimédia
Carlos Cabral
[Link]
Princípios
de Design
[Link]
3
TIPOGRAFIA
[Link]
4
PROPÓSITO DE UMA FONT
Font = Tipo de Letra
1. Tem que ser legível.
2. Ajuda a transmitir uma mensagem.
[Link]
5
TIPOS DE FONT
Sans Serif Serif
Serif
Moderno, Limpo, Claro. Estabelecido, Clássico, Tradicional.
Script / Handwritten Slab Serif
[Link]
Propriedades das fonts
Width
Light, Regular, Bold, etc..
Ao aumentar a width de uma font, esta ganha mais destaque e chama
mais a atenção.
Tamanho
Dimensão dos caracteres, normalmente em pts.
Tracking
Quantidade de espaço entre caracteres.
Kerning
Espaço entre 2 letras.
Leading (line spacing)
Distância entre linhas de texto.
[Link]
7
IMAGENS
[Link]
Como escolher as imagens
8
certas?
• Estilo / Género = Fotografia ou Ilustração
• Escolher uma imagem apropriada à mensagem que
se quer transmitir.
[Link]
9
FOTO ILUSTRAÇÃO
Realista. Ideal para mostrar pessoas, Amplo, Abstracto, Metáfora. Ideal para
produtos, conceitos bem definidos. contar uma história mais complexa, com
um conceito mais difícil de definir.
Unsplash, Pexels, Freepik, etc… Undraw, IRA Design, Drawkit, Freepik, etc…
[Link]
10
BOM MAU
[Link]
11
BOM MAU
[Link]
12
CORES
[Link]
13
[Link]
Como criar combinações
14
de cores? (para iniciantes)
• Usar uma ferramenta
([Link]; adobe color; etc..);
• Usar referências;
• Regra 60-30-10;
• Criar contraste;
[Link]
15
LAYOUTS
[Link]
Para que servem?
• Organizar a informação de forma a contar uma
história, a transmitir uma mensagem.
• Deve ser bonito, fácil de consumir.
O que torna um layout bom?
• Tem de ser claro, não pode ser confuso.
• Interessante, não enfadonho.
• Ajuda o utilizador a consumir o conteúdo.
[Link]
Dica
17
grande
médio
pequeno
[Link]
18
Grid
Grelha invisível que nos
permite organizar o nosso
layout.
gutter = Espaço entre colunas
dica: Ter em atenção que hoje em dia os ecrãs são bastante largos, e não queremos que o layout
use a largura total do ecrã. Para evitar esta situação devemos usar um container.
[Link]
19
LAYOUTS
6 boas práticas
[Link]
20
Espaço
Negativo
Áreas do design que não estão
ocupados por gráficos, fotos, texto,
etc…
Vai permitir separar secções,
definir áreas, e dar espaço ao layout
para “respirar”.
[Link]
21
Proximidade
Sugere a ligação entre elementos gráficos,
indicando uma relação.
Quando feita corretamente, a proximidade,
vai permitir estruturar o design bem como
fornecer ao utilizador organização e informação.
[Link]
22
Repetição
Ajuda o layout a manter consistência visual.
A repetição pode ser vista nas cores, tipo de letra,
na utilização do mesmo tipo de formas e estilos.
[Link]
23
Contraste
Utiliza a cor, tipo de letra, forma e tamanho
para criar uma diferenciação entre elementos
gráficos.
O contraste é muito útil para criar pontos de
foque e criar equilíbrio entre elementos.
[Link]
24
Alinhamento
Organização dos elementos de forma a passar
uma sensação de simetria, de organização.
Por vezes não é errado quebrar com o
alinhamento, desde que a maioria dos elementos
estejam alinhados.
[Link]
25
Pontos de
foque
Ponto principal do design que capta logo a atenção
do utilizador. É uma espécie de isco.
Pode ser uma imagem, uma forma, um texto, etc…
Exemplo: Na imagem a asa (focal point) aponta para
o texto. Um focal point não precisa de ser o elemento
mais importante.
[Link]
26
Hierarquia
[Link]
Hierarquia
• Priorizar o que é mais importante;
• O que devemos olhar ou lidar primeiro;
• Evitar confusão;
Como designers devemos guiar o olhar e
a atenção do utilizador.
[Link]
MAU
28
[Link]
MUITO MAU
29
[Link]
MAU
30
[Link]
Hierarquia
3 formas
[Link]
Tamanho
32
[Link]
Cor
33
[Link]
Posição
34
[Link]
FERRAMENTAS & INSPIRAÇÃO
35
Dribbble Behance
Google Font Coolors Color Hunt
Fonts Squirrel [Link]
36
OBRIGADO.
[Link]