O que é

UI / UX DESIGN?

ANA PEREIRA DE SOUSA [email protected]

Porque é que
UI DESIGN é importante?
 UI Design ou User Design (Design de Interface

O que é
do Usuário) é a área que estuda o meio pelo
qual uma pessoa interage ou controla um
dispositivo, software ou aplicativo.

UI Design? Essa interação pode ser feita através de

elementos que forneçam ações entre o
dispositivo e o usuário, como por exemplo,
botões, links, menus e qualquer outro
elemento que permita uma interação entre o
dispositivo e o usuário.
 O Design de UI também é o responsável por transferir os valores, os
pontos fortes, atributos e universos de pertinência de uma marca para
as interfaces do seu produto
UI
O Designer de interface do usuário torna os produtos possíveis
para a interação. Estuda e cria toda a conceção visual do projeto,
concentrando-se na hierarquia visual e nos padrões que auxiliam
visualmente os usuários, o UI lida com:

• Paleta de cores
• Tipografia
• Grids
• Gestalt
• Disposição e harmonia entre o conteúdo e os elementos multimédias
• Composição e comunicação visual
O que é Interface é um meio de comunicação entre
dois sistemas ou grupos.

Interface? A interface, por exemplo, é o meio pelo qual o

usuário interage ou se comunica com um
sistema para realizar tarefas.
GUI – Graphical
User Interface
GUI é basicamente a interface gráfica de um sistema que, normalmente,
contém botões, caixas de texto, imagens, os inputs, etc.
GUI – Graphical
User Interface
A interação pode ser feita através de elementos que
fornecem ações entre o dispositivo e o usuário, como por
exemplo, botões, links, menus e qualquer outro elemento
que permita uma interação entre o dispositivo e o
usuário.
Onde encontramos as
GUI hoje em dia?
Windows 10

Yossemite
 Interface Interface Interface
baseado em Gestos Tangível baseado em voz
UI DESIGN Design de
interação
UI DESIGN Design de
identidade
 DESIGN VISUAL
PARA O USUÁRIO

BENCHMARKETING
ARQUITETURA DA
INFORMAÇÃO
OBJETIVOS
ESTRATÉGIA USABILIDADE
CONTEÚDO
USER FLOW
WIREFRAMES
PESQUISA DE USUÁRIOS
 SUPERFÍCIE

Layout
Visual Design
Branding

ESQUELETO
• Design de Interface
• Design de Navegação
• Design de Informação

ESTRUTURA
• Design de Interação
• Arquitetura da Informação

ALCANCE
• Especificações funcionais
• Requisitos de Conteúdo

ESTRATÉGIA
• Necessidades de utilização
• Objetivos do sitio
 Dan Willis, consultor de desenvolvimento e

O que é
design de produtos e responsável por
trabalhar o UX no jornal The Washington Post
nos anos 2000, define o UX design como um
UX Design? grande guarda-chuva, onde depende de
outras disciplinas, para que juntas possam
proporcionar a boa experiência mais
completa possível.
PESQUISA COM OS USUÁRIOS
Conversar com as pessoas que vão
usar o produto/serviço vai ser
fundamental para entender as
suas “dores” e motivações.

É importante para validar o que o

designer está a pensar e até
descobrir coisas novas que
podem ser melhores que a sua
ideia inicial.
ESTRATÉGIA DE CONTEÚDO
O conteúdo que o cliente
disponibiliza precisa de ser
pensado de acordo com o seu
público.

O estilo da comunicação também

influencia muito no sucesso e no
fracasso de algo.

Procura-se sempre compreender

como o público se comunica para
conversar com ele da mesma
forma (formal ou informal).
ARQUITETURA DE INFORMAÇÃO
Tendo o conteúdo pronto, como
vai organizar?

As informações estão agrupadas

de maneira correta?

Em produtos digitais, é uma

disciplina fundamental para a
compreensão do conteúdo, estão
organizados de forma lógica,
hierarquizada nas informações …
DESIGN VISUAL
Ter um visual moderno,
adequado com o tipo de
conteúdo e público, já é meio
caminho andado.

