Revisão do Webflow Website Builder

Webflow é uma plataforma de design de site respeitada usada por mais de 3.5 milhões de clientes em todo o mundo. Seja você um profissional experiente ou apenas começando, esta análise do Webflow fornecerá uma visão detalhada dos recursos e capacidades dessa plataforma de criação de sites sem código.

Existem centenas de criadores de sites por aí. Cada um é adequado para um público diferente. O Webflow se posicionou firmemente como o software de escolha para designers profissionais, agências e empresas que atingem o nível corporativo. 

Na verdade, ele possui uma impressionante variedade de ferramentas e recursos que são uma alegria de usar – contanto que você saiba o que está fazendo. 

Não sou especialista em web design, então vamos ver como eu lido com a plataforma. O Webflow pode ser usado por qualquer pessoa? Ou é melhor deixar para os especialistas? Vamos descobrir.

TL;DR: Webflow tem uma incrível variedade de ferramentas e recursos para criar sites impressionantes e de rápido desempenho. No entanto, é voltado para o profissional de design e não para a pessoa comum. Portanto, a plataforma requer uma curva de aprendizado íngreme e pode ser muito difícil para alguns.

Reddit é um ótimo lugar para aprender mais sobre o Webflow. Aqui estão algumas postagens do Reddit que acho que você achará interessantes. Confira e participe da discussão!

Prós e Contras

Primeiro, vamos equilibrar o bom com o ruim com uma rápida visão geral dos prós e contras do Webflow:

Planos e preços

O Webflow tem cinco planos disponíveis para uso geral:

• Plano gratuito: Use gratuitamente de forma limitada
• Plano básico: A partir de US$ 14/mês faturado anualmente
• Plano CMS: A partir de US$ 23/mês faturado anualmente
• Plano de negócios: A partir de US$ 39/mês faturado anualmente
• Empresa: Preços sob medida

O Webflow também possui planos de preços específicos para E-commerce:

• Plano padrão: A partir de $ 24.mo faturado anualmente
• Plano Plus: A partir de US$ 74/mês faturado anualmente
• Plano avançado: US$ 212/mês cobrado anualmente

Se você precisar de assentos de usuário adicionais para sua conta do Webflow, estes custo de US$ 16/mês para cima, dependendo de seus requisitos. 

Planejamento	Formato	Custo mensal	Custo Mensal Faturado Anualmente	Usado para
Gratuito	Uso geral	Gratuito	Gratuito	Uso limitado
Basico	Uso geral	$18	$14	sites simples
CMS	Uso geral	$29	$23	sites de conteúdo
O negócio	Uso geral	$49	$39	Sites de alto tráfego
Empreendimento	Uso geral	Bespoke	Bespoke	Sites escaláveis
Padrão	Ecommerce	$42	$29	Gerente de
MAIS	Ecommerce	$84	$74	Volume alto
Avançado	Ecommerce	$235	$212	Escala
Os preços abaixo são adicionais às taxas do plano escolhido
Inicial	Equipes internas	Gratuito	Gratuito	Novatos
núcleo	Equipes internas	US $ 28 por assento	US $ 19 por assento	Times pequenos
Growth	Equipes internas	US $ 60 por assento	US $ 49 por assento	Equipes em crescimento
Inicial	Freelancere agências	Gratuito	Gratuito	Novatos
Freelancer	Freelancere agências	US $ 24 por assento	US $ 16 por assento	Times pequenos
Agência	Freelancere agências	US $ 42 por assento	US $ 36 por assento	Equipes em crescimento

Para uma análise mais detalhada dos preços do Webflow, dê uma olhada no meu artigo aprofundado aqui.

Pagar anualmente economiza 30% em comparação com o pagamento mensal. Como um plano gratuito está disponível, não há teste gratuito.

Importante: Webflow faz não fornecer reembolsos, e há sem garantia de devolução do dinheiro depois de pagar inicialmente por um plano.

Recursos de destaque

Agora vamos dar uma boa corrida à plataforma pelo seu dinheiro e ficar preso em o que o Webflow faz e seus recursos e veja se eles são vale todo o hype.

Modelos de fluxo da Web

