Skip to content

Latest commit

 

History

4 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Guia de UX/UI Design

Guia de UX/UI Design

🎯 O guia para alavancar a sua carreira

UX/UI Design é a área que decide como um produto digital é pesquisado, estruturado e desenhado para que as pessoas consigam usá-lo — e queiram voltar a usar. UX (User Experience) cobre pesquisa, arquitetura de informação e usabilidade; UI (User Interface) cobre tipografia, cor, layout e design systems; e o Figma virou a ferramenta padrão do mercado para prototipar tudo isso. Este guia reúne fundamentos, cursos gratuitos e pagos, livros, ferramentas, portfólio, certificações reais e um capítulo dedicado a usar IA na prática em design — tudo verificado e organizado para quem está entrando na área ou migrando de outra profissão.

Siga nas redes sociais para acompanhar mais conteúdos:
Discord Badge Youtube Badge

⚠️ Aviso importante

Antes de tudo você pode me ajudar e colaborar, deu bastante trabalho fazer esse repositório e organizar para fazer seu estudo ou trabalho melhor, portanto você pode me ajudar das seguintes maneiras:

💡 Nossa proposta

A proposta deste guia é dar uma ideia sobre o atual panorama e guiá-lo se você estiver confuso sobre qual será o seu próximo aprendizado, sem influenciar você a seguir os 'hypes' e 'trends' do momento. Acreditamos que com um maior conhecimento das diferentes estruturas e soluções disponíveis poderá escolher a ferramenta que melhor se aplica às suas demandas. E lembre-se, 'hypes' e 'trends' nem sempre são as melhores opções.

🔰 Para quem está começando agora

Não se assuste com a quantidade de conteúdo apresentado neste guia. Acredito que quem está começando pode usá-lo não como um objetivo, mas como um apoio para os estudos. Neste momento, dê enfoque no que te dá produtividade e o restante marque como Ver depois. Ao passo que seu conhecimento se torna mais amplo, a tendência é este guia fazer mais sentido e ficar fácil de ser assimilado. Bons estudos e entre em contato sempre que quiser! 👊

🚨 Colabore

  • Abra Pull Requests com atualizações
  • Discuta ideias em Issues
  • Compartilhe o repositório com a sua comunidade

🌍 Tradução

Se você deseja acompanhar esse repositório em outro idioma que não seja o Português Brasileiro, você pode optar pelas escolhas de idiomas abaixo, você também pode colaborar com a tradução para outros idiomas e a correções de possíveis erros ortográficos, a comunidade agradece.

Guia Extenso de ProgramaçãoEnglish — Click Here
Guia Extenso de ProgramaçãoSpanish — Click Here
Guia Extenso de ProgramaçãoChinese — Click Here
Guia Extenso de ProgramaçãoHindi — Click Here
Guia Extenso de ProgramaçãoArabic — Click Here
Guia Extenso de ProgramaçãoFrench — Click Here
Guia Extenso de ProgramaçãoItalian — Click Here
Guia Extenso de ProgramaçãoKorean — Click Here
Guia Extenso de ProgramaçãoRussian — Click Here
Guia Extenso de ProgramaçãoGerman — Click Here
Guia Extenso de ProgramaçãoJapanese — Click Here

📚 ÍNDICE

🗺️ Roadmap
🚀 Por onde começar
📖 Fundamentos de UX
🎨 Fundamentos de UI e design systems
♿ Acessibilidade e WCAG
🖌️ Figma e prototipação
🎓 Cursos e formações
📚 Livros
🎥 Canais no Youtube
🎙️ Podcasts
📰 Sites, blogs e newsletters
🛠️ Ferramentas
🧪 Projetos práticos e desafios
💼 Portfólio
🤖 IA na prática
🎓 Certificações
💼 Carreira e vagas
👥 Comunidades

🗺️ Roadmap