O visual é a primeira impressão

que muitas vezes fica.

Então, faça um bom design do

seu produto para que ele não
seja o motivo do abandono dos
usuários.
DESIGN DE INTERAÇÃO
É o ponto de interação entre os
usuários e o produto/serviço, é o
momento de ver como é que é o
comportamento deles com aquilo
que o designer projetou.

O design de interação trabalha no

antes e no depois de uma ação.

Em produtos digitais, é preciso

pensar em todos os pontos e
estados da jornada de uma ação.
USABILIDADE
É o conjunto de todos os itens
anteriores. Isso porque cada um
deles pode fazer com que um
produto não seja de fácil
compreensão e uso, mas com
uma boa arquitetura de
informação, uma boa navegação,
conteúdo adequado, visual
correto e atraente, a usabilidade
se torna boa também.
EM RESUMO
A boa experiência vai acontecer
quando o designer colocar o
usuário como o principal
stakeholder do seu negócio.

Tendo o cliente como foco, com

certeza que o designer irá
trabalhar em todos esses itens
para garantir que ele seja aquele
cliente fiel, que usa, adora e
recomenda a todos.
UI DESIGN
estilos e estética
Skeumorfismo É uma representação muito aproximada do
objeto. Um ícone pode representar
profundidade, texturas, sombras, reflexos ou
qualquer outro recurso que permita
representar o ícone de forma realista.
Skeumorfismo
Skeumorfismo A principal vantagem do
Skeumorfismo é a sua rápida
Vantagens e desvantagens assimilação por parte do usuário.
O realismo gera familiaridade e
diminui a curva de
aprendizagem, pois cria uma
relação direta com o mundo
físico.
Skeumorfismo A principal desvantagem do
Skeumorfismo é por ter sido
Vantagens e desvantagens amplamente usado no passado,
ficando o estilo datado, deixando
o layout com um visual
ultrapassado.
Além disso, contém muitos
detalhes, deixando os elementos
pesados, principalmente em apps
ou sites, sendo um fator
determinante.
Skeumorfismo O Skeumorfismo ainda é muito
eficaz com pessoas idosas.
O Skeumorfismo morreu? Uma pesquisa realizada pela
Nielsen Group)
mostrou que pessoas mais velhas
costumam identificar-se mais
com ícones e com elementos
realistas.

(2019) Nielson Norman Group, UX Design for Seniors-Ages 65

and older, 3th edition, disponível em:
https://www.nngroup.com/reports/senior-citizens-on-the-web/
[consultada a 8 de setembro de 2019]
Flat Design É um signo de representação minimalista de
um objeto (índice ou símbolo), geralmente
representado com cores sólidas e poucos
detalhes.
Flat Design
 Hoje em dia não é mais preciso simular a textura, sombra e volume em
elemento para indicar ao usuário que “aquilo é um botão”.Um simples
retângulo com uma cor chapada (ou até mesmo só o contorno) mais um
Flat Design texto descritivo já o suficiente para o usuário entender.

Outro factor preponderante para a popularização do Flat Design foi o conceito

de Design Responsivo, pois este é muito mais maleável e adaptável.
 Trata-se de um estilo minimalista com influência nítida do estilo Suíço criado

Metro Design pela Microsoft.

Possui esse nome porque foi inspirado na sinalização do metro de Londres. É
muito parecido com o Flat Design, porém um pouco mais minimalista.
 É o estilo criado pelo Google que utiliza as características do Flat Design, porém
adiciona outros artifícios como efeitos 3D.

Material Nos dias de hoje, talvez seja o estilo mais utilizado em interfaces digitais.

Design
O google faz a melhor análise sobre este tema.

Obrigatório visitar: https://material.google.com/

