Ferramentas úteis para construir uma landing page

Ao aprender sobre programação, podemos nos deparar com duas fases distintas

1. Aprendendo sobre os fundamentos: Você começa a explorar a anatomia de um programa de computador, aprende a pensar em problemas simples em termos de unidades lógicas e começa a formalizar essas unidades em instruções de código. Nesta fase, você aprende sobre assuntos abstratos e práticas simples. Se feito corretamente e com o tempo apropriado, qualquer pessoa seria capaz de compreender e escrever programas lógicos simples usando uma linguagem de sua escolha.

2. A segunda fase, que a maioria das pessoas acha um pouco mais assustadora, consiste em aprender um ecossistema de desenvolvimento: o próximo passo natural após adquirir conhecimento simples de programação é escolher um subdomínio de programação (desenvolvimento web, desenvolvimento de aplicativos móveis, sistemas embarcados e similares). ) e comece a aprender como resolver problemas usando essa plataforma específica. A dificuldade aqui é que não se trata mais de cobrir um conjunto de fundamentos, praticar cada conceito e repeti-lo. Muitas vezes é impossível abranger todas as ferramentas, todas as tecnologias e seguir todos os princípios. A maneira certa de fazer isso é fazer uma boa quantidade de experimentação e pesquisa. Provavelmente, você só precisará adquirir algumas habilidades e usar diversas ferramentas para iniciar tarefas simples. Quando estiver confortável nesse nível, você pode tentar expandir para um novo conjunto de ferramentas e evoluir de forma constante. Seguindo esta metodologia, tentaremos construir uma base sólida no domínio do desenvolvimento web através da exploração das tecnologias e ferramentas utilizadas para a construção de landing pages simples.

Nesta postagem do blog, faremos uma breve exploração do cenário de desenvolvimento web frontend, com foco no desenvolvimento de landing pages. Analisaremos uma seleção de recursos que recomendamos que você verifique para as diferentes partes do desenvolvimento que você pode encontrar. Ao final deste artigo, você terá uma ideia muito mais clara de como construir uma landing page. Confira este vídeo complementar para ver um exemplo prático.

Cenário de desenvolvimento da página de destino

Uma página de destino é um termo inicialmente empregado por especialistas em marketing digital para se referir a uma página da web independente usada para fins de campanha de marketing e publicidade. O conceito é bastante simples: um visitante interessado em um produto ou serviço fornecido por uma empresa clica em um link do referido produto e, em seguida, “chega” a uma página web que possui uma rica descrição combinando texto, imagens etc. serviço. A página contém um botão de compra, denominado “CTA” (Call To Action) com o objetivo de converter o visitante em cliente pagante. Como é de se esperar, criar uma boa experiência do usuário é fundamental para ter uma boa taxa de conversão.

Ao longo deste artigo, conheceremos diversas formas e ferramentas que nos permitirão construir landing pages que cumpram sua função. É importante mencionar que existem outras considerações na construção de landing pages relacionadas ao SEO (Search Engine Optimization). SEO será abordado em workshops futuros.

Inspiração de design

Quer você tenha experiência na construção de páginas de destino ou esteja apenas começando, descobrirá que muitas vezes é difícil identificar exatamente como deseja que seu site seja. Também é frequente, ao trabalhar com clientes, que eles não saibam exatamente que design desejam para sua página web. Normalmente, a maquete e o protótipo do design seriam entregues ao desenvolvedor por um web designer especializado nesse tipo de trabalho. Pode ser útil ter uma fonte confiável de designs web. Essas fontes permitirão que você se mantenha atualizado com as tendências de design, aumente sua criatividade e… comece. Dois dos melhores recursos que você pode usar para obter inspiração de design para seu próximo projeto são Dribbble e Behance.

Drible

Dribbble é provavelmente o recurso mais popular no espaço de web design. É uma comunidade de designers que compartilham seus trabalhos para aprimorar suas habilidades, ajudar uns aos outros e obter feedback construtivo. Ele contém uma ampla variedade de designs em praticamente qualquer assunto ou campo, feitos por pessoas criativas de todo o mundo, juntamente com o feedback da comunidade, tornando-o um lugar ideal para se inspirar.

###Behance

Behance é outra comunidade de design popular que pode ajudá-lo a encontrar inspiração. Este site oferece recursos de pesquisa avançada que fornecem acesso fácil a trabalhos específicos de seu interesse, usando palavras-chave, campos e paleta de cores. Também é importante observar que o Behance faz parte da Adobe e se integra perfeitamente à Adobe Creative Cloud.

Dribbble e Behance são ótimas plataformas para inspiração em web design e você não pode errar com nenhuma delas. Nós encorajamos você a começar a explorar designs e criar os seus próprios!

