Pergunta 1: Para quem é o curso de UI Design?

Resposta 1: O curso de UI Design é destinado a pessoas que desejam se tornar especialistas em design de interfaces.

Pergunta 2: O que será aprendido no curso?

Resposta 2: No curso, você aprenderá todos os processos, ferramentas e fundamentos necessários para se tornar um especialista em design de interfaces.

Pergunta 3: O que é esperado ao final do curso?

Resposta 3: Ao final do curso, espera-se que você tenha aprendido de fato e desenvolvido um sólido portfólio na área de UI Design.

Lucas Assis

UI Expert ‒ Curso de UI Design

1.1 Boas-vindas!

1.2 Como o Curso UI Expert irá funcionar e como aproveita-lo ao máximo [Importante!]

1.3 ID Card: Arquivo de acompanhamento

🤘🏻 Comece por aqui!

2.1 O que é UI & UX Design

⚡ UI e UX Design

3.1 Visão Geral: Processos de um projeto de Interface

💡 Processos e Etapas de um Produto Digital

4.1 Briefing: Sua importância e como aplicar

4.2 Situações relacionadas ao Briefing

4.3 Questões chave de um bom Briefing

4.4 Briefing com Formulários Interativos

📄 Briefing

5.1 Planejamento: Montando o Cronograma de Entregas

5.2 Pesquisa/Análise: Definindo Problemas e Objetivos

5.3 Pesquisa: Segmentando nosso Usuário (Público Alvo)

5.4 Pesquisa: Análise rápida de Concorrentes

5.5 Inspiração: Como criar um Moodboard

🔍 Pesquisa, Planejamento, Inspiração e Imersão

6.1 O que é Wireframe

6.2 Tipos, Ferramentas e quando usar Wireframes

6.3 Sitemap + Mapa Mental: Definindo a Estrutura e Conteúdo do Projeto

6.4 Componentes de um Wireframe

6.5 Wireframe de Baixa Fidelidade com Papel e Caneta

6.6 Wireframe de Média Fidelidade com Figma

6.7 User Flow: O que é e quando usar

📝 Wireframe

7.1 Por que usar o Figma

7.2 Dashboard, Menus e Tipos de Zoom

7.3 Frames, Grids, Guides e Outline Mode

7.4 Layers, Grupos e Importando Elementos

7.5 Shape Tools (Formas) e Pen Tool

7.6 Local Styles e Copiando Propriedades

7.7 Imagens: Redimensionar, Opacidade, Bland Modes

7.8 Configurações de Textos

7.9 Constraints, Fix Position e Autolayout

7.10 Alinhamentos e Tidy Up

7.11 Operações Booleanas e Mascaras

7.12 Compartilhamento, Versionamento, Comentários e Exportando Elementos

🔥 Básico de Figma

8.1 Comece por aqui! [Importante]

8.2 ♦ Tipografia: Sua importância

8.3 Tipografia: Classificações

8.4  ♦ Tipografia: Sobre Famílias Tipográficas

8.5 Tipografia: Anatomia dos Tipos

8.6 ♦ Tipografia: Tamanho, Escala e Hierarquia

8.7 ♦ Tipografia: Corpo de texto e espaçamentos em UI Design (parágrafos)

8.8 ♦ Tipografia: Como aplicar Cores em Textos

8.9 ☛ Tipografia na prática 01.1 - Hierarquia & Cores

8.10 ☛ Tipografia na prática 01.2 - Hierarquia & Cores

8.11 Tipografia: Como usar All Caps em UI Design

8.12 ♦ Tipografia: Sobreposição de Textos em Imagens

8.13 ☛ Tipografia na prática 02 - Sobreposição de Textos

8.14 ♦ Tipografia: Combinando Typefaces

8.15 ☛ Tipografia na prática 03 - Combinações Tipográficas

8.16 ♦ GridS: O que é, Anatomia e Benefícios

8.17 ☛ Grid na prática - Configurando grids no Figma

8.18 Grid: Como distribuir conteúdo no Grid

8.19 Botões: Anatomia

8.20 ♦ Botões: Tipos (CTA, Primário, Ghost Button, etc)

8.21 ♦ Botões: Propriedades (Tamanho, Cor, Tipografia, Padding, Sombras, Estados, etc)

8.22 Botões: Estilos Visuais

8.23 ♦ Botões: Rótulos (Copy/Tom de voz)

8.24 ♦ Espaço em Branco: O que é, tipos e porque usar

8.25 ♦ Alinhamento: Como organizar os Elementos

8.26 ♦ Cores: Introdução

8.27 ♦ Cores: Significados e Associações mais Comuns

8.28 ♦ Cores: Diretrizes para Aplicação (10 dicas)

8.29 Cores: Como usar Gradientes

8.30 ☛ Cores na prática - Criando variações e colorindo uma Interface

8.31 Cores: Dark UI (Interfaces Escuras)

8.32 ☛ Cores na prática - Colorindo uma Dark UI

8.33 ♦ Imagens: Guia prático de como aplicar

8.34 Ilustrações: O papel das ilustrações na UI

8.35 ♦ Ícones: O que são, Tipos, Porque usar e Formatos

8.36 ♦ Ícones: Como aplicar ícones corretamente (Diretrizes)

8.37 ☛ Ícones na prática - Trabalhando com Ícones no Illustrator [Importante!]

8.38 ♦ Formulários: O que é, Tipos e Diretrizes

8.39 ♦ Formulários: Formatos, Estilos e Estados dos campos de Textos

8.40 ♦ Divisores Visuais (Separadores)

8.41 ♦ Menus de Navegação

8.42 ♦ Controles de Seleção

💎 Elementos, Componentes e Princípios da Interface do Usuário

9.1 O que são Heurísticas e Vieses Cognitivos

9.2 Vieses Cognitivos 01 - Prova Social, Lei de Fitts e mais..

9.3 Vieses Cognitivos 02 - Viés de Autoridade, Efeito de Ancoragem e mais..

9.4 Vieses Cognitivos 03 - Escassez, Efeito da Curiosidade e mais..

9.5 Vieses Cognitivos 04 - Viés de Risco Zero, Efeito Padrão e mais..

📣 Design Comportamental

10.1 Fórmula para dominar UI Design

10.2 Analisar: Estudando e entendendo uma Interface

10.3 Reproduzir:  Fixando o conhecimento adquirido

10.4 Aplicar: Exercício Prático

10.5 Observações e Recomendações [Importante!]

🚀 Start

11.1 Introdução ao Projeto

11.2 Preparando o Documento e Recursos

11.3 Wireframe Rápido

11.4 SafraPay 01: Header, Menu, Banner, Componentes e suas Variantes

11.5 SafraPay 02: Seção Benefícios

11.6 SafraPay 03: Máquinas

11.7 SafraPay 04: Bandeiras e Alguns Ícones

11.8 SafraPay 05: Acesso a Crédito e Link de Pagamento

11.9 SafraPay 06: Taxas e Simulador

11.10 SafraPay 07: Banco Digital, Cartão Safra e Cliente Especial

11.11 SafraPay 08: Atendimento e Rodapé

11.12 Observações e Justificativas de Design [importante!]

💻 Projeto 01 • Interface Web

12.1 O que é Responsividade

12.2 Na Prática com SafraPay

📱 Design Responsivo

13.1 Introdução: O que são UI Style Guides

13.2 Elementos de um Style Guide

13.3 Vamos ver alguns Exemplos

13.4 Montando um UI Style Guide Part. 01

13.5 Montando um UI Style Guide Part. 02

📐 UI Style Guide

14.1 O que é handoff e Colaboração

14.2 Organização do Arquivo

14.3 Compartilhando o Projeto

📌 Design Handoff: Entregando um Projeto

15.1 Entenda o Desafio!

👉 Desafio 01 [Redesign Web]

16.1 Introdução ao Projeto Homekey

16.2 Construindo o Logotipo

16.3 Homekey 01: Iniciando o Projeto (Splash Screen e Login)

16.4 Homekey 02: Criar Conta

16.5 Homekey 03: Busca Principal

16.6 Homekey 04: Backdrops (Local e Tipo de imóvel)

16.7 Homekey 05: Listagem de Imóveis

16.8 Homekey 06: Mapa

16.9 Homekey 07: Detalhe do Imóvel

16.10 Homekey 08: Favoritos e Alertas

16.11 Homekey 09: Inbox

16.12 Homekey 10: Perfil

16.13 Observações e Justificativas de Design [importante!]

📲 Projeto 02 • Interface Mobile

17.1 Marvel: Ótima alternativa para Protótipos Básicos

17.2 Introdução e Conceitos Básicos da Prototipação no Figma

17.3 Criando Links e usando Overlay

17.4 Transições animadas com Smart Animate e função arrastar (Drag)

17.5 Simulando página de Loading e criando Carrossel Horizontal

17.6 Animando o Zoom do Mapa e criando um Carrossel Interativo

17.7 Função Scroll To (âncora) e Animação Push

17.8 Animando função "Arquivar" com Mensagem de feedback da ação

🔗 Prototype: Criando um Protótipo de alta fidelidade com Figma

18.1 Entenda o Desafio!

👉 Desafio 02 [Trust Bank]

19.1 Dashboard: O que é e para que serve

19.2 Analisando Dashboards e Referências

19.3 Padrões de design & Componentes comuns em Dashboards

19.4 Data Visualization e alguns Materiais

19.5 Grids em Dashboards

19.6 Explorando algumas ideais com a Homekey

19.7 Introdução ao Projeto de Dashboard

19.8 Definindo o Grid e Iniciando o Wireframe

19.9 Inserindo conteúdo no Wireframe

19.10 Continuação do Wireframe

19.11 Finalizando o Wireframe de alta Fidelidade

19.12 Concluindo a Dashboard

19.13 Mostrando outras telas da Dashboard BMW e Justificativas de Design [importante!]

🖥️ Projeto 03 • Dashboard

20.1 Entenda o Desafio!

👉 Desafio 03 [ZeroPaper]

Desafio 04: E-commerce

Desafio 05: Cardápio Digital

Desafio 06: Tema Crypto

👉 Desafios Bônus! [+3]

Próximos Passos e Sobre o Certificado

NPS - O que você achou do UI Expert?

🎓 Considerações Finais

Sobre o mercado: Níveis, Salários, Onde trabalhar, Hard & Soft Skills, etc.

O que uma empresa espera de um UI/UX Designer? (Analisando vagas)

Ser um designer CLT ou Freelancer? Entenda as diferenças.

Os 6 passos para começar a trabalhar como Freelancer

10 dicas para trabalhar Home Office como UI Designer

Precificação, Descontos e formas de Pagamento

Como aumentar seu Faturamento

Definindo e lindando com Prazos

Como lidar com Alterações

Overdelivery: A maior estratégia de fidelização

Como montar um bom Currículo (CV)

LinkedIn para UI Designers

💼 Bônus: Postura Comercial, Carreira e Mercado

Novo site UI Expert #01

✏️ #NaPrática com Lucas Assis

Modelo base para Proposta Comercial

🤑 Bônus - Proposta Comercial

​​​O conteúdo deste módulo está em produção e será disponibilizado em breve.

UI Expert ‒ Curso de UI Design

Avaliações

Perguntas Frequentes