Flat Design A principal vantagem do Flat
Design é a sua leveza,
Vantagens e desvantagens modernidade e responsivo, o que
torna este estilo muito mais fácil
de desenvolver e implementar.
Além disso, o Flat Design resulta
num design muito mais clean.
Flat Design A principal desvantagem do Flat
Design é que pode dificultar a
Vantagens e desvantagens interpretação do ícone, pois pode
não apresentar qualquer
semelhança com o objeto real.
Não existe
melhor ou pior!
Quem manda é
o projeto!
Dicas
Para criar interfaces
 Design pode e deve ser testado. Não tenha medo de mudar caso seja
necessário.

 Se os testes indicarem que o design precisa mudar, mude. É preciso

estar sempre aberto à mudanças para alcançar melhores resultados

 Projecte para os usuários, não para o você mesmo. Não tome decisões
baseadas somente no seu gosto pessoal e sem fundamentos e
argumentos que justifiquem tal escolha.
https://www.uplabs.com/posts/golden-ramen
A estética é importante, mas não é
a principal medida
O objetivo é fazer a interação do
usuário de forma eficiente e
simples. Seja simples.

Talvez o segredo da
sofisticação esteja
na simplicidade.
Guia de estilo Style Guide trata-se de um guia visual a
fim de manter a padronização e

(Style Guide)
coerência visual dentro de um sistema
de design, assegurando a aplicação
correta dos elementos visuais como
tipografia, cores, ícones, etc.
Ferramentas
UI Designer
Características
de uma boa interface
 Segue padrões de uso, atende às expetativas dos
Ergonómico usuários numa determinada situação, compreende
as limitações físicas e cognitivas do ser humano.

Segue padrões de boa usabilidade, é fácil de usar,

Usável manipular e simples de entender. A maioria das vezes
é eficiente e satisfaz as necessidades do ser humano.

Significa algo que é natural e instintivamente, pode ser

Intuitivo entendido e compreendido. Os usuários entendem
como devem usá-lo sem apoio de um instrutor ou de
um treino especial.
 Interfaces consistentes permitem que os utilizadores
Consistente desenvolvam hábitos de uso e aprendam também
como certas coisas funcionam num certo contexto.

Uma boa interface deve ser atrativa. Num sentido que

Atrativa torna o uso dessa interface agradável. Uma interface
deve estimular o seu uso e cativar os usuários.

O conceito por de trás da UI comunicativo, é que uma UI

Comunicativo é essencialmente uma conversa entre usuários e um
produto para executar tarefas que atingem as metas
dos usuários.
Portanto tudo o que um
designer aprendeu no
Design Gráfico pode ser
aproveitado aqui também.
Tipografia Contraste Organização
de informações

Espaçamento Kerning Princípios

Leading de Gestalt
Tracking

Psicologia Espaço branco Alinhamento

das cores
10 princípios de um
Bom Design de Dieter Rams
• O Bom Design:
o É inovador
o Torna o produto útil
o É estético
o Torna o produto
compreensível
o É discreto
o É honesto
o É durável
o É minucioso
o É amigo do meio
Ambiente
o É mínimo
10 Heurísticas
De Nielsen
1. Visibilidade do Status do Sistema
2. Compatibilidade entre o sistema e o mundo real
3. Controlo e liberdade para o usuário
4. Consistência e Padronização
5. Prevenção de erros
6. Reconhecimento em vez de memorização
7. Eficiência e Flexibilidade de uso
8. Estética e design minimalista
9. Ajude os usuários a reconhecerem, a
diagnosticarem e recuperarem-se de erros
10. Ajuda e documentação
 Em ambientes digitais a dependência da visão é
ainda maior e por conta disso é essencial que a
1 interface informe o usuário sobre que ambiente
estava e para que outros ambientes poderá se dirigir
Visibilidade do Status
a partir de sua localização.
do Sistema

Um sistema precisa de falar a mesma linguagem do usuário,

isto é, a linguagem que o usuário utiliza no dia-a-dia.
2
Compatibilidade entre Outro aspeto da compatibilidade entre sistema e mundo
o sistema e o mundo real são os símbolos utilizados dentro de uma interface.
real
 Quando o usuário realiza ações por engano, o sistema deve
