Web design
do zero ao PRO
Um curso on-line com avaliação individual e personalizada das suas tarefas, feita pelos nossos professores. Aproveite o desconto que é por tempo limitado!
Ao clicar no botão de "Reservar" você concorda com a nossa
Escola online das profissões
mais procuradas
Preço com desconto
R$ 225,00
Valor anterior
R$ 4.500,00
40%
De desconto
x 12 sem juros
Garanta um desconto e nós entraremos em contato
73 : 10 : 44 : 16
Dias
Horas
Minutos
Segundos
Our website is almost ready
Create a targeted live campaign.
Scale your infrastructure with our simple service.
Days
Hours
Minutes
Seconds
Programação
Web Design para Iniciantes
Módulo 1 - Primeiros Resultados
Introdução
  • Dizendo olá
  • Contando um pouco sobre o professor
  • Explicando como nós trabalhamos
  • Princípios do nosso programa (cases e prática)

Apresentação
  • Contar que iremos criar uma situação verdadeira simulada. Como se houvesse um cliente real e fossemos criar um projeto de fato para eles.
Prática. Básico sobre Editor Gráfico
  • Introdução com as diferenças entre Figma x Sketech x XD x Photoshop
  • Por que recomendamos o uso do Figma
  • Como fazer o download do app para o seu sistema operacional e usar online no seu próprio navegador
  • Funcionalidades do painel principal e os seus parâmetros
  • Criando um novo arquivo
  • Configurações do documento
  • Como os Frames funcionam e como criá-los para iniciar
  • Como organizar o painel da esquerda para obter uma melhor estrutura e escalabilidade
  • Painel de camadas e gerenciamento de camadas
  • Variedade de camadas
  • Formas de organizar as camadas em um documento
  • Atalhos de teclado para acelerar e otimizar o trabalho

Prática. Projetando a Primeira Tela
  • Trabalhando com texto
  • Seleção de cor e as bases para trabalhar com o seletor
  • Como definir espaçamentos
  • Como trocar as fontes
  • Como definir o espaço entre as linhas, tamanho de fonte e espaço entre letras
  • Trabalhando com formas em vetores
  • Criando um botão
  • Como definir o preenchimento e linha externa de formas
  • Como rotacional element
Prática. Projetando a Primeira Tela
  • Salvando um documento
  • Exportando um arquivo .fig
Módulo 2 - Tendências, Referências e Moodboards
Case #2
Objetivo: Criar um website com várias páginas.

Finding Inspiration
  • Todos os projetos começam pela inspiração
  • Pesquisando ideias e conceitos
  • Selecionando referências visuais
  • Apresentando uma proposta de caminho para o cliente
  • Dicas para criar o seu moodboard

Prática. Criando uma apresentação
  • Creating the first draft of the presentation showing the visual style chosen for the client.
  • Criando o primeiro esboço de uma apresentação demonstrando o estilo visual escolhido para o cliente
Módulo 3 - Estilos Visuais e Interface do Usuário
Case #2 (Continuação)
Objetivo: Começar a definir a tipografia, cores, seus estilos e projetar a estrutura da página inicial

Introdução à tipografia e percepção do usuári
  • Dicas de legibilidade, SEO básico e exibição de conteúdo;
  • Por que usar parágrafos longos é uma má idéia;
  • Principais características dos grids modulares;
  • Como fazer as pessoas lerem os textos de fato;
  • Introdução à tipografia;
  • Como combinar fontes;
  • Fontes Display vs. Text;
  • Trabalhando com fontes;
  • Recursos e limitações de WebFonts;
  • Headings e estrutura HTML/CSS.

Prática. Trabalhando com texto
  • Adicionando títulos e caixas de texto;
  • Formatação de texto;
  • \Controlando parágrafos;
  • Design esteticamente amigável e harmônico;
  • Altura da linha e espaçamento entre letras;
Módulo 4 - Primeiros passos para criar uma página inicial
Case #2 (Continuação)
Objetivo: Criar a página inicial do site.

Estilos e componentes da página:
  • Tipos de páginas iniciais;
  • Diferença entre páginas promocionais, corporativas e "landing pages";
  • Componentes da Página Inicial;

Grid e Design Responsivo:
  • Tipos de grids e como configurá-las dentro do Figma;
  • Usando a grid de 12 colunas;
  • Diferenças entre responsivo e adaptativo;
  • "Mobile-First" Adaptive Web Design.

Prática
  • Trabalhando com grids e componentes de página;
  • Layout da página;
  • Aplicação de estilos gráficos;
  • Criando a página inicial.
Módulo 5 - Noções básicas sobre Design Gráfico para Web no Photoshop
Case #2 (Continuação)
Objetivo: Colocar um banner promocional na página inicial.

Prática. Recorte de imagem no Photoshop:
  • Técnicas;
  • Ferramenta de seleção rápida;
  • Ferramenta Laço Magnético;
  • Varinha mágica;
  • Ferramenta laço

Prática. Sombras:
  • Entendendo sobre as Sombras;
  • Estilo de camadas;
  • Sombras realistas;
  • Sombras multicomponentes.
Prática. Fundos/Segundo plano:
  • Noções básicas sobre fundos;
  • Fundos simples vs. complexos;
  • Gradientes.
Módulo 6 - Decomposição
A regra das 10.000 horas;
Método de decomposição.

PráticaTarefa: Decompondo a página inicial de um website;
  • Princípios de decomposição;
  • Grids;
  • Tipografia;
  • Cores;
  • Elementos;
  • Estruturando um UI-Kit.
Prática. Fundos/Segundo plano:
  • Noções básicas sobre fundos;
  • Fundos simples vs. complexos;
  • Gradientes.
