Introdução ao UX para

Mobile
Fundamentos
Sumário
● Paleta de cores
● Princípios
● Mockups
As cores na experiência do usuário
● Cores dão identidade, expressividade e personalidade a tudo.
● Elas são importantes em todos os aspectos da nossa vida — e por que não no âmbito
digital?
As cores na experiência do usuário
● Vamos ver as cores e o comportamento humano em relação a elas em nível psicológico,
físico e emocional. E como essa influência está diretamente ligada à experiência de
navegação.

● Essa cor é a cor do ano de 2013 da Pantone — Emerald

● Segundo eles, Emerald é viva, radiante luxuosa. A cor da elegância e beleza que
aumenta a nossa sensação de bem-estar, equilíbrio e harmonia. Por que?
Efeitos Psicológicos da Cor
● A cor pode aumentar a memorização, recordação e reconhecimento.
● Em projetos interativos, a cor pode sugerir categorias e dão identidade aos pedaços de
informação.
● Isso pode criar um design que é mais eficiente, mais claro e fácil de entender, logo a
navegação será mais positiva e a experiência também.
● A Globo.com, por exemplo, usa essa separação de categoria por cores há vários anos.
Efeitos Psicológicos da Cor
● A Globo.com, por exemplo, usa essa separação de categoria por cores há vários anos.
Efeitos Fisiológicos da Cor
● As cores afetam nosso sistema nervoso.
● Os estudos mostram que vermelhos brilhantes estimulam o sistema nervoso
simpático, o que resulta em alterações fisiológicas tais como um aumento do ritmo
cardíaco.
Efeitos Fisiológicos da Cor
● Em contraste, tons suaves de azuis e verdes criam o efeito fisiológico oposto e nos
ajudar a relaxar.
Efeitos Emocionais da Cor
● As cores e os significados que atribuímos a quando já passaram pelo psicológico e pelo
fisiológico, afetam nossas emoções e o nosso humor.
● Por exemplo, a maioria das pessoas associa a cor amarela com felicidade e energia.
● Em termos individuais, uma pessoa poderia associar a cor amarela com a cor de sua
casa durante a infância, que invoca lembranças e sentimentos agradáveis.
Contexto Cultural da Cor
● Lembre-se que o significado é culturalmente construído.
● Sensibilidade ao contexto cultural da cor dentro do seu grupo de usuários é importante.
● Por exemplo: em muitas culturas ocidentais, o preto representa a morte.
● Em algumas culturas orientais, o branco representa a morte.
Contexto Cultural da Cor
● E mesmo dentro do nosso país, por exemplo: não vá para o Rio Grande do Sul desenhar
um site azul para torcedores do Internacional pois o azul remete automaticamente a
seu time rival, o Grêmio.
A cor como aliada na hora de desenhar UX
● Vermelho
● Aumenta as taxas de pressão arterial, coração e respiração;
● Estimula as glândulas supra-renais e pituitária, o que pode aumentar temporariamente
a força e resistência;
● Representa vitalidade, ambição e paixão;
● Pode afastar os pensamentos negativos;
● Associada com a raiva, perigo, endividamento e irritabilidade.
A cor como aliada na hora de desenhar UX
● Vermelho

● – Uma cor estimulante mental, pode aumentar pressão sanguínea e o ritmo respiratório.

● – Está ligada a paixão, entusiasmo, impacto, agressividade, força, energia, erotismo, amor e liderança.

● – Uma cor quente, que cansa rapidamente.

● – Cor oposta: Verde

A cor como aliada na hora de desenhar UX
● Rosa
● Induz sensações de relaxamento, tranquilidade, carinho e proteção;
● Reduz os sentimentos de agressividade e irritação;
● Associado com carinho, altruísta, generosa amor;
● Rosa claro é associado com a feminilidade, enquanto tons mais ousados e mais quente
sugerir energia jovem e divertida.
A cor como aliada na hora de desenhar UX
● Amarelo
● Estimula o cérebro, criando agilidade e energia;
● Ativa o sistema linfático;
● Feliz, otimista, confiante e edificante;
● Associada com o intelecto, organização, discernimento, memória, clareza, tomada de
decisão e bom senso
A cor como aliada na hora de desenhar UX
● Amarelo

● – Indicada para situações de calma, reflexão e decisão, pode ter efeito calmante.

