Quer se tornar um UI/UX Designer em 2021?

Se você pensa em se tornar um UI/UX Designer e não sabe por onde começar, você chegou no lugar certo. Esse post foi feito para você.

Antes de mais nada, gostaria de dar alguns disclaimers... 

O primeiro: esse post engloba a minha opinião sobre o que faz um bom designer. Se você tem uma opinião diferente, manda mensagem no Twitter e vamos trazer mais boas discussões e conteúdos interessantes pra esse meio. 😁

Segundo: esse post veio de um tweet que eu fiz em Janeiro de 2021, e quando pesquisei por “Roadmap UI/UX Designer”, não achei NENHUM artigo com um Roadmap de verdade. Ou seja: eu convido você a replicar esse post e melhorá-lo, pra que mais iniciantes tenham acesso.

Como aproveitar melhor esse post?

Se você busca realmente aprender com esse post, eu sugiro que você faça uma pesquisa no Google sobre cada um dos tópicos abordados.

Mantenha um “diário” da sua jornada de aprendizado (pode usar Google Docs, Notion, app de Notas, o que for melhor e mais acessível para você).

Compartilhe o conhecimento aprendido com alguém. Pode ser com seu vizinho, colega de sala, nas redes sociais... Explicar pra alguém ajuda a fazer sentido na sua cabeça.

O melhor jeito de conseguir a resposta certa é postando a resposta errada na internet.

TL;DR

1. Aprenda os fundamentos
2. Entenda os princípios
3. Aprenda as ferramentas
4. Conheça os elementos gráficos
5. Aprenda o processo
6. Pratique. Pratique. Pratique.
7. Torne-se contratável

Vamos nessa. 😉

1. Aprenda os fundamentos

Você precisa começar de algum lugar. A maioria das pessoas criam dependência em suas habilidades natas, na sua própria inspiração e criatividade.

O que elas não entendem é que:

1. Habilidades são treináveis. Você não precisa nascer sabendo, ou ter pré-disposição. Se focar no básico, nos fundamentos, e usar o tempo e esforço ao seu favor, é inevitável que você “chegue lá”.
2. Inspiração é fruto do trabalho. Quanto mais você faz, mais você consegue encontrar inspiração. Como assim?
3. É que criatividade é o cérebro criando conexões neurais. Pra que isso aconteça, você precisa fazer seu cérebro trabalhar.

E como Kobe Bryant sempre dizia, foque nos fundamentos. É à partir do domínio dos fundamentos que você pode quebrar regras, ou criar suas próprias regras.

Fundamentos (ou Elementos) do Design

• Tipografia: 95% da web é tipografia. Textos e mais textos. Se você dominar a arte da tipografia, vai dominar 95% da web.
• Cores: cor é o que harmoniza uma experiência visual. É uma ferramenta usada para comunicar o tom certo de uma mensagem para a audiência.
• Espaço: é a distância entre objetos e suas proporções. Espaço positivo é aquele ocupado por objetos. Espaço negativo é o gap entre objetos.
• Linhas: a forma mais básica do design. Linhas, pros nossos olhos, servem de guias — para onde devemos olhar.
• Formas: são os formatos criados pelos elementos visuais. Podem ser formas geométricas simples ou complexas.
• Grid: ajudam a guiar e conectar os elementos, formando um organismo que faça sentido visualmente.
• Layout/Composição: é o total de todos os elementos e princípios presentes combinados.
• Princípios: são “regras” que fazem a conexão entre como nós, humanos, percebemos as coisas, e como o mundo funciona. No design, princípios servem para guiar as nossas composições.

Pesquise mais a fundo sobre cada um desses elementos. Eles serão seus melhores amigos durante a sua jornada.

Eu nunca fico entediado com os fundamentos.

2. Entenda os princípios

Existem 2 tipos de princípios no design:

1. Princípios de composição: o foco é em como nosso cérebro percebe os elementos na página, e no sentimento que isso gera.
2. Princípios de experiência e usabilidade: o foco é em como os elementos nos ajudam (ou atrapalham) a realizar tarefas, seja ela ler uma placa na rodovia de alta velocidade importante, ou realizar uma transferência bancária virtualmente.

Vamos falar um pouco de cada um desses dois tipos de princípios.

Princípios de Composição

• Balanço
• Hierarquia
• Dominância
• Contraste
• Espaço
• Harmonia
• Escala/Proporção

Se você dominar esses princípios, se tornará um UI Designer imparável.

E pra te ajudar, aqui estão alguns recursos:

Tutorial de Tipografia

Como criar composições dinâmicas

3 princípios para melhorar o seu processo de design de logo

Princípios de UX

Esses princípios são um pouco mais complexos, pois envolve como a nossa mente funciona, e o por quê dos nossos comportamentos.

Segundo esse post bem completo do springboard, ele lista 16 princípios importantes de Experiência do Usuário (UX):

• Atender as necessidades do usuário
  
• Ter ciência onde você está no processo de design
  
• Construir uma hierarquia bem-definida
  
• Manter a consistência
  
• Entender acessibilidade
  
• Ter ciência do contexto
• Usabilidade em primeiro lugar
• Menos é mais
• Utilizar linguagem simples
• Utilizar o poder da tipografia
• Feedback importa
• Confirmar antes de se comprometer
• Entender que o usuário está no controle
• Design com personalidade
• Dominar os princípios de composição visual
• Criar uma narrativa no design

Recomendo a leitura. Outros recursos:

