Curso Completo de Design de Interface
4.5 (4,354 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
18,830 students enrolled

Curso Completo de Design de Interface

Aprenda a Criar Layouts para sites, sistemas e aplicativos móveis.
Bestseller
4.5 (4,354 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
18,830 students enrolled
Last updated 6/2020
Portuguese
Portuguese [Auto]
Current price: $93.99 Original price: $134.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 17 hours on-demand video
  • 26 articles
  • 37 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Você aprenderá conceitos gerais e metodologias de:
  • Design de Interface
  • UX - User Experience Design
  • UI - User Interface Design
  • AI - Arquitetura de Informação
  • Usabilidade
  • Design Web / Sistemas
  • Design Mobile
  • Prototipagem
  • Ao final de seu curso você estará apto para:
  • Criar Interfaces para sites, sistemas e aplicativos
  • Criar e propor soluções criativas no meio digital
  • Participar de grandes projetos de desenvolvimento de softwares
  • Concorrer a grandes vagas de emprego com mais segurança
Requirements
  • Conhecimentos básicos de informática
  • Vontade de Aprender conceitos e metodologias de criação de interfaces
  • Disposição para praticar e cumprir os desafios do curso
  • Ter pelo menos ouvido falar de Photoshop e Illustrator
  • Ter uma ideia do que é Design
Description

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;
  • 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;
  • MargensEspaç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;



Who this course is for:
  • Estudantes de Design
  • Designers que buscam novas Skills
  • Publicitários
  • Desenvolvedores
  • Gestores e empreendedores que buscam entender o processo de criação
  • E até mesmo os curiosos que desejam aprender o processo de criação de layouts de sites, sistemas e aplicativos
Course content
Expand all 151 lectures 17:26:00
+ Introdução
5 lectures 12:41
Boas Vindas
01:14
Nosso grupo no Facebook e o Portfólio no Behance
00:23
Novo Portfólio no Behance
06:23
+ MÓDULO 1 - Conceitos Gerais
12 lectures 01:00:30
IMPORTANTE!!!
01:05

Nesta primeira aula falaremos sobre Layouts e veremos alguns exemplos.

Preview 06:05

Esta aula é sobre GRIDS e suas funcionalidades, onde também veremos alguns exemplos reais.

O que são Grids?
05:48
Grids - Um resumo
08:51

Esta aula é sobre Tipos de Wireframes e suas funcionalidades.

O que são Wireframes?
03:13

Esta aula é sobre o que são as siglas UX, UI, AI e IHC.

AI, UX, UI que onda é essa?
03:48

Uma breve introdução sobre Usabilidade e alguns exemplos práticos disso. 

O que é Usabilidade?
03:30

Um bate-papo sobre o mercado atual.

Sobre o Mercado Atual
04:55

Dicas de como construir um briefing.

O bendito Briefing
06:41

Dicas sobre precificação + alguns recursos para facilitar nossa vida. 

Quanto Cobrar? Quanto vale meu trabalho?
14:38
SLIDE COMPLETO DO CURSO [P/ DOWNLOAD]
00:08

De acordo com as aulas deste módulo, responda este questionário tranquilamente. Sem pressão, ok?

Vamos iniciar!

Nivelamento do curso
8 questions
+ Módulo 2 - Programas e Tutoriais
6 lectures 01:07:48

Tutorial Básico de Photoshop.

Introdução ao Photoshop
15:46

Tutorial básico do Adobe Illustrator CC 2015, com foco na utilização desta ferramenta no curso.

Introdução ao Illustrator
12:43
Tutorial VECTR.COM
17:19

Tutorial do Axure RP.

Introdução ao Axure
09:09
Introdução ao Quant-UX.com
11:33
Crie um wireframe de baixa fidelidade da tela de login do Facebook. Utilizando a ferramenta Quant-UX, apresentada neste módulo.
Atividade Prática Módulo 2 - Login Facebook
1 question
+ MÓDULO 3 - Fundamentos da Arquitetura de Informação
8 lectures 41:54

Abordaremos a utilidade da arquitetura de informação e suas competências.

Para quê serve Arquitetura de Informação?
05:33

Abordaremos os fundamentos da arquitetura de informação.

Fundamentos da Arquitetura de Informação
07:10

Conheceremos o sistema de organização.

Sistemas de Organização
04:59

Conheceremos o sistema de navegação. 

Sistemas de Navegação
07:00

Conheceremos o sistema de rotulação. 

Sistema de Rotulação
06:56

Conheceremos o sistema de busca.

Sistema de Busca
08:42

Marque as opções corretas referentes ao módulo de Arquitetura de Informação.

Avaliação do Módulo 2
6 questions
Exercício de Análise
00:22

Contextualizando o quiz...

Para relembrar os sistemas apresentados neste módulo são:

Sistema de Navegação: Pode ser Global, local, contextual, e com base em links externos.

Sistema de Organização: Refere-se ao tipo de organização de um sistema, o agrupamento de informações. Podem ser Ordem alfabética, cronológica, geográfica, tipo de público, cores e etc...

Sistema de Rotulação: Também conhecido como classificação, responsável por nomear o tipo de classificação, linguagem, rótulos p/ títulos e botões.

Sistema de Busca: Se trata de uma sistema de navegação auxiliar, um atalho para o usuário. Responsável por organizar o tipo de informação que o usuário precisa.


Observação: Os sistemas trabalham em conjunto e podem ser combinados. 

Analise a imagem apresentada e responda o Quiz
1 question
+ MÓDULO 4 - Usabilidade
9 lectures 47:03

Primeira aula sobre usabilidade, onde eu te apresento o conceito, ferramentas e dados relevantes.

Fundamentos de Usabilidade
10:58

Vamos conhecer as Heurísticas de Nielsen com exemplo prático aplicado no Netflix.

Heurísticas de Nielsen
18:17
Download - Checklists de Usabilidade e Acessibilidade
00:12

Apresentação da heurística de Ben Shneiderman e um exemplo prático das 8 regras de ouro aplicada ao twitter.

8 Regras de Ouro
09:10
Scapin e Bastien
05:43
Dicas de Sites e Leitura
00:32
Download - Template de Análise Heurística
00:08

Faça este exercício antes de avançar. :)

Exercício de Análise
00:51
+ MÓDULO 5 - UX (User Experience)
13 lectures 01:25:23

Introdução a Experiência do Usuário.

Introdução á Experiência do Usuário
07:27

Aula sobre os principais fundamentos da UX

Preview 04:33

Apresentação dos 5 elementos da UX segundo J.J. Garrett

Elementos da UX
05:52

Dicas de Ferramentas UX.

Ferramentas de UX
09:55

Minha visão sobre Padrões de Interface

Padrões de Interface
06:59

Exemplos de Guia de Estilo, ou Style Guide ou Guide Tiles...  Como padrão de UI.

Exemplos de Visual Guides
08:03

Dicas sobre tipos de formulários, animações e simplicidade.

Formulários, Animações e Simplicidade
09:07

Aula sobre documentação UX.

Documentação de UX
16:38
Download - UX CANVA
00:14
Download - JORNADA DO USUÁRIO
00:19
Iniciando processo de Wireframing
14:28

Faça este exercício.

Projeto UX Criação de Landing Page
00:35
+ MÓDULO 6 - UI Design
8 lectures 53:21

Lendo nosso wireframe.

Lendo o Wireframe
05:15

Dicas para criar sua paleta de cores.

Definindo a Paleta de Cores
06:30

Dicas para utilização de tipografias para Web.

Tipografia para Projetos Web/Mobile
05:59

Minha visão sobre margens, espaçamentos e espaços em branco.

Margens, Espaçamento e área em branco
12:42

Aula sobre utilização de ícones no Facebook e Twitter. Com alguns exemplos de bibliotecas de ícones na Web para Download Freezaço!!!

Biblioteca de Ícones
12:16

Aula sobre criação de Guia de Estilo e montagem da interface seguindo nosso Wireframe. 

Definindo o Guia de Estilo
08:51

Exercício do Módulo de UI.

Projeto UI - Criando o visual da Landing Page
00:38
+ MÓDULO 7 - Design Web
13 lectures 01:55:00

Dicas de Grids Flexíveis para web. 

Frameworks / Grids para Web
04:58

Aula sobre design responsivo com exemplos.

Design responsivo
08:34

Aula sobre Conceito de Mobile First.

Mobile First, Projetando primeiro para mobile.
03:18
Sites para consultar dimensões/resoluções de telas.
00:08

Análise do Briefing do projeto site institucional.

Análise do Briefing - Projeto Site Institucional
05:55
Pesquisa e Esboço para Projeto Web
11:31

Aqui iremos criar o wireframe para um site institucional.

Wireframe para Web - Projeto Site Institucional
11:08

Primeira parte da criação da UI do site institucional.

UI Projeto Web - Site Institucional - Parte 1
07:31

Segunda parte da criação da UI do site institucional.

UI Projeto Web - Parte 2
28:05

Terceira parte da criação da UI do site institucional.

UI Projeto Web - Parte 3
13:38

Quarta parte da criação da UI do site institucional.

UI Projeto Web - Parte 4
18:14
Exercício de Fixação - Projeto Site Institucional
00:27
+ MÓDULO 8 - Design Mobile
21 lectures 04:23:20

Apresentação dos padrões de interface mobile.

Padrões de Interface Mobile
06:22

Apresentação de Apps Nativos e Apps Híbridos com exemplos reais e comparações.

Aplicação Nativa VS Híbrida
09:25

Aula sobre os processos e ferramentas de UX para dispositivos móveis.

UX para Aplicativos Móveis
04:59

Dica breve sobre resolução e medidas pra mobile.

Resolução, Proporção e Medidas para Projetos Mobile
24:53

Iniciando processo de wireframing para app uber.

Wireframe UBER - parte 1
22:52

Continuação da criação do wireframe Uber.

Wireframe UBER - parte 2
10:20

Finalização do wireframe Uber.

Wireframe UBER - parte 3
11:20

Informações e configurações do photoshop para mobile.

Observações sobre Resoluções e Configuração do Photoshop
13:08

Como criar ícones para seus apps.

Criando Ícones no Illustrator
23:15

Criando a UI para Uber clone.

UI para App UBER- Parte 1
15:11

Finalizando a UI do app Uber Clone.

UI para App UBER - Parte 2
16:44

Aula com passo a passo de como exportar assets no photoshop cc 2015.

Como exportar Assets no Photoshop CC 2015 [+]
10:04
Exercício Design Mobile - Recriar 3 telas do WhatsApp
00:21
Projeto Wireframe Instagram - parte 1
19:57
Projeto Wireframe Instagram - parte 2
11:27
Projeto UI Instagram - parte 1
22:22
Projeto Ícones Instagram - parte 1
16:02
Projeto Ícones Instagram - parte 2
13:35
Projeto UI Instagram - Finalizando a UI
08:48
Exercício Design Mobile 2 - Recriar 3 telas do App Linkedin
00:24
+ MÓDULO 9 - Prototipagem
5 lectures 29:24

Tutorial do Marvel App.

Preview 07:00

Tutorial da ferramenta Quant-UX para protótipos e análises de resultados. 

Introdução ao Quant-UX
11:33

Aula de prototipagem do app Uber Clone.

Projeto - Protótipo do App Uber
09:20
Exercício Prototipagem - Protótipo do Site Institucional
00:23