Tudo começa com um modelo! O Webflow tem uma boa seleção de modelos pré-criados gratuitos que têm todas as imagens, texto e cores feitas para você. Se você quiser melhorar o design, também pode opte por um modelo pago.

O custo de um modelo varia de cerca de $ 20 a mais de $ 100 e está disponível em vários nichos de negócios diferentes.

Mas aqui está o que eu mais gosto. Com quase todos os construtores de sites, não há meio termo. Você começa com um modelo pré-criado que canta e dança ou uma página em branco. 

Uma página em branco pode ser um ponto de partida difícil, especialmente se você for iniciante, e um modelo pré-criado pode tornar difícil ver como funcionaria com sua estética.

O Webflow encontrou o meio termo. A plataforma possui modelos básicos para sites de portfólio, negócios e comércio eletrônico. A estrutura está lá, mas não está cheia de imagens, cores ou qualquer outra coisa que distraia.

Isso facilita a visualização e crie seu site sem se deixar enganar pelo que já existe.

Ferramenta de Designer de Fluxo da Web

Agora, para minha parte favorita, a ferramenta de edição. Decidi usar um modelo pré-construído aqui e acioná-lo no editor.

Imediatamente, Recebi uma lista de verificação de todas as etapas que precisava concluir para deixar meu site pronto para publicação. Eu pensei que este era um toque legal para aqueles que são novos neste software.

Em seguida, fiquei preso nas ferramentas de edição, e esse foi o momento Fiquei impressionado com a quantidade de opções oferecidas.

A ferramenta tem o habitual interface de arrastar e soltar onde você escolhe o elemento que deseja e arrasta para a página da web. Clicar em um elemento abre o menu de edição no lado direito da tela e o menu de navegação no lado esquerdo. 

Aqui é onde fica super detalhado. Na captura de tela, você vê apenas uma fração do menu de edição. Na verdade, ele rola para baixo para revelar um louco número de opções de edição.

Cada elemento da página da web possui esse tipo de menu e não para por aí. Cada menu também tem quatro guias na parte superior que revelam outras ferramentas de edição.

Agora, não me interpretem mal. Isso não é um ponto negativo. Alguém que já está acostumado com software de construção na web e web designers profissionais vai se deliciar com o quantidade de controle que eles têm, pois permite total liberdade criativa.

Por outro lado, já posso ver que isso é não é uma boa escolha para iniciantes pois não é imediatamente óbvio o que você deve fazer e como fazê-lo.

Não vou entrar no âmago da questão de cada ferramenta de edição disponível nesta plataforma porque estaremos aqui a semana toda.

Para obter uma lista completa de recursos, visite o site webflow.com agora.

Basta dizer, é avançado e tem tudo o que você precisa para satisfazer até mesmo o designer mais detalhista. 

No entanto, vou apontar alguns dos recursos notáveis ​​aqui:

• Ferramenta de auditoria automática: O Webflow pode auditar seu site sempre que você quiser. Ele destacará as oportunidades em que você pode melhorar a usabilidade e o desempenho da página.
• Adicionar gatilhos de interação: A ferramenta permite criar gatilhos que executam uma ação automaticamente quando o mouse passa sobre uma determinada área. Por exemplo, você pode definir a exibição de um pop-up.
• Conteúdo dinâmico: Em vez de alterar ou atualizar manualmente os elementos em várias páginas da Web, você pode alterá-los em uma única página e as alterações serão aplicadas em todos os lugares. Isso é útil se você tiver, por exemplo, centenas de postagens de blog que precisam ser alteradas.
• Coleções CMS: Esta é uma maneira inteligente de organizar grupos de dados para que você possa controlar e editar o conteúdo dinâmico.
• Ativos: Esta é a sua biblioteca de imagens e mídia onde você carrega e armazena tudo. Eu gosto disso porque se parece com a ferramenta de recursos do Canva e facilita muito a rolagem para encontrar o que você precisa enquanto permanece na página de edição.
• Ferramenta de compartilhamento: Você pode compartilhar um link visível para o site para obter feedback ou convidar colaboradores com um link de edição.
• Tutoriais em vídeo: O Webflow sabe que é uma ferramenta abrangente e, devo dizer, sua biblioteca de tutoriais é extensa e muito fácil de seguir. Além disso, eles podem ser acessados ​​diretamente na ferramenta de edição, o que é super conveniente.

