#35 Ferramentas para FrontEnd e Web Designer

Ferramentas úteis para FrontEnd e Web Designer otimizarem as tarefas do dia a dia

ferramentas-FEEae! Tudo bele?

No dia a dia, ao desenvolvermos qualquer tipo de projeto, efetuamos uma série de tarefas que podem ser otimizadas, né Galucho?

Nós podemos melhorar nossa produtividade economizando tempo em certas tarefas através de ferramentas existentes, pagas ou free.

Então, nesse artigo eu listarei apenas algumas das milhares de ferramentas disponíveis na web. :)

Basicamente as ferramentas que listarei aqui são para profissionais que “coda” a parte da visual do site (FrontEnd e Web Designer), mas essas ferramentas também podem auxiliar alguns Designers e Desenvolvedores.

E também para utilização de algumas das ferramentas a seguir é importante ter um conhecimento sobre HTML, CSS, JavaScript, etc .

Para acessar os links basta clicar nos títulos ou nas imagens. Vamos conferir?

Foundation

Foundation é um framework front-end. Nada mais é que  um conjunto de arquivos/ferramentas criadas para facilitar o desenvolvimento FrontEnd de interfaces e sistemas web.

Construído com o pré-processador CSS Sass (que veremos mais adiante), HTML5 e JavaScript. Ele agiliza o processo de desenvolvimento, deixando-o muito mais rápido e fácil a criação de interfaces web.

ferramentas_FE_07Outras opções similares: 

Bootstrap

Uikit (usa Less)

Pure

LESS

O LESS é pré-processador de CSS. Ele é chamado de pré-processador porque ele utiliza uma linguagem diferente baseada em CSS, porém um pouco diferente com mais opções, mas no final gera um CSS compilado para o Browser ler.

Você cria e escreve em um arquivo com extensão “.less " , mas no final vai usar um compilado com extensão “.css “. Para compilar utilizá-lo você usará um comando JavaScript ou algum programa auxiliar (veremos  mais abaixo).

Na prática com o LESS podemos inserir  variáveis, mixins, cálculos matemáticos, entre outras coisas, dentro do CSS  (não literalmente, claro). Se você começar a usar, dificilmente vai parar.

ferramentas_FE_05Outras opções similares: 

SASS

Stylus

Koala

Cada pré-processador utiliza uma forma para compilar os arquivos gerando o CSS, basta ler a documentação. Mas também existem programas que podem ajudar nessa função. Como o Koala que compila os arquivos de alguns pré-processadores.

ferramentas_FE_13Outras opções:

Winless

CSS BEAUTIFIER

Transforma um arquivo CSS minificado em um limpo e organizado.

ferramentas_FE_12Outras opções: 

PROCSSor

CSS Minifier

Esse faço o contrário do anterior. Ele compacta um arquivo CSS.

Outras opções:

CSS Compressor

Primer

É só copiar e colar o html dentro do Prime que ele identifica todas as IDs e CLASSs do HTML, gerando um CSS.

FitText

FitText.js é um plug-in jQuery que força os seus títulos serem responsivos, ou seja, ele se adaptará a qualquer resolução.

ferramentas_FE_11

PicMonkey

Aplicativo Web que permite a edição de imagens online. Pode ser útil se o seu photoshop travar :P.ferramentas_FE_14Outras opções: 

Pixlr Editor

JSlint

Cole seu código e veja se está dentro dos padrões. É praticamente um validador de JavaScript.
ferramentas_FE_15

The Toolbox

Uma coleção de componentes. Existem componentes de tudo que é tipos, pagos e gratuitos.

ferramentas_FE_10

Codepen

Uma biblioteca de componentes e com código disponível para você ver na hora como se faz. Com isso você pode criar, editar livremente. Muito útil para o aprendizado.

ferramentas_FE_09

CSS3 Click Chart

Um gerador de CSS3. Crie box sizing, text shadow, border radius, etc, em poucos segundos. Existem vários na internet iguais a esse.

ferramentas_FE_08Outras opções: 

CSSMatic

W3C Validaton

O serviço de validação do consórcio que regem e zelam pelo padrões web: o W3C.

Valide seus arquivos HTML e CSS e verifique se você utilizou os padrões web, senão esqueceu de fechar alguma coisa, etc.

Outras opções:  Existem, mas a do W3C é a melhor.
ferramentas_FE_04

Ferramenta de teste de dados estruturados

Serviço do Google para testar os dados estruturados do seu site.Verifique os MicrodadosMicroformatos dos seu site.

ferramentas_FE_02

XML Sitemaps

Um gerador online de sitemaps para o seu site.

ferramentas_FE_01

CSS Modal

O nome já diz tudo: ele cria para você um modal com CSS.

ferramentas_FE_18

Font Dragr

Arraste suas fontes e veja como ela ficaria no navegador.

ferramentas_FE_17

JPEGmini

Compressores online de imagens.

ferramentas_FE_19

Imagens png: http://pnggauntlet.com/

DaSilva

Avaliadores de Acessibilidade. Veja como está a acessibilidade do seu site.

ferramentas_FE_20

Outras opções: 

http://achecker.ca/checker/index.php

Breaking the Mobile Web

Emuladores para testes de sites em ambientes móveis.

ferramentas_FE_21

View Like Us

Teste a sua interface em várias resoluções.

Outras opções: 

QuirkTools

PageSpeed Insights

Análise a velocidade e performance do seu site.

ferramentas_FE_23

Conclusão

Existe muito conteúdo bom disponível na web para auxiliar no seu cotidiano. Existem muito mais ferramentas espalhadas por aí, milhares, de todos os gostos e tipos e essas só foram algumas…

Com certeza mais para frente irei compartilhar outras ferramentas com você. Porque no dia a dia é muito mais pratico fazer só a roda girar ao invés de criá-la novamente.

E você também pode ver outro artigo que fiz sobre softwares e ferramentas de web designer clicando aqui.

E você usa alguma dessas ferramentas? Conhece outras? Você pode deixar o seu comentário e a sua opinião abaixo, não é? :)

Forte Abraço!

Até mais!

David Arty

Olá. Sou David Arty, fundador do blog Chief of Design.
Sou natural de São Paulo, Brasil. Trabalho com design, principalmente com design para web, desde 2009. Procuro transformar ideias loucas e complexas em peças simples, atrativas e funcionais.

  • Deivison Oliveira

    Excelente conteúdo!

  • Carlos Júnior Uchôa

    Espetacular !!!

    • Olá Carlos!

      Obrigado pelo comentário! :D

      Forte abraço!

  • Wellington

    Top d+ !!