Tamanho de bloco | UX Unicórnio

Começar vídeo automáticamente
Autocompletar

Aula anterior Concluir e continuar

03. Pegasus: UI Design

O que é Design de Interfaces

O que separa a teoria das interfaces mais lindas na prática (17:55)
Downloads do Curso de UI Design, Figma, Adobe XD, Sketch e Invision
O que você vai aprender nesse módulo (4:08)
Uma leve recapitulada do que vimos no Módulo Mustang
UI Design é um processo (3:30)
O processo que você vai aprender (2:44)
Exemplos de UI - Parte 1 (4:29)
Exemplos de UI - Parte 2 (3:47)

A profissão de UI Designer

Atribuições do UI Designer (3:00)
Consistência (2:33)
Flexibilidade (2:07)
Velocidade (0:58)
Controle (1:23)
Nunca é somente um botão (3:00)
Como projetar escalável (0:39)
Atomic Design (12:04)
Frameworks de UI (4:50)
Ferramentas de UI (5:06)

Atualização de Repertório

Live: como criar telinhas bonitas na prática

Ferramentas de UI

O que você aprenderá nas ferramentas (2:30)
Hora de escolher (ou abraçar todas)
Link para o curso de Sketch/Figma/XD/Invision

UBER - Da ideia à alta fidelidade

UI Design na vida real (2:44)
Resgate seu portfólio

UBER - Estratégia do projeto

Briefing (8:21)
Briefing - Roteiro
Benchmarking (6:00)
Compartilhe suas referências

UBER - Proposta de Solução

Rabiscoframes (4:12)

UBER - Wireframe

Razões para fazer um wireframe (1:43)
Buscando uma biblioteca para facilitar (1:19)
Coletando elementos para o cabeçalho (2:19)
Elementos para conteúdo (1:22)
Organizando com grids e camadas (4:42)
Organizando grids de 8pts (3:37)

FundUI - Grids

Introdução (3:48)
Grid Bootstrap (5:43)
Grid 8 pontos (5:48)
Grids nas Ferramentas de UI (6:24)
Grids no Frontend (4:28)
Wireframe sem os textos finais

UBER - Validação e Textos com cliente

Wireframe - Aprovando com o cliente (6:55)
Wireframe - Criando os textos (6:24)
Dicas para bons textos
Wireframe com os textos finais
Mais sobre UX Writing no módulo Pegasus Específico

UBER - Planejando o Styleguide

UI - Selecionando os componentes (12:15)
Aviso importante sobre o curso (2:07)
Selecione os elementos que vão para o styleguide

UBER - Escolhendo as cores

Criando as cores primárias e secundárias (9:26)
Criando estilos de cores (3:59)

FundUI - Cores

Intrudução às Cores (3:40)
A escolha das Cores (1:03)
Princípios das Cores (2:03)
Dicas de Sites e Inspirações (3:59)
Cores RGB (3:18)
Cores HSB - Introdução (0:56)
Cores HSB - Saturação (1:56)
Cores HSB - Brilho (1:11)
Cores HSB - Matiz e Transparência (3:51)
Cores em Ferramentas de UI (2:52)
Métodos de Tonalidades (4:55)
Dicas para paleta de cores (2:58)
Contraste (6:22)
Círculo Cromático (2:11)
Círculo Cromático - Monocromático (1:44)
Círculo Cromático - Análogo (0:37)
Círculo Cromático - Complementar (0:42)
Círculo Cromático - Meio complementar (0:29)
Círculo Cromático - Triádico (0:25)
Círculo Cromático - Tetrádico (0:18)
Círculo Cromático - Colorshades (0:15)
Supercolorido, Gradiente, Preto e Branco, Pastel (1:29)
Acessibilidade (2:11)

FundUI - Significado das cores

Introdução (1:10)
Vermelho (4:05)
Laranja (1:51)
Amarelo (2:24)
Verde (2:31)
Azul (2:30)
Roxo (1:56)
Preto (2:35)
Branco (3:11)
Cinza (2:26)
Marrom (1:08)
Resumo das cores (1:36)
Últimas Dicas (1:46)

UBER - Escolhendo a tipografia

Crie seu guia de cores
Criando as tipografias (12:51)

FundUI - Tipografia

Introdução (4:51)
Princípios (0:53)
Legibilidade (5:09)
Leiturabilidade (6:39)
Tamanho de fonte (7:33)
Tamanho de bloco (2:03)
Alinhamento (2:19)
Entrelinhas (5:27)
Webfonts (6:44)
Combinações (5:03)
Dicas rápidas (1:44)

UBER - Criando os botões

