08 Cores - Interfaces Escuras (Dark UI)

MÓDULO 08
Elementos & Componentes
Cores
Interfaces Escuras
(Dark UI)
lucasassis.design CURSOS.LUCASASSIS.COM.BR
MÓDULO 08
Dark UI, Dark Theme
Dark Mode, etc.
A preferência dos usuários por UIs escuras tem

aumentado muito nos últimos anos. Elas são
elegantes, dramáticas e modernas. No entanto,
definir se sua interface vai ser clara ou escura
vai muito além de uma escolha estética.
MÓDULO 08
Importante
Você precisa
Antes de iniciar um projeto, é bom pensar
sobre por que, como e quando você precisa
usar um tema escuro.
criar uma UI Você deve levar em consideração:
•
Leiturabilidade
escura?
•
Contraste
•
Ambiente que produto será usado
•
Qual dispositivo será utilizado
• Aspecto emocional
MÓDULO 08
Quando usar
um tema escuro
MÓDULO 08
MOTIVO 01
Quando há pouco
conteúdo de texto
Fundo branco e texto preto ainda é a melhor configuração
para projetos com muitos textos. Sua interface deve ser
minimalista, com pouca informação (ícones, dados, tabelas,
campos, pequenas imagens, etc).
Quando não usar?

Quando a UI possuir muito conteúdo escrito e outros elementos.
Páginas densas pareceram confusas, desorganizadas e pouco by Tidal
profissionais em fundos escuros.
MÓDULO 08
MOTIVO 02
Se quiser destacar
informações
O conteúdo visual se destaca facilmente contra 
o fundo preto, fazendo com que o produto ganhe 
uma forte hierarquia visual. Imagens grandes e de alto
contraste se tornam super chamativas e vibrantes.
Interfaces escuras precisam de mais espaço

negativo para evitar parecer confuso.
by Spotify
MÓDULO 08
MOTIVO 03
Se o uso do produto
for noturno
Aplicativos projetados para uso noturno utilizam UIs
escuras para evitar forçar os olhos do usuário.  
A tendência é especialmente perceptível em aplicativos
de entretenimento como Netflix, Prime Video, etc.
Quando não usar?

Se o produto será usado principalmente durante o dia.
by Netflix
MÓDULO 08
MOTIVO 04
Se a temática for
Gamer
UIs relacionadas a entretenimento (Smart TVs, jogos 
e aplicativos de TV e filmes) tendem a ter interfaces
com tema escuro. Isso acontece porque a maioria das
atividades relacionadas ao entretenimento ocorrem 
à noite em ambientes mal iluminados.
Claro, isso não é uma regra absoluta.
MÓDULO 08
MOTIVO 05
Quando o uso do
produto for intenso
Se forem usar seu produto por muito tempo, 
utilizar interface escura é uma opção interessante,
pois reduz o cansaço visual do usuário. Isso explica
o porquê dos usuários utilizarem Dark Mode em
redes sociais.
Quando não usar?

Quando o design exige uma ampla gama de cores.
MÓDULO 08
MOTIVO 06
Se quiser projetar
algumas sensações
Pode ser uma excelente ideia utilizar interfaces
escuras quando você quiser projetar uma sensação
de elegância, luxo e prestígio ou mistério em seus
projetos.
MÓDULO 08
MOTIVO 07
Ajuda na economia
de bateria
Dispositivos com telas OLED desligam
fisicamente os pixels pretos a qualquer hora
do dia, ajudando a economizar de 45 à 60%
de bateria.
by Robinhood
MÓDULO 08
Diretrizes 
de Aplicação
MÓDULO 08
Texto 
DICA 01 de exemplo.
Você deve escurecer

#000000
com cinza #121212
Use cinza escuro, em vez de preto, como a cor

primária da superfície dos componentes.
Cinza escuro expressam uma gama mais ampla

de cores, elevação e profundidade, porque é #3F3F3F
mais fácil ver sombras em cinza.
Material Design do Google usa o cinza escuro by Rizki Mulyawan

#121212 como base. HIG da Apple usa #000000.
MÓDULO 08
DICA 02
Não precisa ser tudo