● – Utilizada para estimular o conhecimento e prender a atenção, gera otimismo, alegria, felicidade, idealismo e

arrogância.

● – Aumenta um pouco a pressão sanguínea e favorece indigestões e gastrites.

● – Cor oposta: Roxo

A cor como aliada na hora de desenhar UX
● Laranja
● Estimula o sistema digestivo e imunológico;
● Associado com a energia e vitalidade;
● Audiências mais jovens respondem com laranjas fortes, enquanto o público mais velho
e de alto nível responder positivamente aos tons mais suaves;
● Afeta positivamente e o humor e consideram a cor antidepressiva;
A cor como aliada na hora de desenhar UX
● Laranja

● – Cor que aumenta a emotividade, promove sensação de bem estar e alegria.

● – Cor quente, ligada a vitalidade, energia, criatividade, equilíbrio, entusiasmo e diversão.

● – Acelera a produção de suco gástrico dando fome, é anti-séptico.

● – Cor oposta: Azul

A cor como aliada na hora de desenhar UX
● Verde
● Traz equilíbrio e relaxamento, sentimentos de conforto;
● Nos ajuda a respirar mais profundo e mais lento;
● Sugere natureza, paz, bem-estar;
● Tons profundos sugerem riqueza;
● Representa a proteção em ambientes;
● Tonalidades particulares de verde, como o verde-oliva, pode representar doença e
náuseas.
A cor como aliada na hora de desenhar UX
● Verde

● – Bem-estar, tranqüilidade, descanso, serenidade, ciúme, inteligência.

● – Tonifica o sistema nervoso, é tranqüilizante.

● – Cor das pessoas confiáveis, melancólicas e introvertidas.

● – Cor oposta: Vermelho

A cor como aliada na hora de desenhar UX
● Azul
● Reduz a pressão arterial, tem um efeito refrescante e calmante;
● Azul profundo estimula a glândula pituitária, que regula os padrões de sono, e está
associado com calma;
● Inspira controle mental, clareza e criatividade;
● Um excesso de azul escuro pode ser deprimente;
A cor como aliada na hora de desenhar UX
● Azul

● – Representa calma, tranquilidade, clareza, credibilidade, confiança e harmonia.

● – Cor utilizada para gerar reflexão e contemplação.

● – É sedativo e curativo, diminui a pressão arterial.

● – Cor oposta: Laranja

A cor como aliada na hora de desenhar UX
● Roxo
● Violeta sugere purificação, limpeza, paz e equilíbrio;
● Choque de Combate e medo;
● Todos os tons de ajudar com transtornos mentais e nervosos;
● Estimula a compaixão, intuição e imaginação;
● Associado com o lado direito do cérebro;
● Refere-se a sensibilidade, beleza e idealismo;
● Associada com a realeza e nobreza;
A cor como aliada na hora de desenhar UX
● Roxo

● – Muito ligada a espiritualidade, realeza, otimismo e sabedoria.

● – Cor que produz efeito calmante e dá um ar de mistério.

● – Cor das pessoas altamente criativas e inovadoras é a cor da arte e da cultura.

● – Cor oposta: Amarelo

A cor como aliada na hora de desenhar UX
● Marron
● Sugere terra, casa e lar, estabilidade e segurança;
● Também pode sugerir sujeira ou retiro e isolamento do mundo.
A cor como aliada na hora de desenhar UX
● Marrom

● – Cor neutra que representa a justiça.

● – Ligada à segurança, solidez, estabilidade, conservadorismo e calma.

A cor como aliada na hora de desenhar UX
● Preto
● Reconfortante e protetora;
● Misterioso, sugere o silêncio e a morte;
● Também pode ser considerado elegante e sofisticado.
A cor como aliada na hora de desenhar UX
● Preto

● – Uma cor deprimente quando usada só.

● – Ligada à luto, sofisticação, formalidade, medo, raiva e poder.

● – Tem boa utilização como contraste, para outras cores.

● – Cor Oposta: Branco

A cor como aliada na hora de desenhar UX
● Branco
● Pureza, clareza, paz e conforto;
● Sugere liberdade, embora muito pode ser considerado fria e solitária.
A cor como aliada na hora de desenhar UX
● Branco

● – Ligado diretamente à pureza e a paz.