Módulo 7 - Navegação & Estrutura
Tipos de Navegação:
  • Menu horizontal;
  • Menu vertical;
  • Menu Hamburger;
  • Menu suspenso;
  • Megamenu;
  • Navegação fora do padrão.

Estrutura do website:
  • Arquitetura da Informação (AI);
  • Mapas mentais;
  • Mapa do site.

Prática. Desenvolvendo um mapa mental:
  • Construindo um mapa mental baseado na estrutura do projeto;
  • Otimizando a estrutura de informações.
Módulo 8 - Conteúdo das telas do projeto
Objetivo: Criar uma revisão de uma subpágina importante do website.

Conteúdo essencial:
  • Citações;
  • Estilos de caixa de texto;
  • Tabelas;
  • Video Player;
  • Numeração;
  • Gráficos.

Elementos adicionais:
  • História e linha do tempo;
  • Galeria;
  • Sliders;
  • Calculadora.

Prática. Organizando o conteúdo:
  • Transformando meros textos e imagens em uma página da web impressionante.
Módulo 9 - Elementos e botões de formulário
Objetivo: Projetar um formulário de inscrição em várias etapas para o website da empresa, tornando-o atraente e fácil de usar.

Introdução à Usabilidade:
  • Princípios chave de usabilidade;
  • Exemplos (conveniente / fácil de usar / trabalhando / não funcionando).


User Interface Elements:
  • Botões;
  • Listas;
  • Grids;
  • Formulários;
  • Sliders.

Prática. Regras para criar formulários:
  • Estados diferentes;
  • Validação;
  • Mensagens de erro;
  • Passos;
  • Layout do formulário.
Módulo 10 - Sites adaptáveis: Versão Móvel
Objetivo: Entender os princípios de adaptabilidade e criar um conjunto de modelos móveis (quatro resoluções de tela).

Design Responsivo vs. Design Adaptativo:
  • Teoria da Adaptabilidade;
  • Exemplos.

Grids e multiplicidade
  • As melhores Grids Responsivas;
  • Multiplicidade.

Fontes e tamanho dos elementos:
  • Erros comuns ao redimensionar.

Prática. Projetando modelos móveis:
  • Criando um conjunto de quatro resoluções de tela com base na página inicial.
Módulo 11 - Landing Page: Cores, atmosfera e humor
Case #3:
Objetivo: Criar a Landing Page

Cores, atmosfera e humor
  • Teoria das cores;
  • Exemplos;
  • Dicas para substituir cores;
  • Usando máscaras de camada.

Retoque de imagem:
  • Essenciais;
  • Os problemas mais comuns (superexposição, cores impróprias, nitidez etc.);
  • Ajustando camadas;
  • Saturação;

Prática. Retoque de imagem:
  • Retoque de imagens para a Landing Page;
  • Usando níveis e curvas;
  • Ajustando Contrastes;
  • Consistência de imagens;
  • Remoção de defeitos menores.
Módulo 12 - Decomposição de uma Landing Page
Case #3 (Continuação)
Objetivo:
  • Decompor a landing page indicada;
  • Criar uma nova landing page.

Decomposição da Landing Page:
  • Princípios de decomposição;
  • Grades;
  • Tipografia;
  • Cores;
  • Elementos;
  • Estruturando um UI-Kit.

Prática. Decomposição da Landing Page
  • Decomposição da Landing Page semelhante à página inicial.
Módulo 13 - Criando uma apresentação
Case #3 (Continuação)
Objetivo: Criar uma apresentação para a Landing Page.

Estrutura de apresentação:
  • Princípios chave de uma apresentação;
  • Apresentação Positiva vs. Apresentação Negativa: exemplos.

Ferramentas de apresentação:
  • Photoshop;
  • Keynote;
  • PowerPoint;

Prática. Mockups:
  • Criando Mockups.
Módulo 14 - Entrega de Designer para Desenvolvedor
Objetivo: Preparar a transferência de documentos para entrega do projeto a um desenvolvedor.

Coisas a considerar:
  • Estados de formulário e botão;
  • Sliders;
  • Pop-ups.

Prática. Preparando uma Entrega do Desenvolvedor:
  • Coletando todos os documentos necessários.
Módulo 15 - Primeiro projeto no Behance
Objetivo: Transformar a Landing Page no primeiro estudo de caso no Behance.

Behance. A melhor plataforma para designers:
  • Inscrever-se;
  • Criando um portfólio no Behance;
  • Tipos de estudos de caso;
  • Estrutura perfeita de estudo de caso;
  • Os prós e contras da publicação de um estudo de caso.

Prática. Criando uma conta no Behance:
  • Inscreva-se e prepare-se.

Prática. Editor de portfólio do Behance:
  • Upload de um estudo de caso.
Módulo 1 - Primeiros Resultados
Introdução
  • Dizendo olá
  • Contando um pouco sobre o professor
  • Explicando como nós trabalhamos
  • Princípios do nosso programa (cases e prática)

Apresentação
  • Contar que iremos criar uma situação verdadeira simulada. Como se houvesse um cliente real e fossemos criar um projeto de fato para eles.
Prática. Básico sobre Editor Gráfico
  • Introdução com as diferenças entre Figma x Sketech x XD x Photoshop
  • Por que recomendamos o uso do Figma
  • Como fazer o download do app para o seu sistema operacional e usar online no seu próprio navegador
  • Funcionalidades do painel principal e os seus parâmetros
  • Criando um novo arquivo
  • Configurações do documento
  • Como os Frames funcionam e como criá-los para iniciar
  • Como organizar o painel da esquerda para obter uma melhor estrutura e escalabilidade
  • Painel de camadas e gerenciamento de camadas
  • Variedade de camadas
  • Formas de organizar as camadas em um documento
  • Atalhos de teclado para acelerar e otimizar o trabalho