apresentar ao usuário uma “saída de emergência” daquele
3 estado no qual ele entrou para o estado de segurança em
Controlo e liberdade que estava, noutras palavras, dê ao usuário o “Ctrl+Z” pois
para o usuário essa possibilidade de reverter ações remove a insegurança
do usuário ao utilizar o aplicativo, site, etc.

Manter a consistência entre as telas de uma aplicação é

essencial para que não seja necessário compreender que
4 existem vários padrões e formas para cada tela.
Consistência e
Padronização
 Existem dois tipos de erros que os usuários normalmente
cometem: o deslize e o engano.
5 O deslize é quando um usuário pretende realizar uma ação
Prevenção de erros mas acaba por realizar outra, isso acontece tipicamente
quando ele não está totalmente focado na sua ação dentro
da aplicação.
O engano é quando a compreensão de alguma informação
é equivocada ou entendida de outra forma.

A grande diferença entre reconhecer e memorizar é a

quantidade de dicas que são fornecidas para que um
6 conhecimento seja acedido.
Reconhecimento em Reconhecer padrões fornece muito mais dicas do que
vez de memorização tentar aceder a memórias.
Ex: Lembrar de uma senha (memorização) e tentar salvar
um arquivo no Word (reconhecimento).
 O ideal é que a interface seja útil tanto para usuários leigos
como para experientes. Os Leigos precisam de informações
7 mais detalhadas para poderem realizar tarefas. Na medida
Eficiência e que crescem em conhecimento sobre a interface, a
Flexibilidade de uso necessidade de formas mais rápidas de interação para
realizar uma tarefa começam a surgir. “Ctrl+C e Crtl+V” são
exemplos de atalhos que permitem ao usuário mais
experiente realizar tarefas mais rapidamente.

Quanto maior é a quantidade de informação, maior será a

quantidade de informações analisadas e decisões que o
8 usuário precisará de tomar, por isso, é crucial manter
Estética e design apenas as informações que são realmente necessárias, as
minimalista informações secundárias podem ser deixadas em segundo
plano (menus, abas, etc.).
 O ponto aqui é ajudá-lo a reparar um erro depois de ele ter
cometido, caso o “Cntrl+Z” não tenha funcionado.
9
Ajude os usuários a
reconhecerem,
diagnosticarem e
recuperarem-se de erros

Normalmente essas são as áreas menos acedidas, mas ainda

assim são importantes dentro de um sistema pois nunca se
10 sabe quando um usuário irá precisar de uma ajuda.
Ajuda
e documentação
“Design não é apenas o
que parece e o que se sente.
Design é como funciona”

- Steve Jobs
“Pensar em criar um bom
design pode parecer difícil,
mas não pensar nisso pode
ser desastroso”

- Ralph Caplan
UI DESIGN
Ferramentas,
dicas e downloads
Inspiração
• Behance • Calltoidea
https://www.behance.net/ https://www.calltoidea.com/

• Dribble – icon set • Ui movement

https://dribbble.com/tags/icon_sets https://uimovement.com/

• Google Material design • CSS awards

https://material.io/design https://www.cssdesignawards.com/
https://www.awwwards.com/
https://www.csswinner.com/
• Product Hunt
https://css-awards.com/
https://www.producthunt.com/
Cores
• Color Hunt • Material Design Colors
Colorhunt.co https://materialui.co/colors

• Adobe Color • uiGradients

https://color.adobe.com/create/color-wheel
https://uigradients.com/

• Flat UI Colors 2 • Colors

https://flatuicolors.com/
https://coolors.co
Imagens
• Pexels • Visualhunt
http://www.pexels.com/ https://visualhunt.com/

• Unsplash • Shutterstock
https://unsplash.com/ https://shutterstock.com

• Picsum
https://picsum.photos/
Icons
• Dribbble • Iconstore
https://dribbble.com/ https://Iconstore.co/

• Noun Project • Flaticon

https://thenounproject.com/ https://www.flaticon.com/

• Iconmonstr
https://iconmonstr.com/
Fontes
• Google Fonts
https://fonts.google.com/

• My Fonts
https://myfonts.com/

• Font Squirrel
https://fontsquirrel.com/