🚀 Por onde começar

  1. Entenda a diferença entre UX e UI lendo os dois artigos abaixo (seção Fundamentos).
  2. Aprenda o vocabulário essencial: heurísticas de usabilidade, arquitetura de informação, wireframe, protótipo.
  3. Instale o Figma e faça os tutoriais oficiais gratuitos.
  4. Assista a um curso gratuito completo de Figma (seção Cursos) e replique uma tela conhecida.
  5. Leia um estudo de caso de UX (seção Ferramentas → inspiração) para entender como o raciocínio é documentado.
  6. Pratique com briefings falsos (seção Projetos práticos) e monte seu primeiro estudo de caso.
  7. Monte um portfólio simples com 2–3 estudos de caso (seção Portfólio).
  8. Participe de uma comunidade (seção Comunidades) para trocar feedback e encontrar mentoria.

📖 Fundamentos de UX

🎨 Fundamentos de UI e design systems

♿ Acessibilidade e WCAG

🖌️ Figma e prototipação

  • Figma — Ferramenta padrão de mercado para design de interface, prototipação e colaboração.
  • Figma — Central de Ajuda (PT-BR) — Documentação oficial da Figma traduzida para português.
  • Fórum da Figma — Fórum oficial de dúvidas, ideias e discussões sobre a ferramenta.
  • Friends of Figma — Rede oficial de comunidades locais e eventos da Figma.
  • Figma Best Practices — Boas práticas oficiais para organizar arquivos, componentes e times no Figma.
  • Figma para Educação — Plano gratuito da Figma para estudantes e professores.
  • FigJam — Quadro branco colaborativo da Figma, útil para brainstorm e fluxos.
  • What is wireframing? (Figma) — Explica o papel do wireframe no processo de design.
  • What is prototyping? (Figma) — Explica como e quando prototipar uma interface.
  • What is information architecture? (Figma) — Introdução da Figma a arquitetura de informação.
  • Penpot — Alternativa open source ao Figma, gratuita mesmo para uso comercial.
  • Sketch — Ferramenta de design de interface para macOS, pioneira no mercado.
  • Framer — Ferramenta de design e prototipação com publicação de sites reais.
  • ProtoPie — Ferramenta especializada em protótipos de alta fidelidade com interações complexas e sensores.

🎓 Cursos e formações

Em Português

Em Inglês

📚 Livros

🎥 Canais no Youtube

Em português

  • She is a Creative — Cursos gratuitos completos de UI/UX Design e Figma, incluindo o Bootcampinho.
  • UI Lab — Conteúdo em português sobre UI Design e Figma.
  • Design Team BR — Discussões e conteúdo sobre o mercado de design de produto no Brasil.
  • UX Now — Daniel Furtado — Canal dedicado a UX Design e pesquisa com usuários.
  • Pedro Panetto — Conteúdo sobre design de produto e carreira em design.
  • Chief of Design — Canal com foco em ensinar o valor estratégico do design.
  • Origamid — Aulas gratuitas de UI Design, Figma e front-end.
  • Rocketseat — Conteúdo de tecnologia com trilhas que incluem front-end e produto.
  • Código Fonte TV — Notícias e conceitos de tecnologia, incluindo design e carreira.
  • Mergo — Canal da escola Mergo com dicas e aulas de UX Design.
  • EBAC — Conteúdo gratuito da escola de design EBAC.
  • Design Culture — Canal brasileiro sobre design para uma vida melhor.
  • Andrey Knabbenn — Aulões gratuitos de Figma do absoluto zero.
  • Hericky Alencar — Tutoriais práticos e rápidos de Figma.
  • Doug Lazarini — Curso de Figma gratuito e completo no YouTube.
  • VagasUX — Conteúdo sobre carreira e vagas em UX/Product Design.
  • UX Unicórnio — Canal brasileiro com dicas de carreira em UX.

