Trilha da Formação LPS · por nível · 10 etapas
Landing pages de alto padrão: trilha para quem já cria páginas
Para quem já entrega páginas e quer cobrar mais pela qualidade. Briefing com autoridade, estrutura de lançamentos, Figma avançado, banners, Photoshop, efeitos, diretrizes de design e otimização de conversão.
-
1
Briefing com autoridade
Como conduzir o briefing com autoridade. Inclui modelo pronto e chamadas reais gravadas com advogado empresarial, advogada criminal, marketing médico e lançamento pago.
- Briefing
- Modelo pronto de briefing
- Briefing chamada gravada com cliente copywriter
- Chamada de briefing com cliente advogado empresarial
-
2
Design dentro do Lançamento
Onde o design entra em cada fase de um lançamento e a estrutura baseada em conversão das páginas de captura, de obrigado e de vendas.
- Design estratégico - introdução
- Fases de um lançamento
- Grandes players
- Onde o design entra nos lançamentos
-
3
Figma Avançado
Style guide de tipografia e cores, autolayout, componentes, máscaras e degradês para banners, timelines, infográficos e mockups isométricos.
- Como criar um style guide: tipografia e cores
- Criação de botão com autolayout no Figma
- Como usar camadas, máscaras e degradês para criar banners no Figma
- Componentes no Figma
-
4
Plugins essenciais do Figma
Os plugins que aceleram a criação: sombras, mockups, logos, perspectiva, efeitos, WebP, ícones, texturas, contraste e halftones.
- Plugin de sombras
- Plugin de mockups
- Plugin para encontrar logos
- Plugin para geração de textos Lorem Ipsum
-
5
Criação de Landing Pages no Figma
Páginas reais criadas do zero no Figma: landing page de médica com wireframe, banners e mobile, página de captura, página de vendas de workshop e link da bio.
- Criação landing page no Figma - médica (criação wireframe)
- Criação landing page no Figma - médica (criação banners)
- Criando o mobile completo página - médica
- Por que eu não faço o mobile das páginas no Figma?
-
6
Criação de Banners
Fundamentos de um bom banner, o método CAMADA e banners reais para médica, endocrinologista, mentoria, advogado e curso.
- Fundamentos de um bom banner
- Método CAMADA
- Remover fundo de imagens - Picwish
- Como usar camadas, máscaras e degradês para criar banners no Figma
-
7
Photoshop essencial
Ferramenta generativa, máscaras, objetos inteligentes, remoção de fundo, Camera Raw, modos de mesclagem e um banner de advogado do início ao fim.
- Photoshop - como contratar com desconto
- Introdução e ferramenta generativa
- Conta gotas, ferramenta de texto e formas geométricas
- Ferramenta de pincel
-
8
Efeitos e códigos úteis
Scroll suave, efeitos de entrada, folha dourada em movimento, elementos girando, faixas animadas e setas com HTML e CSS.
- Efeito scroll suave página
- Efeitos de entrada com HTML e CSS
- Efeito folha dourada CSS se movendo
- Efeito elemento rodando com CSS
-
9
Diretrizes de Design
O raciocínio por trás das decisões de design, análises gravadas de páginas e revisões de páginas de alunos.
- Por que eu não faço o mobile das páginas no Figma?
- Extensões para o Chrome que todo webdesigner deveria utilizar
- Botões
- Gravação análise de páginas
-
10
Otimização e CRO
Ferramentas e métricas de velocidade, WebP, WP Rocket, LiteSpeed Cache, Tag Manager, Analytics, Clarity, API de conversão e webhook com Make.
- Ferramentas para testar velocidade
- Métricas importantes
- Usando o Speed Vitals na prática (parte 1)
- Transformando imagens para WebP com plugin