🔗 Laws of UX:

🔗 7STEPUX® Book

3. Aprenda as ferramentas

Okay, você já sabe o básico que tem que aprender, mas você só vai conseguir pôr em prática se aprender as ferramentas.

Quais ferramentas?

• Figma / Adobe XD / Sketch (Web / UI Design / Prototipação)
• Photoshop (Tratamento de fotos / Design Gráfico)
• Illustrator (Tratamento de vetores / Design Gráfico)
• After Effects / Principle / Framer (Motion / Prototipação)
• Blender / Cinema 4D (Modelagem e Animação 3D)
• HTML / CSS / Javascript (Web / Código)

Cada ferramenta tem seus fortes e fracos. Para UI/UX, uma das mais utilizadas têm sido o Figma, pois é uma ferramenta que sempre está se atualizando, cada vez se tornando mais poderosa.

Photoshop e Illustrator também são muito utilizadas no design, em geral. Mesmo que você não as use para trabalhar, você provavelmente precisará usá-las algum dia para extrair algum asset gráfico que precisa para o seu trabalho. Portanto, são ferramentas importantes para se aprender o básico.

Se você trabalha, ou pretende trabalhar com apps/sites para Web, você precisa ter conhecimento básico de HTML, CSS e JS. Isso te tornará um recurso muito bom para sua equipe, principalmente para seus colegas programadores (que terão que transformar seus designs em realidade).

4. Conheça os elementos gráficos

A sigla UI significa Interface do Usuário. A interface na qual vamos nos referir é a GUI (Graphical User Interface), Interface Gráfica do Usuário.

Em toda GUI existem elementos gráficos que te ajudam a te contextualizar, compreender uma informação ou realizar uma ação.

Na Web existem elementos específicos que você precisa aprender: textos, imagens, campos de formulário, etc. Como no exemplo abaixo:

Sendo, assim, possível construir páginas como essas:

Elementos básicos:

• Textos (parágrafos, títulos, quotes, etc)
• Imagem
• Vídeo
• Caixa
• Tabela

Elementos de input:

• Checkboxes
  
• Radio buttons
  
• Dropdown
• Listas
• Botões
• Toggles
• Campos de Texto
• Campos de Data

Elementos de navegação:

• Breadcrumb
• Slider
• Campo de Pesquisa
• Paginação
• Tags
• Ícones

Elementos informativos:

• Tooltips
• Ícones
• Barra de Progresso
• Notificação
• Caixas de Mensagem
• Pop-ups

Mais recursos sobre elementos de Interface de Usuário:

• Usability.gov
• Repositório de Design Systems

5. Aprenda o processo

Processo é a base de todo projeto lucrativo. É o guia que você precisa para saber onde você está, onde quer chegar, e qual caminho percorrer.

Existem váááááários processos, e cada empresa tem uma versão um pouco diferente do seu processo. Eu vou focar no principal:

1. Pesquisa e análise: você entende melhor para que aquele projeto existe, entende os objetivos de quem quer realizar aquele projeto e define os objetivos do próprio projeto.
2. Prototipação de baixa fidelidade: você irá desenhar wireframes e começar a definir os estilos (com base no branding atual, ou definindo uma nova identidade visual).
3. Testes: nessa etapa você pode testar seus protótipos para entender se os fluxos, funcionalidades e posicionamentos de elementos estão ajudando ou atrapalhando nos objetivos definidos durante a pesquisa.
4. Prototipação de alta-fidelidade: você criará os designs em detalhe, aplicando a identidade visual por completo.
5. Apresentação/Teste/Iteração: esse é o momento em que você apresenta ou testa o design maduro, e aplica possíveis iterações nas telas antes de enviar todos os arquivos para a equipe de desenvolvedores. 
6. Desenvolvimento: como designer, sua tarefa será mais assistir os desenvolvedores no que eles precisarem para realizar um bom trabalho.
7. Lançamento: sua posição é garantir que todos os detalhes estejam certos antes de ser lançado.

6. Pratique. Pratique. Pratique.

Ninguém fica bom só porque “tem um olho bom pra design”.
Ninguém fica bom só porque “fez 20 mil cursos”.
Ninguém fica bom só lendo.

Tá achando que é brincadeira?

O único jeito de melhorar é PRATICANDO.

7. Torne-se contratável

• Tenha uma oferta
• Seja encontrável
• Seja contratável

Na prática, o que significa ser contratável?

Saiba o que você tem à oferecer para quem quer te contratar, seja como empresa ou como funcionário. O que você traz para a mesa? Quais suas habilidades, suas forças, seus conhecimentos?

Quanto mais você puder definir o resultado que gera, melhor as empresas te acharão uma boa escolha. Isso ainda te ajuda a filtrar as empresas que você não quer trabalhar.

Esteja aonde as pessoas procuram. Se as empresas que contratam designers estão no LinkedIn, tenha um perfil bem construído lá. Se as empresas procuram no dribbble.com, tenha um perfil atualizado com seus trabalhos lá. 

Você precisa estar em todos os lugares possíveis, te tornando mais fácil de entregar.

E, por último, ser contratável é se comunicar bem verbal e visualmente, com palavras, com as roupas que você usa, com seus penteados. Também significa ter ética de trabalho, auto-responsabilidade, auto-confiança, determinação, resiliência, etc.

Você precisa entregar o que diz que vai entregar, quando e como você disse que iria entregar.

---

Pronto pra se tornar um designer em 2021?