Escolar Documentos
Profissional Documentos
Cultura Documentos
PARA SE TORNAR UM
ES I G N ER
UX/UI D
E ganhar um salário de
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.
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.
gabrielsilvestri.com.br
Posso te contar uma coisa? Quero te contar porque escrevi esse
eBook e estou te dando de graça...
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).
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.
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.
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.
Eu espero que sim. Então senta a bunda na cadeira e leia esse ebook
até o final kkk, tamo junto!
gabrielsilvestri.com.br
Média salarial de UX/UI Designers
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:
Sabe por que UX/UI é tão valorizado e tem crescido tanto aqui
no Brasil?
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.
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).
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.
Mas e a faculdade?
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.
Sim, você tem. Posso te contar por que? Dom e genialidade não
existem, isso é besteira.
Esse papinho de que você precisa nascer criativo pra trabalhar com
Design é a maior bobagem que eu já vi na minha vida.
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.
gabrielsilvestri.com.br
A Melissa começou do zero, se esforçou e colocou a mão na massa e
conseguiu ter resultados.
Você só precisa seguir um método, que por sinal é algo que eu vou
te mostrar nesse eBook.
gabrielsilvestri.com.br
Passo 02: Entenda o que é UX e UI
Design e como essas duas áreas se
complementam
- UX
- UX Design
- UI
- UI Design
Usuário é uma pessoa, você, eu, sua mãe ou seu tio lá de Piracicaba.
Experiência é algo que você vivência.
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.
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.
gabrielsilvestri.com.br
E por sinal... O que diabos é UX Design então?
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.
O que é UI?
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
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.
Pra entender de fato como vai ser o seu trabalho nada mais justo do
que ver na prática um exemplo...
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 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.
gabrielsilvestri.com.br
Passo 03: Como evitar os 5 maiores
erros ao virar UX/UI Designer
Entenda isso de uma vez por todas... Não existe UX sem UI, assim
como não existe UI sem UX.
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.
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.
Daí sai do lugar da entrevista com uma cara de tacho e aprendi que
são duas áreas bem diferentes.
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.
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.
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.
Erro #04 Não adianta criar um portfólio e achar que a vaga vai
cair do céu
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.
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.
gabrielsilvestri.com.br
E esse é um dos projetos que está no portfólio do Derick:
gabrielsilvestri.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.
E o gato responde:
E a alice diz:
-Pra quem não sabe pra onde quer ir, tanto faz o caminho.
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.
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:
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
gabrielsilvestri.com.br
06 - Recognition rather than recall (Reconhecer ao invés de
lembrar)
gabrielsilvestri.com.br
09 - Help users recognize, diagnose, and recover from errors
(Ajude usuários a reconhecer, diagnosticar e se recuperar de
erros)
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...
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...
gabrielsilvestri.com.br
01- Frame: Também conhecida como artboard ou quadro.
https://www.youtube.com/watch?v=vg-INqhKD5c
gabrielsilvestri.com.br
Passo 06: Os princípios para criar
interfaces visualmente agradáveis
1- Cores e Tipografia
2- Espaço
3- Hierarquia Visual
4- Alinhamento
5- Consistência
6- Affordances e Signifiers
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.
H = Hue (Matiz)
S = Saturation (Saturação)
B = Brightness (Brilho)
hsb
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.
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
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.
- Aumentar a saturação
- Diminuir o brilho
gabrielsilvestri.com.br
3- Crie as variações claras da cores
- Diminuir a saturação
- Aumentar o brilho
Comece com um cinza não tão escuro nem muito claro e que seja
algo pouquinho azulado.
gabrielsilvestri.com.br
Tipografia:
Uma boa fonte para design de interfaces é aquele tipo de fonte que
foi criada especificamente para melhorar legibilidade e uso em telas
digitais.
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:
Corpo de texto:
Dashboards:
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.
gabrielsilvestri.com.br
Essa é a escala da Google:
12px
12px
14px
14px
16px
18px
16px
20px
18px
24px
20px
30px
24px
36px
30px
36px
48px
48px
60px
60px
72px 72px
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.
Legibilidade.
Não adianta de nada você saber escolher uma boa fonte, usar uma
boa escala se você usar elas da maneira errada.
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
E por fim vamos falar sobre alinhamento.
É 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.
Justificado
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.
gabrielsilvestri.com.br
2- Espaço em branco.
gabrielsilvestri.com.br
Espaço micro:
Espaço MICRO
Espaço MICRO
Espaço MICRO
Espaço MICRO
Espaço MICRO
Espaço MICRO
Espaço macro:
Espaço MACRO
Espço MACRO
Espaço MACRO
gabrielsilvestri.com.br
3- Grids e alinhamento
Essa estrutura serve tanto para mobile quanto desktop, veja como
funciona no exemplo abaixo:
mldm
• Criaturas Fantásticas
• Rebimbocas da Parafusadeira
COMPRAR
B) Cores
C) Tipografia
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 Entrar
Seu email Seu email
ENTRAR ENTRAR
CADASTRAR CADASTRAR
gabrielsilvestri.com.br
6- Affordances e Signifiers
Affordances
CLIQUE AQUI SAIBA MAIS SAIBA MAIS SAIBA MAIS SAIBA MAIS
Signifiers
CADASTRAR
gabrielsilvestri.com.br
Passo 07: Como se tornar UX/UI Designer e
ganhar R$ 4.500,00 de salário
-Netflix
-Criatividade
Esteja começando agoracomeçar
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.
Com esse método você terá acesso à tudo isso, sem complicações e
de maneira simplificada.
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.
gabrielsilvestri.com.br