UI Design: Design de Interfaces com foco em Projetos Web
4.6 (736 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.
3,006 students enrolled

UI Design: Design de Interfaces com foco em Projetos Web

Aprenda criar sites, landing pages e e-commerces com foco no usuário. Da teoria à pratica.
Highest Rated
4.6 (736 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.
3,006 students enrolled
Created by Lucas Assis
Last updated 11/2019
Portuguese
Current price: $89.99 Original price: $149.99 Discount: 40% off
23 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 25.5 hours on-demand video
  • 45 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • 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
  • Criar interfaces web incríveis do absoluto zero utilizando os fundamentos e elementos do design de interfaces como Cores, Tipografia, Botões, Hierarquia Visual, Grids, etc.
  • Dominar tipografia avançada para UI Design: Classificações tipográficas, anatomia dos tipos, variáveis tipográficas, sobreposição de textos e etc.
  • Desenvolver protótipos utilizando o Marvel para apresentar o projeto aos clientes.
  • Desenvolver Wireframes de baixa fidelidade (papel e caneta) e alta fidelidade (Photoshop).
  • Desenvolver interfaces responsivas que se adaptam a qualquer dispositivo (mobile ou desktop).
  • Dominar os princípios do design em User Interface.
Requirements
  • Você não precisa ser designer para iniciar o curso.
  • Você precisará do Adobe Photoshop e Illustrator instalado em seu computador. Uma avaliação gratuita pode ser baixada no site da Adobe.
  • Nenhuma habilidade anterior de design é necessária, vou te ensinar tudo o que precisa saber para criar interfaces incríveis.
Description

ATENÇÃO: SE VOCÊ NÃO TEM PACIÊNCIA PARA APRENDER TODA A PARTE TEÓRICA QUE ENVOLVE A CRIAÇÃO DE UMA INTERFACE NÃO COMPRE ESSE CURSO.


No curso "UI Design: Design de Interfaces com foco em projetos Web" você vai adquirir todo o conhecimento dos fundamentos básicos e avançados em Design de Interface (UI Design), visando desenvolver sua capacidade crítica, técnica e criativa.

Este treinamento foi desenvolvido para quem quer se inserir no mercado ou para profissionais de diversas outras áreas, como UI/UX Designers, Front-ends, Designers Gráficos, Web Designers e Publicitários que querem adquirir novos conhecimentos e migrar para UI Design.

Who this course is for:
  • Designer Gráfico que querem migrar do off-line para o digital
  • Iniciantes que querem criar Websites
  • Front-end's que desejam adquirir mais conhecimentos de interfaces para aplicar em seus projetos.
  • UI Designers
Course content
Expand all 90 lectures 25:20:08
+ 1. Introdução
1 lecture 15:36

Neste vídeo de introdução falaremos um pouco sobre o curso, sua grade e também sobre os projetos que serão realizados ao decorrer do curso. 

Preview 15:36
+ 2. UI/UX Design
1 lecture 19:50

Mas afinal, o que é esse tal de UI & UX Design que tanto falam? Nesta aula você vai aprender o que significa e o que fazem os UI\UX Designers.

Lembrando que você pode acelerar o vídeo nas configurações! ;)

O que é UI & UX Design?
19:50
+ 3. Metodologia
1 lecture 24:07

Qual metodologia usar? Quais as etapas de um projeto web? São dúvidas comuns para quem está iniciando no mundo de UI design. O desenvolvimento de um site é um projeto e deve ser tratado como tal, com início, meio e fim.

3.1 Etapas de um projeto web
24:07
+ 4. Briefing
2 lectures 19:43

O briefing é uma peça fundamental para a elaboração de uma proposta comercial, e o planejamento de todas as etapas de desenvolvimento de acordo com as necessidades do seu cliente. Aprenda tudo sobre briefing nessa aula!

4.1 O que é e como definir o conteúdo de um Briefing
07:52

Aprenda a criar seu próprio briefing interativo utilizando a ferramenta "Formulários Google". 

4.2 Montando briefing
11:51
+ 5. Wireframe
3 lectures 01:04:04

Aprenda como os Wireframes são essenciais para você que está se comunicando com clientes diariamente. Eles permitem a equipe e o cliente visualizar suas ideias mais facilmente do que quando você apenas as descreve verbalmente. 


Update: Galera, o Axure disponibiliza uma licença grátis de 1 ano para estudantes! Basta se cadastrar no site e enviar uma foto comprovando que é estudante. Pode ser a foto da sua carteirinha de estudante ou comprovante de matrícula. (Dica da aluna Natália Luiza)

5.1 O que é Wireframe, Tipos e Ferramentas
11:46

Pegue seu papel e caneta, porque nesta aula você vai aprender a criar Wireframes de forma rápida e fácil em poucos minutos. 

Preview 13:18

Nesta aula prática você vai aprender a criar seus Wireframes do zero utilizando o Photoshop! 

5.3 Na prática - Wireframe com Photoshop
39:00
+ 6. Tipografia Avançada em UI Design
10 lectures 02:12:14

A tipografia é um dos elementos mais importantes do design. Nesta aula, aprenda a fazer melhores escolhas tipógraficas. 

6.1 A Importância da Tipografia
09:18

Nesta aula irei apresentar os quatro principais grupos da tipografia e suas subcategorias. 

6.2 Classificações Tipográficas
15:49

Nesta aula irei abordar sobre anatomia dos tipos. Então se você tem interesse em entender um pouco mais sobre tipografia, assista esta aula. 

Preview 06:44

Nesta aula você irá aprender algumas variáveis tipográficas como tamanho, escala, hierarquia e famílias tipográficas. 

6.4 Variáveis Tipográficas 01
09:40

Abra seu Photoshop porque nesta aula prática vamos aplicar os conceitos que aprendemos na aula anterior. 

6.4.1 Na Prática - Variáveis Tipográficas 01
09:16

Nesta aula você aprenderá outras variações tipográficas para poder aplicar esses conceitos em seus projetos. 

6.5 Variáveis Tipográficas 02
17:21

Aprenda na prática todos os conceitos sobre variáveis tipográficas que vimos aula passada.

6.5.1 Na Prática - Variáveis Tipográficas 02
17:57

Agora que você sabe a importância da tipografia em um projeto, suas classificações, anatomia e suas variáveis, você precisa entender como aplicar cores em tipografias para web. 

6.6 Cores na Tipografia
13:03

Se você quer ser um bom designer de interface, terá que aprender a colocar textos sobre imagens de uma forma atraente. Aprenda nesta aula! 

6.7 Sobreposição de Texto
27:48

Nesta aula descubra onde você pode baixar as melhores web fontes de forma gratuita, além de conhecer sites onde você pode buscar inspiração tipográficas para seus projetos. 

6.8 Sites & Ferramentas
05:18
+ 7. Elementos da Interface Web
14 lectures 03:58:55

Entenda como funciona os grids na web. 

7.1 Grids
16:59

Saber preparar o arquivo antes de iniciar o projeto é fundamental. Por isso, nessa aula prática, aprenderemos a criar nossos próprios grids

7.1.1 Na Prática - Grids
13:25

Formulários são um dos principais pontos de interação entre um usuário e um projeto web. Aprenda todas as regras para desenvolver os melhores formulários

7.2 Formulários
17:58

Abra seu Photoshop porque nesta aula prática sobre formulários vamos aplicar os conceitos que aprendemos na aula anterior. 

7.2.1 Na Prática - Formulários
11:59

Nesta aulas vamos aprender tudo sobre os botões, que são um dos elementos de User Interface mais comuns e está presente em praticamente qualquer interface, pois é com eles que conseguimos navegar e realizar ações. 

7.3 Call to Actions e Botões
19:54

Nesta aula prática vamos aplicar os conceitos que aprendemos na aula anterior, sobre Call to Actions e Botões. 

7.3.1 Na Prática - Botões
11:53

Saber definir e aplicar as cores em um projeto web nem sempre é uma tarefa fácil, mas é fundamental usa-las de forma correta. É o que você irá aprender nesta aula. 

7.4 Cores na Interface
28:39
7.4.1 Na Prática - Cores
24:59

Na aula passada você aprendeu a aplicar cores "claras" em uma interface. Agora, iremos aplicar cores escuras, uma técnica que chamamos de Dark UI. 

7.4.2 Na Prática - Cores (Dark UI)
13:14

Aprenda os princípios básicos que vão te auxiliar na hora de utilizar ícones em suas interfaces. 

Preview 15:40

Nesta aula, aprenda a trabalhar e aplicar os ícones em um projeto de maneira correta. 

7.5.1 Na Prática - Ícones
16:03

​Certamente as imagens são um dos principais elementos de uma interface, e sem dúvidas, as que mais chamam atenção. Nesta aula, aprenda a usar imagens em seus projetos. 

7.6 Imagens e Ilustrações
12:54

O espaço em branco é um dos recursos mais valiosos do design de interfaces. Nesta aula, aprenda o que é e como utilizar. 

7.7 Espaço em Branco
17:02

Aprenda a organizar visualmente os elementos no seu layout utilizando divisores visuais e/ou separadores. 

7.8 Divisores Visuais (Separadores)
18:16
+ 8. Princípios do design em User Interface
4 lectures 19:10

Muitos de vocês provavelmente devem conhecer os princípios, mas você já parou pra pensar como eles funcionam dentro do design de interfaces?  Aprenda nesta aula.

8.1 Princípios do design em UI - Eixo
07:38

Dando continuidade nos princípios do design em interface, vamos falar sobre simetria.

8.2 Princípios do design em UI - Simetria
02:51

Já falamos como a hierarquia é importante em outros módulos, entenda ainda mais nessa aula.

8.3 Princípios do design em UI - Hierarquia
04:34
8.4 Princípios do design em UI - Ritmo
04:07
+ 9. Protoshop - Principais Ferramentas
1 lecture 23:36

Nesta aula você irá aprender as principais ferramentas que iremos utilizar no desenvolvimento das interfaces. 

9.1 Básico de Photoshop
23:36
+ 10. Projeto 01 (Orbit App)
5 lectures 02:55:32

Construção do menu principal e banner carrossel. 

10.1 Orbit App 01 - Briefing, Menu e Banner
31:18

Construção da seção de Vídeos e Funcionalidades. 

10.2 Orbit App 02 - Vídeo e Funcionalidades
52:51

Construção da área de Download e Clientes. 

10.3 Orbit App 03 - Download e Clientes
24:50

Desenvolvimento da seção de Planos e Newsletter. 

10.4 Orbit App 04 - Planos e Newsletter
24:47

Finalização do nosso primeiro projeto, contato e rodapé. 

10.5 Orbit App 05 - Contato e Rodapé
41:46