4 Ferramentas para Web Designers Evoluírem Seus Trabalhos


Ao longo da minha carreira, tive a sorte de trabalhar com alguns excelentes Web Designers. E devido a funções que já exerci, como UX e Front-end, trabalhei lado a lado com esta área por bons anos.

Eu mesmo, bem no meu começo das minhas aventuras digitais, me arrisquei na área. E como essa proximidade existe até hoje no meu dia-a-dia, resolvi fazer um post exclusivamente para os amigos Web Designers.

A ideia aqui é apresentar 4 ferramentas que considero de enorme valor para Web Designers realizarem trabalhos de primeira linha. Entretanto, ainda são poucos os profissionais brasileiros que as conhecem. E menos ainda os que efetivamente as usam e aproveitam os benefícios que oferecem.

O uso consciente destas ferramentas fará com que, entre outras coisas, você evite cometer o erro mais comum entre Web Designers: se preocupar demais com questões “artísticas” e esquecer as necessidades reais dos usuários.

Interessado? Então vamos conhece-las.

Balsamiq Mockups

Se você começa um projeto enfiando a cara diretamente no Photoshop/Illustrator/Fireworks, você está aumentando as chances de dores de cabeça de futuras.

Antes disso, é fundamental desenvolver os Wireframes do projeto. Se você tem um Designer de Interação envolvido, ele provavelmente tomara conta desta etapa. Mas caso contrário, você terá que assumir as rédeas.

E minha ferramenta preferida para isso é o Balsamiq Mockups.

O que ela faz

O Balsamiq Mockups é um software simples (Windows e Mac) para criação de Wireframes. Ele possui uma vasta biblioteca de componentes e ícones prontos para serem usados em seu projeto. Você simplesmente clica, arrasta e dimensiona os itens desejados, podendo ainda fazer diversas customizações.

Balsamiq Mockups

Porque ela é tão boa

A simplicidade vale ouro. O Balsamiq Mockups foca no que realmente importa. Desenvolvimento rápido de wireframes para brainstorms internos, testes com usuários e avaliação de possibilidades.

Já vi muitas equipes abandonarem a etapa de produção de Wireframes dizendo, entre outras coisas, que eles atrasam os projetos. Mas isso só aconteceu porque todo o sentido dos Wireframes foi destroçado pela equipe envolvida. Tudo acontece porque quando um Web Designer é responsável pela produção de Wireframes, ele tende a considerar aquilo um “layout em preto e branco”, preocupando-se demais com cada pixel de espaçamento, tipografia, curvas, etc.

TUDO ISSO É INÚTIL na etapa de Wireframes. E faz com que você leve 1 dia para fazer um trabalho que deveria ser de 1 hora. O que você precisa fazer aqui são protótipos de baixa fidelidade, preocupando-se muito mais com organização do conteúdo do que com visual.

E o Balsamiq Mockups é sensacional porque o seu estilo “rascunhado” impede esse nível de detalhismo improdutivo. O que torna as coisas muito mas rápidas e produtivas.

Preço

Míseros US$ 79 por uma licença do software.

Invision

Invision

Fui apresentado a esta ferramenta pelo grande desenvolvedor Junio Vitorino. E logo me surpreendi com o que vi.

Os melhores trabalhos de Web Design que vi sempre foram resultado de colaboração entre várias pessoas diferentes. Mas trabalhar de forma colaborativa  em Web Design nunca fui algo muito simples. Arquivos muito pesados, distância física entre os membros da equipe, confusões entre versões diferentes de um layout. Enfim. Realmente faltava uma ferramenta para tornar tudo mais simples.

E foi aí que veio a Invision, uma ferramenta que vem se tornando mais popular a cada dia que se passa e é utilizada por alguns dos melhores times de Web Design do mundo, como os de Air bnb e Zappos.

O que ela faz

O Invision é um aplicativo web feito para membros de equipes interagirem facilmente em um trabalho de Web Design. Ele permite que você faça upload de seus designs, compartilhando com quem quiser. Na ferramenta, qualquer um pode adicionar facilmente comentários sobre itens específicos do design. Você pode, por exemplo, marcar o botão de um formulário e sugerir que a cor dele seja mudada.