Animações do Webflow

Quem quer sites chatos e estáticos quando você pode ter páginas da web lindas, dinâmicas e animadas?

O Webflow usa CSS e Javascript para permitir que os designers criem animações complexas e suaves sem nunca exigir nenhum conhecimento de codificação qualquer.

Esse recurso estava além de minhas próprias capacidades de criação na web, mas alguém versado em web design tenha um dia de campo com tudo o que pode fazer.

Por exemplo, O Webflow permitirá que você crie animações de rolagem, como paralaxe, revelações, barras de progresso e muito mais. As animações podem ser aplicadas à página inteira ou a elementos únicos.

Adoro ver sites com movimentos dinâmicos neles. Eles são uma ótima maneira de chamar a atenção das pessoas ou mantê-las em seu site por mais tempo.

Eles também são uma ferramenta fabulosa para solicitar que alguém clique em um elemento específico ou execute uma ação desejada.

Webflow E-commerce

O Webflow está totalmente configurado para comércio eletrônico (e tem planos de preços para acompanhá-lo), e você provavelmente pode imaginar que esse recurso é tão abrangente quanto suas ferramentas de construção na web.

Na verdade, o recurso E-commerce é acessado por meio da interface de edição da web e permite que você fazer tudo o que um aplicativo de comércio eletrônico dedicado faria:

• Crie uma loja para produtos físicos ou digitais
• Exportar ou importar listas de produtos em massa
• Crie novos produtos, defina preços e edite detalhes
• Organize os produtos em categorias específicas
• Crie descontos e ofertas personalizados
• Adicionar opções de entrega personalizadas
• Rastrear todos os pedidos
• Crie produtos baseados em assinatura (atualmente em modo beta)
• Crie carrinhos e checkouts personalizados
• Personalizar e-mails transacionais

Para receber pagamentos, o Webflow se integra diretamente com Listra, Apple Pay, Google Pagar e PayPal.

Honestamente, achei esta lista um tanto limitada, especialmente em comparação com outras plataformas de construção da web. 

Embora você pode use o Zapier para se conectar com outros provedores de pagamento, isso é mais complicado e custará muito mais, especialmente se você observar altos volumes de vendas.

Associações, cursos e conteúdo restrito do Webflow

Vender cursos é quente agora, portanto, os criadores de sites estão se esforçando para acompanhar essa tendência. O Webflow parece ter pegado porque agora eles têm um recurso de assinaturas que está atualmente em modo beta.

As assinaturas do Webflow oferecem a você uma maneira de criar um paywall para determinado conteúdo em seu site, crie portais de associação e fornecer conteúdo baseado em assinatura.

Pelo que entendi, você cria páginas em seu site para seu conteúdo restrito e as "bloqueia" com uma página de acesso somente para membros. Aqui você pode marca tudo, crie formulários personalizados e envie e-mails transacionais personalizados.

Como esse recurso está em modo beta, certamente será expandido e aprimorado com o tempo. Isso é definitivamente algo para ficar de olho à medida que avança.

Webflow Segurança e Hospedagem

O Webflow não é apenas uma ferramenta de criação de sites. Ele também possui a capacidade de host seu site e fornece recursos avançados de segurança também. 

Isso torna a plataforma um balcão único e elimina a necessidade de você comprar hospedagem e segurança de plataformas de terceiros. Eu sou um fã de conveniência, então isso me atrai muito.

Hospedagem de fluxo na web

No que diz respeito à hospedagem, o Webflow possui uma Desempenho de nível A e tempo de carregamento de 1.02 segundo para seus sites.

A hospedagem é fornecida através de seu Rede de entrega de conteúdo de nível 1 e o Amazon Web Services e Fastly. Além do desempenho de alto nível, a hospedagem do Webflow também oferece:

