Vantagens do Webflow para Web Design Sem Código - Um Estudo de Caso

Publicados: 2022-03-11

Inúmeros complementos de ferramentas de design foram concebidos para ajudar a suavizar o caminho acidentado da colaboração designer-desenvolvedor. No entanto, o fluxo de trabalho típico de web design continua cheio de ineficiências e sufoca a criatividade. Uma nova geração de ferramentas visuais de web design sem código promete libertar os designers dos grilhões criativos e do tédio do desenvolvimento web tradicional.

Muitas plataformas de desenvolvimento web sem código desembarcaram recentemente no cenário do design como se maná do céu. Designers ansiosos para “quebrar a barreira do código” são finalmente capazes de reconhecer a realidade de um futuro utópico sem código . Se as estrelas se alinharem, a necessidade de entregar projetos para desenvolvedores front-end com especificações detalhadas acabará. Os designers terão a liberdade de organizar visualmente os elementos em uma prancheta e clicar em “publicar” com um suspiro de alívio.

Antes que nenhuma ferramenta de design de código surgisse, os designers precisavam contar com desenvolvedores front-end para implementar tudo . Alterar um pedaço de texto em um site para um tamanho de fonte diferente pode levar dias. Mesmo para um pequeno site de marketing ou uma simples página de destino, os designers enviariam os designs, sentariam, cruzariam os dedos e rezariam para que tudo voltasse perfeito. O processo era como ver a tinta secar.

Percebendo uma oportunidade, os criadores de sites “sem código” estão agora em toda parte. Alguns são experimentais, e alguns são robustos e capazes. No entanto, muitos ainda estão entregando pouco quando se trata de oferecer controle criativo ilimitado. Quase todas são plataformas inflexíveis, orientadas por modelos, visando empresas de pequeno e médio porte.

A maioria dos designers profissionais anseia pela capacidade de projetar e construir sites responsivos rapidamente, com controle criativo absoluto e sem tocar no código. Esse dia pode estar se aproximando rapidamente, pois o campo de batalha por nenhuma supremacia de código agora está repleto de um punhado de concorrentes sérios: Editor X, Bubble, Ceros e Webflow.

O Webflow entrou na briga em 2013 e, ao longo dos anos, evoluiu para um produto maduro. Lançado como um graduado do acelerador de startups da Y Combinator, o Webflow espera revolucionar o cenário de web design sem código e vislumbra um mundo “onde todos podem criar sites poderosos e flexíveis com a mesma facilidade com que criam documentos”.

A interface do Editor X é muito diferente do design do Webflow — Um concorrente do Webflow, a interface de design sem código do Editor X.

Como obter o buy-in das partes interessadas

À medida que os designers descobrem os recursos dessas plataformas, eles logo percebem que empresas de todos os tamanhos podem se beneficiar da adoção de uma ferramenta de web design sem código. Os benefícios podem ser significativos, especialmente para equipes menores com recursos limitados. Ainda assim, não é suficiente se apaixonar por uma nova ferramenta de web design; as partes interessadas precisam ser persuadidas a aprovar a mudança.

Como os designers fazem isso acontecer? Eu era designer de produto em uma startup B2B com um único desenvolvedor focado no produto principal. A empresa precisava de um site de marketing, mas não tinha os recursos do desenvolvedor. Nos deparamos com um enigma: como construir um site sem um desenvolvedor? Depois de explorar o Webflow e ganhar proficiência nele, percebi que poderia fazer isso sozinho .

Passei o fim de semana implementando designs no Webflow para uma reunião de stakeholders na segunda-feira. Durante a reunião, descrevi as vantagens do Webflows e demonstrei como é fácil ir do design ao código, criar designs responsivos e mudar algo rapidamente. Projetar e lançar páginas da web levaria apenas alguns dias.

