5 steps to build your first landing page

Você esta tentando criar uma landing page para seu projeto e não sabe por onde começar? E verdade que tem muita coisa para se pensar, desde usar as ferramentas certas até o design e o código que estrutura sua página. Para ajudar, simplificamos o processo em 5 etapas simples de seguir, para você poder criar essa pagina hoje! Venha conferir como!

O objetivo de uma landing page é de promover sua marca e converter usuários em potenciais clientes. E a porta de entrada do seu site e da uma oportunidade de mostrar o que sua marca representa. A gente sabe o quanto primeiras impressões contam, por isso sua landing page tem que ser clara, informativa e impactante. Com tanta coisa a pensar até mesmo antes de começar a programar, é sempre difícil saber por onde começar. Para ajudar, resumimos o processo em 5 etapas fáceis de se seguir, para você poder construir sua primeira landing page hoje.

Etapa 1. Faça o set up e desenha no papel.

Ter o setup correto antes de codar é muito importante. O setup não somente inclui baixar um bom editor de texto mas também planejar o desenho da sua página. Nos recomendamos Sublime Text como editor de texto, porque tem umas features legais de auto completion e highlighting de sintaxe. Isso faz seu código ser mas bonito, e codar mais fácil. Em seguido, pense na estrutura da sua página e como vai ser o look dela. Tente separar suas ideias em seções e desenhe esses blocos num papel para criar o esqueleto do que você esta construindo. Esse esboço rápido vai ser muito útil na etapa 2. Não esqueça de baixar um navegador bom tipo Chrome. Vai precisar disso para mostrar seu código e testar para fazer correções rápidas. Abaixo é um exemplo de esboço de esqueleto.

Etapa 2. Da a vida a seu esqueleto

Mesmo se o HTML não é o mais bonito sem o CSS, uma estrutura limpa é importante para construir uma landing page bonita. O documento HTML é dividido em 2 partes: <head></head> e <body></body>. O <head> guarda a inteligência da página, enquanto o <body> guarda o conteúdo e a estrutura. Para uma estrutura limpa, cada seção do esqueleto/esboço deveria ser encapsulado na própria tag <div>. Podem adicionar classes a essas tag <div>, para poder chamar elas individualmente com estilo CSS especifico. (Estilo sera abordado na Etapa 4!). Lembrem de usar tags de header e parágrafos quando adicionar seu texto. Isso adiciona estrutura ao seu conteúdo e da relevo aos elementos de texto importante da sua página. Veja aqui um exemplo de uma seção de top banner encapsulada numa tag <div> com uma class chamada "banner". Ela contem um tag header, um tag parágrafo e um link de "call to action".

<div class="banner">   <h1>Change your life, learn to code</h1>   <p>Le Wagon brings technical skills to creative people</p>   <a href="https://www.lewagon.com" target="_blank" class="btn-blue">Apply now</a> </div>

Etapa 3. Adicione um pouco de impacto

Agora que sua estrutura e seu conteúdo estão organizados, seu site esta se formando. Mas um usuário pode se assustar com muito texto, por isso vale a pena inserir imagens legais para aumentar impacto e chance de conversão. A seleção de imagens é essencial para comunicar e transmitir as emoções que sua marca carrega. Landing pages geralmente tem encima uma seção de banner com uma imagem de fundo larga e um texto por cima. O objetivo é atrair a atenção do usuário para o call to action e criar o desejo deles quererem saber mas sobre o seu site e marca. Usar imagens de qualidade é importante mas não se preocupem se você não for um fotografo professional. Pode usar site como unsplash.com para encontrar o que precisar.

Etapa 4. Vamos estilizar.

CSS esta ai para isso, dar um bela estilizada no seu esqueleto HTML da etapa 2. Antes de codar, pense em quem é sua audiência target e como isso pode influenciar seu design. Recomendamos não usar mas que 3 cores para o site inteiro, uma cor dominante, que vai ser aquela associada com sua marca, e duas cores complementares para criar seu "colour scheme". Se você não confiar muito no seu próprio gosto (acontece...), pode usar ferramentas como colorhunt e coolors. Consistência é chave no seu estilo, para escolher cores, mas também fontes. Ter um máximo de 2 fontes diferentes para seus headings e parágrafos pode ajudar a dar continuidade no site e transmitir firmeza a sua marca. Google fonts são de graça, fáceis de usar e tem uma larga seleção de estilos para poder escolher. Lembra que se você adicionou classes a suas seções HTML na etapa 2, agora você pode adicionar estilo individual a elas no seu CSS. Veja o exemplo de estilo CSS para a classe "banner" que tínhamos criado na etapa 2, com o exemplo de implementar uma imagem de fundo forte da Etapa 3.

.banner {   background-image: url('images/background.jpg');   background-size: cover;   background-position: center;   padding: 150px 0;   text-align: center; }

Etapa 5. Torne seu site responsivo

Até agora, criamos uma estrutura de página HTML, adicionado imagens e estilizado com CSS. Mas se ficou bonito no desktop, sem media queries, tem alta chance de aparecer todo zuado no mobile. Acesso via smartphone representam uma maioria dos acessos dos seus usuários potenciais. Por isso é tão importante fazer seu site responsivo. Adicionar media queries ao seu arquivo CSS ajuda a modificar o comportamento dos elementos em função do tamanho do aparelho do usuário. Isso garante uma boa experiência de uso, não importa qual aparelho seja usado para acessar. Por exemplo, vamos imaginar que você quer so 1 coluna no seu grid de cards no mobile e tablet em vez de 3 no desktop, pode adicionar isso no seu CSS:

@media (max-width: 800px) {   .cards {     grid-template-columns: 1fr;   } }

Isso significa que se a tela do navegador do usuários é menor que 800px, a regra de estilo vai se aplicar. Pode se adicionar regras assim em diferentes lugares. Veja um template de exemplos de regras comuns:

// Smallest device @media (min-width: 100px) and (max-width: 575px) {   // CSS for this breakpoint }  // Small devices (landscape phones, 576px and up) @media (min-width: 576px) {    // CSS for this breakpoint }  // Medium devices (tablets, 768px and up) @media (min-width: 768px) {    // CSS for this breakpoint }  // Large devices (desktops, 992px and up) @media (min-width: 992px) {    // CSS for this breakpoint }  // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) {    // CSS for this breakpoint }

Se você gostou desse artigo, pode continuar navegando no nosso blog que tem vários artigos legais para entender melhor de programação.