Em inglês

  • Figma — Canal oficial da Figma, com tutoriais, novidades e eventos (Config).
  • Flux Academy — Conteúdo sobre design de produto, web design e negócio de design.
  • DesignCourse — Um dos maiores canais de UI/UX Design e Figma do YouTube.
  • The Futur — Canal sobre negócio criativo, branding e carreira em design.
  • Mizko — Dicas rápidas e opiniões sobre design de produto e UX.
  • Jesse Showalter — Tutoriais completos de Figma para iniciantes.
  • AJ&Smart — Conteúdo sobre design sprints e processo de design de produto.
  • NN/g — Canal oficial da Nielsen Norman Group, com vídeos curtos sobre pesquisa e usabilidade.
  • Mizko / Google Design — Canal oficial do Google sobre design de produto e Material Design.
  • Juxtopposed — Análises de UI de produtos reais e tendências visuais.
  • Femke Design — Conteúdo sobre design de produto e carreira em tech.

🎙️ Podcasts

📰 Sites, blogs e newsletters

🛠️ Ferramentas

Pesquisa e testes com usuários

  • Maze — Plataforma de testes de usabilidade não moderados, com protótipos do Figma.
  • UserTesting — Plataforma para recrutar usuários e rodar testes remotos.
  • Optimal Workshop — Ferramentas de pesquisa: card sorting, tree testing e mais.
  • Dovetail — Plataforma para organizar e analisar dados de pesquisa qualitativa.
  • User Interviews — Plataforma para recrutar participantes de pesquisa.
  • Lookback — Ferramenta para gravar e analisar sessões de teste com usuários.
  • Lyssna — Testes de usabilidade e pesquisa rápida (ex-UsabilityHub).
  • Useberry — Testes de usabilidade em protótipos, com mapas de calor.

Colaboração e organização

  • Miro — Quadro branco colaborativo para workshops, jornadas e brainstorm.
  • Whimsical — Wireframes, fluxogramas e mapas mentais colaborativos.
  • Balsamiq — Ferramenta de wireframes rápidos e de baixa fidelidade.
  • Excalidraw — Quadro branco open source com estilo desenhado à mão.
  • tldraw — Quadro branco open source e gratuito, leve e rápido.
  • Notion — Ferramenta de documentação usada por times de design para specs e handoff.
  • Typeform — Formulários e pesquisas com boa experiência de resposta.
  • Mixpanel — Analytics de produto para entender comportamento real dos usuários.

Design systems e handoff

  • Zeroheight — Documentação de design systems conectada ao Figma.
  • Storybook — Catálogo de componentes vivos, usado para alinhar design e código.
  • Tokens Studio — Plugin do Figma para gerenciar design tokens.

Ícones e ilustrações

  • Lucide — Biblioteca de ícones open source, gratuita para uso comercial.
  • Phosphor Icons — Biblioteca de ícones open source com múltiplos pesos visuais.
  • Heroicons — Biblioteca de ícones gratuita feita pelo time do Tailwind CSS.
  • Iconify — Mais de cem conjuntos de ícones em um único framework.
  • Material Symbols and Icons (Google Fonts) — Biblioteca oficial de ícones do Google, gratuita.
  • unDraw — Ilustrações open source personalizáveis por cor.
  • Storyset — Ilustrações animáveis gratuitas por tema.

Cor e contraste

  • Realtime Colors — Testa uma paleta de cores direto em uma interface de exemplo.
  • UI Colors — Gera uma escala de cores completa (50–900) a partir de uma cor base.
  • Adobe Color — Gerador e explorador de paletas de cores da Adobe.

🧪 Projetos práticos e desafios

  • Daily UI — Desafio de 100 dias com um componente de UI por dia.
  • Sharpen — Gerador de desafios curtos de design para praticar diariamente.
  • Frontend Mentor — Desafios com design pronto no Figma para praticar UI e código.
  • Designercize — Exercícios diários curtos para manter o olho treinado em design.
  • UX Tools — pesquisas anuais — Levantamento anual das ferramentas mais usadas pela comunidade de UX.
  • Design Sprint Kit (Google) — Kit oficial do Google para rodar um design sprint do zero.
  • GoodBrief — Briefings fictícios gratuitos para praticar estudos de caso de UX.
  • Fake Clients — Briefs de clientes fictícios para treinar um portfólio de design.
  • BriefBox — Banco de briefings de design para praticar sem cliente real.