Também mostrei os recursos de CMS do Webflow e a facilidade com que o SEO pode ser incorporado. Em seguida, expus as economias de custo de um único designer implementando tudo sem o custo adicional de envolver nosso desenvolvedor. Eles foram vendidos.

Esta foi também uma oportunidade para recuperar o controle criativo total. Eu não era mais apenas um designer criando maquetes no Sketch e passando designs para um desenvolvedor. Esse novo paradigma me transformou em uma potência de desenvolvimento web: eu poderia projetar, construir, testar, ajustar, incorporar SEO, teste A/B e publicar o site. Foi empoderador e me deu uma voz mais forte na empresa.

As vantagens do Webflow incluem uma interface familiar — As vantagens do Webflow incluem uma interface de desenvolvimento web visual completa.

Estudo de caso de design de fluxo da Web

Na Upvest, além de projetar os principais produtos da empresa, também fui responsável pelo visual da marca. Isso incluiu o site responsivo da empresa, que precisava acomodar atualizações frequentes. A Upvest era uma startup em estágio inicial e o produto ainda estava evoluindo. Como tal, precisávamos criar e testar várias páginas de marketing ao longo do caminho. Também precisávamos postar artigos de blog usando um sistema CMS e lançar páginas de destino dedicadas para diferentes promoções de vendas.

Além disso, o que complicou foi que a empresa havia feito alguns pivôs durante os primeiros dias. Passou da venda de uma API à construção de carteiras de blockchain e à oferta de “tokenização de ativos” para empresas imobiliárias. Consequentemente, à medida que avançamos, tive que projetar uma variedade de páginas de destino no Webflow.

Páginas de destino no design do Webflow usando o Webflow CMS — Design de Webflow para uma série de sites de empresas.

A introdução ao Webflow foi relativamente simples. Os tutoriais são fornecidos pela Webflow University. Eu tinha a primeira versão do nosso site de marketing projetada e construída em poucos dias. A interface de arrastar e soltar era simples de usar e inspecionar o design para diferentes dimensões de tela estava a apenas um clique de distância. Trabalhando com o Webflow, também aprendi muito sobre como montar corretamente as páginas com o modelo de caixa para layouts responsivos.

As vantagens do Webflow incluem a capacidade de criar páginas usando uma interface de arrastar e soltar — O Webflow Designer sem interface de código para criar sites responsivos.

Depois que todos concordaram com a marca visual do site, criei um guia de estilo no Webflow que todos poderíamos seguir. Também configurei várias classes e símbolos reutilizáveis para construções de páginas subsequentes. Os símbolos do Webflow funcionam de maneira semelhante aos símbolos do Sketch e aos componentes principais do Adobe XD. Quando um símbolo é atualizado, todas as outras instâncias desse componente no projeto refletem a atualização.

Como usar o Webflow - um guia de estilo do Webflow

Após o lançamento do primeiro site, eu estava ficando cada vez mais confortável com o Webflow. Para acompanhar diversas métricas, aprendi a instalar ferramentas de medição, como Google Tag Manager e Hotjar. A velocidade com que consegui reunir diferentes ativos de marketing também melhorou. A empresa precisava testar uma variedade de layouts e conteúdo à medida que o produto estava evoluindo, e o Webflow possibilitou alterar os designs e entrar em operação rapidamente sem precisar depender dos desenvolvedores.

O design do Webflow permite design e desenvolvimento rápidos de sites — O site da empresa startup é projetado no Webflow.

Como o Webflow fornece um link de teste para visualizar o site, as partes interessadas podem verificar a evolução dos designs e fornecer feedback imediato. Depois que os ajustes foram formalizados, pude fazer alterações diretamente no Webflow - em vez de voltar para uma ferramenta de design como o Sketch - e publicar o site para teste. A saída é todo o código, postado no site de teste imediatamente, pronto para outra rodada de revisões. Quando tudo estava pronto, publiquei o site no domínio da empresa.

Os conceitos básicos do Webflow incluem a capacidade de publicar em um servidor de teste — Publicando o design do nosso blog em um link de teste no Webflow para revisões e comentários das partes interessadas.

