🔥 A versão 2.0 está chegando. Aproveite os últimos dias com o preço antigo e tenha acesso a nova versão 🔥

Junte-se a +400 membros

Domine os processos de criação de websites e torne-se um destaque

Curved.svg

Curso online por apenas 12x de R$ 48,42

Logo-figma.svg
Frame-26.svg
Group-7529.svg

Acesso vitalício

Certificado de conclusão

Comunidade exclusiva

Aprenda com cases reais

Acesso vitalício

Certificado de conclusão

Comunidade exclusiva

Aprenda com cases reais

Conheça o WebProcess

Executar um projeto do zero até a entrega não é um bicho de sete cabeças. E para te provar isso, nós vamos abrir a caixa preta de um projeto de um cliente real e te mostrar todas as etapas, como o briefing, proposta, pesquisas, design, desenvolvimento e a entrega.

dccscs.svg

Criado por

Jonas Milan & André Valentim

Frame-26-1.svg
Group-7518.svg

Conheça o WebProcess

Executar um projeto do zero até a entrega não é um bicho de sete cabeças. E para te provar isso, nós vamos abrir a caixa preta de um projeto de um cliente real e te mostrar todas as etapas, como o briefing, proposta, pesquisas, design, desenvolvimento e a entrega.

dccscs.svg

Criado por

Jonas Milan & André Valentim

Group-7523-1.svg

O WebProcess é para designers de qualquer nível

Group-7519.svg

UI/UX Designer que estão querendo entrar no mundo freelancer desenvolvendo seus proprios projetos de website.

Group-7519.svg

Designers graficos que querem expandir suas entregas criando websites para seus clientes e assim ter ganhos maiores

Group-7519.svg

Se você está começando do zero, você vai navegar por todas as etapas, além de ter um direcionamento de como e o que você deve estudar.

Group-7519.svg

Pessoas em transição de carreira que se identificaram com o universo de interfaces, websites, no-code e que vem que esse é o melhor momento para começar

módulos do curso

O que você vai aprender

São mais de 80 aulas, divididas em 08 módulos que somam mais de 27 horas de conteúdo de alto nível.

dcsdcdscs.svg

Veja o curso por dentro

- 15:22

Stage 1 - Introdução
  • Boas-vindas ao WebProcess
  • Estrutura do curso, grupo de alunos e ferramentas
  • MasterFile e Bônus
  • Quem é Jonas Milan?
  • O que são bons websites?
Stage 2 - Entendimento
  • Sobre o projeto – Escopo/roadmap
  • Pré-briefing – Como fazer?
  • Proposta – Dicas de como criar um orçamento
  • Briefing – Como executar?
Stage 3 - Ideação
  • Pesquisa e documentação
  • Personas – Para que serve e como criar?
  • Organização no Figma
  • Sitemap – Criando o fluxo de navegação
  • Coleta de inspiração – Dicas e boas práticas
Stage 4 - Mini curso de Figma

Ministrado pelo convidado especial @luctalks ✨
Introdução e funcionalidades básicas
Componentes, Variants, Grids e Autolayout
Protótipos Navegáveis
Plugins super úteis para o dia a dia
Exercícios Práticos – Start Figma

Stage 5 - UI Design & Prototipação
  • Wireframe – Criando a estrutura do projeto (3 aulas)
  • Apresentando o Wireframe para o cliente ✨
  • Definindo as cores (2 aulas)
  • Copy – Convidado especial @imatheuscarvalho ✨
  • Ícones em UI Design
  • Aplicando ícones na prática
  • Imagens e efeitos em UI Design
  • Criando componentes reutilizáveis
  • Criando a versão mobile do site
  • Criando um protótipo navegável no Figma
  • Style Guide e Handoff
Stage 6 - Introdução ao desenvolvimento
  • Registrando o domínio do projeto
  • Contratando a hospedagem do projeto
  • Conectando o domínio com a hospedagem
  • Criando e-mails com o domínio do projeto
  • Instalando e conhecendo o WordPress
  • Instalando e conhecendo um pouco do Elementor Free
  • Iniciando o desenvolvimento de uma Landing Page
  • Criando as primeiras seções da Landing Page
  • Usando addons para criar um toggle no elementor
  • Introdução aos efeitos de movimento e micro interações no elementor (PT-1)
  • Criando o menu mobile da landing page
  • Ajustando o menu em telas intermediarias e conhecendo os breakpoints
  • Continuando a adaptação mobile da landing page
  • Finalizando a adaptação da landing page
