AULA 02

Design de UI

Quais são os Prof. Me. Márlio Kleber

pilares de UI?
IFTO - PALMAS
Os 3 pilares do
Design de Interface
Os pilares do design de interface
compreendem toda a parte “invisível” que
torna a UI mais agradável, bonita e de fácil
utilização. Sendo eles:

▪ Princípios;
▪ Criatividade; e
▪ Prática constante.
 1º PILAR - CONTINUAÇÃO

Trataremos de 06 princípios do
Design de Interface

Design Visual Espaço Alinhamento Consistência Hierarquia Usabilidade

Design Visual
Cores e Tipografia
 DESIGN VISUAL

Cores e Tipografia

AaBbCcDd
Cores Tipografia
Hum... Então há
várias representações CORES
de cores?

Modelo HSB
Hue (Matiz)
Saturation (Saturação)
Brightness (Brilho)
 CORES

VARIAÇÕES ESCURAS

▪ Diminuir o brilho;
▪ Aumentar a Saturação.
 CORES

VARIAÇÕES CLARAS

▪ Aumentar o brilho;
▪ Diminuir a Saturação.
 CORES

TONS DE CINZA

▪ Usar um HUE (Matiz) Azul. (preferencialmente);

▪ Manter a Saturação;
▪ Alterar apenas o Brilho.

Pode-se trabalhar com HUE em vermelho ou marrom.

 TIPOGRAFIA

Trabalhando suas fontes

AaBbCc
Boas fontes
a
Escalas
b cd Legibilidade
Um texto
legível depende
de alguns
fatores

▪ Usar boas fontes;

▪ Utilize e padronize escalas;
▪ Garanta a Legibilidade do texto.

Comece utilizando uma única fonte nos primeiros projetos.

 TIPOGRAFIA

As melhores fontes Qual fonte deverei

escolher para meu
projeto?
Google Fonts; Typewolf e Adobe Fonts.

▪ Títulos e Subtítulos: Inter, Montserrat, Roboto;

▪ Corpo do Texto: Roboto, Open Sans, Source Serif Pro;
▪ Dashboards: Lato, Source Snas, Roboto.

O Figma dá acesso as fontes Google.

O que há de novo
em tecnologia de TIPOGRAFIA
fontes para Web?

Spectral
Fonte responsiva

Spectral é a primeira fonte do Google tornada

paramétrica. Abrindo-se para uma nova era de design
de fontes, a tecnologia de fontes paramétricas permite
trabalhar com personagens responsivos, melhorando a
criatividade e explorando novas formas.

Acesse: https://spectral.prototypo.io
TIPOGRAFIA

Escalas de Fontes
Embora haja uma séria de formas de
se estabelecer escalas de fontes,
inclusive os chamados cálculos de
proporções áureas, procure
simplificar.

O Google Material Design apresenta escalas eficientes já definidas.

TIPOGRAFIA
É simples assim..

Legibilidade
É preciso observar dois aspectos para se
garantir a legibilidade do seu texto em UI:

▪ Largura do parágrafo;
▪ Altura da linha.
TIPOGRAFIA

Legibilidade
“ A linha de 66 caracteres é considerada ideal ”
Robert Bringhurst

De qualquer forma, devemos manter uma

médias de 45 a 75, incluindo espaços em
branco e pontuação.
Não há erro! TIPOGRAFIA

Legibilidade
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
✘ enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
Muito larga - acima de 100 caracteres

Muito Curta – abaixo de 40 acarcteres

Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit
sed do eiusmod tempor incididunt ut labore et dolore amet, consectetur
✓ magna aliqua. Ut enim ad minim veniam, quis nostrud
✘
adipiscing elit, sed do
exercitation ullamco laboris nisi eiusmod tempor
Ideal – entre 45 e 75 caracteres incididunt ut labore
 TIPOGRAFIA

Alinhamento do texto
Centralizado
À esquerda À Direita

Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor adipiscing elit, sed do eiusmod tempor adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna incididunt ut labore et dolore magna incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam. aliqua. Ut enim ad minim veniam. aliqua. Ut enim ad minim veniam.
 TIPOGRAFIA
Alinhamento do texto
Justificado ou Justificado total.
"Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
JUSTIFICADO
JUSTIFICADO
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut T O TA L
aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
Jamais, jamais
utilize.
"Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
 TIPOGRAFIA

Alinhamento
Um texto composto por entrelinha muito
apertada estimula o movimento vertical
dos olhos, o usuário pode facilmente se
perder - esse estilo pode ser usado para
passar uma ideia de urgência ou exagero.
 Espaço