Como é o caso de muitos outros designers, minha ferramenta de design preferida é o Sketch. Quando estiver pronto, eu compartilharia os designs com várias partes interessadas para revisão. Uma vez que eles os aprovassem, eu os implementaria no Webflow. Depois de um tempo, fiquei tão confortável com o Webflow que não precisei usar o Sketch. Sempre que havia um novo projeto, eu ia direto para o Webflow. Esse novo fluxo de trabalho economizou muito tempo e dinheiro para a startup sem dinheiro. Por exemplo, criei as seguintes landing pages inteiramente no Webflow para uma campanha de marketing para gerar leads.

O que é webflow - projetando páginas de destino para obter leads — Projetando páginas de destino do Webflow.

Para as necessidades do nosso blog, compartilhei alguns conceitos básicos do Webflow com as partes interessadas e mostrei a eles como usar seu CMS. Uma vez que estivessem confortáveis com isso, eles mesmos estavam fazendo upload de artigos de blog. Aproveitando o recurso CMS Collections do Webflow, já havia configurado o sistema; eles só precisavam adicionar o conteúdo dos artigos e torná-los ao vivo.

Depois que as postagens do blog são configuradas como coleções do CMS no Webflow CMS, a publicação de novo conteúdo é muito fácil.

Incorporando o Webflow no processo de design

Incorporar o Webflow em um processo de design é fácil. Além disso, muitas etapas de projeto tradicionais podem ser eliminadas, especialmente no final. Não há transferência de desenvolvedor. A eliminação desta última fase por si só economiza um tempo considerável – sem mais “redlining” e trabalho sobre especificações.

Se os designers estão acostumados a wireframing, prototipagem e design de interface do usuário com Sketch/XD/Figma, eles podem se sentir mais confortáveis com esse fluxo de trabalho. No entanto, eles podem querer considerar ir direto para o Webflow , montar designs e testá-los ao vivo no navegador com o link de teste, especialmente para projetos menores. Trata-se de equilibrar as necessidades, pois dependendo do escopo, a construção de projetos no Webflow pode demorar mais do que outro método. Para experimentação de design, como teste A/B ou teste multivariado, também pode fazer sentido ir diretamente para o Webflow - projetar, construir e testar lá.

As vantagens do Webflow incluem não precisar fornecer especificações aos desenvolvedores — Sem plataformas de desenvolvimento web de código, as especificações do designer para o desenvolvedor não são necessárias.

Os designers podem iniciar projetos rapidamente escolhendo entre vários modelos de Webflow diferentes e personalizando-os. Todos os modelos são criados usando o Webflow sem escrever código e, como tal, são totalmente personalizáveis com a interface de desenvolvimento visual do Webflow.

Os componentes que compõem um design podem ser transformados em símbolos do Webflow, que podem ser reutilizados para montar as páginas subsequentes em minutos. Assim como no Sketch, os designers podem configurar símbolos, criar campos vinculáveis para cada componente e adicionar substituições de conteúdo em cada instância. Isso significa que os designers podem criar um componente com um título, uma imagem e um bloco de texto e reutilizá-lo em páginas com conteúdo diferente.

O Webflow também é uma excelente ferramenta para construir sistemas de design. Com o recente lançamento de substituições de conteúdo para símbolos, sistemas de design inteiros podem ser criados para ajudar as equipes a criar designs mais rapidamente, sem comprometer ou diluir a identidade visual ou os valores centrais de sua marca.

Nenhuma ferramenta de código reduz a quantidade de tempo e conhecimento de codificação necessários para traduzir uma ideia em algo que as pessoas possam usar. Você não precisa mais se tornar um programador para construir coisas, capacitando uma nova onda de criadores de diferentes origens e perspectivas. Ryan Hoover, fundador da Product Hunt, em The Rise of No Code

