ebook 7 Passos para você se tornar UXUI Designer

Prévia do material em texto

7 PASSOS
PARA SE TORNAR UM
UX/UI DESIGNER
E ganhar um salário de
R$ 4.500,00 nos próximos 3 meses
gabrielsilvestri.com.br
E aí! Prazer, sou o Gabriel Silvestri sou o autor desse eBook onde 
você aprenderá como virar um UX/UI Designer mesmo que você 
esteja começando agora.
Ao ler esse eBook você entenderá por onde começar e o que torna 
possível ganhar um salário de R$ 4.500,00 reais nessa profissão em 
até 3 meses.
Antes de começar, quero te dar uma dica muito importante na 
leitura desse ebook...
...Leia em uma sentada só. Não vai demorar mais de 20 minutos.
Não procrastine, agora que você começou vá até o fim não vai 
demorar muito. Eu criei esse eBook com o intuito de ser lido numa 
sessão só, então promete pra mim uma coisa? Leia ele todo até o 
final agora.
O que você vai aprender ao ler esse ebook:
O que é UX e UI, qual a diferença de cada um dos dois
Por que a área de UX e UI paga tão bem
Como começar nessa área e virar um UX/UI Designer
Como funciona o dia-a-dia de trabalho
Quais erros você precisa evitar
O caminho completo para virar um UX/UI Designer
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Posso te contar uma coisa? Quero te contar porque escrevi esse 
eBook e estou te dando de graça...
Desde muito pirralho eu já mexia com Photoshop, Illustrator e fazia 
umas montagens. Quem me colocou nesse mundo foi o meu 
falecido Pai e eu sou extremamente grato por isso.
Sempre curti muito essas coisas, que foi algo que me influenciou 
investir nessa área e virar um Designer Gráfico. Depois de anos 
atuando nessa área eu meio que estava quase desistindo (e de saco 
cheio).
Trabalhava em uma agência ruim, eu ganhava R$ 300 reais por 
mês pra trabalhar 8h/dia e me sentia estagnado.
Isso foi lá em 2014, que foi justamente quando eu conheci a área de 
UX e UI Design. Um dia aleatório eu estava na minha faculdade e vi 
um evento incrível acontecendo, a UXConf. Lá eu descobri essa área 
maravilhosa e foi amor a primeira vista.
Duas coisas me chamaram muito a atenção:
1) Era uma área ligada à tecnologia e inovação (e por sinal eu amo 
muito isso)
2) Os salários eram absurdamente mais altos que Design Gráfico
Isso me motivou a querer investir nessa área e virar um UX/UI 
Designer.
Mas... Nem tudo são flores, eu só tomei na jabiraca no inicio. Fui 
tentar estudar sobre e eu simplesmente NÃO encontrava nenhuma 
direção, passo-a-passo ou conteúdo que ensinasse iniciantes.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Era terrível, eu tentava criar interfaces via a página em branco e 
travava, eu não tinha processo nem conhecimento sobre o que 
exatamente eu tinha que fazer. Meu portfólio era uma bosta e eu 
estava completamente perdido.
Mas de pouco em pouco em fui aprendendo, pegando muito 
feedback, lendo muito livro (todos em inglês, porque simplesmente 
não tinha livro em português sobre o assunto). E com isso fui 
conseguindo ter resultados e mais clareza. O resultado foi um 
portfólio marromenos que garantiu o meu primeiro estágio do qual 
eu ganhava algo em torno de R$ 1.500,00
Não vou mentir, foi foda. Eu demorei praticamente 2 anos pra 
conseguir ter os meus primeiros resultados e conseguir criar boas 
interfaces, e em paralelo a isso tinha pouco tempo por conta da 
agência e faculdade. Mas deu tudo certo e eu consegui o meu 
primeiro estágio.
Depois disso eu decolei, consegui mais experiência prática, melhorei 
meu portfólio e consegui minha primeira vaga CLT ganhando R$ 
3.000,00 reais por mês como JÚNIOR UX/UI Designer em 2017 e 
depois disso fui cada vez mais longe ganhando cada vez mais 
fazendo freelas e etc...
Nessa mesma época meu pai faleceu e foi uma das piores coisas 
que aconteceu na minha vida. Meu pai sempre teve muito orgulho 
do meu esforço e o meu crescimento fazia ele muito feliz. Apesar de 
ter ficado muito mas muito triste eu parei e pensei... Eu preciso 
honrar esse orgulho e ser cada vez melhor.
Isso me deu energia pra seguir, estudar e colocar mais a mão na 
massa pra ser um UX/UI Designer cada vez melhor.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Mas um dia eu parei e pensei: Cara... Essa área é tão incrível, porém 
tem uma barreira tão complicada para iniciar. E eu resolvi mudar 
isso, criei um blog dando dicas para iniciantes, um canal no YouTube 
e comecei a produzir conteúdo no Instagram.
Por fim criei um curso ensinando essa profissão incrível que mudou 
a minha vida. E cá estamos hoje, mais de 1.000 alunos já 
participaram do UX/UI Design à Prova de Balas e muito deles estão 
empregados e trabalhando na área de UX/UI.
E agora você é o próximo... Eu quero te ajudar a virar um UX/UI 
Designer, você aceita a minha ajuda? 
Eu espero que sim. Então senta a bunda na cadeira e leia esse ebook 
até o final kkk, tamo junto!
Passo 01: Entenda por que UX e UI é 
tão valioso e paga tão bem
Hoje, um UX/UI Designer ganha de R$ 2.500,00 à R$ 8.000,00 reais. A 
fonte é da Pesquisa Panorama UX do Saiba+, essa é uma pesquisa 
que acontece todos anos desde muito tempo, ou seja, é algo 
confiável.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Mas claro, podemos ir além... No site Glassdoor (falecido 
LoveMondays) e LinkedIn você consegue encontrar vagas nessa 
faixa salarial também:
Média salarial de UX/UI Designers
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
E esse é o cenário no Brasil... E uma coisa interessante é que o 
mercado Brasileiro de UX/UI segue muitos padrões da Europa e 
Estados Unidos, por sinal, se liga como é os salários lá fora:
Se você converter esse salário anual, dá algo em torno de R$ 40 à 30 
mil reais POR MÊS. É quase inacreditável... 
Lá fora na gringa UX e UI é algo que é MUITO mais valorizado do que 
já é aqui... A cada ano que passa mais e mais cresce a demanda por 
profissionais dessa área no Brasil e os salários crescem porque o 
empresário entende que investir em UX/UI é algo que dá muito 
retorno.
Sabe por que UX/UI é tão valorizado e tem crescido tanto aqui 
no Brasil?
Investir em UX/UI traz dinheiro e lucro pra dentro das empresas. E 
claro, melhora (e muito) produtos e serviços.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
É o famoso ROI (return over investiment, retorno sobre 
investimento). Digamos que eu tenha uma nova empresa de buscar 
pets na casa de seus donos e dar banho/tosa neles e todo 
atendimento é feito via telefone/whatsapp.
E então eu contrate um Designer gráfico para criar toda uma 
identidade visual, alguns posts de facebook e instagram, camisetas, 
e etc... E isso tenha um custo de R$ 10.000,00 (dez mil reais). E agora 
eu te pergunto, como eu faço para mensurar exatamente o quanto 
de retorno esse investimento todo teve? Praticamente impossível.
Em outro cenário, um profissional de UX e um programador criam 
um site + aplicativo para uma empresa de banho e tosa por delivery 
e o custo são os mesmos 10k. O UX/UI cria uma solução e o 
processo é super otimizado e funciona super bem. Por ser algo mais 
digital é possível mensurar exatamente dados através do aplicativo.
Existem métricas digitais das quais eu consigo comparar e entender 
se o serviço realmente valeu a pena ou não. E o mais legal disso 
tudo é que sempre vai ter espaço para melhorar a experiência do 
serviço cada vez mais e mais, ou seja, o designer precisa estar 
sempre ali ajustando e melhorando.
O retorno sobre investimento em UX/UI é MUITO mais alto é por 
isso que as empresas pagam tão bem. Dá lucro e faz as empresas 
crescer.
Você precisa entender uma coisa disso tudo...
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Hoje o Brasil tem 306,4 mil empresas que atuam no setor de 
tecnologia (de acordo com dados do mapeamento feito pelo Tech 
Report 2020, com dados da Neoway).
Essas empresas estão literalmente desesperadas atrás de 
profissionais de UX/UI, elas querem contratar a todo custo 
PORÉM... Nãotem gente capacitada o suficiente para atuar 
nessas vagas.
A grande maioria das pessoas que quer entrar nessa área faz um 
portfólio medíocre e não estuda muito bem a área. A consequência 
é não conseguir atuar nessas vagas.
E é justamente isso que eu quero mudar. Quero te ensinar 
exatamente tudo que você precisa ser pra conseguir atuar nessas 
vagas, tem muita mas muita oportunidade basta você se preparar 
do jeito certo.
Mas e a faculdade?
Muita gente me pergunta, tá mas e a formação na faculdade? E eu 
vou te contar algo que vai te surpreender. Você não precisa ser 
formado em uma faculdade para atuar nessa área. 
Hoje as empresas dão preferência pra quem realmente domina 
UX/UI e tem um bom portfólio do que uma pessoa que não tem 
experiência e só tem diploma.
Em outras palavras... Ter um bom conhecimento da área + portfólio 
foda = conseguir emprego.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Não importa se você é da área XYZ ou não entende nada de design 
ou UX. É só aprender, saber aplicar, criar um portfólio e ir atrás de 
uma vaga. Simples assim.
Outra coisa muito importante. Você NÃO precisa saber nenhum tipo 
de linguagem de programação para atuar nessa área. A área 
responsável por isso é a do Desenvolvimento Front-end e Back-end.
E se você é um Dev que quer migrar para essa área, melhor ainda. 
Você já vai ter um bom conhecimento de como funciona as coisas, 
resta aprender UX e UI, construir um portfólio e conquistar sua 
primeira vaga.
"Não tenho dom para Design e criatividade, ainda assim tenho 
chances?"
Sim, você tem. Posso te contar por que? Dom e genialidade não 
existem, isso é besteira.
Qualquer pessoa pode aprender a ser criativa
Qualquer pessoa pode aprender a ser bom em design
Qualquer pessoa pode aprender a se inspirar a todo momento e 
pensar como Designer
Esse papinho de que você precisa nascer criativo pra trabalhar com 
Design é a maior bobagem que eu já vi na minha vida.
Nunca me considerei uma pessoa criativa, quando eu era criança só 
sabia fazer uns boneco de palitinho e eu era um zero à esquerda na 
escola, tirava nota baixa e sempre ia mal em tudo.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Porém... Um belo dia eu aprendi que criatividade e design são 
habilidades das quais você pode aprender, tudo que você precisa é 
de um método pra seguir.
Quer ficar bom em UX/UI? Pratique todos dias mesmo que seja um 
pouco. A cada interface que você cria, a cada projeto você fica 1% 
melhor.
No inicio vai ser uma merda, suas interfaces vão ser feias. As minhas 
também eram, eu quase joguei tudo pro alto e desisti. Isso tudo faz 
parte do processo, de pouco em pouco você vai ficando bom.
Nós subestimamos o quanto conseguimos evoluir em 3 meses, é 
incrível... Quero compartilhar contigo a história da Melissa que em 
3 meses saiu do zero, aprendeu UX/UI e conquistou a primeira 
vaga dela:
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
A Melissa começou do zero, se esforçou e colocou a mão na massa e 
conseguiu ter resultados.
Dá só uma olhada em um pedacinho do projeto da Melissa:
Não precisa de dom
Não precisa de faculdade
Não precisa de um projeto INCRÍVEL
Você só precisa seguir um método, que por sinal é algo que eu vou 
te mostrar nesse eBook.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Passo 02: Entenda o que é UX e UI 
Design e como essas duas áreas se 
complementam
Eu adoro explicar isso usando os 4 U's:
- UX
- UX Design
- UI
- UI Design
UX significa USER EXPERIENCE (experiência do usuário)
Usuário é uma pessoa, você, eu, sua mãe ou seu tio lá de Piracicaba. 
Experiência é algo que você vivência.
UX não significa uma telinha bonitinha de um aplicativo, é bem mais 
que isso... Imagina que um dia feliz você resolveu ir até a 
Disneylandia...
Você está lá super de boas e resolve ir na montanha russa. Aí você 
entra na fila, tem toda aquela ansiedade e espera pra entrar no 
brinquedo, etc...
Então você entra no brinquedo e sente toda aquela adrenalina, 
diversão e tudo mais. E por fim, você sai do brinquedo super feliz 
(ou em choque).
Isso é uma experiência. Você deu um passeio de montanha russa. 
Poderíamos ir além e pensar na experiência de ir na Disney como 
um todo e pensar em todas sensações e emoções que você teve 
durante essa viagem... 
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Isso é UX. É emoção, sentimentos, experiências. Não é só telinha 
bonitinha.
Agora pra você entender 100% isso, uma experiência de uso (UX) 
no contexto de um aplicativo:
Você precisa muito visitar sua tia avó que mora no centro da cidade, 
você não tem carro e detesta pegar ônibus... Qual a solução? O bom 
e novo UBER.
É só pegar o seu celular, colocar o endereço, esperar o motorista, 
entrar no carro, aguardar e pronto você chegou.
A experiência começa desde o momento do seu objetivo e 
motivação: Ir até a casa da sua tia avó de maneira confortável e sem 
estresse. E então você chama o motorista da uber.
Talvez ele seja um motorista ruim, talvez ele tenha um carro fedido. 
Ou pelo contrário, talvez seja incrível... A experiência é algo pessoal, 
é algo seu. Cada pessoa vai ter uma diferente.
Justo por isso é meio que impossível você "criar uma experiência" 
cada pessoa reage de um jeito diferente. 
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
E por sinal... O que diabos é UX Design então?
É uma área multidisciplinar, ou seja, ela é composta por várias 
outras áreas. É como se fosse um megazord de áreas (kkkk). Em 
outras palavras UX Design pega emprestado várias técnicas, 
metodologias e habilidades de outras áreas, a melhor maneira de 
entender isso é através do guarda-chuva da UX:
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
UX Design é um guarda-chuva, e abaixo dele estão as várias técnicas 
e metodologias emprestadas. O objetivo de UX Design é criar e 
aprimorar alguns pontos de uma experiência. E isso é feito através 
de técnicas de pesquisa.
Basicamente você vai ouvir uma pessoa e entender o que ela quer, 
precisa ou algo que ela tenha dificuldade e frustração. Isso não inclui 
só o cliente final. Você também vai conversar com o dono de uma 
empresa, responsável pelo projeto, etc... É necessário também 
entender sobre o negócio.
Com base nisso você vai projetar algo pra melhorar essa situação e 
fornecer uma boa experiência. No caso da Disney eu poderia colocar 
funcionários para acalmar a pessoa, sinalizações na fila da 
montanha russa, instruções bem claras de como usar o brinquedo, 
etc... Isso é pensar na UX.
Agora no contexto da Uber, é detalhar bem o passo-a-passo para 
usar o app, deixar tudo bem claro e fácil de ser utilizado. E claro... 
Criar uma BOA interface. E é aqui que entramos no outro "u"
O que é UI?
UI é User Interfaces, interface do usuário. A famigerada telinha do 
app ou site.
Uma interface é considerada uma ponte que possibilita uma pessoa 
a realizar uma determinada tarefa. É simples na teoria, mas na 
prática vira algo bem complexo.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Uma interface pode existir de várias formas, tamanhos e tipos. Não 
necessariamente uma interface precisa ser uma tela de celular.
Pode ser:
• O painel de um carro
• Um microondas
No painel do Microondas, você vai usar a interface dele para 
selecionar a potência, tempo, modo, etc... No caso de um app ou site 
você usará a interface para interagir e atingir o seu objetivo.
Percebe que UX e UI são dois uma parceria e andam juntos? Um 
facilita o outro... É um caso de amor complicado, um não existe sem 
o outro.
E então sobre o que se trata UI Design?
É a disciplina responsável por criar interfaces. Sendo bem direto ao 
ponto, é 100% sobre a parte visual de apps, sites e sistemas. Mas 
claro, também levando em consideração UX. É sobre... 
- Escolheras melhores cores
- Pensar em uma tela que seja usável e leve em consideração o 
usuário
- Definir o espaçamento, hierarquia visual, grids, etc...
Então pra não ter mais nenhum resquício de dúvidas sobre 
isso...
UX é algo bem mais estratégico ligado à emoções e pesquisa com 
usuários.
 UI é a parte visual e usável de uma interface.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Mesclando esses dois conhecimentos você vira um... UX/UI Designer. 