● – Ligado também a ausência de cor.

● – Cor oposta: Preto

A cor como aliada na hora de desenhar UX
● Cinza
● Sugere independência e autossuficiência;
● Pode ser uma cor negativa, sugerindo a evasão, inconsequência, separação, falta de
envolvimento e solidão;
A cor como aliada na hora de desenhar UX
A cor como aliada na hora de desenhar UX
A cor como aliada na hora de desenhar UX
As 7 características aparentes das cores
1. Dimensão: dependendo da cor utilizada, você pode ter a sensação de um ambiente mais espaçoso ou um
ambiente menor.
2. Peso: as cores podem tornar, aparentemente, objetos mais pesados ou mais leves.
3. Iluminação: basicamente absorver uma parte da luz que recebe e acaba refletindo a outra
4. Temperatura: inconscientemente, podem imprimir a ideia de quente e frio
5. Simbolismo: representam um simbolismo totalmente subjetivo, para você pode representar uma coisa que
varia de acordo com suas vivências.
6. Emoção: as cores desempenham um papel direto no nosso psiquismo, visto que, a partir delas podemos ativar
sentimento e expressões.dia cinzento
7. Recordação: muito ligado à emoção, a cor pode te remeter a um experiência vivida ou a um momento
específico de sua vida.
As 7 características aparentes das cores
As cores são classificadas como quentes e frias, suaves e fortes, pesadas e leves, vamos entender agora o que cada uma delas gera em
nós e como isso nos afeta.
O Poder da Dupla: Marketing e Cor
● Com todas as caraterísticas descritas acima, fica claro, como a cor pode influenciar
diretamente o que você sente!
● Então, pensando em atrair sua atenção e conduzir as suas ações para o mais próximo
do desejável, as empresas se esforçam em produzir Logos, Layouts e divulgação de
Conteúdo, coloridos e que chamem a atenção.
● Segundo um estudo chamado O Impacto das Cores no Marketing, foi possível
descobrir que até 90% dos julgamentos feitos precipitadamente, ocorrem baseado
apenas na cor.
O Poder da Dupla: Marketing e Cor
● O blog Kissmetrics nos mostra que 93% dos consumidores prestam atenção
primeiramente na aparência visual de um produto, enquanto 6% na textura e por fim
1% no som e no cheiro.
● Mais da metade dos consumidores desistem de comprar um produto porque ele não
tem sua cor favorita.
O Poder da Dupla:
Marketing e Cor
O Poder da Dupla: Marketing e Cor
● Os anúncios em cores tem uma taxa de 62% a mais de visibilidade comparado com
os anúncios em preto e branco.
● As cores também possuem a habilidade de atrair o público para um determinado tipo
de local:
Combinações de Cores
● AZUL E PRETO

● Transmitem confiança, credibilidade e sensação de poder.

Combinações de Cores
● AZUL E BRANCO

● Conferem harmonia de espírito, confiança, idéia de doçura e generosidade.

Combinações de Cores
● VERMELHO E AZUL

● Causam a sensação de força espiritual, requinte e delicadeza,sendo muito empregadas no apelo de vendas.
Combinações de Cores
● VERMELHO E AMARELO

● Criam sensações de insatisfação, contraste acentuado de calor e impetuosidade.

Combinações de Cores
● AMARELO E VERDE

● Produz a sensação de eficácia.

