Aula Interativa 1

Fundamentos do Design

1
4

Prof. Dra. Shirlei Camargo

 4
2
Fonte
Ato de

Estudos
desenhar

sobre fonte
Tipografia

Anton_Ivanov/shutterstock

Everett Historical/shutterstock
 As letras estão em todo lugar e seu uso deve
ser bem planejado porque pode afetar o
resultado final de um material !

3
2021
4

Alexander Raths/shutterstock
 Estruturas de uma letra

4
4

Fonte: autora (2020)

 Variações de uma letra

Inclinações
Largura
Inclinações
Largura
Tonalidade Largura
Tonalidade
5
CAIXA ALTA
4
Tonalidade
Caixa baixa
Tonalidade
Tonalidade
VERSALETE
zlikovec/shutterstock
 Estilos de Fontes – Clássicos

Gótico
 Predominante no início da tipografia Old English
 Legibilidade contestada
 Atualmente em diplomas, logos (tradição)

Românico antigo
 Ruínas romana
Garamond
6
4
 Tem serifas arredondadas

Românico de Transição
 Entre haste e serifa há um angulo mais arredondado
Baskerville
 Diferença de espessura entre hastes é menos acentuada
 Egípcio
 Designers italianos a pedido dos ingleses
 Diferenciar produtos na revolução industrial
Clarendon
 Baseadas nas inscrições egípcias

Lapidário
 Simples e legível
 Inspirados na escrita fenícia (cuneiforme)
Fonte Calibri
7
4
 Apenas hastes, sem rebuscamento

Romântico
 Elementos decorativos e flores
 Focados na estética (pouca legibilidade)
 A nova tipografia

Os movimentos cubistas e
futuristas trouxeram uma
simplificação e geometrização
das formas, valorizando as
proporções e os espaços em
8
branco.
4

BAUHAUS illpaxphotomatic/shutterstock
 Ergonomia

Estudo da adaptação do trabalho ao ser humano no qual entende-se

por trabalho qualquer interação entre o homem e uma atividade
produtiva de bens ou serviços (IIDA, 2018).

Geralmente é associada ao mobiliário

9 e aos objetos chamados de
“ergonômicos” (ex.: mouses, cadeira)
4

ou doenças do trabalho como LER

(lesão por esforços repetitivos)
(ABRAHÃO et al., 2009).
Velimir Zeland/shutterstock
 Ergonomia

Estuda a anatomia Estuda processos Estuda estrutura

humana. Ex.: postura no mentais. Ex.: tomada organizacional. Ex.:
trabalho, materiais, de decisões, o estresse comunicação, a
movimentos repetitivos profissional, interação organização temporal,
10
4
humano-computador... trabalho em equipe...

Física Cognitiva Organizacional

Fonte: autora (2020)
 Cores
A cor tem poderes incríveis! Ela pode modificar, animar e transformar
totalmente um ambiente. Quando se usa a cor da maneira correta,
você consegue harmonia e equilíbrio em suas composições

11
4

Picsfive/shutterstock Photographee.eu/shutterstock
 Cores
Sistema aditivo: sistema que emite a luz (monitores) é chamado assim
porque se somarmos suas três cores primárias obteremos o branco.
Presente em monitores. São as cores primárias da luz:

• Vermelho (Red) Secundárias

• Verde (Green)
• Azul (Blue)
12

Primárias
4

petrroudny43/shutterstock
 Cores
Sistema subtrativo: é determinado pelos pigmentos/cores que existem
na natureza e absorvem a luz. É conhecido por este nome porque se
somarmos as suas três cores primárias obteremos o preto que é a
ausência de cor. Cores primárias de pigmentos:
Secundárias
• Ciano (Cyan)
• Magenta (Magenta)
13
4
• Amarelo (Yellow)
• Preto (BlacK) Primárias

petrroudny43/shutterstock
O preto foi adicionado pois era muito caro atingi-lo
(proporções perfeitas e pigmentos de qualidade)
tendo uma versão “industrial”, mais barata para
gráficas e impressoras
 Círculo Cromático

14
4

Primárias Secundárias Complementares

 Usabilidade

Originada na ergonomia cognitiva, (sistemas informatizados e

automatizados) surgiu a usabilidade (friendly - amigável)

Atualmente é muito vinculada à questões do mundo virtual. Sob esta

ótica, as competências do usuário são utilizadas para analisar sua
interação com a interface.
15
4

Nielsen criou as 10 heurísticas (simplificações) que abordam os

principais problemas de usabilidade de uma interface:
 Usabilidade
 Visibilidade do status do sistema: informar o que está acontecendo
em real time (Ex.: Youtube)

 Correspondência entre o sistema e o mundo real – usar linguagem

familiar aos usuários (Ex.: símbolo de som)

 Controle do usuário e liberdade - “saída de emergência” claramente

16
4 marcada (editar, desfazer) para quando o usuário “erra”

 Consistência e padrões visual - texto, cor, desenho do elemento, som

e etc

 Prevenções de erros (Ex.: Google que corrige os erros de digitação)

  Flexibilidade e eficiência de uso - ágil para usuários avançados
(atalhos de teclados, preenchimento automático) e fácil para leigos

 Estética e design minimalista – excesso de informação (cores e

elementos visuais) pode confundir.

 Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-

se de erros - mensagens claras e próximas do conteúdo ou ação que
causou o erro (formulários)
17
4

 Ajuda e documentação - itens de auxílio para determinadas ações

(FAQs, uma imagem mostrando onde fica o código de segurança do
cartão)
 Reconhecimento em vez de memorização

O usuário não tem obrigação de decorar qual foi o caminho que ele fez pra
chegar até a página.

Disponibilize o caminho que o usuário

fez pra chegar até onde está. Nós
chamamos isso de breadcrumb (migalha
18
4

de pão).

Teguh Mujiono/shutterstock
 Acessibilidade
Na década de 70, surgiu o conceito de Design Universal criado por
Ronald Mace (designer, arquiteto e professor) que trazia como ideal que
todos deveriam usufruir dos mesmos produtos. Segundo ele, para um
projeto ser acessível, ele deve seguir os 7 Princípios do Design Universal.

19
4

happycreator/shutterstock nupook538/shtterstock
 1. Uso Equitativo (útil e vendável a pessoas com diversas capacidades)

2. Flexibilidade no Uso (acomoda várias preferências e capacidades)

3. Uso Simples e Intuitivo

4. Informação Perceptível (comunica eficaz, independentemente das

capacidades sensoriais ou condições ambientais)

20
4 5. Tolerância ao Erro (minimiza riscos e consequências)

6. Baixo Esforço Físico (mínimo de fadiga)

7. Tamanho e espaço para aproximação e uso (vários tipos de corpos,

postura ou mobilidade )
 “O profissional da área de Design deve ter como
princípio base, a solução de problemas e a satisfação
das necessidades dos usuários, considerando que a
adaptação deve ser do objeto ao homem, e não o
contrário”.
21
4

Cristian (2013)
22
4