Prototipagem de Design

Agora que você se inspirou no trabalho de designers talentosos, é hora de começar a prototipar o design da sua landing page. A prototipagem é uma fase importante da construção de uma landing page. Pode ser definido como o processo experimental onde você implementa ideias em estruturas visíveis, para que possa refiná-las e validá-las com sua equipe ou cliente. Ao final da fase de prototipagem, você terá um design pronto para ganhar vida em sua landing page.

Há uma infinidade de soluções de software que podem ser usadas para construir protótipos de design. Na verdade, são tantos que pode rapidamente se tornar um desafio avaliar, comparar e escolher uma ferramenta. Usaremos o Figma, pois é comumente usado por ux/ui designers. Se quiser aprender como usar o Figma para prototipagem, você pode conferir nosso curso intensivo no YouTube aqui.

Figura

Figma é uma ferramenta de design completa que torna mais fácil para designers e desenvolvedores de UX construir e colaborar em protótipos de design em uma plataforma baseada em navegador e hospedada na nuvem . Figma enfatiza a simplicidade e facilidade de uso.

A interface do Figma permite criar elementos e estilizá-los, controlando a aparência do texto, grades e outros componentes na página. Ele oferece uma ampla variedade de plug-ins complementares, como Autoflow para mostrar fluxos de usuários, Figmotion para animações e muito mais.

Ícones e fontes

Tipografia e ícones de estilo são alguns dos recursos mais simples de usar para elevar a aparência de qualquer página da web. Você deseja usar a fonte e os ícones corretos em sua página de destino para corresponder à ideia geral que deseja comunicar. Felizmente, é fácil encontrar e aplicar uma grande seleção de fontes e ícones usando Font Awesome ou Google Fonts.

Fonte incrível

Font Awesome é um kit de ferramentas de fontes e ícones baseado em CSS e Less . Em 2020, Font Awesome era usado por 38% dos sites que usam scripts de fontes de terceiros, ficando em segundo lugar depois do Google Fonts (Wikipedia).

Font Awesome é suportado por muitas bibliotecas frontend, como Bootstrap, para a qual foi feito inicialmente. Font Awesome torna a integração de fontes e ícones em uma página da web tão fácil quanto incluir um link CDN. Essa facilidade de uso, juntamente com sua grande seleção de fontes e ícones, tornaram-no a solução mais popular no mercado.

Fontes do Google

Google Fonts é um serviço da web gratuito e de código aberto oferecido pelo Google para incorporação de fontes em sites. Oferece integrações perfeitas e um alto nível de flexibilidade e personalizações.

Implante sua página de destino

Agora que você construiu sua landing page, é hora de compartilhá-la com todos! A etapa final é implantar sua landing page usando uma solução de provedor de hospedagem. Github Pages e Vercel são nossas principais opções. Eles são os mais populares e mais fáceis de usar. Vercel é a ferramenta apresentada em nosso workshop, mas o Github Pages funciona de maneira semelhante.

Páginas do GitHub

Se você está aprendendo a programar, provavelmente já ouviu falar do Github. Github é uma plataforma para compartilhamento e hospedagem de código como parte da comunidade de código aberto. Ele oferece um recurso chamado GitHub Pages, que é um serviço de hospedagem para páginas públicas da web que podem ser usadas por indivíduos e organizações. Todas as páginas são hospedadas gratuitamente no domínio github.io do GitHub ou em um nome de domínio personalizado, se você possuir um. As páginas do GitHub são uma maneira simples e eficiente de hospedar seus projetos gratuitamente se você já estiver usando o Github para controle de versão.

###Vercel

Vercel é uma alternativa ao Github Pages que oferece uma ampla gama de recursos e configurações. Ele vem com uma versão gratuita. Recomendamos o Vercel para qualquer pessoa com um projeto complexo, pois proporciona uma ótima experiência ao desenvolvedor e oferece ótimo suporte. A Code Labs Academy o utiliza como parte de seu processo de desenvolvimento.

Conclusão

Este artigo apresentou ferramentas úteis para desenvolver uma landing page. De novo! A melhor maneira de aprender é fazendo, por isso recomendamos fortemente que você experimente essas ferramentas em seu projeto pessoal! Uma grande parte do trabalho de um desenvolvedor é pesquisar soluções existentes para os problemas que encontra e evitar reinventar a roda. A grande vantagem da comunidade de programação é sua natureza colaborativa. Incentivamos você a aproveitar o trabalho que foi compartilhado por outras pessoas e a contribuir com o seu próprio!

E se você quiser saber mais sobre como projetar sites legais e construí-los, confira nossos UX/UI Design e Desenvolvimento Web Bootcamps!