● Visualmente, porém, não é uma combinação agradável,causando a impressão de que “algo está faltando”.
As representações das cores
● Agora que você entendeu melhor como as cores podem despertar sentimento e emoções
em nós, iremos entender como nós significamos as cores, ou seja, como damos
significados a ela.
● Existem três tipos de representações que as cores assumem: universal, coletiva e
pessoal.
● O caráter do simbolismo das cores vai além da universalidade e passa pelo
conhecimento cosmológico, psicológico e místico.
● Ou seja, as interpretações dadas as diferentes cores podem variar de pessoa a pessoa,
cultura a cultura.
● Mas como foi mencionado, podem variar, e é isso que a Representação Universal
mostra.
As representações
das cores
As representações das cores
As representações das cores
As representações das cores
As representações das cores
Mobile App Design: 14 esquemas de cores da
moda
● Hoje, o design de aplicativos para dispositivos móveis é vital para qualquer
empresa se ele visa proporcionar uma excelente experiência ao usuário.
● Segundo estudos, os usuários gastam 89% do tempo de mídia de smartphones em
aplicativos móveis.
● Isso é demais! Além disso, mais de 50% das pessoas acordam e começam a usar seus
telefones celulares imediatamente. Esse conhecimento aumenta drasticamente a
importância de um design de aplicativo móvel.
Mobile App Design: 14 esquemas de cores da
moda
● Uma parte essencial do design do aplicativo móvel é o esquema de cores.
● Não se pode subestimar o poder da cor nos aplicativos.
● O esquema de cores correto ajuda não apenas a definir o humor do seu aplicativo,
para que os usuários possam interpretá-lo da maneira que você deseja.
● Também ajuda os usuários a interagir com certos elementos e a entender ações
importantes dentro do aplicativo.
Mobile App Design: 14 esquemas de cores da
moda
● Ao tomar uma decisão sobre um esquema de cores e cores primárias, os designers de
aplicativos podem seguir duas maneiras:
○ paletas de cores tradicionais e personalizadas.
● Os esquemas de cores tradicionais incluem análogos, monocromáticos, tríades,
complementares e compostos.
Mobile App Design: 14 esquemas de cores da
moda
● Ao tomar uma decisão sobre um esquema de cores e cores primárias, os designers de
aplicativos podem seguir duas maneiras: paletas de cores tradicionais e personalizadas.
● Os esquemas de cores tradicionais incluem análogos, monocromáticos, tríades,
complementares e compostos.
● Porém, esquemas de cores personalizados são um campo em constante evolução para
experimentos.
● O principal desafio é selecionar o esquema de cores, que está na moda o suficiente e ao
mesmo tempo suporta efetivamente a usabilidade de aplicativos móveis.
Mobile App Design: 14 esquemas de cores da
moda
● O que é comum em todo esquema de cores é a roda de cores.
● Ao combinar as cores da roda de cores, os designers criam um esquema de cores
distinto e, assim, atingem um certo efeito.
● Vejamos 14 esquemas de cores da moda que os designers usam com sucesso:
Mobile App Design: 14 esquemas de cores da
moda
● Mobile App Design: Analogous Scheme
● O esquema de cores análogo é uma das paletas de cores tradicionais usadas pelos
designers.
● É uma combinação de cores relacionadas que estão localizadas próximas à roda de
cores.
● Geralmente uma cor é dominante, enquanto outra enriquece o esquema.
● No entanto, todas as cores no esquema análogo também podem ser usadas igualmente
em alguns modelos.
● Cores análogas são fáceis de encontrar na natureza.
● Eles são muito harmoniosos e é por isso que são tão agradáveis aos olhos no
design de aplicativos para dispositivos móveis.
Mobile App Design: 14 esquemas de cores da
moda
Mobile App Design: 14 esquemas de cores da
moda
Esquema

análogo

na roda de cores
Mobile App Design: 14 esquemas de cores da
moda
● Mobile App Design: Monochromatic Scheme
● Os esquemas de cores monocromáticos usam uma cor base, seus tons e tons como
uma paleta estendida.
● Tais esquemas criam um efeito reconfortante para os olhos, especialmente se forem
usados verdes ou azuis.
● Para obter uma tonalidade, os designers adicionam branco à cor base e, para a criação
de tons, é necessário adicionar preto ou cinza.
● Com um esquema monocromático, os designers conseguem obter uma aparência
simples, porém coesa e elegante do aplicativo móvel.
Mobile App Design: 14 esquemas de cores da
moda
Mobile App Design: 14 esquemas de cores da
moda
Esquema

monocromático na

roda de cores
Mobile App Design: 14 esquemas de cores da
moda
● Mobile App Design: Triadic Scheme
● O esquema de cores triádico é baseado na combinação de três cores, localizadas
uniformemente na roda de cores.
● O segredo do sucesso usando o esquema triádico é deixar uma cor ser dominante e usar
outras para dar ênfase.
● Assim, a harmonia no esquema de cores triádico alcançada pelo uso equilibrado de
todas as cores.
Mobile App Design: 14 esquemas de cores da
moda
Mobile App Design: 14 esquemas de cores da
moda
Esquema triádico

