Muitos podem achar que o desing não é importante e acabam deixando este ponto de lado para se dedicar totalmente às funcionalidades. De fato é essencial possuir um site funcional, que proporcione uma ótima experiência para os usuários, porém, uma página com um desing atrativo e bem elaborado, podem garantir muitas vendas. Para te ajudar neste aspecto, nós separamos um top 5 landing pages do codepen.io para você dar uma olhada.
ScrollSpy
Linguagens: HTLM | CSS | JAVASCRIPT
ScrollSpy.js destaca a posição da página aplicando uma classe ‘ativa’ ao link Navegação dentro de um componente de navegação do Bootstrap. Ele faz isso monitorando o elemento #target do link de navegação dentro da janela, esperando que ele atinja uma determinada posição ‘Y’, geralmente zero.
Este exemplo demonstra alguns recursos avançados adicionais, incluindo rolagem animada, eventos de foco e como compensar com uma barra de navegação fixa.
Parallax
Linguagens: HTML | CSS
Uma mistura de grandes imagens com textos explicativos! Esta landing é recomendada para serviços que requerem uma atenção especial à fotos e imagens e ao mesmo tempo uma definição completa sobre as opções.
Split
Linguagens: HTML | CSS | JAVASCRIPT
Uma maneira elegante e divertida de apresentar dois serviços principais e ao mesmo tempo distintos. A atenção toda será destinada as duas opções, gerando uma certa curiosidade.
Netflix
Linguagens: HTML | CSS | JAVASCRIPT
Não tem muito segredo! Trate-se de uma landing page muito próxima ao do Netflix.
Aproveite =)
App Landing
Linguagens: HTML | CSS | JAVASCRIPT
Esta landing é divertida e colorida, priorizando a leveza em relação à um desing mais moderno. O criador trabalhou principalmente com elementos JS que trazem vida a página.
Compartilhe suas ideias para landing pages favoritas através dos comentários e nos ajude a enriquecer a comunidade!
Consiga um emprego!
Se você é um programador e está buscando novas oportunidades profissionais, acesse a ProgramaThor, uma startup focada no recrutamento de desenvolvedores. Para se candidatar às vagas e receber notificações em casos de matching, basta de cadastrar e completar seu perfil corretamente.
Sobre o autor
Últimos artigos
Dicas19 Setembro, 2018Como escolher o notebook certo para programação
Dicas12 Setembro, 2018Como pensar igual um programador: dicas para solucionar problemas
Top5 Setembro, 2018Top 7 ferramentas de código aberto para desenvolvedores
Dicas29 Agosto, 201810 dicas para novos desenvolvedores