Também é possível criar uma estrutura de navegação entre os seus layouts. Assim clientes/diretores/testers podem navegar pelo seu layout quase como se ele fosse um site finalizado.

Porque ela é tão boa

Esta ferramenta é claramente feita de (bons) designers para (bons) designers. Tudo é muito clean, intuitivo e organizado. É muito fácil (e até divertido) comentar o que você quiser nos layouts e montar navegações entre os arquivos.

Invision App

Além disso, a Invision oferece um aplicativo para Macs muito semelhante ao Dropbox. Você cria uma pasta em seu computador e todos os layouts que você colocar lá serão enviados automaticamente para os servidores do Invision. Ou seja: sem precisar se lembrar de nada, você garante que a versão do layout que estará no aplicativo é sempre a mais recente.

Preço

Para ter um único projeto, com até 3 colaboradores, a ferramenta é gratuita. O pacote mais caro, com 50 projetos e colaboradores, custa US$ 50/mês.

Google Content Experiments

No Design, assim como em muitas outras profissões, o ego inflado pode se tornar um grande inimigo. Muitas vezes Web Designers fazem trabalhos de re-design em sites ou páginas específicas. E normalmente eles sentem que melhoraram em muito o site, criaram um visual mais moderno, mais funcional, etc.

Mas a grande questão é: será que o site realmente melhorou? Porque que nos sintamos seguros em uma mudança de layout, não podemos afirmar que melhoramos o site. Quem dirá isso é o usuário. E como ele vai dizer isso? Através da taxa de conversão do site. Ou seja: será que os usuários estão fazendo o que o dono do site realmente deseja?

É aí que entra a Content Experiments (antiga Google Website Optimizer)

O que ela faz

Faz testes A/B e multi-variáveis. Em uma explicação bem rápida: exibe versões diferentes de uma página para partes diferentes dos seus visitantes e mede as conversões realizadas (ações vitais para a existência do negócio, como uma venda ou um cadastro).

Google Analytics Content Experiments

A ferramenta faz o acompanhamento de todos os dados e te informa quando uma determinada versão da página se mostrou mais eficiente que a(s) outra(s).

Porque ela é tão boa

Porque ninguém deveria aceitar qualquer mudança em um site sem saber se ela realmente foi melhor para o negócio como um todo. Já não dá mais para trabalharmos na era dos achismos, onde ninguém tem certeza de nada e a opinião de quem manda mais prevalece. E a Content Experiments é uma ferramenta que possibilita essa evolução.

O fato dela ser integrada ao Google Analytics a torna extremamente simples de se usar. E para instalar, basta alguém com conhecimentos mínimos de HTML na equipe e 5 minutos livres.

E como “efeito colateral”, já parcebi que ela faz as equipes se focarem no que realmente importa para o cliente: gerar negócio! Afinal, elas sabem o tempo que, se não gerarem mais negócios, a própria ferramenta os reprovará.

Preço

Grátis.

Crazy Egg

E quem disse que depois da página/site entrar no ar o trabalho do Web Designer acabou?

É fundamental entender como as pessoas estão interagindo com a sua página. Cada elemento está funcionando como você imaginou na sua criação? Algo está passando despercebido? Existe alguma oportunidade de melhoria?

Descubra na Crazy Egg.

O que ela faz

Gera uma série de relatórios sobre a interação dos usuários com páginas do seu site. Onde clicaram (mapa de calor) e até onde rolam as páginas, por exemplo. Isso tudo é feito com a instalação de 1 único script.

Porque ela é tão boa

A Crazy Egg fornece insights que uma ferramenta de clickstream (como o Google Analytics) não fornece.

A esta altura, eu espero que você já saiba que uma página ter uma longa rolagem não é necessariamente um problema, desde que você tenha um conteúdo bom. Mas será que os seus usuários estão se interessando o suficiente para rolar toda a página? E se você descobrir que apenas 20% dos usuários chegam até a parte da página onde está seu botão de conversão?

Crazy Egg

Você também pode descobrir que aquele novo menu super criativo que você bolou não é usado pelos seus usuários.

Tudo isso e muito mais pode ser descoberto no Crazy Egg. E ainda por cima ela é uma ferramenta com o dom de encantar clientes. Acredite.