na roda de cores
Mobile App Design: 14 esquemas de cores da
moda
● Mobile App Design: Complementary Colors Scheme
● Cores complementares estão situadas nos lados opostos da roda de cores.
● Exemplos de cores complementares são vermelho e verde, laranja e azul, amarelo e
roxo.
● Eles se contrastam fortemente.
● Portanto, os designers usam cores complementares se quiserem destacar algum
elemento na interface do aplicativo móvel.
Mobile App Design: 14 esquemas de cores da
moda
Mobile App Design: 14 esquemas de cores da
moda
Cores complementares

na roda de cores
Mobile App Design: 14 esquemas de cores da
moda
● Mobile App Design: Compound color scheme
● O esquema de cores compostas também é conhecido como divisão complementar.
● Ele usa cor base e duas cores análogas.
● O esquema de cores composto é quase tão contrastante quanto o esquema
complementar.
● No entanto, tem menos ênfase visual do que o esquema de cores complementar.
Mobile App Design: 14 esquemas de cores da
moda
Esquema de cores

compostas na

roda de cores
Mobile App Design: 14 esquemas de cores da
moda
● Mobile App Design: Color Shades(Tons de cor)
● As sombras são criadas adicionando preto à cor base.
● Um esquema de cores usando tons permite obter um design de aplicativo móvel
atraente e integral.
● Tons de cores são muito eficazes para acentuar determinadas áreas ou funcionalidades
importantes da interface do usuário do aplicativo.
● Eles também são úteis para a criação de conexões visuais.
Mobile App Design: 14 esquemas de cores da
moda
● Mobile App Design: Custom Color Scheme
● Os esquemas de cores personalizados devem ser cuidadosamente elaborados usando as
melhores práticas das combinações de roda de cores.
● Designers experientes podem aproveitar combinações avançadas de cores no design de
aplicativos para dispositivos móveis.
● No entanto, os iniciantes devem optar por esquemas de cores tradicionais antes de
iniciar experimentos de cores complexos.
● Os designs de aplicativos móveis personalizados bem-sucedidos costumam usar cores
básicas mínimas (1 ou 2) e tons, porque permitem obter conexões visuais rápidas com
a marca.
Mobile App Design: 14 esquemas de cores da
moda
● Mobile App Design: Colorful illustrations
● Hoje, os slides integrados com ilustrações coloridas são uma prática muito comum no
design de aplicativos para dispositivos móveis.
● Ilustrações coloridas especialmente eficazes estão em interfaces móveis mínimas.
● Geralmente eles desempenham um poderoso efeito contrastante e, assim, ajudam a
transmitir fortemente a mensagem da marca.
● Ilustrações arrojadas e coloridas no design de aplicativos para dispositivos móveis
também fornecem um pouco de vivacidade e diversão.
● Eles cativam facilmente os usuários de aplicativos móveis.
Mobile App Design: 14 esquemas de cores da
moda
● Mobile App Design: Colorful Gradients
● Uma das tendências interessantes no design de aplicativos para dispositivos móveis dos
últimos anos são os gradientes complementares coloridos.
● Os gradientes anteriores da mesma cor eram a norma, mas hoje, a norma são os
gradientes complementares de alto contraste.
● Transições de vermelho para laranja, roxo para azul permitem obter belos efeitos
visuais.
● No entanto, é importante usar esses gradientes de cores vivas com iconografia e
imagens minimalistas.
Mobile App Design: 14 esquemas de cores da
moda
● Mobile App Design: Black & Shades(Preto e Tons)
● A tendência do design mínimo de aplicativo móvel resultou inevitavelmente no uso
mínimo de cores.
● Assim como um vestidinho preto se tornou um símbolo de elegância na moda, a cor
preta nas interfaces de usuário móveis agora desempenha um papel sofisticado.
● Embora a cor preta sempre se destaque em todo o design, juntamente com brancos e
cinzas, ela pode criar um esquema altamente contrastante, mas não brutal.
Mobile App Design: 14 esquemas de cores da
moda
● Mobile App Design: Pastel colors
● Cores suaves e pastel no design de aplicativos para dispositivos móveis são outra
grande tendência para os designers assistirem.
● De fato, eles ajudam a alcançar o equilíbrio visual na interface do usuário móvel.
● De uma maneira distinta, as cores pastel proporcionam uma experiência harmoniosa
aos usuários móveis.
Mobile App Design: 14 esquemas de cores da
moda
● Mobile App Design: Bright Icons
● Hoje, os designers usam iconografia clara e arrojada para diferenciar ações e elementos
nas interfaces de usuário móveis.
● Ícones de cores brilhantes causam um grande impacto visual na interface do usuário
móvel.
● Eles também permitem que os usuários móveis entendam facilmente o fluxo de
aplicativos móveis, sua mensagem e o cenário do usuário.
Mobile App Design: 14 esquemas de cores da
moda
● Mobile App Design: Subtle Shadows
● O uso de sombras sutis em fundo branco ou sem som é uma das tendências efetivas nos
esquemas de cores móveis modernos.
● Geralmente, sombras sutis, porém coloridas, ajudam os designers a criar efeitos visuais
interessantes e bonitos para os usuários.
Mobile App Design: 14 esquemas de cores da
moda
● Mobile App Design: High-Contrast Colors
● As cores de alto contraste no design de aplicativos para dispositivos móveis apareceram
após a introdução do iPhone 7. da Apple.
● Azuis turquesas, rosas, vermelhos e verdes brilhantes têm um efeito significativo nas
modernas interfaces móveis de alto contraste.
● Além disso, os aplicativos móveis com cores de alto contraste ajudam a fornecer uma
experiência do usuário de claro impacto visual.
Design for the Dark Theme - Tema Escuro
Design for the Dark Theme - Tema Escuro