Tcharam!
Uma coisa que eu preciso que você entenda é que essa área não é 
só sobre criar telinhas bonitinhas. Não adianta nada você saber 
criar interfaces bonitonas se elas são inúteis ou não ajudam o 
usuário a concluir seus objetivos.
É por isso que é tão importante essa mescla das duas áreas. Outra 
coisa importante, as empresas estão BUSCANDO por pessoas que 
consigam aplicar com maestria essas duas áreas.
E pode ficar tranquilo(a) não é difícil e não é um bixo de sete 
cabeças, com um passo-a-passo fica beeem mais tranquilo aprender 
e aplicar essas duas disciplinas no dia-a-dia, que por sinal...
Você quer um emprego como UX/UI Designer? Domine bem UX e 
UI Design e você conseguirá.
Entenda como é o dia-a-dia de trabalho de um UX/UI Designer:
Pra entender de fato como vai ser o seu trabalho nada mais justo do 
que ver na prática um exemplo...
Um UX/UI Designer nível Júnior (primeira experiência com salário de 
R$ 1.8k à R$ 4k) vai executar coisas como...
- Auxiliar no processo de pesquisa/concepção de produto
- Criar wireframes, esboços de interfaces
- Implementar e criar telas já com base em algum sistema de design 
já existente
- Conversar com Programadores, Gerentes e Product Owners para 
entender requisitos, conhecer melhor o usuário e atender 
demandas de criação
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
E mais importante de tudo...  O Júnior na maioria dos casos estará 
sempre sendo supervisionado por um UX/UI Designer pleno ou 
sênior do qual orientará o que você terá que fazer.
É legal entender que na sua primeira vaga você não vai estar 
sozinho, ninguém vai jogar um demanda no seu colo e pedir para 
você se virar sozinho.
Mas claro, não tenho bola de cristal pra prever e te confirmar que é 
assim que funciona em todas empresas do Brasil, mas na grande 
maioria é assim, você com Júnior estará acompanhado e é um cargo 
mais focado em aprendizado e crescimento.
É mais ou menos assim a dinâmica, tudo vai girar em torno 
disso:
1- Time de pesquisa traz dados/informações sobre os usuários ou 
cliente
2- Gestores e product owners trocam uma ideia, ajustam coisas e 
fazem uma lista de requisitos
3- Time de UX/UI Design entra em ação pra implementar, validar e 
testar as ideias
4- Depois de validado o projeto passa para o time de 
desenvolvedores implementar (codar), durante esse processo você 
vai supervisionar e fazer o famoso Design Review pra ver se tudo 
está sendo implementado corretamente.
Mais uma vez, só pra deixar bem claro... Você não vai participar 
do processo de programação (codar). UX/UI Designer não 
precisa saber programação.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Passo 03: Como evitar os 5 maiores 
erros ao virar UX/UI Designer
Durante a minha trajetória de migração eu cometi muitos erros... E 
eles custaram tempo e dinheiro. É por isso que eu transformei isso 
tudo em aprendizados e lições que vão ajudar você.
Erro #01: Eu ignorei a parte de UX e ficava estudando só sobre UI 
Design e software.
Entenda isso de uma vez por todas... Não existe UX sem UI, assim 
como não existe UI sem UX.
Um depende do outro. Sim, são duas áreas diferentes mas aqui no 
brasil pra você trabalhar com design de interfaces você precisa 
saber sobre UX também.
Você não precisa ser o MAGO DO UX DESIGN e saber todas técnicas 
de pesquisa, etnografia, concepção de produto, mvp e teste de 
usabilidade.
Domine o necessário pra conseguir criar interfaces que não são só 
bonitas e sim interfaces que funcionam e ajudam o usuário a atingir 
o objetivo dele.
Depois no longo prazo você foca em aprender todas técnicas mais 
avançadas. No inicio foque no que vai te trazer resultados de forma 
mais rápida.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Eu sempre digo isso e vou continuar repetindo. Não adianta tu criar 
um portfólio bonitinho cheio de imagem bonitinha de interfaces e 
esperar que é isso que vai te conseguir uma vaga com salário de 5 
mil reais.
Não é só isso, não é só criar interface bonita. E por sinal... Outra 
grande erro que cometi foi:
Erro #02: Eu nem ao menos sabia a diferença entre UX e UI, eu 
achava que era a mesma coisa!
Pra tu ter noção do quão grave isso é, se você afirma que é designer 
UX/UI e é só designer de interfaces e fala isso pra um recrutador, se 
ele te sacar já era a sua vaga. Ele vai ver que você é amador e não 
entende da própria área.
Eu tive que aprender isso na marra, foi em uma entrevista eu fui 
bem faceiro e disse que era UX/UI e a moça me pediu pra explicar 
como era o processo de pesquisa que eu usava e outras coisas de 
UX e eu não soube responder.
Daí sai do lugar da entrevista com uma cara de tacho e aprendi que 
são duas áreas bem diferentes.
Erro #03: Portfólio CRU, inexistente e a estratégia da esperança 
é a última que morre
Tem um grande problema que rola hoje em dia... A pessoa vai lá 
aprende a criar interfaces, faz um portfólio cheio de mockup e 
imagem bonitona e simplesmente NÃO consegue vaga. Por que 
será?
Porque o recrutador sabe que aquela pessoa tem um conhecimento 
superficial e não vai conseguir entregar resultado. 
Só telinha bonita não adianta. Tem que mostrar o processo, explicar 
o por que tu criou aquilo, quais metodologias tu usou e explicar em 
detalhes COMO tu resolveu um problema de design.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Um portfólio não é um desfile de moda, não é uma galeria de arte. É 
um documento que vai comunicar tuas habilidades e como tu 
resolve problemas.
E pra quem tem o famigerado "medo" de postar o primeiro projeto e 
criar o portfólio porque acha que tá ruim demais o resultado... Na 
minha trajetória eu sempre me incomodava muito em querer deixar 
as coisas o melhor possível.
Entende uma coisa. Tuas primeiras interfaces vão ser uma bosta, 
aceita isso. O que tu precisa compreender é que a cada interface 
que tu cria, tu fica melhor.
Só posta esse projeto no teu portfólio, 1 é maior que ZERO. O 
máximo que tu vai receber é um não, foda-se o que os outros 
pensam se é ruim.
Tu vai viver tua vida com base na opinião dos outros? Até os 
melhores designers começaram do zero e criaram coisa feia, eu 
incluso, faço coisa feia até hoje não tenho medo de assumir.
Vá para o próximo projeto, e depois que tu terminar tu vai pro 
próximo e pro próximo. Tu tem que estar em constante movimento. 
Cada interface que você cria tu fica 1% melhor. Dai tu vai lá e faz 
um projeto mais bonito que o anterior e substitui, é assim que 
funciona.
Erro #04 Não adianta criar um portfólio e achar que a vaga vai 
cair do céu
A sua vaga não vai cair do céu, a estratégia de divulgação da 
"esperança" não funciona amigo. Até pode funcionar, mas vai 
demorar horrores.
Todo santo dia tu tem que abrir o teu LinkedIn (e se tu não pelo 
amor de deus vai criar um depois dessa aula) e ir atrás de vaga falar 
com recrutador.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Eu tenho um exemplo ótimo que é a Ingrid e o Derick, esses dois 
alunos eles iam DIARIAMENTE no LinkedIn e falavam com empresas, 
funcionários e enviam o portfólio deles.
Adivinha só o que aconteceu? Eles estão empregados hoje 
ganhando bem e trabalhando com algo que eles gostam, se liga só 
na reação dele:
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
E esse é um dos projetos que está no portfólio do Derick:
https://gabrielsilvestri.com.br/uipb-ppgabrielsilvestri.com.br
Então não fica achando que é só ter um portfólio bonitinho e que 
simplesmente vai aparecer do nada.
NÃO! Tu tem que ir atrás, se mexe, fala com as pessoas e manda teu 
portfólio. A gente mora em um pais com mais de 200 milhões de 
pessoas e mais de 300 mil empresas de tecnologia.
Não é POSSÍVEL que não exista uma vaga pra ti nesse mercado, é só 
tu ir atrás DIARIAMENTE que tu consegue. Eu não sosseguei até 
conseguir a minha vaga, e eu te sugiro fazer o mesmo.
Erro #05: Estudar aleatoriamente sem método
Deixa eu te contar uma história sobre a Alice no pais das maravilhas.
Tava lá a Alice, recém tinha entrado no país das maravilhas e ela 
tava andando bem bela pela floresta até que... Ela se deparou com 
uma bifurcação, ela tinha 2 caminhos pra seguir.
E dai aparece o gato na árvore e a alice olha pra ele e fala:
-Gato, qual caminho eu devo seguir?
E o gato responde:
-Onde você quer chegar Alice?
E a alice diz:
-Eu não sei!
Daí o gato diz algo genial pra ela:
-Pra quem não sabe pra onde quer ir, tanto faz o caminho.
O que isso significa? Que se você não tem clareza e um caminho do 
qual deseja seguir as chances são é que você não vai ir pra lugar 
nenhum ou vai seguir o rumo que alguém quer que você siga, e eu 
tenho certeza que não é isso que você quer.
Você precisa usar um método de aprendizado pra te colocar no 
caminho certo, assim tu vai ter resultados mais rápidos aprendendo 
as coisas que realmente importam.
E advinha só... É justamente isso que tô fazendo aqui contigo agora. 
Te colocando no caminho certo com esse eBook. Parabéns tu 
acabou de receber acesso à um método que vai economizar pelo 
menos 2 anos de estudo aleatório da tua vida.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
O que isso significa? Que se você não tem clareza e um caminho 
do qual deseja seguir as chances são é que você não vai ir pra 
lugar nenhum ou vai seguir o rumo que alguém quer que você siga, 
e eu tenho certeza que não é isso que você quer.
Você precisa usar um método de aprendizado pra te colocar no 
caminho certo, assim tu vai ter resultados mais rápidos aprendendo 
as coisas que realmente importam.
E advinha só... É justamente isso que tô fazendo aqui contigo agora. 
Te colocando no caminho certo com esse eBook. Parabéns tu 
acabou de receber acesso à um método que vai economizar pelo 
menos 2 anos de estudo aleatório da tua vida.
Passo 04: O detalhe mais 
importante de todos sobre UX/UI 
Design
Conforme te disse anteriormente, a parte de UX é sobre pesquisa, 
sobre pessoas. Mas... Também temos a parte de criar interfaces que 
sejam fáceis de usar, agradáveis e que ajudem o usuário a concluir 
seus objetivos.
Tá Gabriel, mas e a interface? Como eu crio uma boa interface para 
os usuários com uma "UX" boa? A melhor maneira de começar a 
criar essa noção é estudando sobre as Heurísticas de Nielsen.
Jakob Nielsen é basicamente o pai da Usabilidade, em conjunto com 
o Don Norman (Um dos primeiros Designers da Apple) fundaram a 
NNGroup que hoje é a maior referência e mais confiável fonte sobre 
estudos de usabilidade e UX.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Em 1990 Jakob Nielsen e Rolf Molich desenvolveram algumas regras 
de ouro que garantem uma boa experiência em telas digitais. 4 anos 
depois essas regras foram testadas e comprovadas através de 249 
estudos de usabilidade.
Por que isso é tão importante e por que você precisa aprender? Vou 
usar as próprias palavras do Jakob Nielsen pra explicar:
"As 10 heurísticas se mantém relevantes e iguais desde 1994. Quando 
algo funciona e é verdadeiro por 26 anos é porque provavelmente vai 
continuar funcionando para as próximas gerações de interfaces."
Ou seja, se a parada funciona e trás resultado a mais de 20 anos, por 
que não usar e tirar o máximo proveito? Estude e decore essas 
regras:
As 10 Heurísticas de Jakob Nielsen para criar boas Interfaces
Essas 10 regras servem como um "checklist" do qual você pode 
verificar se uma interface segue elas ou não. É uma ótima maneira 
de pegar uma noção do que exatamente é considerado uma boa 
interface.
Se você quiser ver qualquer uma das heurísticas na prática basta 
baixar qualquer app da Google e você perceberá que eles seguem à 
risca. Enfim, vamos a elas...
01 - Visibility of system status (Visibilidade do status do 
sistema)
O que é: Informar o usuário o que está acontecendo de maneira 
clara e visível
Quando acontece? Barras de progesso, spinners, loadings, etc... 
Basicamente  é demonstrar sempre quando alguma coisa estiver 
acontecendo na interface.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
02 - Match between system and real world (Similar ao mundo 
real)
O que é: Criar algo que seja comum para o usuário fazendo o uso de 
convenções já conhecidas pelo usuário e trazendo familiaridade
Quando acontece? Depois de entender quem são os usuários e qual 
é a melhor maneira de se comunicar com eles.
03 - User Control and Freedom (Usuário com liberdade para 
controlar e escolher)
O que é: Usuários muitas vezes cometem erros, eles precisam de 
uma maneira simples e fácil de voltar atrás sem precisar passar por 
um processo longo demais.
Quando acontece? Ao executar ações do tipo excluir, enviar, CTRL+Z, 
cancelar, etc... Nesses casos você sempre oferecerá maneiras de 
desfazer a ação de maneira simples e sem punições.
04 - Consistency and standards (Consistência e padrões)
O que é: Os usuários não devem ficar em dúvida se uma palavra, 
ação ou situação significa coisas diferentes. Procure usar padrões já 
pré estabelecidos.
Quando acontece? Quando uma interface segue uma linguagem 
consistente sem variar muito botões, ações, textos, etc... Isso 
incluem cores, tipografia, etc.
05 - Error prevention (Prevenção de erros)
O que é: Escrever boas mensagens de erro é importante, mas 
melhor que isso é criar uma interface da qual faça o usuário errar 
menos. 
Quando acontece? Eliminar ao máximo as possibilidades do usuário 
errar sempre avisando e alertando possíveis problemas.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
06 - Recognition rather than recall (Reconhecer ao invés de 
lembrar)
O que é: Fazer os usuários reconhecerem melhor as coisas ao invés 
de fazer eles lembrar de algo que você criou.
Quando acontece? Um bom exemplo disso são ícones diferente de 
uma barra inferior de app. Se você usar icones muito diferentes do 
que as pessoas estão acostumadas o usuário provavelmente não 
lembrará o que significa cada um. Porém, se você colocar um título 
nesses icones (ex: Inicio, Pesquisar, Opções) você deixará eles mais 
reconhecíveis.
07 - Flexibility and effiency of use (Flexibilidade e eficiência de 
uso)
O que é: Atalhos, maneiras de deixar a experiência mais fluida e 
dinâmica.
Quando acontece? Criando atalhos ou aceleradores, coisas que vão 
facilitar o uso e trazer mais velocidade no uso. Ou até mesmo 
personalização e customização da sua interface.
08 - Aesthethic and minimalistic design (Estética e design 
minimalista)
O que é: Interfaces não devem conter informações ou visuais 
exagerados e irrelevantes.
Quando acontece? Ao criar interfaces que não são cheias de efeitos, 
cores pra todo lado e poluição visual. Quanto mais informação você 
coloca, mais confusa a interface fica.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
09 - Help users recognize, diagnose, and recover from errors 
(Ajude usuários a reconhecer, diagnosticar e se recuperar de 
erros)
O que é: As famosas mensagens de erro claras e fáceis de entender.
Quando acontece? Ao escrever boas mensagens de erro que 
fornecem ajuda e mostram para o usuário o que aconteceu e como 
ele pode se recuperar. Uma mensagem de erro nesse estilo é 
péssima: "Erro 18731 contato administrador" Já uma mensagem 
assim é muito melhor: "Erro. Sua senha expirou, desejacriar uma 
nova senha?"
10 - Help and documentation (Ajuda e documentação)
O que é: As melhores interfaces não precisam de um tutorial, mas 
quando possível crie uma documentação com ajuda e tutoriais da 
interface.
Quando acontece? Criando uma seção de ajuda ou até mesmo de 
maneira mais simples através de algumas telas de boas vindas no 
seu app. 
Ao dominar essas 10 regras e colocar isso em prática você 
conseguirá criar boas interfaces, que é o famoso papo de criar uma 
interface com uma "ux". (Apesar de que criar uma UX é meio que 
impossível, mas ok, você entendeu).
Mas claro... Não adianta você só saber a base teórica se você ainda 
não sabe como criar uma interface. É por isso que você deve 
aprender o...
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Passo 05: Como aprender a usar 
qualquer software de UI Design 
como o FIGMA, Adobe XD ou 
Sketch
Agora que você sabe o basicão sobre UX, só falta aprender a criar 
interfaces e aplicar as 10 heurísticas do Nilsen. Porém...
Existem mil e uma ferramentas para criar interfaces hoje em dia... 
Será que você precisa aprender todas? E a resposta é... Não
No Design Gráfico você precisa aprender a usar o InDesign, 
Photoshop ou Illustrator. E cada uma dessas ferramentas é um 
pouco diferente e possuem uma curva de aprendizado mais alta.
Em UX/UI não é assim... As ferramentas de UI Design  fazem 
basicamente a mesma coisa: Criam interfaces. 
Minha sugestão é que você use o FIGMA, ela é grátis e funciona em 
qualquer navegador de internet. Você não vai gastar mais de 1 hora 
aprendendo a usar essa ferramenta.
Todas as ferramentas de UI Design possuem 8 funções, ao invés de 
focar em aprender todas as ferramentas eu recomendo que você 
aprenda sobre as 8 funções que qualquer ferramenta de design 
possui:
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
01- Frame: Também conhecida como artboard ou quadro.
02- Formas geométricas: Retângulo, elipse, polígono, etc
03- Modelo de cores em HSB: Muito útil pra criar variações e 
paletas
04- Pentool: Manipular vértices e vetores
05- Texto: Posicionar textos
06- Operações booleanas: Unir, excluir, subtrair, etc
07- Camadas e modificadores: Organizar objetos na tela
08- Efeitos: Sombras, gradientes, etc
E adivinha só o que você consegue fazer com essas 8 tools… Criar 
interfaces. E sim, claro. Cada uma das ferramentas tem sim suas 
exclusividades, mas no final das contas o que importa é o básico e 
os princípios de UI Design. A simplicidade é o último grau de 
sofisticação.
É bem mais simples do que parece, você só precisa abrir o FIGMA, 
clicar e fuçar.
Por sinal, eu fiz um video onde eu ensino como usar o FIGMA da 
maneira mais simples possível, aqui está o link da aula: 
https://www.youtube.com/watch?v=vg-INqhKD5c
Assista esse vídeo somente APÓS terminar de ler esse eBook, 
ainda tenho mais coisas importantes para te ensinar. Como os...
https://gabrielsilvestri.com.br/uipb-pp
https://www.youtube.com/watch?v=vg-INqhKD5c
gabrielsilvestri.com.br
Passo 06: Os princípios para criar 
interfaces visualmente agradáveis
Com as 10 heurísticas você aprendeu a como criar interfaces que 
funcionam e ajudam os usuários. Agora você aprenderá os 6 
princípios para criar algo que é bonito e moderno. 
Porque afinal de contas. Não adianta você ser um mestre da UX se 
as suas telas são feias e pouco atrativas né?
Se você tem dúvidas de...
- Como posicionar e alinhas os elementos na tela corretamente
- Como escolher cores e tipografias
- Como saber se a interface é fácil de ser utilizada
É através do domínio dos princípios do Design de Interfaces que 
você vai resolver esse problema. E qual é a moral desses princípios? 
Eles são como se fossem blocos de lego do Design de Interfaces.
E não, não estou falando de usar templates prontos.
É no sentido de que cada "bloquinho" ou princípio é algo que você 
vai incluir na sua interface para deixar ela melhor. Ao total são 6 
princípios e cada um deles é responsável por uma coisa diferente. 
Que são...
1- Cores e Tipografia 
2- Espaço
3- Hierarquia Visual
4- Alinhamento
5- Consistência
6- Affordances e Signifiers
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
1- CORES:
Primeiro de tudo que quero te falar sobre cores é pra você deixar de 
lado um pouquinho essa parada toda de psicologia das cores e tudo 
mais.
Eu sei que é importante e tudo mais, porém no inicio agora eu quero 
DESCOMPLICAR o teu processo de aprendizado, então vamo 
esquecer essa parada toda por enquanto ok?
Modelo HSB de cores:
A primeira coisa que tu precisa saber sobre cores em design de 
interfaces é o Modelo HSB de cores. Para trabalhar com cores em 
Design de Interfaces vamos sempre utilizar o modelo HSB que 
significa: Matiz, Saturação e Brilho.
HUE = Matiz que é basicamente a cor que você vai trabalhar
SATURATION = Saturação, que é o quão vibrante uma cor é, em 
100% a cor fica estourada e em 0% a cor fica cinza
BRIGHTNESS = Brilho, que é o quão brilhosa uma cor é. Em 0% a cor 
fica apagada e em 100% a cor fica brilhante, esse valor funciona 
literalmente como se fosse uma lampada ficando cada vez mais 
acessa ou apagada.
h s b
H = Hue (Matiz)
S = Saturation (Saturação)
B = Brightness (Brilho)
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Ao manipular esses 3 valores tu consegue criar variações de cores, e 
isso é extremamente importante porque uma interface possui 
VÁRIAS cores diferente e não só 3 ou 4.
Dá só uma olhada nessa interface do Spotify por exemplo, existem 
VÁRIOS tons de cinza e de preto aqui, e é justamente isso que torna 
essa interface tão bonita. E é isso que tu precisa aprender, a criar 
essas variações de cores na tua interface.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Para você começar a se acostumar a trabalhar com cores você vai 
começar somente com DOIS tipos de cores na sua interface.
1- Cor principal
2- Tons de cinza
E cada uma dessas 2 cores vão ter diversas variações de versões 
claras e escuras. E pra que serve essas variações? Você vai usar para 
colorir o restante da interface, botões, tipografia, etc...
SÓ ISSO POR ENQUANTO. Ahh Gabriel mas eu quero fazer uma 
interface com todas cores do arco íris. Sinto muito, mas por 
enquanto eu quero que tu aprenda a trabalhar MUITO BEM usando 
só esses 2 tipos de cores.Depois que você ficar bom nisso tu pode 
começar a trabalhar com 3 cores, 4 etc...
Como criar uma paleta de cores:
1- Escolha a cor que você vai querer trabalhar
O ideal é escolher algo que não seja nem muito claro nem muito 
escuro, assim você vai conseguir fazer boas variações e abrir bem 
essa cor.
2- Crie as variações escuras da cor
Para fazer isso usando o modelo HSB de cores você vai: 
- Aumentar a saturação
- Diminuir o brilho
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
3- Crie as variações claras da cores
Para fazer isso usando o modelo HSB de cores você vai: 
- Diminuir a saturação
- Aumentar o brilho
4- Crie os tons de cinza
Comece com um cinza não tão escuro nem muito claro e que seja 
algo pouquinho azulado.
Para criar as variações de cinza você vai mexer somente no brilho, 
mais nada. Algo legal a ser levado em consideração. Nem tudo 
precisa ter a sua cor principal, não é porque sua cor principal é azul 
que você precisa pintar todo o fundo da sua UI de azul.
Eu gosto bastante de usar com bastante cuidado as cores não 
exagerando pra não criar um visual pesado demais.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Tipografia:
Em tipografia tem 4 coisas que fazem toda a diferença e que eu 
preciso muito que você aprenda.
1. No inicio use apenas uma fonte
2. Use boas fontes próprias para interfaces
3. Aprenda a trabalhar com escala
4. Use e abuse da legibilidade.
Por que começar só comuma fonte? Pela simplicidade. É um pouco 
complexo combinar mais de 2 fontes, então comece só com uma 
por enquanto.
O que torna uma fonte "boa"? 
Uma boa fonte para design de interfaces é aquele tipo de fonte que 
foi criada especificamente para melhorar legibilidade e uso em telas 
digitais.
No seu windows ou mac existem centenas de fontes que foram 
projetadas para funções específicas... Usar aleatoriamente não é 
uma boa ideia, é por isso que você deve usar com cuidado.
Onde conseguir boas fontes? Nesses sites:
Typewolf, Google Fonts e Adobe Fonts.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Porém pra facilitar a sua vida eu separei algumas fontes gratuitas 
pra você começar a usar:
Títulos e subtítulos:
Roboto, Montserrrat, Inter
Corpo de texto:
Open Sans, Roboto, Source Serif Pro
Dashboards:
Roboto, Source Sans, Lato
Agora vamos falar sobre algo que todo mundo tem dúvida: Qual 
tamanho de fonte usar?
ESCALA:
Escala é uma parada meio loca, você vai ver por aí que existem 
milhares de maneiras de criar escalas usando fibonacci, cálculos de 
porcentagem e um monte de coisa.
Eu quero te mostrar a maneira mais simples de todas que é usar 
uma escala já pronta. Sendo bem honesto contigo, o teu cliente final 
não liga muito se você calculou toda a escala de tamanhos usando 
um método maluco, ele quer só o resultado final.
É por isso que eu uso a escala de tamanhos do Google Material, ela 
é super versátil e funciona pra MUITA coisa. Nos casos em que ela 
não me serve eu adapto e faço ela funcionar, simples assim.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Essa é a escala da Google:
12px
14px
16px
18px
20px
24px
30px
36px
48px
60px
72px
12px
14px
16px
18px
20px
24px
30px
36px
48px
60px
72px
https://gabrielsilvestri.com.br/uipb-pp
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Duis a cursus tortor, et feugiat turpis. Proin et rutrum 
nunc. In eu est efficitur, tempor enim vitae, imperdiet 
sem. Nunc quis ex ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Duis a cursus tortor, et feugiat turpis. Proin et rutrum 
nunc. In eu est efficitur, tempor enim vitae, imperdiet 
sem. Nunc quis ex ipsum.
gabrielsilvestri.com.br
Ahh mas Gabriel, como eu uso esse treco na prática? Simples, tu vai 
experimentar os tamanhos e ver quais ficam mais parecidos com as 
referências que você estudou.
Tu vai tentar seguir um padrão do que já é amplamente utilizado. E 
você vai ver que com essa escala vai ser bem simples.
Legibilidade.
Não adianta de nada você saber escolher uma boa fonte, usar uma 
boa escala se você usar elas da maneira errada.
Tem duas maneiras de você melhorar a legibilidade dos textos da 
sua interface que é através da largura do parágrafo e altura de 
linha.
Largura de parágrafo é simples, é só você não criar linhas longas 
demais eu recomendo algo em torno de 70 à 140 caracteres 
conforme tu tá vendo aí.
Já na altura de linha, quando ela for curta demais o texto fica 
esmagado e feio, aumentando um pouco esse espaço você melhora 
a legibilidade e também dá um toque de espaço no texto, que fica 
bem bonito.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a cursus tortor, et feugiat turpis. Proin et rutrum nunc. In eu est 
efficitur, tempor enim vitae, imperdiet sem. Nunc quis ex ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a cursus tortor, 
et feugiat turpis. Proin et rutrum nunc. In eu est efficitur, tempor enim vitae, 
imperdiet sem. Nunc quis ex ipsum.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
E por fim vamos falar sobre alinhamento.
O alinhamento que você sempre vai querer usar é o alinhado à 
esquerda. Ele é o que mais tem legibilidade, a gente naturalmente já 
está acostumado a ler da esquerda para direita. Centralizado 
funciona bem para textos mais decorativos. 
Alinhado à direita já não é algo muito bom, mas funciona quando é 
algo mais decorativo e parágrafos bem curtinhos.
EM HIPÓTESE ALGUMA você vai usar alinhamentos justificado. Esse 
alinhamento não serve para interfaces digitais, a utilidade dele é 
para LIVROS E DOCUMENTOS que é um formato que você precisa 
aproveitar o máximo de espaço possível dentro da folha.
No digital quando você usa justificado você acaba criando esses 
buraco no meio do texto que o pessoal chama de caminhos de rato, 
isso é péssimo e você deve evitar.
É isso, essa parte é pra ser bem simples e prática pra vocês NÃO 
esqueceram e já começarem a conseguir trabalhar com fontes.
Ahh mas Gabriel qual fonte eu devo utilizar? Testa. Essa é a dica 
que tenho pra te dar. 
Você nunca vai conseguir se decidir antes de testar, eu normalmente 
testo umas 10 ou 15 fontes antes de escolher qual que eu vou 
utilizar.
Aqui está um textinho 
motivador pra usar como 
exemplo nesse slide.
Esquerda Centralizado Direita
Justificado 
 