Prática. Projetando a Primeira Tela
  • Trabalhando com texto
  • Seleção de cor e as bases para trabalhar com o seletor
  • Como definir espaçamentos
  • Como trocar as fontes
  • Como definir o espaço entre as linhas, tamanho de fonte e espaço entre letras
  • Trabalhando com formas em vetores
  • Criando um botão
  • Como definir o preenchimento e linha externa de formas
  • Como rotacional element
Prática. Projetando a Primeira Tela
  • Salvando um documento
  • Exportando um arquivo .fig
Módulo 2 - Tendências, Referências e Moodboards
Case #2
Objetivo: Criar um website com várias páginas.

Finding Inspiration
  • Todos os projetos começam pela inspiração
  • Pesquisando ideias e conceitos
  • Selecionando referências visuais
  • Apresentando uma proposta de caminho para o cliente
  • Dicas para criar o seu moodboard

Prática. Criando uma apresentação
  • Creating the first draft of the presentation showing the visual style chosen for the client.
  • Criando o primeiro esboço de uma apresentação demonstrando o estilo visual escolhido para o cliente
Módulo 3 - Estilos Visuais e Interface do Usuário
Case #2 (Continuação)
Objetivo: Começar a definir a tipografia, cores, seus estilos e projetar a estrutura da página inicial

Introdução à tipografia e percepção do usuári
  • Dicas de legibilidade, SEO básico e exibição de conteúdo;
  • Por que usar parágrafos longos é uma má idéia;
  • Principais características dos grids modulares;
  • Como fazer as pessoas lerem os textos de fato;
  • Introdução à tipografia;
  • Como combinar fontes;
  • Fontes Display vs. Text;
  • Trabalhando com fontes;
  • Recursos e limitações de WebFonts;
  • Headings e estrutura HTML/CSS.

Prática. Trabalhando com texto
  • Adicionando títulos e caixas de texto;
  • Formatação de texto;
  • \Controlando parágrafos;
  • Design esteticamente amigável e harmônico;
  • Altura da linha e espaçamento entre letras;
Módulo 4 - Primeiros passos para criar uma página inicial
Case #2 (Continuação)
Objetivo: Criar a página inicial do site.

Estilos e componentes da página:
  • Tipos de páginas iniciais;
  • Diferença entre páginas promocionais, corporativas e "landing pages";
  • Componentes da Página Inicial;

Grid e Design Responsivo:
  • Tipos de grids e como configurá-las dentro do Figma;
  • Usando a grid de 12 colunas;
  • Diferenças entre responsivo e adaptativo;
  • "Mobile-First" Adaptive Web Design.

Prática
  • Trabalhando com grids e componentes de página;
  • Layout da página;
  • Aplicação de estilos gráficos;
  • Criando a página inicial.
Módulo 5 - Noções básicas sobre Design Gráfico para Web no Photoshop
Case #2 (Continuação)
Objetivo: Colocar um banner promocional na página inicial.

Prática. Recorte de imagem no Photoshop:
  • Técnicas;
  • Ferramenta de seleção rápida;
  • Ferramenta Laço Magnético;
  • Varinha mágica;
  • Ferramenta laço

Prática. Sombras:
  • Entendendo sobre as Sombras;
  • Estilo de camadas;
  • Sombras realistas;
  • Sombras multicomponentes.
Prática. Fundos/Segundo plano:
  • Noções básicas sobre fundos;
  • Fundos simples vs. complexos;
  • Gradientes.
Módulo 6 - Decomposição
A regra das 10.000 horas;
Método de decomposição.

PráticaTarefa: Decompondo a página inicial de um website;
  • Princípios de decomposição;
  • Grids;
  • Tipografia;
  • Cores;
  • Elementos;
  • Estruturando um UI-Kit.
Prática. Fundos/Segundo plano:
  • Noções básicas sobre fundos;
  • Fundos simples vs. complexos;
  • Gradientes.
Módulo 7 - Navegação & Estrutura
Tipos de Navegação:
  • Menu horizontal;
  • Menu vertical;
  • Menu Hamburger;
  • Menu suspenso;
  • Megamenu;
  • Navegação fora do padrão.

Estrutura do website:
  • Arquitetura da Informação (AI);
  • Mapas mentais;
  • Mapa do site.

Prática. Desenvolvendo um mapa mental:
  • Construindo um mapa mental baseado na estrutura do projeto;
  • Otimizando a estrutura de informações.
Módulo 8 - Conteúdo das telas do projeto
Objetivo: Criar uma revisão de uma subpágina importante do website.

Conteúdo essencial:
  • Citações;
  • Estilos de caixa de texto;
  • Tabelas;
  • Video Player;
  • Numeração;
  • Gráficos.

Elementos adicionais:
  • História e linha do tempo;
  • Galeria;
  • Sliders;
  • Calculadora.

Prática. Organizando o conteúdo:
  • Transformando meros textos e imagens em uma página da web impressionante.
Módulo 9 - Elementos e botões de formulário
Objetivo: Projetar um formulário de inscrição em várias etapas para o website da empresa, tornando-o atraente e fácil de usar.

Introdução à Usabilidade:
  • Princípios chave de usabilidade;
  • Exemplos (conveniente / fácil de usar / trabalhando / não funcionando).


User Interface Elements:
  • Botões;
  • Listas;
  • Grids;
  • Formulários;
  • Sliders.

Prática. Regras para criar formulários:
  • Estados diferentes;
  • Validação;
  • Mensagens de erro;
  • Passos;
  • Layout do formulário.
Módulo 10 - Sites adaptáveis: Versão Móvel
Objetivo: Entender os princípios de adaptabilidade e criar um conjunto de modelos móveis (quatro resoluções de tela).

