Como fazer Landing Pages para Lançamentos no Figma | O Novo Designer
Вставка
- Опубліковано 15 вер 2024
- Design de Landing Pages para Lançamentos no Figma, aprenda como criar páginas que convertem quando respeitamos regras de Marketing de conteúdo e Design no Photoshop e Figma.
🔵 Conheça meus cursos
👉 hericky.com.br...
🔵Hospedagem + Elementor Pro + WP Rocket e mais 1 plugin grátis
👉sejaturbo.com....
👉 / herickyalencar
👉 Livros de Design
• Design Centrado no Usuário: amzn.to/3huZLLe
• O design do dia a dia: amzn.to/3w7UPkx
• Sprint: amzn.to/3hzcRqW
• Não me faca pensar: amzn.to/2UmFCij
• Mapeamento de experiência: amzn.to/3ylGm6h
• Isto é Design thinking de serviços: amzn.to/2UnMKeE
• Design de interação: amzn.to/2UVxXb3
• Usabilidade móvel: amzn.to/3hagLXX
• Design ergonomia emoção: amzn.to/2Ugq6og
• Lego Serious Play: amzn.to/3dBgsn6
• Design Thinking Brasil: amzn.to/3ylHRkV
• O design do futuro: amzn.to/3AkXafs
Nesse vídeo compartilho parte do processo de uma mentoria prestada para um aluno do Curso O Novo Designer, meu curso de Design para Marketing Digital, Design para Lançamentos e Design de Infoprodutos.
Compartilho regras importantes que podem impactar o desempenho da sua Landing Pages de captação de Leads.
Se você quer aprender mais sobre:
- Design para Landpages no Figma
- Design para Lançamentos digitais no Figma
- Estratégias de Design
- Design de Infoprodutos Digitais no Figma
Inscreva-se no Canal Designer Marketeiro
#designparalançamentosfigma
#designdeinfoprodutosfigma
#onovodesigner
![[AULA 🔥] Design para Lançamentos no Photoshop | O Novo Designer](/img/n.gif)
🔵Conheça o insitewp e aprenda viver da criação de sites sem códigos
👉 hericky.com.br/insitewp/?YTB&
Que aula!!! Eu nunca mexi com design para landing pages mas estou precisando aprender por causa do trabalho, você ensina muito bem e dá uma visão bem prática e eficiente das coisas, muito obrigada!
Obrigado Gabriela, aproveita e já assiste o vídeo completo pra dominar o figma do zero > ua-cam.com/video/Qodw1TuZslU/v-deo.html
O tanto que os seus conteúdos estão me ajudando do zero! Sou novo por aqui, mas já estou maratonando!
Mano continuaaaa cadê mais vídeos como esse?? Manda muito abraços mano. Parabéns pelo vídeo.
Sua didática é excelente irmão!
Rapaz, que aula! Show de bola demais. Estou começando agora no design de landing pages, me ajudou demais, valeu!
Opa, maravilha! Eu quem agradeço o feedback
Matou dúvidas pontuais que eu estava sobre blocagem de layout. OBRIGADO!
Aula incrível! Aprendi em 30 minutos o que eu precisava para landing pages. Ótima didática!
Que bom 😀 feliz em saber que gostou. Obrigado pelo feedback
Cara exatamente o que estava procurando, o mercado ta cheio de concorrentes e quero criar algo diferenciado, sua aula foi excepcional!!
@@herickyalencar
Que aula toppppp 🚀🚀🚀
Valeu man, vamo que vamo! 🚀
Nem sei como te agradecer cara, QUE AULA SENSACIONAL!! Parabéns pelo seu trabalho e obrigada por ajudar tanto!
Pelo amor de Deus posta mais vídeo assim free! Que fodaaa!
Na real, tô aprendendo mais por aqui do que com um curso que eu comprei
Atéme escrevi no canal para tentar aprender melhor esse figma, rapaz do céu é muita informações que meu juízo fica doido kkkk.
só essa dica das colunas já foi uma senhora ajuda mano. que coisa útil mano.
Opa, valeu demais!!
Obrigado 🙏
Show de conteúdo!!! Muito bom Hericky, obrigado por isso
Opa, valeu Julio.. vamo que vamo!!
Parabéns pelos detalhes nas informações. Obrigada.
Eu quem agradeço o feedback
Que aula meus amigos, que aula!!
Rápido e suscinto... mto top mano... clareou minha kbça de um tanto q tu nem faz idéia, parabéns pelo vídeo!
Opa, sensacional.. obrigado
amigão vc é excelente!!!
Meus parabéns top d+ você é um dos melhores em conhecimento até o momento na minha percepção..
Opa, valeu Jorge! Agradeço
Parabéns pela aula irmão, incrível!
Opa, valeu Kuan!!
Lindoooooo maravilhosão
Muito top irmão , parabéns pelo conteúdo , agregador , rico .
Show. Tenho dúvidas na organização dos layers para web, como a home, menus da página e as sessões no figma. Pode demonstrar em vídeo? Grato!
Massa, o figma é super tranquilo.
No início do vídeo que eu crio o artboard dá pra entender a base. Exemplo:
Artboard 1 - Home
- - Menu
- - - opcao a
- - - opcao b
- - Texto
- - Background header
Artboard 2 - Pagina de "sobre nós"
- - Texto
- - Header
Ou seja dentro dos Artboards você cria grupos sobre qualquer parte do site.
Grande aula!
Aula top;
vc é fera!
Obrigado irmão ajudou muito.
Show de bola Claudio!
Bom demais, obrigado!
Adorei a aula! É muito importante termos a independência de fazermos e criarmos nossas páginas de capitura, sobretudo no começo de um negócio. Eu tenho uma dúvida. Eu já tenho um site no wordpress e gostaria de criar páginas de capituras e inserir nele, e possível?
Muito obrigada.
Obrigado Bárbara, se o seu site já estiver tudo configurado com elementor, com certeza.
Afinal, como mostro no vídeo, você cria no figma, ganha tempo e só começa repassar pro site oficial depois de deixar como quer.
Incrível, que conteúdo excelente. você é fera demais
As dobras que se fala na construção de uma página de vendas por exemplo, geralmente tem esse tamanho de 1920 X 800? Ou pode ter outras variações como 1440 X 768? Como que funciona esta bagaça? Hahaha. Vídeo muito didático e direto ao ponto. Parabéns pelo conteúdo!
Incrível meus parabéns! por tá trazendo conteúdo de qualidade, mais como Eu posso da acesso a página de captura ,para
O cliente depois do pagamento.
Mesmo processo man.. no video eu mostro como o cliente recebe o layout para aprovar junto com você..
No video eu fiz o processo para quem só vai fazer o Design, compartihar com o cliente e com o programador.
Acho que a resposta já está no video hehe
Top demais!!!
Achei bacana demais a aula. Só estou sem saber como fazer integração com plugins de produtos e checkout transparente
Aula top 👏👏👏
otimo boa aula ...to apreendendo ...
Maravilha!! :)
Esse video anterior falando das cores ainda existe ?
muito bom mesmo
Obrigado!
Uma dúvida sobre o figma, depois você tem que levar em desenvolvedor back end para finalizar o site ? Ou e que nem o WordPress elementor?
Oi! Acho que no figma tem uma funcionalidade que permite pegar o código dos elementos criados, mas não sei ao certo se dá pra pegar ele todo, ou só os elementos. Não sei se isso te ajuda kkkkkk
@@socorrootubaraomemordeuaté tinha, porém o figma tornou essa opção de pegar o código dos elementos pago, agora só pagando você consegue o código, do contrário você tem que saber converter as informações em código
e qual a base de grid para tablet? Sei q são 8 colunas mas n sei o tamanho das bordas
Normal, basta pesquisar "Tablet Marca X dimensões"... E criar a partir do que escolher (geralmente o menor).
Opa! Amei a qualidade da sua câmera, qual é o modelo??
Opa, valeu.. É a webcam, Logitech StreamCam.
Tenho uma grande duvida na questão de transformar esse layout criado no Figma em uma pagina na web, é só mandar esse projeto pra o Elementor e lá lançar na internet ? Vc tem alguma aula explicando isso ? Muito bom seu conteúdo, desde ja te agradeço se responder a pergunta
Você usa o figma tipo um "Photoshop". Porém ele, diferente do Photoshop te possibilita ter todas informações do Layout, cores, espaçamentos, medidas, fontes, baixar ícones.. de forma muito mais rápida e fácil.
Fora que facilita muito fazer testes de cores, de formatos direto no figma, antes mesmo de ir montar ele no Elementor. Ou seja, figma é pra deixar o Layout mais próximo da realidade, antes de ir para o programador.
@@herickyalencar entendi, obrigado 🤙
Muito top!
Obrigado Renato!!
Como faz esse formulário para preenchimento do e-mail? No caso a parte do cliente escrever e mandar
Quero fazer alguns freelas, onde acho um dev pra trabalhar comigo?
me mandando mensagem kkkk quer meu currículo não?
Valeu, Hericky, grande aula. Uma dúvida, ao mandar o link para o meu cliente, e ele abrir no celular, vai abrir responsivo ou somente no pc?
Nesse caso é bom criar um novo arquivo e colocar o mobile sozinho, assim quando abrir já vai direto.
Mas geralmente eu já mando e peço pra ver no computador mesmo. Assim já vê os 2.
Hericky, você indica fazer a LP pelo Figma, do que o Photoshop?
Sim, eu prefiro.. pq é outra vida passar isso pra um programador.
Se você cria no Photoshop, precisa exportar tudo um a um montar pastinha para o programador encontrar os elementos...
No figma não, ele mesmo clica nos textos, imagens, ícones e já baixa, tem acesso as informações (igual mostro no vídeo).
Crio tudo no figma com ZERO imagens.. depois de formatar toda a LP eu vejo o que precisa de Background, imagem extra pra inserir no layout (já com tamanho reduzido).
Como posso hospedar essa página de captura
No Google?
Nesse caso o Figma serve literalmente pra deixar a página de captura o mais próximo possível de como quer ver ela na internet.
Hospedar o site é um outro processo:
- Comprar Domínio (www..)
- Comprar Hospedagem
- Comprar Licença do Elementor
- Apontar DNS para Hospedagem
- Recriar essa página no Elementor e publicar no Domínio.
PÔ Hericky! Quando eu vejo você trabalhando no layout responsivo para mobile e lembro que numa eventual alteração eu teria que fazer isso manualmente em todas as telas e, ao mesmo tempo lembro que o XD faz isso automaticamente, me dá uma agonia, velho!
O figma tbm faz irmão, apenas não trabalhei com componentes nesse vídeo.
@@herickyalencar Show de bola! Não sabia!
Ola!! Ao reduzir o peso da imagem por esse site a qualidade não ira cair consideravelmente?
Como eu conecto o elementor no meu site?
Quando eu aperto o R sobre o frame acaba criando uma mascara e não sobrepõe o retangulo.
irmão, landing page do link n ta funfando, retira o link
Sobre o curso, eu não consigo fazer a inscrição. Já foi encerrada?
Não cristiane, você pode entrar em designermarketeiro.com.br
boa noite.
Consigo exportar esse desenho pra codigo fonte html? (css, etc)
se sim, fica perfeito ou exporta com problemas?
Obrigado
Consegue sim, normal.. mas nesse caso já indico subir em .SVG, não JPG ou PNG..
Que assim ele já vem do formato correto.
@@herickyalencar é que eu desenvolvo com GO e MySQL. Só que frontend nao sou bom. E pra nao depender de outras pessoas, imaginava ao menos exportar o html, bootstrap, Js, css algo assim (nao sei o que Figma gera/exporta), pra ajudar nos sistemas que desenvolvo.
@@fredyburgos1334 Confere aqui: ua-cam.com/video/qVGHz9Hr1bU/v-deo.html&ab_channel=ExportKit
Acho que é isso que está falando.
Gente, vocês cobram quanto por uma landing page dessas?
No figma posso criar uma
Plataforma de curso online?
Sim, normal..
Site, Sistemas, Aplicativos...
@@herickyalencar mas o arquivo criado pode servir pra alguma coisa, ou só como rascunho/base pra ser refeito em outro lugar ?
amigo o lugar de colocar a senha e e-mail que você fez funciona na pagina de captura? tenho medo de mandar pro cliente e na hora não funciona.r
Amigo, essa aula é criando o Design da página.. Como a página ficará pronta se o cliente aprovar o LAYOUT.
Nada funciona, pois é no programa de criação.
Pesquisa por "prototipo" no figma.. assim você pode fazer um prototipo animado pra demonstração como fica o campo preenchido
Eu vou no site e diminuo o peso