Trabalhar com modelos do Webflow é uma boa maneira de dominar os conceitos básicos do Webflow — O uso de modelos do Webflow é uma ótima maneira de iniciar o processo de design do site.

Os benefícios do Webflow para Web Design

A criação de sites responsivos no Webflow pode acontecer rapidamente porque a interface integra edição e visualização em diferentes dispositivos perfeitamente. Com um clique, os designers podem ver como os sites serão exibidos no desktop, tablet e celular, e podem ajustar layouts, componentes e fontes para cada tela.

Vantagens do Webflow:

Uma linha do tempo compactada. Um caminho mais rápido da ideia ao design, prototipagem e MVPs.
O Webflow preenche a lacuna entre design e conteúdo. Ele capacita escritores, editores e profissionais de marketing a atualizar instantaneamente o conteúdo em sites.
Os designers podem criar protótipos de baixa ou alta fidelidade no Webflow, ignorando o Sketch ou outra ferramenta de prototipagem. Uma vez que os protótipos são testados, eles podem ser transformados rapidamente no produto final e colocados ao vivo na web.
Crie, hospede e mantenha vários sites e páginas de destino.
Incorpore ferramentas de medição, como Hotjar ou Google Tag Manager.
Reduza a barreira de entrada para profissionais de marketing e outras pessoas não técnicas.
Edição fácil de conteúdo por outras pessoas diretamente na página por meio do Editor Webflow.
O Webflow Ecommerce permite um design e dimensionamento rápidos de negócios online.
O Webflow fornece consistência e velocidade de design com Team Templates.
Os designers podem criar sites com conteúdo real e utilizar as coleções CMS do Webflow — modelos de conteúdo que outras equipes podem usar sem habilidades técnicas.
Backups automáticos de sites (versão de versão) e URLs de teste.
Os sites não precisam ser hospedados com o Webflow. Como todos os sites são codificados em HTML, CSS e JavaScript padrão, os sites podem ser exportados e carregados em qualquer host.
Ao sair do Webflow, pode-se exportar o banco de dados para uso futuro, juntamente com os arquivos HTML e CSS.

Os benefícios do Webflow podem ser explorados em profundidade explorando a biblioteca de tutoriais do Webflow

Resumo

Inúmeros benefícios de negócios podem ser obtidos eliminando o código para desenvolvimento web. Elevando-se acima das ferramentas de web design DIY abaixo do padrão, o Webflow fornece uma solução atraente que é adequada para a maioria das necessidades profissionais de web design. A plataforma continua evoluindo e há desenvolvimentos mais interessantes a caminho.

Eu sozinho projetei e lancei um site da empresa com Webflow em menos de dois meses. O Webflow proporcionou flexibilidade sem precedentes no processo de design, oferecendo mais controle criativo sem ter que se preocupar com o código. O fluxo de trabalho de web design rápido e sem código forneceu um caminho mais rápido para o lançamento e reduziu os custos de produção pela metade em relação ao desenvolvimento web tradicional.

A curva de aprendizado não é íngreme. Em algumas semanas, todos os detalhes do Webflow podem ser suficientemente dominados com tutoriais - o suficiente para começar a montar um site completo. Uma vez que os designers aprendem o Webflow, eles podem nunca mais voltar ao modo tradicional de desenvolvimento web.

Nenhuma ferramenta de web design de código veio para ficar. O valor e a flexibilidade que eles oferecem são inquestionáveis. O movimento sem código baseia-se na crença fundamental de que a tecnologia deve permitir e facilitar a criação, não ser uma barreira à entrada. O Webflow permite que os designers projetem e construam produtos elaborados em menos tempo. Ele ajuda os designers a acompanhar a velocidade dos negócios e abre um mundo de oportunidades para aqueles que não sabem codificar. Pode ser hora de pular a bordo.

Deixe-nos saber o que você pensa! Por favor, deixe seus pensamentos, comentários e feedback abaixo.

• • •