💼 Portfólio

  • Best Folios — Curadoria de portfólios reais de designers para se inspirar.
  • Case Study Club — Newsletter semanal com estudos de caso de UX/produto para estudar a estrutura.
  • Pafolios — Coleção de exemplos de portfólios de design de produto.
  • ADPList — Plataforma gratuita de mentoria; ótima para pedir feedback de portfólio com profissionais da área.

🤖 IA na prática

Ferramentas de IA generativa mudaram o ritmo do trabalho em UX/UI: hoje é possível ir de um brief a um protótipo navegável em minutos. O ganho real está em pesquisa, ideação e prototipação rápida — a responsabilidade por validar com usuários reais e garantir acessibilidade continua sendo do designer.

Para aprender

  • Peça a um assistente de IA para explicar heurísticas de Nielsen aplicadas a uma tela real que você está estudando, com exemplos do que quebra cada uma.
  • Cole o texto de uma pesquisa com usuários e peça um resumo em temas e insights acionáveis — depois confira manualmente se a IA não inventou padrões que não estão nas respostas.
  • Peça para gerar variações de copy e microcopy (mensagens de erro, estados vazios, CTAs) e compare qual comunica melhor.
  • Descreva uma tela em texto e peça sugestões de hierarquia visual e agrupamento antes de abrir o Figma — útil para treinar o raciocínio de layout.

Para trabalhar

  • Figma AI — Recursos de IA nativos do Figma: geração de conteúdo, renomeação de camadas e busca visual.
  • Figma Make — Gera protótipos funcionais a partir de descrições em texto ou de um design existente.
  • Stitch (Google) — Gera telas de UI a partir de prompts de texto, com exportação para Figma.
  • v0 (Vercel) — Gera interfaces em React/Tailwind a partir de prompts, útil para prototipar com código real.
  • Uizard — Transforma esboços e prompts de texto em telas de UI editáveis.
  • Relume — Gera wireframes e sitemaps de sites a partir de um prompt.
  • UX Pilot — Gera wireframes e telas de alta fidelidade com IA, direto no navegador ou como plugin do Figma.
  • Khroma — IA que aprende suas preferências de cor e sugere paletas personalizadas.
  • Adobe Firefly — Geração de imagens e assets visuais com IA, integrada ao ecossistema Adobe.

Limites e boas práticas

  • IA generativa não substitui pesquisa com usuários reais — ela produz o que é estatisticamente comum, não o que é validado para o seu público.
  • Protótipos gerados por IA tendem a ignorar acessibilidade (contraste, foco, leitura por leitor de tela); revise manualmente com as ferramentas da seção Acessibilidade.
  • Não alimente ferramentas de IA com pesquisas de usuários reais, dados pessoais ou material confidencial de clientes sem verificar a política de privacidade da ferramenta e da empresa.
  • PAIR Guidebook (Google) — Guia oficial do Google sobre como desenhar produtos que usam IA de forma responsável.
  • HAX Toolkit (Microsoft) — Kit de ferramentas da Microsoft para design de interação humano-IA.
  • The Shape of AI — Catálogo de padrões de UX específicos para produtos com IA (chat, sugestões, geração de conteúdo).
  • AI — tópico (NN/g) — Artigos da Nielsen Norman Group sobre UX aplicada a produtos de IA.

🎓 Certificações

💼 Carreira e vagas

👥 Comunidades

  • IxDA — Interaction Design Association — Associação internacional de designers de interação, com capítulos locais.
  • r/UXDesign — Comunidade internacional de UX Design no Reddit.
  • r/userexperience — Comunidade internacional voltada a discussões de experiência do usuário.
  • r/UI_Design — Comunidade internacional dedicada especificamente a UI Design.
  • Design Buddies — Comunidade internacional para designers trocarem feedback e se conectarem.
  • VagasUX — comunidade — Além de vagas, reúne uma comunidade ativa de profissionais de UX no Brasil.

About

Guia de UX/UI Design: trilhas, cursos, livros, canais, ferramentas e comunidades para você entrar e evoluir na área.

Topics

Resources

Code of conduct

Contributing

Stars

47 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors