04
Desafios exclusivos
Você vai montar seu portfólio enquanto aprende! São 6 desafios exclusivos para você aplicar todo o conhecimento adquirido nas aulas e treinar suas habilidades.
Eleve sua carreira para o próximo nível.
Conceitos, técnicas, e suporte que vão te dar confiança para explorar sua carreira.
Atualizações contínuas com novas aulas
Projetos exclusivos para você praticar
Conteúdo prático, teórico e sobre carreira
Receba um certificado digital ao final do curso
Grupo para tirar dúvidas e fazer networking
Tire suas dúvidas qualquer dia da semana
Você vai montar seu portfólio enquanto aprende! São 6 desafios exclusivos para você aplicar todo o conhecimento adquirido nas aulas e treinar suas habilidades.
Nos módulos práticos vamos desenvolver do zero um Website, um App e também uma Dashboard (sistema). Além disso, você aprenderá a criar Style Guides e transformar o app em um protótipo 100% navegável de alta fidelidade.
Durante o curso você irá aplicar os conceitos, técnicas e conhecimentos aprendidos através de exercícios práticos para fixar o conteúdo.
Você vai aprender o "porquê" de tudo que envolve o universo UI. Começando pelos princípios de design para UI, seu papel no produto e as etapas de ideação para criar a interface.
A metodologia do UI Expert é baseada no aprendizado prático somado ao conteúdo teórico aprofundado para criação de interfaces de acordo com as melhores práticas.
Conteúdo altamente aprofundado e especializado, com o passo a passo para você ir do básico ao avançado.
1.1 Bem-vindo(a)! • 6:28
1.2 Como o Curso UI Expert irá funcionar e como aproveita-lo ao máximo • 17:48
1.3 ID Card: Arquivo de acompanhamento • 7:58
2.1 O que é UI & UX Design • 33:12
3.1 Visão Geral: Processos de um projeto de UI • 22:17
4.1 Briefing: Sua importância e como aplicar • 13:05
4.2 Situações relacionadas ao Briefing • 4:49
4.3 Questões chave de um bom Briefing • 10:00
4.4 Briefing com Formulários Interativos • 26:22
5.1 Planejamento: Montando o Cronograma de Entregas • 19:02
5.2 Pesquisa/Análise: Definindo Problemas e Objetivos • 16:08
5.3 Pesquisa: Segmentando nosso Usuário • 14:37
5.4 Pesquisa: Análise rápida de Concorrentes • 20:52
5.5 Inspiração: Como criar um Moodboard • 21:50
6.1 O que é Wireframe • 9:30
6.2 Tipos, Ferrametas e quando usar Wireframes • 7:58
6.3 Sitemap + Mapa Mental: Definindo a Estrutura e Conteúdo do Projeto • 9:29
6.4 Componentes de um Wireframe • 9:58
6.5 Wireframe de Baixa Fidelidade com Papel e Caneta • 7:26
6.6 Wireframe de Média Fidelidade com Figma • 34:16
6.7 User Flow: O que é e quando usar • 3:07
7.1 Por que usar o Figma • 4:22
7.2 Dashboard, Menus e Tipos de Zoom • 12:15
7.3 Frames, Grids, Guides e Outline Mode • 7:51
7.4 Layers, Grupos e Importando Elementos • 9:03
7.5 Shape Tools (Formas) e Pen Tool • 7:32
7.6 Local Styles e Copiando Propriedades • 7:31
7.7 Imagens: Redimensionar, Opacidade, Bland Modes • 6:56
7.8 Configurações de Textos • 8:17
7.9 Constraints, Fix Position e Autolayout • 10:00
7.10 Alinhamentos e Tidy Up • 4:23
7.11 Operações Booleanas e Mascaras • 4:56
7.12 7.12 Compartilhamento, Versionamento, Comentários e Exportando Elementos • 9:27
8.1 Introdução ao Módulo • 4:25
8.2 Tipografia: Sua importância • 23:30
8.3 Tipografia: Classificações • 29:26
8.4 Tipografia: Sobre Famílias Tipográficas • 14:04
8.5 Tipografia: Anatomia dos Tipos • 13:50
8.6 Tipografia: Tamanho, Escala e Hierarquia • 19:44
8.7 Tipografia: Corpo de texto e espaçamentos em UI Design (parágrafos) • 25:12
8.8 Tipografia: Como aplicar Cores em Textos • 25:14
8.9 Tipografia na prática 01.1 - Hierarquia & Cores • 14:27
8.10 Tipografia na prática 01.2 - Hierarquia & Cores • 26:19
8.11 Tipografia: Como usar All Caps em UI Design • 17:37
8.12 Tipografia: Sobreposição de Textos em Imagens • 30:49
8.13 Tipografia na prática 02 - Sobreposição de Textos • 20:15
8.14 Tipografia: Combinando Typefaces • 19:02
8.15 Tipografia na prática 03 - Combinações Tipográficas • 3:41
8.16 Grids: O que é, Anatomia e Benefícios • 15:16
8.17 Grid na prática - Configurando grids no Figma • 17:54
8.18 Grid: Como distribuir conteúdo no Grid • 9:59
8.19 Botões: Anatomia • 4:28
8.20 Botões: Tipos (CTA, Primário, Ghost Button, etc) • 25:27
8.21 Botões: Propriedades (Tamanho, Cor, Tipografia, Padding, Sombras, Estados, etc) • 20:56
8.22 Botões: Estilos Visuais • 9:53
8.23 Botões: Rótulos (Copy/Tom de voz) • 5:56
8.24 Espaço em Branco: O que é, tipos e porque usar • 20:10
8.25 Alinhamento: Como organizar os Elementos • 14:27
8.26 Cores: Introdução • 22:21
8.27 Cores: Significados e Associações mais Comuns • 17:50
8.28 Cores: Diretrizes para Aplicação (10 dicas) • 18:47
8.29 Cores: Como usar Gradientes • 14:29
8.30 Cores na prática - Criando variações e colorindo uma Interface • 22:15
8.31 Cores: Dark UI (Interfaces Escuras) • 21:47
8.32 Cores na prática - Colorindo uma Dark UI • 7:12
8.33 Imagens: Guia prático de como aplicar • 22:57
8.34 Ilustrações: O papel das ilustrações na UI • 25:31
8.35 Ícones: O que são, Tipos, Porque usar e Formatos • 23:32
8.36 Ícones: Como aplicar ícones corretamente • 14:51
8.37 Ícones na prática - Trabalhando com Ícones no Illustrator • 47:25
8.38 Formulários: O que é, Tipos e Diretrizes • 24:43
8.39 Formulários: Formatos, Estilos e Estados dos campos de Textos • 6:24
8.40 Divisores Visuais (Separadores) • 13:06
8.41 Menus de Navegação • 31:49
8.42 Controles de Seleção • 24:46
9.1 O que são Heurísticas e Vieses Cognitivos • 11:20
9.2 Vieses Cognitivos 01 - Prova Social, Lei de Fitts e mais... • 18:47
9.3 Vieses Cognitivos 02 - Viés de Autoridade, Efeito de Ancoragem e mais... • 14:18
9.4 Vieses Cognitivos 03 - Escassez, Efeito da Curiosidade e mais... • 17:38
9.5 Vieses Cognitivos 04 - Viés de Risco Zero,Efeito Padrão e mais... • 19:55
10.1 Fórmula para dominar UI Design • 9:20
10.2 Analisar: Estudando e entendendo uma Interface • 23:45
10.3 Reproduzir: Fixando o conhecimento adquirido • 32:06
10.4 Aplicar: Exercício Prático • 4:26
10.5 Observações e Recomendações • 7:32
Redesign do site SafraPay
11.1 Introdução ao Projeto • 18:18
11.2 Preparando o Documento e Recursos • 24:10
11.3 Wireframe Rápido • 39:53
11.4 SafraPay 01: Header, Menu, Banner, Componentes e suas Variantes • 52:54
11.5 SafraPay 02: Seção Benefícios • 25:56
11.6 SafraPay 03: Máquinas • 23:57
11.7 SafraPay 04: Bandeiras e Alguns Ícones • 15:31
11.8 SafraPay 05: Acesso a Crédito e Link de Pagamento • 43:57
11.9 SafraPay 06: Taxas e Simulador • 30:52
11.10 SafraPay 07: Banco Digital, Cartão Safra e Cliente Especial • 34:09
11.11 SafraPay 08: Atendimento e Rodapé • 30:09
11.12 Observações e Justificativas de Design • 19:57
12.1 O que é Responsividade • 22:26
12.2 Na Prática com SafraPay • 1:14:29
13.1 Introdução: O que são UI Style Guides • 17:20
13.2 Elementos de um Style Guide • 12:16
13.3 Vamos ver alguns Exemplos • 25:31
13.4 Montando um UI Style Guide Part. 01 • 35:10
13.5 Montando um UI Style Guide Part. 02 • 33:34
14.1 O que é handoff e Colaboração • 10:55
14.2 Organização • 6:54
14.3 Compartilhando o Projeto • 15:57
No primeiro desafio o objetivo será realizar o redesign de uma landing page.
Desenvolvimento do aplicativo Homekey
16.1 Introdução ao Projeto Homekey • 12:08
16.2 Construindo o Logotipo • 17:48
16.3 Homekey 01: Iniciando o Projeto (Splash Screen e Login) • 56:15
16.4 Homekey 02: Criar Conta • 17:37
16.5 Homekey 03: Busca Principal • 37:41
16.6 Homekey 04: Backdrops (Local e Tipo de imóvel) • 30:25
16.7 Homekey 05: Listagem de Imóveis • 52:14
16.8 Homekey 06: Mapa • 21:20
16.9 Homekey 07: Detalhe do Imóvel • 1:07:18
16.10 Homekey 08: Favoritos e Alertas • 45:43
16.11 Homekey 09: Inbox • 36:28
16.12 Homekey 10: Perfil • 17:45
16.13 Observações e Justificativas de Design • 19:40
17.1 Marvel: Ótima alternativa para Protótipos Básicos • 16:34
17.2 Introdução e Conceitos Básicos da Prototipação no Figma • 12:00
17.3 Criando Links e usando Overlay • 14:45
17.4 Transições animadas com Smart Animate e função arrastar (Drag) • 42:09
17.5 Simulando página de Loading e criando Carrossel Horizontal • 19:08
17.6 Animando o Zoom do Mapa e criando um Carrossel Interativo • 15:41
17.7 Função Scroll To (âncora) e Animação Push • 15:35
17.8 Animando função "Arquivar" com Mensagem de feedback da ação • 16:50
No segundo desafio você irá receber um briefing para desenvolver um aplicativo do zero.
Nesse projeto nós vamos desenvolver um sistema.
19.1 Dashboard: O que é e para que serve • 10:35
19.2 Analisando Dashboards e Referências • 36:46
19.3 Padrões de design & Componentes comuns em Dashboards • 9:44
19.4 Data Visualization e alguns Materiais • 4:29
19.5 Grids em Dashboards • 8:04
19.6 Explorando algumas ideais com a Homekey • 21:52
19.7 Introdução ao Projeto de Dashboard • 16:56
19.8 Definindo o Grid e Iniciando o Wireframe • 56:08
19.9 Inserindo conteúdo no Wireframe • 58:45
19.10 Continuação do Wireframe • 1:20:47
19.11 Finalizando o Wireframe de alta Fidelidade • 1:10:28
19.12 Concluindo a Dashboard • 1:17:53
19.13 19.13 Mostrando outras telas da Dashboard e Justificativas de Design [importante!] • 29:59
Você será dasafiado a criar um sistema do zero a partir de um briefing.
Além dos desafios 'oficiais', preparei mais três desafios para você realmente aplicar o que aprendeu em projetos com níveis de complexidade diferentes. Ótimo para gerar cases para seu portfólio.
Sobre o mercado: Níveis, Salários, Onde trabalhar, Hard & Soft Skills, etc. • 40:09
O que uma empresa espera de um UI/UX Designer? (Analisando vagas) • 20:24
Ser um designer CLT ou Freelancer? Entenda as diferenças. • 45:54
Os 6 passos para começar a trabalhar como Freelancer • 1:11:45
10 dicas para trabalhar Home Office como UI Designer • Artigo
Precificação, Descontos e formas de Pagamento • 54:06
Como aumentar seu Faturamento • 13:34
Definindo e lindando com Prazos • 9:54
Como lidar com Alterações • 17:48
Overdelivery: A maior estratégia de fidelização • 20:20
Como montar um bom Currículo (CV) • 37:21
LinkedIn para UI Designers • 46:02
Evento de 3 epsódios onde mostro o caminho para você se tornar UI Designer, e de quebra, criamos um aplicativo do absoluto zero.
Ep. 01 Tudo sobre a profissão e os 6 passos para se tornar UI Designer • 56:20
Ep. 02 Construindo um app do zero utilizando o Figma • 4:17:37
Ep. 03 Criando um protótipo navegável e animado no Figma • 41:20
Vou te mostrar as melhores práticas e dicas para você montar um portfólio excepcional.
Projeto onde vamos desenvolver uma landing page de uma hamburgueria.
Aprenda a desenvolver o layout de um e-commerce completo totalmente do zero.
Recursos para te ajudar em sua jornada como UI Designer.
Faça download da grade de aulas em PDF.
E a mais usada dentro das empresas. Você vai aprender do absoluto zero e dominar a ferramenta.
Seus projetos serão analisados através de vídeo para que você entender detalhadamente onde melhorar para evoluir mais rápido.
Análise completa, rápida e exclusiva.