Design Responsivo vs. Design Adaptativo:
  • Teoria da Adaptabilidade;
  • Exemplos.

Grids e multiplicidade
  • As melhores Grids Responsivas;
  • Multiplicidade.

Fontes e tamanho dos elementos:
  • Erros comuns ao redimensionar.

Prática. Projetando modelos móveis:
  • Criando um conjunto de quatro resoluções de tela com base na página inicial.
Módulo 11 - Landing Page: Cores, atmosfera e humor
Case #3:
Objetivo: Criar a Landing Page

Cores, atmosfera e humor
  • Teoria das cores;
  • Exemplos;
  • Dicas para substituir cores;
  • Usando máscaras de camada.

Retoque de imagem:
  • Essenciais;
  • Os problemas mais comuns (superexposição, cores impróprias, nitidez etc.);
  • Ajustando camadas;
  • Saturação;

Prática. Retoque de imagem:
  • Retoque de imagens para a Landing Page;
  • Usando níveis e curvas;
  • Ajustando Contrastes;
  • Consistência de imagens;
  • Remoção de defeitos menores.
Módulo 12 - Decomposição de uma Landing Page
Case #3 (Continuação)
Objetivo:
  • Decompor a landing page indicada;
  • Criar uma nova landing page.

Decomposição da Landing Page:
  • Princípios de decomposição;
  • Grades;
  • Tipografia;
  • Cores;
  • Elementos;
  • Estruturando um UI-Kit.

Prática. Decomposição da Landing Page
  • Decomposição da Landing Page semelhante à página inicial.
Módulo 13 - Criando uma apresentação
Case #3 (Continuação)
Objetivo: Criar uma apresentação para a Landing Page.

Estrutura de apresentação:
  • Princípios chave de uma apresentação;
  • Apresentação Positiva vs. Apresentação Negativa: exemplos.

Ferramentas de apresentação:
  • Photoshop;
  • Keynote;
  • PowerPoint;

Prática. Mockups:
  • Criando Mockups.
Módulo 14 - Entrega de Designer para Desenvolvedor
Objetivo: Preparar a transferência de documentos para entrega do projeto a um desenvolvedor.

Coisas a considerar:
  • Estados de formulário e botão;
  • Sliders;
  • Pop-ups.

Prática. Preparando uma Entrega do Desenvolvedor:
  • Coletando todos os documentos necessários.
Módulo 15 - Primeiro projeto no Behance
Objetivo: Transformar a Landing Page no primeiro estudo de caso no Behance.

Behance. A melhor plataforma para designers:
  • Inscrever-se;
  • Criando um portfólio no Behance;
  • Tipos de estudos de caso;
  • Estrutura perfeita de estudo de caso;
  • Os prós e contras da publicação de um estudo de caso.

Prática. Criando uma conta no Behance:
  • Inscreva-se e prepare-se.

Prática. Editor de portfólio do Behance:
  • Upload de um estudo de caso.
Web Design PRO
Módulo 1 — Introdução ao PRO
Introdução ao curso
  • Bem-vindo!
  • Quem é a Duck?;
  • Quais são nossas especialidades?
  • O que será comentado e abordado no curso?
  • Conhecendo os professores.

Mercado de Web Design e Especializações na Área

  • Como são divididas as áreas dentro do Web Design?
  • Características de UX, UI, Front e Back;
  • Perspectivas sobre a migração do Designer Gráfico para o Web;
  • Mercado Brasileiro de Web durante e pós-pandemia;
  • Dicas e observações sobre a área;
  • Referências e criação de uma rotina de inspiração.
Módulo 2 — Adobe XD
Introdução ao módulo
  • Bem-vindo ao módulo 2!
  • O que é o Adobe XD?;
  • Explicação sobre o #Case 1;
  • Em que casos o Adobe XD é utilizado.

Apresentação da ferramenta
  • Quais outras ferramentas são semelhantes ao Adobe XD;
  • Como o Adobe XD se encaixa no mercado de trabalho;
  • Baixando o Adobe XD e entendendo os primeiros passos dentro da ferramenta;
  • Visão geral sobre funcionalidades e ferramentas do Adobe XD;
  • Controle de formas geométricas, fontes, cores, artboards, e todas as ferramentas base do Adobe XD.