Crie seu guia tipográfico
Criando seus botões (3:51)
Expandindo Guia de Estilos para Cores claras (2:44)
Transformando Botões em símbolos (1:49)
Criando o símbolo das cores (3:35)
Criando o símbolo dos formatos (shapes) (1:17)
Aplicando cores e formatos nos botões (0:26)
Criando o símbolo dos ícones (4:50)
Guia de Estilos de botões (4:03)
Criando o símbolo dos textos (1:14)
Encerramento da criação de botões (0:39)

FundUI - Botões

A importância dos Botões em UI (4:03)
Criando botões no Sketch, Figma, XD e Invision Studio (5:17)
Princípios de design para Botões (3:42)
Anatomia de um botão (8:37)
Bônus - Magic Buttons - Plugin Sketch (1:38)
Botões CTA (10:11)
Botões Primários (3:21)
Botões Secundários (1:59)
Botões para espaços pequenos (1:37)
Botões FAB (Material - Floating Action Buttons) (1:58)
Botões com ícones (3:32)
Botões coloridos (1:35)
Botões estilizados (1:58)
Botões reaproveitáveis em Frameworks UI (2:37)
Botões acessíveis (daltonismo e leitores de telas) (4:04)
Dicas e melhores práticas para botões (3:51)
Recapitulando sobre botões (1:21)

UBER - Criando formulários

Crie seu guia de botões
Formulários (6:23)

FundUI - Formulários

Introdução a formulários (7:44)
5 razões para se preocupar com formulários (12:20)
Formulários em Ferramentas UI (6:17)
Princípios de Design para Formulários (5:48)
Anatomia dos formulários (5:00)
Tipos de Formulários (5:27)
Assistência (4:30)
Tipos de campos - Parte 1 (Autocomplete e Autofill) (8:09)
Tipos de campos - Parte 2 (8:31)
Otimização Data Driven (3:47)
Otimização Data Driven 2 (5:48)

FundUI - 10 regras para formulários

#1 - Ordenação (4:05)
#2 - Colunas (0:41)
#3 - Tamanho do formulário (1:48)
#4 - Tamanho dos campos (0:35)
#5 - Labels acima dos campos (1:57)
#6 - Formatação de campos (1:16)
#7 - Placeholders e Labels (0:55)
#8 - Reset (0:16)
#9 - Mensagens de erro (0:50)
#10 - Formulários são diálogos (1:41)
Otimização de Entrada de Dados (2:32)
Dicas de UI para Formulários (10:41)
Recapitulando sobre Formulários (5:59)

UBER - Consolidando guias de estilos

Crie seu guia de formulários
Consolidando o Guia de Estilos (0:47)
Guia de estilos completo

FundUI - Hierarquia Visual

Introdução (4:55)
Tipografia (2:24)
Tamanho (3:43)
Proximidade (2:31)
Repetição (1:20)
Cor e contraste (3:47)
Whitespace (7:23)
Leis da Psicologia do UX Design

FundUI - Padrões de escaneamento

Introdução (0:38)
F - Pattern (7:49)
Z - Pattern (2:01)
Encerramento da Hierarquia (0:37)

UBER - Finalizando Alta Fidelidade

Imagens (7:55)
Posicionando Wireframe - Hero (6:39)
Posicionando Wireframe - Benefits (8:06)
Posicionando Wireframe - Maps (4:17)
Posicionando Wireframe - Drive (6:09)
Posicionando Wireframe - Testimonials (9:27)
Crítica ao Visual (5:48)
Ajustando Style Guide - Colors, Typo, Buttons, Text Styles (8:30)
Atualizando - Colors, Typo, Buttons, Text Styles (7:40)
Atualizando - Organismos e alinhamentos (13:34)
Comparação UBER (3:25)
Produto de alta fidelidade

UBER - HANDOFF - Passando a bola para o desenvolvimento

Intro Handoff (1:47)
UI Designer preocupado com Frontend Developer (14:08)
Exportando os Assets (11:16)
Explicando para o Desenvolvedor Frontend (6:21)
Preparando o Handoff - passando tudo para o desenvolvedor

Bônus - Usabilidade - Bônus UX&DT

Noção geral (3:29)
Informações em pouca quantidade (1:13)
Hiearquia funcional (4:02)
Simplificação de Formulários (4:46)
Advinhar intenções, Estados, Prevenção de Erros (2:54)
O tempo do Usuário (3:11)
Microinterações (2:34)
Personalidade, Microtextos e Linguagem (4:26)

Bônus - Checklist de UX - Bônus UX&DT

Introdução (1:03)
Simplicidade (2:02)
Inteligência (3:02)
Agradabilidade (1:41)
Relevância (1:59)
Acionabilidade (1:58)
Conclusão (0:21)

Teach online with

Tamanho de bloco

Conteúdo da aula bloqueado

Se você já está inscrito, você precisa estar logado.

Matricule-se no curso para liberar