preto e cinza
Os temas escuros não precisam ser apenas preto
e cinza, você pode adicionar a cor da marca para
dar mais vida ao layout.
16%
by Rizki Mulyawan
MÓDULO 08
DICA 03 Branco
Como criar
Transparência 5%
profundidade
9%
As sobreposições adicionam contraste entre as

superfícies, tornando as bordas de cada superfície
mais aparentes, maximizando a legibilidade e
entendimento do conteúdo.
Regra simples: Quanto mais alto for o nível de elevação,

mais claro deve ser a superfície ou componente. by Rizki Mulyawan
MÓDULO 08
Branco
Branco
Branco
Branco
DICA 03 00dp 01dp 02dp 03dp
Como criar Transparência 

0%
Transparência 
5%
Transparência 
7%
Transparência 
8%
profundidade Branco
Branco
Branco
Branco
04dp 06dp 08dp 12dp
Transparência  Transparência  Transparência  Transparência 

9% 11% 12% 14%
Branco
Branco
16dp 24dp
Regra simples: Quanto mais alto for o nível de elevação, Transparência  Transparência 
mais claro deve ser a superfície ou componente. 15% 16%
MÓDULO 08
DICA 04
Cor de destaque
(acentuação)
Grandes superfícies usam cores escuras, portanto, 
você deve usar uma cor dessaturada como cor de
destaque em elementos como títulos, botões, CTAs
para uma alternativa mais legível desses elementos.
Evite o uso de cores saturadas em UIs escuras, elas não

passam no padrão de acessibilidade das WCAG e produzem
altas vibrações óticas, o que pode causar fadiga ocular.
MÓDULO 08
DICA 05
Cores dos textos

em UI escuras
Como já vimos anteriormente, o Material Design
aplica 3 ênfases principais às cores do texto:
Cuidado com o contraste

Essa regra funciona muito bem em superfícies
escuras, mas o mesmo não ocorre em componentes
coloridos e dessaturados.
Texto Branco
Texto Branco
Dá ruim. Tudo certo.

MÓDULO 08
DICA 06
Evite grandes
áreas coloridas
Não é um boa ideia aplicar cores não
escuras em áreas muito grandes,
principalmente em projetos de aplicativos.
A mudança brusca de brilho pode causar
desconforto e cansaço visual.
by Rizki Mulyawan
MÓDULO 08
DICA 07
Permita a alternância
de temas
É fundamental que um tema escuro pode

ser ativado ou desativado usando algum tipo
de controle ou configuração.
MÓDULO 08
DICA 08
Conecte a vida real 

à vida digital
UIs de tema escuro podem ter uma
capacidade subconsciente de conectar um
usuário de sua vida real à vida digital.
Por exemplo, aplicativos que possuem

um modo diurno e noturno.
MÓDULO 08
SUA MISSÃO
Fazer os exercícios
práticos da próxima
aula.
OBRIGADO
Até a próxima aula.

08 Cores - Interfaces Escuras (Dark UI)

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

08 Cores - Interfaces Escuras (Dark UI)

Enviado por

Direitos autorais:

Formatos disponíveis

MÓDULO 08

Elementos & Componentes

Dark UI, Dark Theme

Dark Mode, etc.

A preferência dos usuários por UIs escuras tem

criar uma UI Você deve levar em consideração:

Quando não usar?

Interfaces escuras precisam de mais espaço

Quando não usar?

Claro, isso não é uma regra absoluta.

Quando não usar?

Você deve escurecer

com cinza #121212

Use cinza escuro, em vez de preto, como a cor

Cinza escuro expressam uma gama mais ampla

Material Design do Google usa o cinza escuro by Rizki Mulyawan

Não precisa ser tudo

As sobreposições adicionam contraste entre as

Regra simples: Quanto mais alto for o nível de elevação,

DICA 03 00dp 01dp 02dp 03dp

Como criar Transparência

04dp 06dp 08dp 12dp

Transparência Transparência Transparência Transparência

Evite o uso de cores saturadas em UIs escuras, elas não

Cores dos textos

Cuidado com o contraste

Dá ruim. Tudo certo.

É fundamental que um tema escuro pode

Conecte a vida real

Por exemplo, aplicativos que possuem

Até a próxima aula.

Você também pode gostar

Como criar Transparência 

Transparência  Transparência  Transparência  Transparência 

Conecte a vida real 