● Na I / O 2019, o Google anunciou que o Android agora suportará o Tema Escuro no

nível do SO.
● Ao mesmo tempo, estamos vendo mais aplicativos do Google sendo lançados com
suporte escuro à interface do usuário.
● Em breve, isso se tornará um padrão comum e outros aplicativos seguirão esse
caminho.
● Veremos como adaptar o design para o Dark Theme em um de nossos aplicativos:
Shutter Points.
Design for the Dark Theme - Tema Escuro

● E se você encontrar um lugar incrível que você sabe que seria perfeito como pano de
fundo para o seu próximo projeto de fotografia de animais ou se vir um grande
ângulo para o pôr-do-sol entre edifícios quando não tiver o equipamento certo ou as
condições não forem perfeitas?
● Você faz uma anotação com Shutter Points.
Como Shutter Points funciona

● A interface do usuário do Shutter Points apresenta uma coleção de anotações de fotos

do usuário como uma lista ou uma exibição de mapa.
● Com uma ação rápida, os usuários podem adicionar novas notas e atribuir-lhes
categorias e tags sugeridas automaticamente pelo aplicativo.
● Qualquer nota pode ser encontrada no local procurando por qualquer uma das tags
atribuídas.
Como Shutter Points funciona
Como Shutter Points funciona

● A interface do usuário do Shutter Points apresenta uma coleção de anotações de fotos

do usuário como uma lista ou uma exibição de mapa.
● Com uma ação rápida, os usuários podem adicionar novas notas e atribuir-lhes
categorias e tags sugeridas automaticamente pelo aplicativo.
● Qualquer nota pode ser encontrada no local procurando por qualquer uma das tags
atribuídas.
Otimização de cores - A paleta de cores

● A paleta de cores
● A interface do usuário do Shutter Points é principalmente monocromática.
● Isso permite que o conteúdo fotográfico se destaque e tire a maior parte da cena.
● A cor Primária é usada na navegação principal e cinco cores secundárias são
usadas em tags para conectar as anotações da foto a categorias específicas.
Cores primária e
secundária
aplicadas à interface
do usuário com tema
claro no Shutter Points
Cores primária e
secundária
aplicadas à interface
do usuário com tema
claro no Shutter Points
Otimização de cores - A paleta de cores

● Ao aplicar o Tema escuro, as cores mais claras e desaturadas são preferidas às

cores vibrantes.
● Tons mais claros garantem que seus elementos ainda estejam acessíveis e
tenham uma taxa de contraste adequada contra o fundo escuro.
Otimização de cores - A paleta de cores

● Conforme sugerido pelas diretrizes de Design de materiais, uma boa regra geral é
permanecer em torno do valor 200 de suas paletas de tons, ao usar uma interface
do usuário de tema escuro.
Uma
variante
mais clara
das
cores da
Marca é
escolhida
para o Tema
Escuro.