
Nesta primeira aula falaremos sobre Layouts e veremos alguns exemplos.
Esta aula é sobre GRIDS e suas funcionalidades, onde também veremos alguns exemplos reais.
Esta aula é sobre Tipos de Wireframes e suas funcionalidades.
Esta aula é sobre o que são as siglas UX, UI, AI e IHC.
Uma breve introdução sobre Usabilidade e alguns exemplos práticos disso.
Um bate-papo sobre o mercado atual.
Dicas de como construir um briefing.
Dicas sobre precificação + alguns recursos para facilitar nossa vida.
Tutorial Básico de Photoshop.
Tutorial básico do Adobe Illustrator CC 2015, com foco na utilização desta ferramenta no curso.
Tutorial do Axure RP.
Instruções da tarefa
Crie um wireframe de baixa fidelidade da tela de login do Facebook.
Utilizando a ferramenta Quant-UX, apresentada neste módulo.
1- Faça uma breve pesquisa sobre a tela solicitada;
2- Crie um esboço da tela, identificando todos os componentes, textos e imagens;
3- Acesse o link https://quant-ux.com/ realize seu cadastro no site e crie um projeto chamado Login facebook;
4- Inicie a criação do wireframe de Baixa Fidelidade. Fique a vontade para utilizar os componentes que a ferramenta oferece, como bibliotecas e componentes.
5- Quando finalizar, salve o projeto e compartilhe o link da aqui nesta tarefa e no fórum do curso, na opção Perguntas e respostas na Udemy.
Vamos aprender como criar um menu simples no Figma.
Abordaremos a utilidade da arquitetura de informação e suas competências.
Abordaremos os fundamentos da arquitetura de informação.
Conheceremos o sistema de organização.
Conheceremos o sistema de navegação.
Conheceremos o sistema de rotulação.
Conheceremos o sistema de busca.
"Tenho-vos dito isto, para que em mim tenhais paz; no mundo tereis aflições, mas tende bom ânimo, eu venci o mundo".
- João 16:33
Primeira aula sobre usabilidade, onde eu te apresento o conceito, ferramentas e dados relevantes.
Vamos conhecer as Heurísticas de Nielsen com exemplo prático aplicado no Netflix.
Apresentação da heurística de Ben Shneiderman e um exemplo prático das 8 regras de ouro aplicada ao twitter.
"Mas os que esperam no Senhor renovarão as suas forças, subirão com asas como águias; correrão, e não se cansarão; caminharão, e não desfalecerão".
- Isaías 40:31
Faça este exercício antes de avançar. :)
"Pois Deus não nos deu espírito de covardia, mas de poder, de amor e de equilíbrio".
- 2 Timóteo 1:7
Introdução a Experiência do Usuário.
Aula sobre os principais fundamentos da UX
Apresentação dos 5 elementos da UX segundo J.J. Garrett
Minha visão sobre Padrões de Interface
Exemplos de Guia de Estilo, ou Style Guide ou Guide Tiles... Como padrão de UI.
Dicas sobre tipos de formulários, animações e simplicidade.
Aula sobre documentação UX.
“A alma do preguiçoso deseja e coisa nenhuma alcança, mas a alma dos diligentes engorda”
— Provérbios 13:4
Lendo nosso wireframe.
Dicas para criar sua paleta de cores.
Dicas para utilização de tipografias para Web.
Minha visão sobre margens, espaçamentos e espaços em branco.
Aula sobre utilização de ícones no Facebook e Twitter. Com alguns exemplos de bibliotecas de ícones na Web para Download Freezaço!!!
Aula sobre criação de Guia de Estilo e montagem da interface seguindo nosso Wireframe.
Exercício do Módulo de UI.
Dicas de Grids Flexíveis para web.
Aula sobre design responsivo com exemplos.
Aula sobre Conceito de Mobile First.
Análise do Briefing do projeto site institucional.
Aqui iremos criar o wireframe para um site institucional.
Primeira parte da criação da UI do site institucional.
Segunda parte da criação da UI do site institucional.
Terceira parte da criação da UI do site institucional.
Quarta parte da criação da UI do site institucional.
Apresentação dos padrões de interface mobile.
Apresentação de Apps Nativos e Apps Híbridos com exemplos reais e comparações.
Aula sobre os processos e ferramentas de UX para dispositivos móveis.
Dica breve sobre resolução e medidas pra mobile.
Iniciando processo de wireframing para app uber.
Continuação da criação do wireframe Uber.
Finalização do wireframe Uber.
Informações e configurações do photoshop para mobile.
Como criar ícones para seus apps.
Criando a UI para Uber clone.
Finalizando a UI do app Uber Clone.
Aula com passo a passo de como exportar assets no photoshop cc 2015.
Apresentação do Curso
O que esperar deste curso?
O objetivo deste curso é introduzir conceitos de Design de Interface e práticas atuais de criação de layouts para sites, sistemas e aplicativos móveis, capacitando profissionais de diversas áreas que desejam iniciar carreira de Web Designer, UX Designer, UI Designer ou Desenvolvedores Web/Mobile, profissionais de TI e Gestores que desejam aprender novas práticas ou buscam atualização sobre o assunto.
Programação Completa do Curso
MÓDULO 1 - Conceitos Gerais
Apresentação;
Como Aproveitar ao Máximo este Curso;
O que é um Layout?
O que são Grids?
O que são Wireframes?
AI, UX, UI que onda é essa?
O que é Usabilidade?
Sobre o Mercado Atual;
O bendito Briefing.
MÓDULO 2 - Fundamentos de AI
Para quê serve Arquitetura de Informação?
Fundamentos e Sistemas de Organização;
Sistemas de Navegação;
Sistema de Rotulação;
Sistema de Busca;
Exercício de Fixação.
MÓDULO 3 - Usabilidade
Fundamentos de Usabilidade;
Heurísticas de Nielsen;
8 Regras de Ouro;
Scapin e Bastien;
Dicas de Sites e Leitura;
Exercício de Fixação.
MÓDULO 4 - UX Design
Para que serve o Profissional de Experiência do Usuário?
Fundamentos da UX;
Elementos da UX;
Ferramentas de UX;
Padrões de Interface;
Exemplos de Visual Guides;
Formulários, Animações e Simplicidade;
Tipos de Wireframes;
Documentação de UX;
Exercícios de Fixação.
MÓDULO 5 - UI Design
Lendo o Wireframe;
Definindo a Paleta de Cores;
Tipografia para Projetos Web/Mobile;
Margens, Espaçamento e área em branco;
Mensagens e Notificações;
Definindo o Guia de Estilo;
Exercício de Fixação.
MÓDULO 6 - Design Web / Sistemas
Padrões de Interface para Web;
Guia de Estilo para Web;
Wireframe para Web;
Grids para Web;
Frameworks;
Design responsivo;
Mobile First, Projetando para Diversas Telas;
Exercício de Fixação.
MÓDULO 7 - Design Mobile
Padrões de Interface Mobile;
Aplicação Nativa;
Projetando para Aplicações Nativas;
Wireframes para Apps;
Exercício de Fixação.
MÓDULO 8 - Prototipagem
O que é um Protótipo?
Ferramentas de Prototipagem;
Criando um Protótipo;
Exercício de Fixação.
MÓDULO 9 - Bônus!!!
Geração de Validação de Ideias para Apps;
Definindo o Público-alvo;
Criando Personas;
Journey Map;
MoodBoard;
Quebrando o Bloqueio Criativo;
Dicas de Mercado;
Quanto Cobrar?
Metodologia de Trabalho;
Atuar como Freelancer;
Desconstruindo um site.
MÓDULO 10 - Hora dos Desafios!
Criar proposta de site para um Restaurante Japonês (Seguindo todas as etapas contidas no curso, análise do Briefing, UX, UI, prototipagem, orçamento e apresentação em PDF para o cliente) - Briefing disponibilizado pelo Instrutor;
Criar proposta para um Sistema de Gestão de Drogarias (Seguindo todas as etapas contidas no curso, análise do Briefing, UX, UI, prototipagem, orçamento e apresentação em PDF para o cliente) - Briefing disponibilizado pelo Instrutor;
Criar proposta de Aplicativo de Pedidos para um Restaurante Japonês (Seguindo todas as etapas contidas no curso, análise do Briefing, UX, UI, prototipagem, orçamento e apresentação em PDF para o cliente) - Briefing disponibilizado pelo Instrutor;
MÓDULOS BÔNUS - Coisas Boas!
Curso Essencial de Figma (+15 aulas + Projetos)
Aula sobre Portfólio em UX/UI
Curso Essencial de Adobe XD (+20 aulas)
Curso Essencial de Design Gráfico (+20 aulas + Projetos)