Espaço negativo, espaço em
branco ou áreas de respiro.
 Aproveite bem os
espaços em branco,
OK?

E S PA Ç A M E N T O Aproveitando os espaços em branco,

você consegue garantir mais

Espaço legibilidade e organização dos

elementos na sua UI. Principalmente
Áreas de respiro quando dispomos de muitas
informações.
 ?
Acha que espaço é
sinônimo de desperdício
Acesse: https://themeforest.net/item/ahlan-portfolio-psd-template/21974974?s_rank=4&ref=skdas
 Em caso de dúvidas,
use muito espaço em
branco

É muito mais fácil diminuir as áreas de respiro que aumentar os

espaços em branco em projeto já consolidado.
 Aprenda a aplicar
essas regras e crie
interfaces incríveis.
E S PA Ç A M E N T O

Micro e Macro
Existem dois principais tipos de espaço:
1. Espaço micro
2. Espaço macro.
E S PA Ç A M E N T O

Espaço Micro
Espaço micro diz a respeito do
espaço interno dos elementos
de uma interface assim como
o formulário ao lado.
E S PA Ç A M E N T O
Espaço Macro
Já o espaço macro diz a respeito do espaço entre grupos de elementos conforme você pode
ver no exemplo abaixo.
E S PA Ç A M E N T O

Espaço
Macro
É por meio da manipulação
do espaço macro e micro
que é possível melhorar a
legibilidade e hierarquia de
uma interface.
Alinhamento do texto

Alinhamento
Como alinhar sua UI
forma ideal
 Qual fonte deverei
escolher para meu
projeto?
ALINHAMENTO

Esqueletos e grupos
▪ Você não deve sair alinhando os elementos
de forma aleatória.
▪ O ideal é você estabelecer o esqueleto
(estrutura) e utilizar as Grids.

Se informe se já existe algum grid que o time já utiliza.

 Qual fonte deverei
Logo escolher para meu
projeto?
ALINHAMENTO

Terminologia (Grids)
Antes de entrarmos nos tipos de Grids e como utilizá-
los em seus projetos de Design de Interface, é
importante primeiro entender os termos envolvidos
nesse conceito. Portanto, explicaremos brevemente a
seguinte nomenclatura:
▪ Colunas;

▪ Gutter;

▪ Breakpoints;

▪ Margem;

▪ Elementos de Campo.
 Qual fonte deverei
Logo escolher para meu
projeto?
ALINHAMENTO

Colunas
Colunas são os blocos verticais
dentro do layout do Grid. São elas
que determinam a área onde será
posicionado o conteúdo.

os layouts mais comuns são os de 4,8 e 12 colunas.

 Qual fonte deverei
Logo escolher para meu
projeto?
ALINHAMENTO

Gutters
Os Gutters não são nada além
das lacunas entre as colunas em
um layout de Grids. A função
deles, basicamente, é ajudar a
separar e limitar o conteúdo
alocado na página.
 Qual fonte deverei
Logo escolher para meu
projeto?
ALINHAMENTO

Breakpoints
Breakpoints são os intervalos de
layouts predeterminados para
diferentes tipos de tamanho de
telas.

intervalos de Breakpoints para cada dispositivo neste link do Material Design:

https://material.io/design/layout/responsive-layout-grid.html#breakpoints
 Qual fonte deverei
Logo escolher para meu
projeto?
ALINHAMENTO

Magem
As margens são os espaços laterais
à esquerda e à direita do conteúdo
da página.
Assim como os Gutters, sua largura
é fixa, mas se adapta conforme os
diferentes breakpoints.
 Qual fonte deverei
Logo escolher para meu
projeto?
ALINHAMENTO

Elementos de
Campo
São blocos de design, sejam eles
contendo texto, imagem ou uma
mistura dos dois.
Os elementos de campo são
alocados dentro do grid de forma
a ficarem alinhados com as
colunas e Gutters.
Qual fonte deverei
escolher para meu
projeto?
Alinhamento do texto

Consistência
Equivale aos padrões
 Quer acertar?
Mantenha padrões e
consistência.
Alinhamento do texto

Hierarquia
Qual a importância da hierarquia
visual no projeto?
 A hierarquia
estabelece o que é
mais importante!

Precisa saber qual é o objetivo MACRO da interface que você

vai criar. É para vender algo? Fazer um agendamento? Etc.
 O mesmo layout com a
hierarquização e dos elementos
visuais.
 2º PILAR

Criatividade
 3º PILAR

Prática Constante