• Nomes de domínio personalizados (exceto no plano gratuito)
• Redirecionamentos 301 personalizados
• Meta dados
• certificado SSL livre
• Backups diários e versionamento
• Proteção por senha por página
• Rede de distribuição de conteúdo (CDN)
• Formulários personalizados
• Pesquisa no site
• Plataforma de design visual e publicação
• Zero manutenção

Segurança do fluxo da Web

O Webflow definitivamente leva a segurança a sério para que você possa ter certeza de que seu sites e todos os dados são mantidos em segurança em cada estágio.

A plataforma mapeia seu programa de segurança de acordo com Controles críticos de segurança ISO 27001 e CIS e outros padrões da indústria.

Aqui estão todos os recursos de segurança que você pode esperar com o Webflow:

• Compatível com GDPR e CCPA
• Provedor de serviços certificado Nível 1 para Stripe 
• Segurança total de dados e triagem de equipe no próprio Webflow
• Autenticação de dois fatores
• Recursos de SSO com o G Suite
• Log-in único
• Permissões baseadas em função
• Armazenamento de dados do cliente baseado em nuvem
• Transferência de dados totalmente criptografada

Integrações e API do Webflow

Webflow tem um número decente de aplicativos e integrações diretas que lhe dão maior controle e flexibilidade. Se a plataforma não suportar integração direta, você pode use o Zapier para se conectar com suas ferramentas e aplicativos de software favoritos.

Você pode encontrar aplicativos e integrações para:

• Marketing
• Automação
• Dados
• Processadores de pagamento
• Planos de Afiliação
• Ecommerce
• Hospedagem de e-mail
• Redes sociais
• Ferramentas de localização e muito mais

Se você não consegue encontrar o aplicativo que você precisa, você pode peça ao Webflow para criar um aplicativo personalizado, especialmente para você (custos adicionais se aplicam aqui).

Serviço de Atendimento ao Cliente Webflow

O Webflow é uma plataforma gigante, então você esperaria que ele tivesse um nível decente de atendimento ao cliente para seus assinantes. 

No entanto, o Webflow se decepciona aqui. Não há suporte ao vivo – nem mesmo nos planos de preços de primeira linha. A única maneira de entrar em contato com um representante de suporte é enviando um e-mail e mesmo assim, o tempo de resposta é ruim. 

Relatórios na web afirmam que o Webflow leva até 48 horas em média para responder às perguntas dos clientes. Isso não é bom, especialmente se você tiver prazos de atendimento ao cliente.

O Webflow recupera alguns pontos nessa área e isso graças à sua universidade. Esta enorme biblioteca de aprendizado é cheio de cursos e vídeos de treinamento para ensiná-lo a usar a plataforma corretamente.

Ainda assim, isso não vai ajudá-lo se o site apresentar falhas ou se você encontrar um problema. Esperemos que o Webflow introduza melhores opções de suporte em um futuro próximo.

Exemplos de sites Webflow

Então, como os sites publicados do Webflow realmente se parecem? Há um limite para o que você pode obter de um modelo, portanto, visualizar sites de exemplo ao vivo é uma ótima maneira de sentir os recursos do Webflows.

Primeiro, nós temos https://south40snacks.webflow.io, um exemplo de site para uma empresa que fabrica snacks à base de nozes e sementes (imagem acima).

Isto é um site lindo com algum animações legais para chamar sua atenção (e deixar você com fome de lanches!). O layout e o design são excelentes e tudo funciona perfeitamente.

Em seguida, é https://illustrated.webflow.io/. Primeiro, você é apresentado a um animação de parar o show, mas conforme você rola, você tem um layout limpo e bem apresentado que parece atraente, mas organizado.

Cada página carrega rapidamente e os vídeos incorporados funcionam como um sonho.

https://www.happylandfest.ca/ mostra um site de exemplo para um festival e começa com videoclipes sobrepostos com texto.

Ao rolar, você é levado por uma galeria de imagens e informações adicionais sobre o evento. Ele foi projetado para chamar sua atenção imediatamente e faz isso muito bem.

Para ver mais exemplos de sites Webflow. Vê-los aqui.

Compare concorrentes de fluxo da Web