Preço

US$ 9 / mês, no plano mais básico.

Conclusões

Tenho certeza que o Web Designer que agregar estas ferramentas ao seu trabalho, irá produzir peças muito mais valiosas para os seus clientes (e obviamente, se tornar mais $valioso$). E ainda por cima terá muito mais facilidade para desenvolver seu trabalho.

Falamos de como você pode diminuir seus problemas de refação e ter a colaboração de mais pessoas na sua criação. Você também viu como pode ter certeza de que está fazendo a coisa certa e entender como os usuários estão interagindo com o seu trabalho. Dá para tirar muita riqueza daí.

Ah, e por favor: não use a questão financeira como uma desculpa para abraçar a mediocridade. Para usar todas essas 4 ferramentas, você terá um custo adicional de mais ou menos R$ 180 / mês. Um custo desprezível perto do valor que elas vão gerar, quando usadas da forma certa.

E você? já usou alguma dessas ferramentas? Tem outra para indicar? Use os comentários.

Este post te ajudou de alguma maneira? Então curta e compartilhe!

7 Comentátios

  1. Ótimo post Rafael, bem detalhado.
    Algumas ferramentas conhecia mas outras não, e já vão direto pros meus favoritos.
    A Invision conheci semana passada por meio de um amigo… muito boa ferramenta.
    Deixo uma lista tbm de umas que gosto muito pra você testar e ver se te agrada. Abraços!
    Os formatos de imagens das principais mídias sociais
    http://migre.me/e03yx
    Pra organizar lista de atividades, tarefas.
    http://www.wunderlist.com
    Prototipar aplicativos navegáveis, wireframe ou layouts no próprio smartphone
    http://popapp.in
    Programa que reduz e muito o tamanho de imagens sem perda de qualidade
    http://imageoptim.com/
    Dados sobre a internet
    http://www.secundados.com.br/
    Boas práticas de uso do photoshop e como deve ser um designer organizado
    http://photoshopetiquette.com/
    Escolhendo a cor do Background usando o scroll http://color.aurlien.net/

    Escrever uma resposta
    • @Wagner Lucio Muito obrigado pela contribuição Wagner! Agregou demais ao post.E não deixe de falar da sua experiência com as ferramentas que não conhecia depois. :)

      Escrever uma resposta
  2. Muito bom, uso o Balsamiq Mockups a algum tempo e já vi pessoas falando que não usam justamente por causa do estilo rascunhado afirmando que parece infantil e não profissional. Para estas pessoas vai uma informação: tem como mudar a “skin” dos wireframes, só ir no menu View e depois em Skin e pronto, sem frescura, sem reclamação. :)

    Escrever uma resposta
    • @Allyson Souza E para quem gosta do Axure e quer fazer o estilo rascunho, igual vem no padrão do Balsamiq, é possível configurar nas propriedades da página

      Escrever uma resposta
    • @Allyson Souza Pois é Allyson. É exatamente essa atitude de querer fazer o wireframe parecer “profissional” que torna o processo inviável. Não combina com o propósito inicial da coisa.
       
      Mas realmente foi muito bem lembrada essa a opção da skin. Ajuda a deixar os corações inseguros mais tranquilos. :)

      Escrever uma resposta
  3. Olá Pessoal Sou o Marcelino e estou cursando Desenhista de Pagina da Web pelo SENAI – estou entrando neste mundo agora e gostaria fazer estagio com alguém que já é especialista ou já tem experiência em Web Designer a muito tempo, Para mim poder aprender mais ainda. Como qualquer função exercido no começo sempre é bom ter um Rabino ou Mentor ao lado. Valeu.

    Escrever uma resposta
  4. Excelente post! Parabéns!!

    Olhem só esta ferramenta que estou desenvolvendo: http://cayojs.com.br/efeitos/
    Ela me da o código CSS necessário para fazer um determinado efeito Keyframe.

    Basta copiar o código, colar em sua folha de estilo e adicionar a classe no elemento html que quiser… ou chamar os efeitos no :hover… ou adicionar os elementos da alimação na sua classe, dentro da folha de estilo.

    Está quase pronta…

    apreciem: http://cayojs.com.br/efeitos/

    Escrever uma resposta

Envie seu comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>