Nesse módulo apresentamos de forma breve, como funciona o curso.

• Boas-vindas ao WebProcess
• Conhecendo a estrutura das aulas
• Comunidade exclusiva no Discord & Bônus
• Gerando seu ID Card
• Ferramentas
• Quem é Jonas Milan?
  
• O que são bons websites?

Nesse módulo abordamos todas as etapas de criação de sites com exemplos reais.

• Processos de Design
• Pré-Briefing: A primeira etapa de um projeto
• Como criar uma Proposta Comercial
• Como precificar seu trabalho
• Contrato de prestação de serviço
• Briefing: Dados necessários para criar um projeto
• Pesquisa & imersão
• Sitemap – Como criar a estrutura de um site ou página
• Wireframe: Criando a estrutura visual
• Coleta de inspirações
• Copy para Landing pages: como escrever textos que vendem(em breve)
• Interface em alta fidelidade
• Implementação: dando vida ao site
• Como entregar um website para o cliente

Antes de sair criando seus projetos, é bom conhecer os tipos de website e saber os objetivos de cada um. Além disso, nesse módulo você recebe dicas e boas práticas com base em sites reais.

• Introdução ao módulo
• Institucional
• Landing pages
• Páginas de vendas
• Blog
• Loja virtual
• Portfólio
• Site onepage

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

Nesse módulo vamos entrar no mundo de desenvolvimento, com aulas sobre domínio, hospedagem e WordPress + Elementor

• 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

Nesse módulo vamos construir um site de cliente real do zero, de uma forma detalhada, mostrando realmente todas as etapas de criação.

• Sobre o projeto – Escopo/roadmap
• Organização no Figma
• Coleta de inspiração (2 aulas)
• 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

Nesse módulo vamos dar vida ao projeto do Tiago Montes. Aprenda como passar um projeto do Figma ao WordPress + Elementor PRO.

• 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

Um módulo completo onde desenvolvemos um projeto incrível com o método Container do Elementor. Além de utilizar interações avançadas na medida certa.​

• Link do Projeto – Figma
• Cabeçalho e rodapé
• Hero e vantagens
• Seção Browse
• Seção Games
• Seção Controller
• Seção inside
• Seção Pre Order
• Criando o menu Fixo com âncoras
• Iniciando as interações e animações da página
• Efeitos de movimento da seção games
• Efeitos de movimento da seção controller
• Finalizando as animações da página

O projetoBorder-IA foi criado no WebJourney, um evento online que aconteceu de 26 a 30 de junho de 2023.

Foram três aulas práticas, onde falamos como iniciar no mercado de sites e landing pages e criar um projeto do zero mesmo sem conhecimento prévio.

Devido a muitos pedidos dos alunos do WebProcess, disponibilizamos as aulas aqui no curso como um conteúdo extras🤘🏼

• Aula 01 – Como iniciar na área de UI Design e criação de website
• Aula 02 – Criando uma landing page do zero no Figma
• Aula 03 – Desenvolvendo o site no WordPress + Elementor
• Aula 04 – Adaptação responsiva do projeto

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

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
• E muito mais ✨