Como expliquei nesta revisão, o Webflow é conhecido por seus recursos avançados e flexibilidade, o que o torna uma escolha popular entre os designers que desejam mais controle sobre a aparência e a funcionalidade de seus sites. No entanto, existem outras plataformas por aí. Veja como o Webflow se compara a alguns de seus principais concorrentes:

1. Squarespace: Squarespace é um construtor de sites popular que oferece uma variedade de modelos e opções de design para a criação de um site com aparência profissional. Embora o Squarespace seja mais fácil para iniciantes, o Webflow oferece mais opções de personalização e recursos avançados para designers experientes.
2. Wix: Wix é um construtor de sites fácil de usar com uma interface de arrastar e soltar para a criação de sites. Embora seja mais amigável para iniciantes do que o Webflow, tem menos opções de personalização e pode não ser adequado para sites mais complexos.
3. WordPress: WordPress é um sistema de gerenciamento de conteúdo (CMS) amplamente utilizado que oferece muitas opções de flexibilidade e personalização para web designers. Embora seja mais complexo que o Webflow, oferece mais controle sobre o design e a funcionalidade do site.
4. Shopify: Shopify é uma plataforma popular de comércio eletrônico que permite aos usuários criar lojas online. Embora não seja um concorrente direto do Webflow, é importante notar que o Webflow oferece funcionalidade de comércio eletrônico e pode ser uma boa escolha para pequenas empresas que procuram um site com recursos de design e comércio eletrônico.

No geral, o Webflow se destaca entre seus concorrentes por seus recursos avançados e flexibilidade, tornando-o uma escolha ideal para web designers experientes que procuram uma plataforma que personaliza totalmente a aparência e a funcionalidade de seus sites.

Perguntas & Respostas

Nosso veredicto ⭐

Não há dúvida de que o Webflow pode rivalizar WordPress pelo grande número de ferramentas de edição, integrações e recursos que oferece. Acho que é uma opção perfeita para profissionais de web design, empresas de nível empresarial e agências de design.

De fato, a plataforma possui muitos planos de preços que permitem crescer e dimensionar seu site de acordo com o seu negócio. Eu só gostaria de ter experiência (e tempo) para conhecer esta plataforma completamente.

No entanto, existem melhores plataformas para novos usuários e pessoas que desejam um site básico e descomplicado. Por exemplo, sites de negócios de uma página, sites de biografia pessoal e o blogueiro médio acharão o Webflow muito sofisticado para seu próprio bem e podem preferir algo mais básico como Wix, Site123 or Dúvida.

Melhorias e atualizações recentes

Webflow melhora constantemente seu CMS com mais recursos e funcionalidades. Aqui estão apenas algumas das melhorias recentes (verificada pela última vez em abril de 2024):

