5 boas ferramentas para desenho de landing pages

5 boas ferramentas para desenho de landing pages

Chegamos à última aula do nosso curso Como fazer landing pages efetivas para e-commerce. Neste artigo falaremos sobre ferramentas que lhe ajudarão a tornar o seu trabalho mais eficaz. Ao longo do curso foram citadas algumas ferramentas e práticas para melhorar o dia a dia de designers de templates de e-commerce. Agora nós vamos falar de mais algumas que, com certeza, aumentarão a qualidade e a velocidade dos seus projetos.

1. Bootstrap

O Bootstrap é a ferramenta de desenvolvimento HTML, CSS e JavaScript mais famosa do mundo. A sua popularidade se deve tanto pela sua facilidade de uso quanto pela intuitividade de sua extensão e personalização. Além disso ele é opensource, então se você quiser contribuir, fique à vontade!

Na Nuvem Shop utilizamos o Bootstrap tanto para os templates quanto para as nossas páginas institucionais e economizamos muito tempo com isso, principalmente para design responsivo.

Conheça mais do Bootstrap neste link

2. Google Fonts

O avanço das tecnologias web como o CSS3 permitiu a webdesigners a “livre” utilização de fontes em websites. Isso mudou drasticamente a forma de trabalho. O que antes era algo extremamente complicado ou limitado agora passou a ser relativamente trivial.

Trivial porque hoje existe uma infinidade de serviços de webfont, desde gratuitos (onde você pode ter uma infinidade de fontes gratuitas de qualidade muito boa) até pagos (onde você pode utilizar as fontes mais famosas do mundo).

Nós amamos o movimento opensource, então vamos nos concentrar em falar sobre serviços com essa característica. Dentre eles, o mais famoso é o do Google. O Google Fonts é o serviço de webfonts do Google. Ele é muito simples de utilizar, basta que você selecione a fonte, escolha os pesos e estilos. Depois disso é só começar a usar no seu site.

Como todas as fontes são opensource, você pode baixar qualquer uma delas e instalar no seu computador. Isso pode te ajudar a desenhar melhor as páginas antes de codificar.Baixar OpenSans no Google fontsPara saber mais sobre como implementar essa funcionalidade acesse este rascunho da recomendação para CSS fonts da W3C (em inglês)

3. Ícones como fontes

Além das fontes para textos, hoje ainda há a possibilidade de utilizar fontes para ícones. Então o que antes era difícil de ser implementado com imagens e sprites enormes hoje é resolvido com um simples “embedding” de uma webfont.

Assim como para as fontes para textos, há uma infinidade de serviços de webfonts para ícones. Alguns frameworks possuem sua biblioteca de ícones própria, como no caso do próprio Bootstrap, que possui um componente contendo uma parte da biblioteca Glyphicons. Na Nuvem Shop nós utilizamos um serviço chamado Font Awesome.

A principal vantagem para esse sistema é que não há necessidade de preocupação com a escala dos elementos, já que eles são vetores. Portanto, a visualização não fica comprometida em qualquer tamanho de dispositivo.

4. Cores

Uma das partes mais importantes de um website são as cores utilizadas. Existem muitas ferramentas online que ajudam a embasar as decisões quanto a esse importante aspecto. Muitas delas possuem integração com ferramentas de desenho, como o Photoshop e o Illustrator.

O Adobe color CC (antigo Adobe Kuler) é o serviço oficial da Adobe para cores. Como você pode imaginar, ele possui integração direta com a suíte de aplicativos da empresa. Com ele é possível criar uma infinidade de discos de cores baseados em várias das regras para cores (análogas, complementares, etc).

O COLOURlovers é uma rede social que ajuda as pessoas a criar e compartilhar paletas de cores (entre outras coisas). Depois de criadas, as paletas podem ser facilmente baixadas em vários formatos diferentes, inclusive para HTML, o que facilita muito a etapa de codificação.

5. Mantenha-se inspirado

Parte do trabalho da criação de landing pages depende, principalmente, de se inspirar. Para isso é muito importante ter boas leituras dos clássicos do design. Nossos especialistas prepararam uma lista de bons livros da área:

  • Não me faça pensar –  Steve Krug
  • The design of everyday things – Donald Norman
  • Pensar com tipos – Ellen Lupton
  • História do design gráfico – Philip Meggs
  • Grid – Construção e Desconstrução – Timothy Samara

Hoje em dia há muitas outras formas de se manter atualizado sobre todo tipo de conteúdo. De todos os blogs sobre conteúdo de design web podemos destacar esses:

Estamos nos despedindo do curso. Você gostou? Compartilhou? Em breve voltamos com mais aulas. Até lá!


O que você achou desse conteúdo?


Marcos Paiva

Marcos é designer e tecnólogo em gestão empresarial. É apaixonado por música e seriados da Netflix. Divide seu tempo em cuidar da familia, tentar ter uma banda, trabalhar e dormir (não necessariamente nessa ordem). De vez em quando escreve alguns tweets @marcos_paiva


5-boas-ferramentas-para-desenho-de-landing-pages