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!
Papo reto, Sou designer a 3 anos, estou entrando na area de UI/UX devido a um recem emprego, e cara seus videos são os melhores pra aprender rapido, seloco! parabens
Cara exatamente o que estava procurando, o mercado ta cheio de concorrentes e quero criar algo diferenciado, sua aula foi excepcional!! @@herickyalencar
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.
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
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.
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!
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
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.
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.
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).
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.
@@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.
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
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!
![Como Criar uma Landing Page Profissional no Figma [Tutorial Completo]](http://i.ytimg.com/vi/FMlHlI5U5ks/mqdefault.jpg)
![Como Criar uma Landing Page Profissional no Figma [Tutorial Completo]](/img/tr.png)
👉 Conheça o INSITEWP e o CURSO DE UX/UI: hericky.com.br/descricao
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 > ruclips.net/video/Qodw1TuZslU/видео.html
Papo reto, Sou designer a 3 anos, estou entrando na area de UI/UX devido a um recem emprego, e cara seus videos são os melhores pra aprender rapido, seloco! parabens
Mano continuaaaa cadê mais vídeos como esse?? Manda muito abraços mano. Parabéns pelo vídeo.
Que aula, meu amigo. Parabéns!
O tanto que os seus conteúdos estão me ajudando do zero! Sou novo por aqui, mas já estou maratonando!
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!
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.
Sua didática é excelente irmão!
Que fluidez maravilhosa dessa câmera bro, certeza que tem uma câmera de 64 quadros.
Qual a câmera ou webcam?
Pelo amor de Deus posta mais vídeo assim free! Que fodaaa!
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
Nem sei como te agradecer cara, QUE AULA SENSACIONAL!! Parabéns pelo seu trabalho e obrigada por ajudar tanto!
Na real, tô aprendendo mais por aqui do que com um curso que eu comprei
só essa dica das colunas já foi uma senhora ajuda mano. que coisa útil mano.
Opa, valeu demais!!
Parabéns pelos detalhes nas informações. Obrigada.
Eu quem agradeço o feedback
Que aula meus amigos, que aula!!
Grande aula!
Lindoooooo maravilhosão
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
vc é fera!
Aula top;
Que aula toppppp 🚀🚀🚀
Valeu man, vamo que vamo! 🚀
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
Top demais!!!
Bom demais, obrigado!
Obrigado irmão ajudou muito.
Show de bola Claudio!
Show de conteúdo!!! Muito bom Hericky, obrigado por isso
Opa, valeu Julio.. vamo que vamo!!
Parabéns pela aula irmão, incrível!
Opa, valeu Kuan!!
Muito top irmão , parabéns pelo conteúdo , agregador , rico .
Incrível, que conteúdo excelente. você é fera demais
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.
otimo boa aula ...to apreendendo ...
Maravilha!! :)
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
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.
muito bom mesmo
Obrigado!
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!
Aula top 👏👏👏
Achei bacana demais a aula. Só estou sem saber como fazer integração com plugins de produtos e checkout transparente
Muito top!
Obrigado Renato!!
Opa! Amei a qualidade da sua câmera, qual é o modelo??
Opa, valeu.. É a webcam, Logitech StreamCam.
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
Esse video anterior falando das cores ainda existe ?
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 🤙
Como faz esse formulário para preenchimento do e-mail? No caso a parte do cliente escrever e mandar
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).
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.
Quero fazer alguns freelas, onde acho um dev pra trabalhar comigo?
me mandando mensagem kkkk quer meu currículo não?
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 eu conecto o elementor no meu site?
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.
Ola!! Ao reduzir o peso da imagem por esse site a qualidade não ira cair consideravelmente?
Quando eu aperto o R sobre o frame acaba criando uma mascara e não sobrepõe o retangulo.
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: ruclips.net/video/qVGHz9Hr1bU/видео.html&ab_channel=ExportKit
Acho que é isso que está falando.
cara, vc faz uma landing page pro meu produto? quanto vc cobra?
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
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
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!
Eu vou no site e diminuo o peso
Gente, vocês cobram quanto por uma landing page dessas?