Workshop

Destravando sua
carreira em UI Design
Regras para receber
o certificado
Certificado de
participação
Certificado
Prático
🔑 A senha

☑ Estar inscrito(a) ☑ Estar inscrito(a) No final de cada aula, vou

falar uma senha, e você
no Workshop no Workshop
precisa estar
☑ Preencher os forms ☑ Preencher os forms prestando atenção, pois
de cada aula de cada aula vamos perguntar essa

☑ Fazer o projeto e senha no Formulário.

enviar para avaliação

📚
O que vamos aprender?
06/Fev 07/Fev 08/Fev

1 - Regras do Jogo e 2º - Criando Interfaces 3º - Plano Prático para

Carreira em UI Design incríveis no Figma migrar de carreira

☑ Universo de UX/UI ☑ Processo de criação ☑ Prototipação e

☑ Princípios de UI Design de uma interface do zero Interações

☑ Como ingressar no
☑ Possibilidades de mercado como UI
carreira Designer
Nick Nicholas França
anos de experiência
deploy Co-fundador, Deploy UX +10 na área de Design

+ 95
Co-fundador & CPO, Maestro ABM projetos realizados,
entre Apps, Sistemas e Websites

ALGUMAS EMPRESAS QUE JÁ REALIZOU TRABALHOS

O que você será
capaz de fazer?
Para quem é o Workshop?

• Quem está inconformado com o que faz hoje e quer migrar de área
• Pra quem está com medo ou receio de fazer uma transição de carreira
• Quem está iniciando sua jornada profissional
• Quem tem vontade de ter liberdade geográfica (trabalho remoto)
• Fazer freela
Para quem NÃO é o Workshop?

• Acha que vai ser fácil

• Quem nao quer praticar
• Quer resultados rápidos
Algumas pessoas incríveis que
estudaram com a gente e conseguiram
entrar na área em 2022

Raíssa Borges Eurico Quadros Beatriz Aguiar Jaine Narde Jaqueline Schwartz
 UX UI
USER EXPERIENCE USER INTERFACE

SHOP MY COUSERS Buy Now

will spend OFFERT 25% OFF!

New offert every day for you!

try 3 days for free.

Descover the best courses and teachers!
 É a forma com que você sente o mundo,
é a forma que você experiencia a sua
vida, é a forma que você experiencia um
serviço, ou… também… um aplicativo ou
um sistema de computador.
Mas é um sistema. É tudo!

Don Norman
Designer na Apple 1990
Co-criador da Nielsen Norman Group NN/Group)

hps://www.youtube.com/watch?v=9BdtGjoIN4E
 UI
É o meio pelo qual a experiência
é possível ser realizada

A B

UX
 Ur Cs Ui Fed
UX Researcher Customer User Interface Front-End
Success Designer Developer

Id Ia Uw Us
Interaction Information UX Writer UX Strategist
Designer Architect

USER EXPERIENCE
Original por: Mathew Carrol e adaptado por Deploy UX
 O que os
usuários
vêem UI SUPERFÍCIE
User Interface Design,
UX Writing.

ESQUELETO
Wireframes, Protótipos de
Baixa Fidelidade

ESTRUTURA
Mapa do Site, Fluxos de
Navegação, Conteúdo

O que eles UX
ESCOPO
não vêem: Pesquisas, Entrevistas, Personas
e Jornada do Usuário

ESTRATÉGIA
Objetivos de Negócio
e Necessidades dos Usuários
The Elements of User Experience - Jesse James Garret
Os dispositivos móveis se
tornaram uma extensão de nós.
Teremos mais contato físico com uma interface
do que com as pessoas que amamos.

41% 8000
DIAS
21
da sua vida
na frente de
ANOS
da sua vida da sua vida
uma tela na frente de na frente de
uma tela uma tela
O que faz uma
pessoa UI Designer?
A pessoa UI Designer é responsável
por desenhar como a interação
entre um ser humano e uma interface
vai acontecer e como será experienciada
pela pessoa que vai utilizar.

Buscando trazer clareza na compreensão

das informações que vão ser apresentadas
e facilidade na realização das tarefas
do usuário.

A interação pode acontece através

de toques, gestos, voz, e até mesmo
com o olhar, no caso de interfaces
de reconhecimento facial e realidade virtual.
O que é uma
interface do
usuário (UI)?
Computador Interface Humano

É o ponto onde acontece a interação e

comunicação entre uma pessoa e um
computador através de um dispositivo
 🤭
Quer ouvir uma mentira?
“Eu tenho que nascer criativo(a)”

“Fulano nasceu com o Dom”

Eu tenho que nascer criativo(a)”
“Fulano nasceu com o Dom”

Criatividade e senso estético

são habilidades que podem
ser estimuladas edesenvolvidas.
Softwares
de UI Design
 Não é a ferramenta
que te faz um Designer

Foque em princípios de design

que você vai ter flexibilidade se a ferramenta
mudar, ou se surgir uma nova
Já assistiu a aula
gratuita sobre o
Figma que mandamos
no seu e-mail?
Carreira
Quanto ganha?
Onde posso trabalhar?

• Grandes empresas de Tecnologia

• Startups

• Agências

• E-Commerce

• Games

• Tudo isso em diversos segmentos

• Freelancer
6 princípios
importantes
no Design de
Interfaces
 Usamos a ênfase de forma intencional

ÊNFASE para guiar o olhar dos usuários para

onde queremos que eles prestem atenção,
ou para indicar o que tem mais relevância,
através de um peso visual.

A medida de força que um elemento

exerce em relação ao que está a sua volta
de forma que atraia o olhar.
Contraste de Tamanho
Quando eu passo o mouse
sobre um card, eu dou ênfase
à esse elemento através do
tamanho e ele ganha
mais relevância visual sobre
o restante dos cards.
Contraste de Cor

Podemos usar a cor para

chamar atenção para uma
informação ou ação importante
 É a forma de ordenar os elementos em
uma página, de acordo com sua importância.

HIERARQUIA O que você quer que o usuário leia primeiro,

qual é a ordem de consumo de informações
que você quer que ele siga?
Hierarquia vs Ênfase
Tem a ver com um conjunto de É sobre fazer um elemento se
elementos que são organizados destacar em relação aos outros
em ordem de importância elementos à sua volta.
3
3
3
EQUILÍBRIO
É sobre a distribuição ideal do peso visual
entre os elementos na tela.

3
Simetria
Distribuição dos
elementos de forma
espelhada
Assimetria
Ter equiíbrio não significa
ser 100% simétrico
4
4
4
É como medimos o quão bem cada elemento
do seu design funciona em conjunto com os outros.
UNIDADE

4
É a sensação de olhar para o todo é ver
que existe harmonia ali, que as coisas
se conversam entre si.
 Consistência de cores,
tamanhos e formatos
Podemos obter o senso
de unidade através de:
Tipografias que se complementam

Tonalidade das imagens utilizadas

5
5
COM INTERAÇÃO

5
Usamos o alinhamento para criar ordem de

ALINHAMENTO estrutura, organização e melhorar a leitura.

5
Além de evitar crises de “TOC” dos usuários

5
 Alinhamento vertical centralizado

Alinhamento horizontal centralizado

Alinhamento horizontal ao topo

Alinhamento vertical à esquerda

6
6
6
Também conhecido como White Space,
ESPAÇO mas como nem sempre o “Space” é “White”,
o Negative Space acaba fazendo mais sentido.
NEGATIVO

6
Basicamente é o espaço vazio entre ou dentro
dos elementos em uma interface.

6
R E S P I R O
Distinção