Aqui está um textinho 
motivador pra usar como 
exemplo nesse slide.
Aqui está um textinho 
motivador pra usar como 
exemplo nesse slide.
Jamais utilize esse tipo de alinhamento 
justificado isso só vai caminhos rato horrorosos 
e dificultar sua leitura. Esse tipo de 
alinhamento só serve para documentos e livros 
tendo em vista que o objetivo dele é para 
economizar espaço na impressão.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
2- Espaço em branco.
Também conhecido como espaço negativo ou espaço em branco. 
Esse princípio diz a respeito do espaço que você define entre os 
demais elementos de uma interface.
Uma interface com uma boa legibilidade, usabilidade e elegância 
possui muito espaço. É através da aplicação de espaço que você 
consegue definir com maestria, Ordem, Organização e Ênfase nos 
elementos de uma interface.
Veja o exemplo do Google Analytics, é uma interface que possui 
muitos dados a serem lidos, a aplicação de espaço micro e macro 
facilita muito a legibilidade da interface.
Existem dois principais tipos de espaço: O espaço micro e o espaço 
macro.
Espaço micro diz a respeito do espaço interno dos elementos de 
uma interface.
Já o macro é o espaço entre grupos de elementos.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Espaço micro:
Espaço macro:
Espaço MICRO
Espaço MICRO
Espaço MICRO
Espaço MICRO
Espaço MICRO
Espaço MICRO
Espço MACRO
Espaço MACRO
Espaço MACRO
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
3- Grids e alinhamento
Um grid é como se fosse o esqueleto de uma interface. O principal 
uso de um grid é definir uma regra de organização e alinhamento 
dos diversos elementos que uma interface possui.
Grids de interfaces digitais não possuem linhas horizontais (rows). 
Isso se deve ao fato de que não existe um controle 100% exato da 
altura e largura de uma tela. Todas as interfaces que você criar vão 
precisar se adaptar conforme o tamanho da tela do usuário, ou seja, 
é praticamente impossível você definir uma regra de altura e largura 
de todas interfaces do mundo.
Grids em interfaces digitais é um assunto que pode chegar à níveis 
mais complexos de cálculos, breakpoints e responsividade 
adaptativa.Mas pra descomplicar, vamos aprender sobre uma 
estrutura extremamente simples que é o grid de 3 linhas do qual é 
bem mais fácil.
Essa estrutura consiste em você criar 3 linhas guia na sua interface. 
Uma no canto direito com uma pequena margem de 30px, uma no 
centro e outra no canto esquerdo também com 30px.
Essa estrutura serve tanto para mobile quanto desktop, veja como 
funciona no exemplo abaixo:
Essa frase aqui pode 
conter informações 
incríveis sobre algo:
• Criaturas Fantásticas
• Rebimbocas 
• Como Vender Água
Passo 01
Essa frase aqui pode 
conter informações 
incríveis sobre algo:
• Criaturas Fantásticas
• Rebimbocas 
• Como Vender Água
Passo 02
Passo 03
Essa frase aqui pode 
conter informaçõesincríveis sobre algo:
• Criaturas Fantásticas
• Rebimbocas 
• Como Vender Água
Como funciona
COMPRAR
Uma frase muito 
cativante aqui pra 
ocupar espaço
Essa frase aqui pode conter informações incríveis sobre algo:
• Criaturas Fantásticas
• Rebimbocas da Parafusadeira
• Como Vender Água para um Peixe
COMPRAR
mldm
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
4- Consistência visual
Consistência é algo que diz a respeito de alguma coisa que segue 
um determinado padrão ou ordem pré estabelecida. Interfaces com 
muitas inconsistências visuais passam a impressão de algo que foi 
feito as pressas e mal revisado.
São esses elementos que precisam sempre estar consistentes na 
sua interface:
A) Espaço e escala de tamanhos
Maneira inconsistente: Utilizar tamanhos aleatórios entre os 
elementos de uma interface.
Maneira consistente: Definir uma hierarquia de escala e tamanhos 
para cada elemento da interface
B) Cores
Maneira inconsistente: Usar cores “semelhantes” aleatoriamente
Maneira consistente: Usar uma paleta de cores funcional e 
selecionada
C) Tipografia
Maneira inconsistente: Não definir uma escala tipográfica, escolher 
os tamanhos de maneira aleatória toda vez que for posicionar um 
texto.
Maneira consistente: Definir uma escala tipográfica e documentar, 
definir famílias de fontes para sua interface.
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
5- Hierarquia Visual
É através de uma hierarquia visual que você vai definir o que é mais 
importante em uma interface. Essa hierarquização é aplicada da 
mesma maneira que o princípio da consistência. Ou seja, você vai 
dar menos e mais destaque aos seguintes elementos:
• Tipografia (peso)
• Cores (contraste)
• Escala de tamanhos
• Espaço
• Agrupamento
Entrar
Seu email
ENTRAR
CADASTRAR
ESQUECI MINHA SENHA
Sua senha
Entrar
Seu email
ENTRAR
CADASTRAR
ESQUECI MINHA SENHA
Sua senha
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
6- Affordances e Signifiers
Affordances
É uma pista da função ou forma de como alguma coisa deve 
funcionar. É basicamente um empurrãozinho gentil que você 
precisar dar no seu usuário, assim mostrando o que pode ser feito 
com algum elemento.
Uma das maneiras mais utilizadas de dar pistas visuais é através de 
sombras e cores (conforme falei no principio anterior). 
Veja o exemplo abaixo, quanto mais pequenos detalhes e pistas são 
adicionados ao botão e formulário mais “usável” ele fica.
Signifiers
Um signifier é literalmente algo que dá significado e explica o que é 
uma determinada função, botão ou elemento. Signifiers vem em 
formatos de botões, mensagens de erro ou labels:
Muito evidentePouco evidente
SAIBA MAISSAIBA MAISSAIBA MAISSAIBA MAISCLIQUE AQUI
Sua senha
8+ Caracteres e simbolos especiais...
••••••••••••••••
Entrar
Seu email
ENTRAR
CADASTRAR
ESQUECI MINHA SENHA
Sua senha
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Passo 07: Como se tornar UX/UI Designer e 
ganhar R$ 4.500,00 de salário
Com todas essas informações agora você finalmente saiu do zero e 
aprendeu o basicão sobre UX e UI. Agora resta colocar isso tudo em 
prática.
Quero te apresentar uma maneira de conseguir resultados e 
conquistar a tão sonhada primeira vaga como UX/UI Designer 
ganhando R$ 4.500,00 por mês.
O que você precisa é de um método. Ele funciona como se fosse um 
GPS, você sempre saberá qual a próxima esquina que você precisa 
virar ou qual o próximo destino, dessa forma você nunca estará sem 
direção. 
Quero te convidar para conhecer o sistema completo que já formou 
mais de 850 UX/UI Designers, o curso UX/UI Design à Prova de 
Balas.
Ao colocar em prática os conhecimentos do curso você 
conseguirá...
- Conquistar uma vaga como UX/UI Designer nos próximos 3 meses
- Ganhar um salário de R$ 4.500,00 reais atuando nessa profissão
- Trabalhar em empresas inovadoras estilo Nubank, Google e 
Netflix
Você conseguirá ter esses resultados mesmo que você...
- Esteja começando agora e não saiba nada sobre Design, 
Criatividade ou por onde começar
- Não saiba mexer em nenhuma ferramenta como o Sketch, Adobe 
XD ou Figma
- Não tenha formação ou diploma
https://gabrielsilvestri.com.br/uipb-pp
gabrielsilvestri.com.br
Com a metodologia do UX/UI Design à Prova de Balas você terá 
acesso à um arsenal que transforma pessoas comuns em UX/UI 
Designers.
E diferente de outros cursos de UX e UI que você vê por aí, o UX/UI 
Design à Prova de Balas vai bem mais afundo e te ensina muito mais 
do que somente como mexer em softwares como o Adobe XD, 
Sketch ou Figma. 
Você aprenderá na prática as principais habilidades de UX e UI 
Design, tudo com exemplos práticos e claros.
Eu demorei muitos anos para realmente entender tudo sobre essa 
área e como conseguir resultados de forma rápida, eficaz e integra.
E não se preocupe, porque você não vai precisar demorar anos de 
esforço para conseguir isso também.
Com esse método você terá acesso à tudo isso, sem complicações e 
de maneira simplificada.
Clique no botão abaixo para se tornar UX/UI Designer:
Sim, quero virar UX/UI Designer
https://gabrielsilvestri.com.br/uipb-pp
https://gabrielsilvestri.com.br/uipb-pp?utm_source=fbads&utm_medium=ebook&utm_campaign=ppuipb
gabrielsilvestri.com.br
Obrigado
Espero que você tenha gostado do meu eBook e sei que em breve 
você vai conquistar sua tão sonhada primeira vaga como UX/UI 
Designer. Quero ficar a sua disposição para poder te ajudar.
Nesse eBook eu compilei basicamente tudo que eu considero mais 
importante pra uma pessoa que está começando do absoluto zero. 
Leia e releia esse eBook para ter melhores resultados. E claro, dê 
uma boa olhada no meu método também.
Um abraço, Gabriel Silvestri.
https://gabrielsilvestri.com.br/uipb-pp