Criação de uma página no Adobe XD (Case #1)
  • Utilizaremos os conhecimentos adquiridos na aula anterior para criar uma landing para um banco digital (Case #1);
  • O aluno acompanhará a criação da landing page enquanto o professor explica o que está sendo feito.

Hometask (Case #1)
  • Primeira parte do exercício do Case #1, onde o aluno criará o design de uma landing page para um banco digital com os conhecimentos adquiridos no módulo.
Módulo 3 — Adobe XD (Avançado)
Introdução ao módulo
  • Bem-vindo ao módulo 3!
  • Visão geral sobre o que será visto no módulo 3;
  • Explicação sobre a continuação do #Case 1.

Apresentação da parte de prototipação
  • O que é a prototipação no Adobe XD?
  • Em que casos utilizamos a prototipação do Adobe XD?
  • Visão geral da utilização da prototipação e de como criar protótipos no Adobe XD.
Prototipação de uma página no Adobe XD (Case #1)
  • Utilizaremos os conhecimentos adquiridos na aula anterior para criar um protótipo baseado no design criado no módulo anterior, ainda atuando no Case #1;
  • O aluno acompanhará a criação da prototipação da landing page enquanto o professor explica o que está sendo feito.

Hometask (Case #1)
  • Segunda parte do exercício do Case #1, onde o aluno criará o protótipo do design da landing page criada no módulo anterior.
Módulo 4 — Wordpress
Introdução ao módulo
  • Bem-vindo ao módulo 4!
  • Visão geral sobre o que será visto no módulo 4;
  • Finalização do Case #1 em um site funcional a partir do Wordpress.

Visão geral sobre o Wordpress
  • O que é o Wordpress?
  • Em que casos utilizar o Wordpress?
  • Conhecimento sobre outros métodos de criação de site, além do Wordpress, entendendo vantagens e desvantagens;
  • Criando uma conta no Wordpress;
  • Visão geral sobre todas as funcionalidades e ferramentas presentes no Wordpress;
  • Entendendo como escolher um template para o seu projeto.

Utilizando o Wordpress para criar um site (Case #1)
  • Acompanhamos o professor enquanto ele utiliza todos os conhecimentos ensinados nas aulas anteriores para a criação do site de banco digital (Case #1) agora como um site funcional no Wordpress.

Hometask (Case #1)
  • Terceira e última parte do exercício do Case #1, onde o aluno criará o site do banco digital (Case #1) no Wordpress.
Módulo 5 — Apresentação PRO
Introdução ao módulo
  • Bem-vindo ao módulo 5!
  • Visão geral sobre o que será visto no módulo 5.

Estruturando o material de apresentação
  • Escolhendo o Software;
  • Por que nós vamos utilizar o InDesign.

Criando uma apresentação no In Design
  • Entendendo como funciona a estrutura de uma apresentação a partir da desconstrução do projeto
  • Utilizando a ferramenta e criando um projeto;
  • Utilizando as bibliotecas da Adobe;
  • Páginas mestres e numeração automática;
  • Aplicando o design da Landing Page para a apresentação;
  • Dicas para a apresentação com o cliente.

Mockups utilizando o Photoshop
  • Criando um mockup a partir da imagem da landing page;
  • Estilizando o mockup com outras imagens
  • Exportando e importando os mockups para dentro da apresentação no In Design;
  • Finalizando a apresentação.
Módulo 6 — Tendências, Referências e Moodboards
Introdução ao módulo
  • Bem-vindo ao módulo 6!
  • Visão geral sobre o que será visto no módulo 6;

Pré-design: a busca por referências
  • O que são tendências;
  • O que são referências e o que classifica plágio;
  • Coletando referências para o Case #2 utilizando o site Savee.it
  • Definindo a estrutura de seções do site institucional;
  • Analisando as referências e desenhando um sketch com papel e caneta do primeiro Wireframe;
  • Reproduzindo o desenho do Wireframe do papel para o XD;

Interface e Design: Começando o processo
  • Próximas etapas a partir do Wireframe no XD;
  • Analisando a Identidade Visual do cliente (Migo)
  • Criando e extraindo características visuais da Identidade Visual utilizando as bibliotecas da Adobe, com o Illustrator;
  • Adicionando cores, estilos tipográficos e escrita ao nosso wireframe;
  • Finalizando o design do Wireframe e refinamentos em títulos e textos;
Módulo 7 — Tipografia PRO
Introdução ao módulo
  • Bem-vindo ao módulo 7!
  • Visão geral sobre o que será visto no módulo 7;

Teoria Tipografia PRO
  • O que é uma tipografia e uma fonte;
  • Quais são os estilos e características de cada fonte;
  • Analisando o caso da Lebbre na tipografia;

Prática a Tipografia PRO
  • Onde se inspirar e coletando referências tipográficas aplicadas para web;
  • Analisando referências e contexto para aplicar no seu projeto;
  • Utilizando a extensão no Chrome "WhatTheFont"
  • Utilizando o Google Fonts
  • Analisando a Identidade Visual do cliente para combinação de fontes;
  • Testando diferentes combinações de fontes e estilos;
Módulo 8 — Estilo de Marca. Ícones (Illustrator)
Introdução ao módulo
  • Bem-vindo ao módulo 8!
  • Visão geral sobre o que será visto no módulo 8;
  • Escolhendo o software e por que a importância do vetor;
  • O que são vetores;
  • Formatos e exportar em .svg;
  • Exceções de exportação em formatos como image;
Teoria a Ícones e Estilos de Marca
  • Onde conseguir referências para iconografia;
  • Ícones gratuitos e pagos;
  • Criando um documento no Illustrator
  • Entendendo o básico da interface do software;

Prática a Ícones e Estilos de Marca
  • Estilizando o traçado
  • Adicionando cor e arredondando cantos
  • Exportando em diferentes formatos
  • Pack de icones: quando utilizar?;
  • Detalhes importantes analisando uma identidade visual;
Módulo 9 — UX Design
Introdução ao módulo
  • Resumo do que será visto no módulo;
  • Apresentação do Case #3 - Construção de um site para eventos (case real);

Teoria de UX Design
  • O que é UX?
  • Bad & Good UX: Entendendo na prática a experiência boa e a ruim ;
  • Empatizar: o caminho para entender o usuário;
  • Variáveis controláveis e não controláveis;
  • UI vs UX;
  • UX em pequenos projetos;
  • Investigação e melhores decisões a partir de pesquisa;
  • Pesquisa Qualitativa, Quantitativa, Auditoria e Fluxos;

Prática de UX Design
  • Entendendo na prática como aplicar UX a pequenos projetos;
  • Entrevistas, Hotjar e Analytics: Usando as ferramentas para design;
  • Construção de um relatório de pesquisa na prática;
  • Leitura de entrevistas reais e procedimentos de análise qualitativa;
  • Fazendo auditoria de sites e utilizando seus argumentos para aprovação facilitada;
  • Comparações e decisões pré-design;

Construção de Case #3
  • Análise e construção de um case real;
  • Você construirá a primeira metade do relatório de pesquisa para o projeto de site para evento.
  • A partir da identidade e materiais fornecidos você verá na prática como é construir argumentos a partir da investigação;
Módulo 10 — CJM, Persona e Fluxo de Navegação
Introdução ao módulo
  • Resumo do que será visto no módulo;
  • Continuação dos estudos de UX e segunda metade do relatório de pesquisa do Case #3.

Teoria de CJM, Persona e Fluxo de Navegação
  • O que é CJM? Para que serve?
  • Em quais casos devo montar e como posso fazer isto?;
  • Persona e Proto-persona: quais são as diferenças?;
  • Como e quando utilizar cada uma das modalidades de persona?;
  • Fluxo de navegação: o fechamento do relatório de pesquisa;
  • Plano de ação e ferramentas para construir um para seu projeto.

Prática de CJM, Persona e Fluxo de Navegação
  • Utilizando o UXPressia para centralizar a criação de um CJM;
  • Entendendo informações das entrevistas para efetuar a construção;
  • Montando uma proto-persona a partir das informações adquiridas;
  • Decidindo a partir das características identificadas;
  • Interpretando informações e sugerindo um sitemap;
  • Criação de Sitemap com o Miro.

Construção de Case #3
  • Continuação e finalização da construção do relatório de pesquisa;
  • Após a construção do relatório você poderá utilizar todo o conhecimento adquirido e o relatório gerado para tomar decisões no seu design.
Módulo 11 — Copywriting
Introdução ao módulo
  • Resumo do que será visto no módulo;
  • Finalização do Case #3 com a construção dos textos do site;

Teoria de Copywriting
  • Princípios básicos da linguagem e da comunicação;
  • Entendendo o espectro do bom copy: Tom de Voz, Estrutura e Clareza Organizacional e Empatia e interesse do usuário.;
  • Tom de voz: As 4 dimensões e como alcançar;
  • Estrutura e clareza organizacional: Hierarquizando informações;
  • Empatia e Interesse do Usuário: Seleção de pauta e comunicação da marca;
  • UX Writing permeando tudo: usando teorias de UX para estruturar de forma objetiva o conteúdo;
  • UI Copy e Microcopy: O que são e por quê devo prestar atenção neles?

Prática de Copywriting
  • Entendendo informações do relatório de pesquisa para estruturar hierarquias;
  • Mapeando ações e informações mais importantes dentro do site;
  • Hierarquizando uma estrutura de conteúdo;
  • Dando ênfase em títulos e diferentes estilizações;
  • Aplicando boas práticas nas ações de forma a deixar claro e objetivo para o usuário;
  • Utilizando palavras-chave importantes para fazer o texto de forma empática;

Construção de Case #3
  • Finalização do Case #3 - Construa os textos, os títulos e demais estilizações de forma a estruturar o site com qualidade;
  • Apresente todo o case em seu portfólio no Behance! Mostre a profundidade do seu trabalho construindo argumentos e investigando para chegar em uma interface.
Módulo 12 — Precificação e Entrega
Introdução ao módulo
  • Resumo do que será abordado no módulo;
  • Conversa, dicas sobre marca pessoal e materiais bônus.

Métodos de precificação e mercado
  • Aprenda sobre cada tipo de forma de precificação dentro do mercado de interfaces;
  • Vantagens e desvantagens das cobranças por FEE, projeto, impacto, valor hora e permutas e quando utilizar cada um deles.;
  • Quando devo pegar um job e quando não devo?;
  • Planejamento na construção de portfólio: segmentos;
  • Criando uma carreira dentro da área
  • Critérios relevantes para identificar bons e maus clientes;
  • Quero aumentar meu preço, e agora? Estratégias de médio prazo para aumento de ticket médio de seus projetos;
  • Capricho nos detalhes e na apresentação: trabalhando dicas importantes para o atendimento de seus clientes.

Trabalhando com Propostas
  • Construiremos juntos um modelo de orçamento bonito e prático para você no InDesign;
  • Ganhando o cliente na clareza e no design das informações;
  • Transparência em relação a preços e prazos;
  • Usando o Google Spreadsheets e a Mesclagem de Dados para não perder tempo;
  • Trabalhando com o modelo e enviando-o por e-mail.

Encerramento e Materiais Extras
  • Resumo geral do que foi visto ao longo de todo o curso;
  • Encerramento sobre jornada e indicação dos materiais extras que estão sendo oferecidos para facilitar a sua vida.
Módulo 1 — Introdução ao PRO
Introdução ao curso
  • Bem-vindo!
  • Quem é a Duck?;
  • Quais são nossas especialidades?
  • O que será comentado e abordado no curso?
  • Conhecendo os professores.

Mercado de Web Design e Especializações na Área

  • Como são divididas as áreas dentro do Web Design?
  • Características de UX, UI, Front e Back;
  • Perspectivas sobre a migração do Designer Gráfico para o Web;
  • Mercado Brasileiro de Web durante e pós-pandemia;
  • Dicas e observações sobre a área;
  • Referências e criação de uma rotina de inspiração.
Módulo 2 — Adobe XD
Introdução ao módulo
  • Bem-vindo ao módulo 2!
  • O que é o Adobe XD?;
  • Explicação sobre o #Case 1;
  • Em que casos o Adobe XD é utilizado.

Apresentação da ferramenta
  • Quais outras ferramentas são semelhantes ao Adobe XD;
  • Como o Adobe XD se encaixa no mercado de trabalho;
  • Baixando o Adobe XD e entendendo os primeiros passos dentro da ferramenta;
  • Visão geral sobre funcionalidades e ferramentas do Adobe XD;
  • Controle de formas geométricas, fontes, cores, artboards, e todas as ferramentas base do Adobe XD.

Criação de uma página no Adobe XD (Case #1)
  • Utilizaremos os conhecimentos adquiridos na aula anterior para criar uma landing para um banco digital (Case #1);
  • O aluno acompanhará a criação da landing page enquanto o professor explica o que está sendo feito.

Hometask (Case #1)
  • Primeira parte do exercício do Case #1, onde o aluno criará o design de uma landing page para um banco digital com os conhecimentos adquiridos no módulo.
Módulo 3 — Adobe XD (Avançado)
Introdução ao módulo
  • Bem-vindo ao módulo 3!
  • Visão geral sobre o que será visto no módulo 3;
  • Explicação sobre a continuação do #Case 1.

Apresentação da parte de prototipação
  • O que é a prototipação no Adobe XD?
  • Em que casos utilizamos a prototipação do Adobe XD?
  • Visão geral da utilização da prototipação e de como criar protótipos no Adobe XD.
Prototipação de uma página no Adobe XD (Case #1)
  • Utilizaremos os conhecimentos adquiridos na aula anterior para criar um protótipo baseado no design criado no módulo anterior, ainda atuando no Case #1;
  • O aluno acompanhará a criação da prototipação da landing page enquanto o professor explica o que está sendo feito.

Hometask (Case #1)
  • Segunda parte do exercício do Case #1, onde o aluno criará o protótipo do design da landing page criada no módulo anterior.
Módulo 4 — Wordpress
Introdução ao módulo
  • Bem-vindo ao módulo 4!
  • Visão geral sobre o que será visto no módulo 4;
  • Finalização do Case #1 em um site funcional a partir do Wordpress.

Visão geral sobre o Wordpress
  • O que é o Wordpress?
  • Em que casos utilizar o Wordpress?
  • Conhecimento sobre outros métodos de criação de site, além do Wordpress, entendendo vantagens e desvantagens;
  • Criando uma conta no Wordpress;
  • Visão geral sobre todas as funcionalidades e ferramentas presentes no Wordpress;
  • Entendendo como escolher um template para o seu projeto.

Utilizando o Wordpress para criar um site (Case #1)
  • Acompanhamos o professor enquanto ele utiliza todos os conhecimentos ensinados nas aulas anteriores para a criação do site de banco digital (Case #1) agora como um site funcional no Wordpress.

Hometask (Case #1)
  • Terceira e última parte do exercício do Case #1, onde o aluno criará o site do banco digital (Case #1) no Wordpress.
Módulo 5 — Apresentação PRO
Introdução ao módulo
  • Bem-vindo ao módulo 5!
  • Visão geral sobre o que será visto no módulo 5.

Estruturando o material de apresentação
  • Escolhendo o Software;
  • Por que nós vamos utilizar o InDesign.

Criando uma apresentação no In Design
  • Entendendo como funciona a estrutura de uma apresentação a partir da desconstrução do projeto
  • Utilizando a ferramenta e criando um projeto;
  • Utilizando as bibliotecas da Adobe;
  • Páginas mestres e numeração automática;
  • Aplicando o design da Landing Page para a apresentação;
  • Dicas para a apresentação com o cliente.

Mockups utilizando o Photoshop
  • Criando um mockup a partir da imagem da landing page;
  • Estilizando o mockup com outras imagens
  • Exportando e importando os mockups para dentro da apresentação no In Design;
  • Finalizando a apresentação.
Módulo 6 — Tendências, Referências e Moodboards
Introdução ao módulo
  • Bem-vindo ao módulo 6!
  • Visão geral sobre o que será visto no módulo 6;

Pré-design: a busca por referências
  • O que são tendências;
  • O que são referências e o que classifica plágio;
  • Coletando referências para o Case #2 utilizando o site Savee.it
  • Definindo a estrutura de seções do site institucional;
  • Analisando as referências e desenhando um sketch com papel e caneta do primeiro Wireframe;
  • Reproduzindo o desenho do Wireframe do papel para o XD;

Interface e Design: Começando o processo
  • Próximas etapas a partir do Wireframe no XD;
  • Analisando a Identidade Visual do cliente (Migo)
  • Criando e extraindo características visuais da Identidade Visual utilizando as bibliotecas da Adobe, com o Illustrator;
  • Adicionando cores, estilos tipográficos e escrita ao nosso wireframe;
  • Finalizando o design do Wireframe e refinamentos em títulos e textos;
Módulo 7 — Tipografia PRO
Introdução ao módulo
  • Bem-vindo ao módulo 7!
  • Visão geral sobre o que será visto no módulo 7;

Teoria Tipografia PRO
  • O que é uma tipografia e uma fonte;
  • Quais são os estilos e características de cada fonte;
  • Analisando o caso da Lebbre na tipografia;

Prática a Tipografia PRO
  • Onde se inspirar e coletando referências tipográficas aplicadas para web;
  • Analisando referências e contexto para aplicar no seu projeto;
  • Utilizando a extensão no Chrome "WhatTheFont"
  • Utilizando o Google Fonts
  • Analisando a Identidade Visual do cliente para combinação de fontes;
  • Testando diferentes combinações de fontes e estilos;
Módulo 8 — Estilo de Marca. Ícones (Illustrator)
Introdução ao módulo
  • Bem-vindo ao módulo 8!
  • Visão geral sobre o que será visto no módulo 8;
  • Escolhendo o software e por que a importância do vetor;
  • O que são vetores;
  • Formatos e exportar em .svg;
  • Exceções de exportação em formatos como image;
Teoria a Ícones e Estilos de Marca
  • Onde conseguir referências para iconografia;
  • Ícones gratuitos e pagos;
  • Criando um documento no Illustrator
  • Entendendo o básico da interface do software;

Prática a Ícones e Estilos de Marca
  • Estilizando o traçado
  • Adicionando cor e arredondando cantos
  • Exportando em diferentes formatos
  • Pack de icones: quando utilizar?;
  • Detalhes importantes analisando uma identidade visual;
Módulo 9 — UX Design
Introdução ao módulo
  • Resumo do que será visto no módulo;
  • Apresentação do Case #3 - Construção de um site para eventos (case real);

Teoria de UX Design
  • O que é UX?
  • Bad & Good UX: Entendendo na prática a experiência boa e a ruim ;
  • Empatizar: o caminho para entender o usuário;
  • Variáveis controláveis e não controláveis;
  • UI vs UX;
  • UX em pequenos projetos;
  • Investigação e melhores decisões a partir de pesquisa;
  • Pesquisa Qualitativa, Quantitativa, Auditoria e Fluxos;

Prática de UX Design
  • Entendendo na prática como aplicar UX a pequenos projetos;
  • Entrevistas, Hotjar e Analytics: Usando as ferramentas para design;
  • Construção de um relatório de pesquisa na prática;
  • Leitura de entrevistas reais e procedimentos de análise qualitativa;
  • Fazendo auditoria de sites e utilizando seus argumentos para aprovação facilitada;
  • Comparações e decisões pré-design;

Construção de Case #3
  • Análise e construção de um case real;
  • Você construirá a primeira metade do relatório de pesquisa para o projeto de site para evento.
  • A partir da identidade e materiais fornecidos você verá na prática como é construir argumentos a partir da investigação;
Módulo 10 — CJM, Persona e Fluxo de Navegação
Introdução ao módulo
  • Resumo do que será visto no módulo;
  • Continuação dos estudos de UX e segunda metade do relatório de pesquisa do Case #3.

Teoria de CJM, Persona e Fluxo de Navegação
  • O que é CJM? Para que serve?
  • Em quais casos devo montar e como posso fazer isto?;
  • Persona e Proto-persona: quais são as diferenças?;
  • Como e quando utilizar cada uma das modalidades de persona?;
  • Fluxo de navegação: o fechamento do relatório de pesquisa;
  • Plano de ação e ferramentas para construir um para seu projeto.

Prática de CJM, Persona e Fluxo de Navegação
  • Utilizando o UXPressia para centralizar a criação de um CJM;
  • Entendendo informações das entrevistas para efetuar a construção;
  • Montando uma proto-persona a partir das informações adquiridas;
  • Decidindo a partir das características identificadas;
  • Interpretando informações e sugerindo um sitemap;
  • Criação de Sitemap com o Miro.

Construção de Case #3
  • Continuação e finalização da construção do relatório de pesquisa;
  • Após a construção do relatório você poderá utilizar todo o conhecimento adquirido e o relatório gerado para tomar decisões no seu design.
Módulo 11 — Copywriting
Introdução ao módulo
  • Resumo do que será visto no módulo;
  • Finalização do Case #3 com a construção dos textos do site;

Teoria de Copywriting
  • Princípios básicos da linguagem e da comunicação;
  • Entendendo o espectro do bom copy: Tom de Voz, Estrutura e Clareza Organizacional e Empatia e interesse do usuário.;
  • Tom de voz: As 4 dimensões e como alcançar;
  • Estrutura e clareza organizacional: Hierarquizando informações;
  • Empatia e Interesse do Usuário: Seleção de pauta e comunicação da marca;
  • UX Writing permeando tudo: usando teorias de UX para estruturar de forma objetiva o conteúdo;
  • UI Copy e Microcopy: O que são e por quê devo prestar atenção neles?

Prática de Copywriting
  • Entendendo informações do relatório de pesquisa para estruturar hierarquias;
  • Mapeando ações e informações mais importantes dentro do site;
  • Hierarquizando uma estrutura de conteúdo;
  • Dando ênfase em títulos e diferentes estilizações;
  • Aplicando boas práticas nas ações de forma a deixar claro e objetivo para o usuário;
  • Utilizando palavras-chave importantes para fazer o texto de forma empática;

Construção de Case #3
  • Finalização do Case #3 - Construa os textos, os títulos e demais estilizações de forma a estruturar o site com qualidade;
  • Apresente todo o case em seu portfólio no Behance! Mostre a profundidade do seu trabalho construindo argumentos e investigando para chegar em uma interface.
Módulo 12 — Precificação e Entrega
Introdução ao módulo
  • Resumo do que será abordado no módulo;
  • Conversa, dicas sobre marca pessoal e materiais bônus.

Métodos de precificação e mercado
  • Aprenda sobre cada tipo de forma de precificação dentro do mercado de interfaces;
  • Vantagens e desvantagens das cobranças por FEE, projeto, impacto, valor hora e permutas e quando utilizar cada um deles.;
  • Quando devo pegar um job e quando não devo?;
  • Planejamento na construção de portfólio: segmentos;
  • Criando uma carreira dentro da área
  • Critérios relevantes para identificar bons e maus clientes;
  • Quero aumentar meu preço, e agora? Estratégias de médio prazo para aumento de ticket médio de seus projetos;
  • Capricho nos detalhes e na apresentação: trabalhando dicas importantes para o atendimento de seus clientes.

Trabalhando com Propostas
  • Construiremos juntos um modelo de orçamento bonito e prático para você no InDesign;
  • Ganhando o cliente na clareza e no design das informações;
  • Transparência em relação a preços e prazos;
  • Usando o Google Spreadsheets e a Mesclagem de Dados para não perder tempo;
  • Trabalhando com o modelo e enviando-o por e-mail.

Encerramento e Materiais Extras
  • Resumo geral do que foi visto ao longo de todo o curso;
  • Encerramento sobre jornada e indicação dos materiais extras que estão sendo oferecidos para facilitar a sua vida.
Escola online das profissões mais procuradas
Av. Brg. Faria Lima, 2369 - São Paulo -SP
© Mentorama, 2020 | CNPJ: 36.860.664/0001-78