6 motivos para designers adotarem o Webflow

A ferramenta que permite a geração de HTML e CSS de forma profissional, por meio de uma interface completamente visual, e que todos os designers deveriam estar atentos.

Frequentemente vemos discussões a respeito da necessidade de Designers — especialmente Interação e de Interfaces — saberem programar e mexerem diretamente em códigos. Minha opinião é que designers não precisam saber programar para projetarem bons produtos digitais, mas é essencial que eles tenham uma boa noção do que é e também do que não é possível fazer tecnicamente.

Este equilíbrio é vital para a qualidade do projeto.

Mais recentemente começaram a surgir boas ferramentas — como o Webflow — que permitem que os designers atuem mais ativamente do processo de desenvolvimento de produtos digitais e tenham mais contato e noção do que é tecnicamente viável — sem a necessidade de saberem programar — o que é uma grande vantagem para todo o time de desenvolvimento.

Particularmente, sempre fui crítico das ferramentas que geravam códigos HTML e CSS de forma automática. Normalmente isso era feito de uma forma suja e desorganizada.

Felizmente, este não parece ser o caso do Webflow. Sua interface completamente visual gera HTML e CSS de uma forma aparentemente limpa e organizada, como eles mesmos costumam valorizar ao anunciar que os códigos gerados pelo Webflow são equivalentes, e muitas vezes superiores, daqueles que um bom programador produziria.

Eu tenho gostado muito da plataforma e listo neste artigo seis motivos pelos quais os designers — especialmente aquelas que atuam como Designers de Interação e de Interfaces — devem adotar o Webflow.

Seis motivos para designers adotarem o Webflow

#1. Acompanhamento do progresso da ferramenta

O próprio dashboard do Webflow é uma interface bem pensada — esse aspecto fica bem claro logo que a plataforma é acessada — é certamente fruto de um processo de design que está em desenvolvimento neste exato momento. Há alertas praticamente diários sobre melhorias implementadas e novos recursos na interface.

Neste momento a ferramenta já está bastante robusta. Acompanhar seus avanços contínuos — sejam novos recursos ou ajustes de interfaces — é enriquecedor para os designers usuários da plataforma.

#2. Atuação ativa no projeto

Webflow possibilita a inclusão do Designer no processo de desenvolvimento de produtos digitais de uma forma simples.

O ideal é que as definições importantes da interface tenham sido feitas a nível de projeto, antes do desenvolvimento — em softwares como o Adobe Experience Design , Sketch — ou outra ferramenta de projeto similar.

Reserve o Webflow exclusivamente para desenvolvimento — não para prototipagens.

Mas, como todo designer de interfaces sabe - um Pixel faz toda a diferença numa interface. Isso provavelmente deve ter acontecido com vocês: você olha para algum projeto seu, que foi programado a partir de um protótipo que você fez, e você sente uma espécie de desconforto.

Uma vez analisado percebe-se que o está ocorrendo: normalmente o motivo é porque faltou aquela linha cinza, ou outro elemento que daria sustentação visual à interface, ou aquele espaçamento que deveria ter 7 pixels, mas que está implementado com 11. Parecem pequenos detalhes mas que fazem toda a diferença para uma interface. Então, o Webflow permite que esse ajuste fino possa ficar na mão (e no olhar) de um designer.

#3. Independência

Já trabalhei e trabalho com ótimos programadores — que inclusive já validaram que o código gerado pelo Webflow é de fato bem estruturado.

Mas infelizmente eu também já trabalhei com programadores que simplesmente me deixaram na mão no meio de projetos (Isso só acontece comigo?).

Nesses casos, o designer pode conduzir o projeto ou realizar testes de alternativas de uma forma independente, sem necessariamente submeter esses aspectos a um programador.

4. CMS

O Webflow não é uma ferramenta voltada apenas para o desenvolvimento de estruturas de Frontend — como são chamados os arranjos de HTML e CSS — mas ela é também uma ferramenta que viabiliza a montagem de banco de dados.

Mais uma vez, o designer precisa ter noções de relacionamento de tabelas de banco de dados para poder montar suas estruturas. Isso também é implementado por meio de uma interface visual dentro da própria plataforma.

#5. Documentação

Webflow é uma ferramenta muito bem documentada. No próprio website da ferramenta é possível encontrar diversos tutoriais. Além disso, há no YouTube muito material produzido de forma independente.

Webflow é uma ferramenta relativamente desconhecida no Brasil. Aparentemente ela está sendo mais utilizada em outros países. Por esta razão, a grande parte do material está em inglês.

Pretendo produzir mais materiais em português sobre o Webflow em próximos vídeos e artigos.

#6. Noção do que é possível

Quanto mais os designers se envolvem no processo de desenvolvimento de projetos, mais eles passam a ter uma melhor leitura do que é e do que não é possível tecnicamente.

Isso ajuda bastante num projeto porque esse equilíbrio entre o que é proposto a nível de prototipagem, e o que é viável tecnicamente, é muito importante para qualquer projeto.

O Webflow permite que o Designer passe a ter essa visão cada vez mais aprimorada, o que é bom para o time de desenvolvimento de uma forma geral.

Além de tudo isso, o Webflow também permite que um programador experiente possa fazer ajustes diretamente no código, incluindo novos recursos. As interferências realizadas são preservadas no projeto.

O que pode ser aprimorado

Na minha opinião, o primeiro ponto que poderia melhorar é a possibilidade de trabalhar em grupo, de forma colaborativa num mesmo projeto. Mesmo no Plano Team, oferecido pela plataforma, isso ainda não é possível.

Antes de começar em Webflow

É muito importante que um designer saiba que ferramentas como o Webflow, e outras similares, não substituem um programador plenamente. Contar com assistência de bons profissionais é sempre importante.

Todavia, o avanço dessas ferramentas possibilitam que os designers possam se envolver mais ativamente no processo de desenvolvimento. Os designers devem estar muitos atentos a estas novas possibilidades.