• Elemento de bloco de código: um novo recurso para exibir trechos de código específicos do idioma em qualquer página.
• Tradução de campos em massa para itens únicos de CMS: permite traduzir um item CMS inteiro em uma localidade secundária com apenas um clique.
• Suporte Markdown em elementos Rich Text: adiciona a capacidade de usar markdown para formatação em elementos rich text.
• Reordenar propriedades do componente: permite que os usuários reordenem as propriedades dos componentes de acordo com seu fluxo de trabalho.
• Localização para todos os clientes: Os recursos de localização agora estão disponíveis para todos os clientes, com uma prévia gratuita das funcionalidades básicas.
• Controle de eventos de ponteiro: esta atualização ajuda a gerenciar elementos sobrepostos em sites, definindo eventos de ponteiro como nenhum.
• Elemento Personalizado: os usuários agora podem adicionar qualquer tag HTML ou atributo personalizado a um elemento, liberando todo o potencial do HTML.
• Preparação de ramificação para testes de design: fornece um ambiente de teste separado para testar projetos em uma filial, especialmente benéfico para clientes corporativos.
• Melhorias nos elementos Rich Text: foram feitas melhorias para tornar a construção com elementos de rich text mais flexível e eficiente.
• Controle Noindex para páginas individuais: esse aprimoramento de SEO permite controlar quais páginas são incluídas nos mapas de sites e indexadas pelos mecanismos de pesquisa.
• Clique com o botão direito no painel do navegador: Melhora a velocidade de construção do site com todas as ações agora disponíveis com um clique com o botão direito no Navegador.
• Nova aparência para Webflow: uma interface de usuário atualizada oferece um espaço de trabalho mais focado e um design moderno.
• Cenas Spline 3D: os usuários podem adicionar e animar objetos 3D em seus sites usando cenas Spline.
• Controle de proporção de aspecto: introduz o controle de proporção de aspecto no Webflow Designer.
• Codificação do sistema de design com variáveis: variáveis ​​para armazenar valores como cores, tamanhos e tipografia melhoram a consistência e a escalabilidade do design.
• Melhorias na usabilidade dos componentes: usabilidade aprimorada com base no gerenciamento de um componente principal ou na construção com uma instância de componente.
• Novas APIs para componentes, variáveis ​​e localização: essas APIs oferecem suporte aos desenvolvedores na construção de aplicativos Webflow poderosos.
• Transferir planos de local: os administradores do workspace agora podem transferir planos de sites entre sites, simplificando o gerenciamento.
• Novas funções de edição de conteúdo e comentarista: aprimora o trabalho em equipe com novas funções no Designer para edição e colaboração de conteúdo.
• Gerenciando domínios personalizados: Conectar domínios personalizados a sites no Webflow ficou mais fácil.
• Aplicativos de fluxo da Web: apresenta a próxima geração de aplicativos Webflow, integrando-se mais profundamente às principais ferramentas de negócios.
• Atualizações da plataforma do desenvolvedor: Atualizações significativas foram feitas na plataforma do desenvolvedor para criar mais oportunidades para a construção de produtos.
• Fluxos de trabalho de publicação aprimorados: Fluxos de trabalho aprimorados de preparação e publicação, especialmente para clientes corporativos, oferecem melhor controle sobre as alterações do site.
• Arquivar um espaço de trabalho: os proprietários do espaço de trabalho agora podem remover um espaço de trabalho do painel sem entrar em contato com o suporte ao cliente.
• Atalhos de teclado para gerenciamento de turma: Novos atalhos para duplicar ou remover a última classe de um elemento.
• Quebra de texto e quebra de palavras: controle sobre onde o texto é dividido em uma nova linha.
• Suporte aprimorado ao plug-in Figma: Suporte aprimorado para layout automático e capacidade de resposta no Figma, facilmente importável para o Webflow.
• Rastreie alterações de conteúdo no registro de atividades do site: visibilidade no CMS e alterações no conteúdo da página estática no log de atividades do site.
• Permissões de publicação simplificadas: controle granular sobre permissões de publicação para cada membro do Workspace.
• Feedback centralizado com comentários no Designer: compartilhe, revise e resolva comentários diretamente no Designer.
• Elemento de pilha rápida: um novo elemento que acelera o processo de construção com controles na tela e predefinições de layout.

Revendo Webflow: Nossa Metodologia

Quando analisamos os construtores de sites, analisamos vários aspectos importantes. Avaliamos a intuitividade da ferramenta, seu conjunto de recursos, a velocidade de criação do site e outros fatores. A principal consideração é a facilidade de uso para indivíduos novos na configuração de sites. Em nossos testes, nossa avaliação é baseada nestes critérios:

1. Personalização: O construtor permite modificar designs de modelos ou incorporar sua própria codificação?
2. Facilidade de uso: A navegação e as ferramentas, como o editor de arrastar e soltar, são fáceis de usar?
3. Custo-benefício: Existe uma opção de plano ou teste gratuito? Os planos pagos oferecem recursos que justificam o custo?
4. Segurança: Como o construtor protege seu site e os dados sobre você e seus clientes?
5. Modelos: Os modelos são de alta qualidade, contemporâneos e variados?
6. Suporte: A assistência está prontamente disponível, seja por meio de interação humana, chatbots de IA ou recursos informativos?

Saiba mais sobre nossos revise a metodologia aqui.

Avaliar

Referências:

• Lista completa de recursos - https://webflow.com/features
• Canal do Youtube - https://www.youtube.com/c/webflow
• Wikipedia - https://en.wikipedia.org/wiki/Webflow
• Reddit - https://www.reddit.com/r/webflow/