Stage 7 - Desenvolvendo o projeto final
  • Style Guide (Part-1)
  • Style Guide (Part-2)
  • Criando o Header e o Footer do projeto
  • Criando a hero do projeto
  • Instalando e conhecendo o WordPress
  • Criando a secção de testemunhos
  • Criando a área de serviços do site
  • Criando a área de dúvidas frequentes
  • Criando a área de sobre o o Tiago Montes
  • Criando a página de catálogo de produtos
  • Criando o modelo de página de produto
  • Criando o sistema de postagens de produtos com JetEngine (PT-1)
  • Unindo a estrutura de post type com o modelo visual de postagem
  • Desenvolvendo a página de produto individual
  • Conhecendo o Jet Engine
  • Adaptando para as versões responsivas
  • Testes e otimização
  • Entrega do projeto
Stage 8 - Desafios e certificado

 

  • Instruções & regras
  • Desafio 01 – Feedback Easy
  • Desafio 02 – Landing-eBook
  •  
DROPS - Aulas Extras

Aulas extras sobre o universo de desenvolvimento de interfaces, websites, ferramentas, técnicas e dúvidas pontuais dos alunos(as).

 

  • Resgatando sua licença Gratuita do Elementor Pro
  • Efeito carrossel em loop – Elementor
  • Página inicial, Título e Favicon – Tutorial de WordPress
  • Corrigindo o erro nos links das postagens
  • Visual Inspector – Uma extensão que ajuda nos seus estudos
  • Vídeo de fundo com máscara no Elementor
  • Mesclando texto e imagens no Elementor
  • Happy Hues – Acesse lindas paletas de cores para usar em seus projetos
  • Texto curvado no Figma / Criando um selo
  • Criando colunas fixas no Elementor
  • Efeito de luz no Figma
  • Escondendo a barra de administração do wordpress
  • Como utilizar o Dribbble para publicar seus trabalhos
  • Criando uma ilustração isométrica com texto no Figma
  • Criando um menu ancora
  • Grids no elementor sem plugins
  • Botão com CSS personalizado (Exercício de elementor)
  • Selo com posição absoluta e animação de rotação infinita
  • Corrigindo o erro de tradução do Elementor
  • Adicionando backgound gradiente em botões de formulário
  • Resolvendo o problema de arredondamento dos cantos
  • Criando um efeito de hover com a função translate
  • Dica de quebra de texto no Elementor

aprendizado continuo

Vector-1.svg

O DROPS é um bônus disponível dentro do WebProcess com conteúdos extras sobre o universo de desenvolvimento de interfaces, websites, ferramentas, técnicas e dúvidas pontuais dos alunos(as).

Aprenda as principais ferramentas e ganhe muitos bônus

Ao fazer parte do WebProcess, você receberá vários bônus e materiais exclusivos para te ajudar no dia a dia, além de aprender as principais ferramentas do mercado. Tudo isso sem custos adicionais.

Check-68.svg

Uma licença do Elementor Pro

Check-68.svg

Desconto de hospedagem na Hostgator

Check-68.svg

Modelo de briefing

Check-68.svg

Modelo de proposta

Check-68.svg

Modelo de contrato

Check-68.svg

Template de pesquisa

Check-68.svg

Template de persona

Check-68.svg

Masterfile com links úteis

conheça o projeto

Do zero até a entrega

No treinamento vamos criar um website para um cliente real, o Tiago Montes, um Personal Shopper que trabalha com importação de produtos Apple e periféricos premium.

depoimentos

Avaliação de alunos e alunas

Path.svg

4.9/5

Nota
na Hotmart

investimento

E qual o investimento para tudo isso?

Você sabia que um estudante de Design gasta mais de R$ 20.000 em uma faculdade? E ainda assim muitas vezes sai despreparado para o mercado.

