Aquecimento: o que é Design de Interfaces
-
A Tradição UX Unicórnio
-
Ferramentas, Processos e Repertório (7:16)
-
Relembrando as diferenças entre UX e UI Design (1:25)
-
01. UX, UI, Usabilidade, Acessibilidade, CX, Inovação (38:27)
-
02. Dicas e Cuidados ao Buscar Referências (15:55)
-
03. Live mão na massa usando referências na prática (Redesign de alunos) (103:41)
-
Trailer - Agora o curso começa de verdade (1:49)
-
Aula inaugural ao vivo
-
Figma Gratuito
Acabou o medo de inovar - Usando Lápis e Papel
-
Não siga antes de ver essa aula
-
Lápis, Papel e Formas Geométricas (10:08)
-
Seus primeiros rabiscos com 10 apps famosos (34:15)
-
Protótipos em Papel com vida do Spotify (14:02)
-
Instalando Figma e Importando arquivos (5:22)
-
Prototipando TikTok no Figma (7:12)
-
Prototipando Airbnb no Figma - Elevando a barra (27:49)
-
Como o papel ajuda o designer (15:13)
-
Decompondo Spotify e Youtube (8:27)
-
Atomic Design e Guias de Estilos (7:30)
-
Ilustração de imagens e ícones avançada em UX (19:03)
Figma - App Nubank e overview da ferramenta
-
Instalando o Figma Web e Desktop (2:06)
-
Download dos arquivos desse projeto
-
Instruções Antes de Começar as Próximas Aulas
-
Canvas, Camadas, Ferramentas e Propriedades . (5:10)
-
Frames - Smartphone, Tablet ou Desktop (4:17)
-
Move - Manipulando Camadas (5:30)
-
Canvas - Orientação, alinhamento e organização de camadas (9:42)
-
Formas, Pen Tool, Pencil e Texts (2:09)
-
Grupos e manipulação interna (5:19)
-
Introdução aos grids e snap to grid (9:02)
-
Comentários e Mini revisão (3:00)
-
Redimensionamento de imagens e preparação da referência (6:02)
-
Identificação e replicação de cores, espaços e tamanhos (10:13)
-
Criando o primeiro componente (11:20)
-
Ampliando uso de componentes identificando elementos similares (6:57)
-
Constraints nos componentes - Travando espaçamentos (7:12)
-
Constraints responsivas (16:59)
-
Organizando os componentes (iniciando uma biblioteca) (10:05)
-
Propriedades de textos (1:22)
-
Organizando os componentes (continuando a biblioteca) (8:42)
-
Componentes dentro de componentes - Cards (13:05)
-
Fixed position scroll e revisão de constraints (3:04)
-
Preview do trabalho na tela do celular (1:59)
-
Organizando camadas e páginas (5:03)
-
Introdução ao autolayout (3:39)
-
Rolagem Horizontal (7:14)
-
Grids de Colunas no Figma (4:18)
-
Box Model (11:51)
-
Grid de 8 pontos (9:44)
-
Métodos de espaçamento do Google - Parte 1 (2:37)
-
Parênteses (Densidade de pixels pt, px, em, rem) (5:01)
-
Métodos de espaçamento do Google - Parte 2 (7:34)
Figma - Feature Site Land Rover - Responsividade e recursos avançados
-
Download Projeto Landrover no Figma
-
Breakpoints - Parte 1 (4:26)
-
Customização de fontes (5:28)
-
Menu, Ícones (11:32)
-
Sombras e Brilho (2:04)
-
Espaço clicável de ícones, vetorização, gradiente e remoção de background (8:29)
-
Ícone como componente (5:31)
-
Grid Desktop - Gutters e Colunas (2:32)
-
Replicando Card Component para carros (14:15)
-
Componentização do Card (8:46)
-
Thumbnail dos arquivos Figma (1:20)
-
Breakpoints - Parte 2 com Plugin (10:53)
-
Frameworks de Grid e mais artigos (4:32)
-
Responsividade, Content First e Mobile first: uma discussão mais séria (5:51)
-
Organizando Componentes (10:46)
-
Objetivo das próximas aulas (1:39)
-
Dimensões e Alinhamento (10:02)
-
Cores e Gradientes - Color picker (5:37)
-
Image Hover - Componente interativo (6:36)
-
Card - Componente interativo (2:22)
-
Botão e Links - Componente interativo (7:05)
-
Preview do Design update de componentes (6:48)
-
Hero Header e menu fixed position em scroll (12:39)
-
Variantes de Botões (5:03)
-
Interactive components - Menu drop-down (14:00)
-
Criando o menu completo (desafio extra opcional) (11:28)
-
Interação no menu dropdown (desafio extra opcional) (9:19)
-
Novo componente de cards (7:24)
-
Mini revisão (2:24)
Figma - Dark UI Dashboard - Gráficos e Posicionamento | Sem Cortes
Figma - Flo - Protótipos | Sem Cortes
Novidades Config2023 com Mercado Livre, Ikea e Amazon
-
Faça upgrade gratuito do Figma (obrigatório para protótipos) (2:53)
-
Como aplicaremos a teoria no mundo real (10:48)
-
Download do arquivo de exercícios e gabarito (2:12)
-
Mudanças na interface (4:54)
-
AutoLayout Wrap, Reisizing Max e Min (Mercado Livre) (14:43)
-
Tipos de Variáveis / Variables (5:36)
-
Aplicando Variáveis (18:42)
-
Design Tokens - Visão Geral (10:18)
-
Modes (13:24)
-
Protótipo Avançados (8:19)
-
Condicionais de protótipos (5:04)
-
Planejando interações de carrinho (Amazon) (2:57)
-
Prototipando variantes como variáveis (17:24)
-
Identificando problemas e ajustando (a vida como ela é) (9:17)
-
Variable Modes com (Ikea) (4:45)
-
Interação para alterar telas (11:18)
-
Criando seções para apresentar modos (1:29)
-
Dev Mode - Visão Geral (3:24)
-
Comparação de Versões (1:38)
-
Component Playgrounds (1:44)
-
Documentação (1:08)
-
Plugins (1:01)
-
Comunicação síncrona e assíncrona (1:31)
-
Figma para VSCode (6:45)
Novidades Config2024!
-
Figma AI Rouba Empregos? (5:03)
-
O que mudou no Figma 2024 (10:48)
-
Arquitetura da Informacao e Novo Autolayout (14:04)
-
Figma AI - Criar Designs do Zero (10:53)
-
Figma AI - Prototipos automáticos (3:49)
-
Figma AI - Renomear Camadas (3:59)
-
Figma AI - Pesquisa por Imagem e Remover Background (3:09)
-
UI Kits Nativos IOS Material Design e Kit Feito pelo Figma (7:45)
-
Figma Slides (16:13)
-
Encerramento (1:39)
Bônus MBA - Usabilidade e a Mente Humana
-
Introdução (52:22)
-
Percepção Visual e Gestalt (53:31)
-
Atenção, Memória, Familiaridade e Aesthetic Usability Effect (50:47)
-
Heurísticas de Nielsen (38:27)
-
As leis de UX (33:10)
-
Trends Padrões emergentes e motivadores humanos (32:41)
-
Cores - Princípios (light e dark mode) (48:43)
-
Cores - Teoria e Acessibilidade (41:15)
-
Cores - Aplicações em produtos e guias de estilos (35:16)
-
Cores - Configurando o Design System no Figma (15:24)
-
Tipografia - Princípios (31:40)
-
Tipografia - Aplicações em produtos (32:56)
-
Tipografia - Configurando o Design System no Figma (7:33)
-
Botões - Princípios (15:02)
-
Botões - Configurando o Design System no Figma (13:14)
-
Formulários - Princípios (12:10)
-
Formulários- Aplicações em Produtos (17:09)
-
Formulários - Configurando o Design System no Figma (19:57)
Repertório de Telas, Componentes e Design Systems
-
Componente - Elementos de Controle (11:47)
-
Componente - Barra de Controle (2:27)
-
Componente - Imagens (6:09)
-
Componente - Overlays (14:24)
-
Componente - Itens de Visualização (5:07)
-
Aumentando o repertório com tipos de telas (2:57)
-
Telas - Celebração (0:31)
-
Telas - padrões de dados (0:28)
-
Telas - Página de Conteúdo (2:22)
-
Telas - Página de redes sociais (1:33)
-
Telas - Comunicação (5:40)
-
Telas - Ações Comuns (2:00)
-
Telas - E-Comerce (1:55)
-
Telas - Onboarding (4:21)
-
Telas - Outros padrões Úteis (1:51)
-
Aumentando Repertório com Design Systems (56:07)
-
Material Design 3? 4? 5? Prepare-se para a evolução (1:08)
Wireframes
Processo de Design com clientes
🔥 Encerramento
(opcional) Desafio com cliente - abrindo as dicas que dei para os participantes