E você sabia que aplicando os métodos corretos é possível cobrar muito mais de R$ 3.000 em um site com apenas uma página, sem utilizar códigos?

Sabemos o quão difícil é para quem está começando nessa área. E por isso a nossa missão com o WebProcess é tornar o conhecimento mais acessível.

Aprenda a criar websites valioso$ na prática

De R$ 697,00 por apenas

12X de

R$ 48,42

ou R$ 497,00 à vista

Compra 100% segura via Hotmart

Junte-se a +400 alunos e alunas e garanta:

01 licença do Elementor Pro - R$ 257,47

Bônus e materiais complementares

Acesso vitalício

7 dias de garantia

Comunidade exclusiva

Certificado de conclusão​

+27h de conteúdo

instrutores

Feito por profissionais que atuam há anos no mercado

Mask-group.png
Vector-2.svg

Jonas Milan

Seu futuro instrutor de UI Design

Sua jornada no design começou em 2015, quando cursou tecnologia em Jogos Digitais na Unochapeco. Foi lá onde obteve muitos conhecimentos nas mais diversas áreas de criação. Atualmente trabalha como UI Designer na Rocketseat e freelancer, criando diversos tipos de projetos com um forte apelo visual. Além disso, é instrutor e produtor de conteúdo.

André Valentim

Seu futuro instrutor de desenvolvimento no code

Criador do famoso blog Polvo Criativo, possui mais de 08 anos de experiência em Design, Marketing Digital e lançamentos. Com uma forte bagagem no mundo do design, atua como produtor de conteúdo, instrutor e freelancer no code developer, desenvolvendo projetos de websites para o mundo todo.

Mask-group-1.png
Path.svg

Tudo o que você precisa saber sobre o WebProcess

Ainda tem alguma dúvida ou alguma sugestão? Nos envie uma mensagem.

O que é a versão 2.0?

Estamos produzindo uma atualização grande nos conteúdos, mudança na estrutura do curso e novos projetos.

 

Novos projetos:

 

  1. Projeto XBOX onde vamos abordar o desenvolvimento utilizando Containers do Elementor e interações avançadas.
  2. Novo projeto de cliente real do ramo de logística, com site one page e páginas dinâmicas.
Se eu comprar agora, vou ter acesso a versão 2.0?

Sim, todos os membros vão receber as atualizações futuras. 

O que é o WebProcess?

O WebProcess é um treinamento voltado para quem quer aprender ou aprimorar o processo de criação de websites. Para isso, vamos criar um projeto do zero, desde o briefing, pesquisas, wireframe, ui design e desenvolvimento. E o melhor, esse website é de um cliente real.

Para quem é destinado?

Aprender e dominar cada etapa de criação de um site é essencial para quem deseja evoluir na área, criar projetos com mais qualidade e assertividade, e se tornar um profissional mais procurado e qualificado.

Recomendamos o curso para quem está migrando para Web design, UI/UX e profissionais que querem aprender a desenvolver seus próprios websites como freelancer.

Quanto custa?
 

Você vai ter que ser ágil, porque a qualquer momento poderemos bater o limite que estipulamos para novos alunos.

E se eu não gostar?

Você tem a garantia de 07 dias. Se dentro desse período você não se adaptar ou perceber que o curso não é para você, devolvemos o seu dinheiro, o risco é nosso!

Terei acesso vitalício?

Sim, quem adquirir o treinamento terá acesso permanente enquanto o curso existir, tendo acesso a todas as novas atualizações, se houver.

Como vou tirar minhas dúvidas?

A plataforma do curso terá uma área para você enviar suas dúvidas. Também temos uma comunidade exclusiva de alunos no Discord.

O curso terá certificado?

Sim! Mas para obter o certificado você terá que fazer alguns exercícios práticos. 

Quais ferramentas serão utilizadas?

Notion para organização, Figma para criação da interface e WordPress com o Elementor para o desenvolvimento do website.

Como resgato minha licença do Elementor Pro?

Temos uma aula especifica explicando como você pode obter sua licença gratuita do Elementor Pro.

Você tem direito de solicitar sua licença no período de 01 ano, contando a partir da data da aquisição do curso.