Escrevendo um Código Web Melhor

Aqui está algo que acho irônico. Muitos web designers gostam da simplicidade que vem com os construtores da web. No entanto, curiosamente, a maior parte dos criadores da Web foi criada para eliminar o papel de designers e desenvolvedores da Web, automatizando o código subjacente.

Engraçado, certo?

Mas, novamente, existem construtores da Web que aparentemente estão fazendo o oposto. Em vez de reduzir o papel de designers e desenvolvedores, eles vêm com ferramentas especificamente otimizadas para essas equipes. Seu objetivo principal é facilitar as agências de design com ferramentas avançadas.

Como você pergunta?

Bem, Webflow é um dos exemplos proeminentes. E seu papel em todo o ambiente de web design é algo que iremos analisar em breve. Esta análise do Webflow discute todos os recursos críticos que você precisa conhecer, os pontos fracos correspondentes e o custo de alavancar a plataforma para o design.

Mas primeiro, o que exatamente é o Webflow?

Revisão do Webflow: visão geral

Como você provavelmente já descobriu, o Webflow não é um típico construtor da web.

Lançada na 2013, esta ferramenta é uma solução de web design que combina ferramentas profissionais de design livre de código com um poderoso CMS visual, além da facilidade de uso dos construtores padrão. Então, pense nisso como uma fusão entre uma solução de construção web como Wix e um mecanismo CMS como WordPress.

Webflow

Mas não se engane. O Webflow não compete com os gostos de Wix e Weebly Ele oferece um conjunto diferente de recursos que segmentam uma população de usuários variada.

Em suma, a coisa mais fascinante aqui é a abordagem inteligente do Webflow para todo o código. É uma plataforma livre de código que suporta a edição de código para maior flexibilidade.

Confuso? Sim eu conheço. É por isso que aproveitei o tempo para avaliar tudo o que o Webflow tem a oferecer - desde o design do site até o sistema de gerenciamento de conteúdo.

E aqui estão os detalhes ...

Revisão do Webflow: recursos

Web Design

O Webflow é um par de coisas, sem dúvida. Mas sua ferramenta de design de web sem código sempre foi a principal oferta aqui.

Bem, seria compreensível se você o confundisse com a janela de edição do Adobe Photoshop antes de começar. Esses dois podem parecer irmãos gêmeos de longe, mas acabam sendo bem diferentes à medida que você se aproxima. Para ser mais específico, você notará que o Webflow é um mecanismo de automação que opera amplamente em CSS e HTML.

Designer de Webflow

Nela, você pode introduzir confortavelmente elementos do site e, em seguida, movê-los de acordo, sem usar código. O bit de programação é tratado pelo framework subjacente do Webflow, que sistematicamente cria e edita o código do seu site à medida que você prossegue com o processo de design.

Se você já tentou outros web designers sem código, então sabe que eliminar o bit de programação tem um custo de flexibilidade limitada. Curiosamente, a ferramenta de design do Webflow não segue essa tendência. Então, eu vou ser honesto aqui e admitir que é certamente um dos mais avançados construtores de sites versáteis no mercado.

Agora, vamos encarar isso. Avançado e simplicidade são duas coisas que são conhecidas como fogo e gelo quando se trata de ferramentas de gerenciamento de sites.

E fiel ao formulário, o Webflow não é um dos construtores mais simples que você encontrará por aí. Embora sua interface seja extremamente poderosa, ela é aparentemente complicada e pode levar algum esforço para aprender as cordas de acordo.

Para começar, o Webflow não cria a ilusão de um processo de design completamente sem código. Então, não espere pular para dentro e começar a desenhar formas na tela. Tal abordagem limitaria substancialmente sua capacidade de personalização.

Consequentemente, o sistema aqui embute habilmente alguns aspectos da codificação à medida que você constrói um website. Se você pretende introduzir uma página intermediária quadrada, por exemplo, terá que adicionar uma nova <div> elemento, em seguida, edite seus pontos inferior esquerdo e superior direito como zero, juntamente com o posicionamento fixo.

O que isso significa?

Embora você possa usar o Webflow sem qualquer conhecimento de programação, é necessário um conhecimento básico das propriedades de HTML e CSS para capitalizar de forma abrangente seu poder absoluto.

No entanto, se preferir, simplesmente assinale o “Eu não escrevo código ” escolha como você se registra. O sistema subseqüentemente expandirá sua capacidade de automação para lidar com uma grande parte do projeto para você.

Dito isso, você pode começar com uma tela completamente em branco. Essa é a abordagem que prefiro porque consigo personalizar tudo desde a base.

Contudo, uma palavra de cautela. Deixe esta opção para designers experientes em CSS e HTML. Caso contrário, você corre o risco de misturar as coisas ou ficar preso em algum lugar ao longo do processo.

A melhor abordagem para codificar novatos é aproveitar os modelos pré-concebidos do Webflow. Acontece que o sistema oferece mais do que modelos atraentes 200, dos quais 30 são totalmente gratuitos. As pagas, por outro lado, custarão entre $ 24 e $ 79.

Depois de uma análise minuciosa de vários temas, notei que eles são notavelmente diferentes, com estruturas e características variadas. Em seguida, o processo de edição subseqüente permite que você altere os planos de fundo, cores, camadas, opacidade, rotação, efeitos, posição, tamanho etc. de seus elementos.

hospedagem

Isso vai sem dizer. Esse Webflow, como a maioria dos construtores da Web de hoje, oferece hospedagem de sites, além de domínios personalizados, além de seus pacotes de design.

Hospedagem Webflow

Mas não espere a abordagem típica de plano compartilhado aqui. Em vez disso, o Webflow opta por manter os sites internamente, dentro do que descreve como uma “frota de servidores infinitamente escalável”.

O que isso implica?

Bem, acontece que o Webflow possui e controla mais do que os datacenters 100 em todo o mundo. Combine isso com os CDNs executados por Amazon CloudFront mais Rapidamente- e o resultado é um sistema sólido para hospedar todos os tipos de sites.

Além de lidar com qualquer tamanho de tráfego, o Webflow garante um ótimo desempenho com tempos de carregamento de página de milissegundos mais o tempo de atividade do site 99.99%. Sua estrutura com tecnologia AWS é particularmente importante para fornecer uma base sólida para suportar cargas de tráfego comparativamente grandes em sites corporativos.

E como a segurança na Web é imperativa, a infraestrutura de hospedagem do Webflow é compatível com HTTP / 2 e os usuários obtêm certificados SSL relevantes para seus sites.

Sistema de gerenciamento de conteúdo

É aqui que o conteúdo encontra o design visual. O CMS do Webflow permite essencialmente que você insira e gerencie o conteúdo do seu site. Em outras palavras, você pode adicionar e editar qualquer texto ou mídia na página exata que está criando.

E se você estiver gerenciando um extenso projeto web com estruturas complicadas, você apreciará particularmente a capacidade do sistema de suportar ajustes manuais de aspectos de conteúdo - incluindo tipos de conteúdo, membros da equipe, projetos, etc. - com campos personalizáveis.

Bem, tudo isso é facilitado por Coleções CMS um recurso que pode ser acessado diretamente da janela do editor principal. Assim que você gerar uma nova coleção, você poderá passar pelo tipo de conteúdo para definir campos e introduzir itens. Eles são posteriormente adotados como páginas da web distintas ou listas integradas nas páginas que você criou.

Webflow CMS

Confuso? Ok, considere este exemplo: para estabelecer uma página exibindo a força de trabalho de sua organização, você pode apresentar uma coleção de "membros da equipe", completa com itens como links sociais, descrições, nomes, fotos e nomes de funcionários.

Agora, isso cobre basicamente o back-end do CMS. Mas você sabe o que? Isso não é tudo. O Webflow avança para dar ao WordPress uma boa corrida pelo dinheiro através do Webflow Editor. É aqui que você apimenta uma página publicada com um novo conteúdo baseado no tipo pré-selecionado.

Em resumo, você obtém um site abrangente que suporta conteúdo dinâmico, como portfólios, artigos e postagens de blog, sem instalar plugins adicionais.

Colaboração

Admite. Grandes projetos de web design são empolgantes. Mas, eles podem ser cada vez mais complicados, especialmente se você não conseguir agilizar todas as partes envolvidas.

O Webflow aparentemente pensou nisso e fez uma boa tentativa de facilitar a colaboração de agências de web design com vários membros da equipe. E há mais - você também pode convidar outras partes como clientes, designers de terceiros, contratados, etc. Suas funções e capacidades de usuário dependem dos privilégios correspondentes que você definiu.

Colaboração Webflow

Se você está lidando com clientes, por exemplo, pode convidá-los para revisar seus projetos em tempo real com privilégios de uso severamente restritos.

Dito isso, percebi que todos os ajustes do site são refletidos em todo o quadro em tempo real. Isso ajuda os membros da equipe de colaboração a evitar a repetição de tarefas que já foram tratadas.

Características gerais

  • XML Sitemap
  • Títulos meta de SEO, descrições
  • Tags alt da imagem
  • Fórum da Comunidade
  • Suporte prioritário
  • Suporte por email
  • Nome de domínio personalizado
  • Sites de teste
  • Atualizações Instantâneas
  • Redirecionamentos de URL personalizados
  • Monitorização de Websites 24 / 7
  • Tempos de carregamento rápido
  • Google Domains Purchasing
  • Integração Zapier
  • integração MailChimp
  • Integração do Google Analytics
  • otimização SEO
  • Formulários de etiqueta branca
  • Etiquetagem branca CMS
  • Proteção por senha do site
  • Organização do projeto
  • Backups de sites
  • Páginas de erro personalizadas
  • Favicon personalizado
  • Faturamento direto do cliente
  • Componentes do SNS
  • Texto rico
  • L
  • vídeos de fundo
  • Códigos incorporados em HTML
  • Menu suspenso
  • mapas do Google
  • Sliders e carrosséis
  • Navegação Tab
  • Formulários da Web personalizáveis
  • Editor de site
  • Revisão de submissões de formulário
  • Conteúdo do gráfico aberto
  • Modelo de tags de SEO
  • Importação de CMS via Zapier
  • RSS Feeds
  • API do CMS
  • 3D animações
  • Propriedades de estilo CSS
  • Modelos de sites
  • Imagens otimizadas
  • Famílias de fontes da Web
  • Amostras de cores globais
  • Caixas flexíveis CSS3
  • Adição de código customizado
  • Código exportável
  • Filtros CSS

Revisão do Webflow: preços

A estrutura de preços do Webflow é aparentemente complexa para alguns usuários, enquanto outros elogiam sua abordagem abrangente.

Se você é do tipo que odeia vários pacotes em uma única plataforma devido ao complexo processo de comparação que o acompanha, talvez você ache que os planos de preços do Webflow são um pouco trabalhosos. Mas, por outro lado, se você preferir várias opções de preços que atendem a diferentes níveis de usuários, você vai gostar de como as coisas foram organizadas aqui.

Agora, para começar, o Webflow tenta oferecer suporte a três tipos de usuários - freelancers, designers de solo e equipes de design. Cada categoria tem seu próprio conjunto de pacotes com vários recursos.

Pacotes Webflow

Aqui estão breves descrições de cada plano:

Para Freelancers:

Encenação livre Completamente livre.

  • Envios de formulários 10 por mês
  • Itens 50 CMS
  • Visitas mensais 500
  • 2 páginas estáticas
  • Subdomínio webflow.io grátis

Hospedagem Básica $ 15 por mês faturado mensalmente ou $ 12 por mês faturado anualmente.

  • Envios de formulários 500 por mês
  • Visitas mensais 25,000
  • 100 páginas estáticas
  • CDN
  • Opção SSL grátis
  • Criação de domínio

CMS Hosting- $ 20 por mês faturado mensalmente ou $ 16 por mês faturado anualmente.

  • Editores de conteúdo 3
  • Acesso à API do CMS
  • Itens 2,000 CMS disponíveis
  • Envios de formulários 1,000 por mês
  • Visitas mensais 100,000
  • 100 páginas estáticas
  • CDN
  • Opção SSL Gratuita
  • Criação de domínio

Hospedagem de Negócios $ 45 por mês faturado mensalmente ou $ 36 por mês faturado anualmente.

  • Editores de conteúdo 10
  • Acesso à API do CMS
  • Itens 10,000 CMS disponíveis
  • Submissões ilimitadas de formulários
  • Visitas mensais 1,000,000
  • 100 páginas estáticas
  • CDN
  • Opção SSL Gratuita
  • Criação de domínio

Webflow para freelancers

Para designers:

Iniciante- Livre.

  • Encenação livre
  • Faturamento do cliente
  • Até 2 projetos simultâneos
  • Construção de sites gratuitos

Leve- $ 24 por mês faturado mensalmente ou $ 16 por mês faturado anualmente.

  • Exportação de código
  • Estadiamento aprimorado
  • Faturamento do cliente
  • Até 10 projetos simultâneos

Pró- $ 42 por mês faturado mensalmente ou $ 35 por mês faturado anualmente.

  • Proteção por senha do site
  • Rotulagem branca
  • Transferência de propriedade do projeto
  • Exportação de código
  • Estadiamento aprimorado
  • Faturamento do cliente
  • Projetos simultâneos ilimitados

Webflow para designers

Para equipes criativas

Equipe- $ 42 por mês faturado mensalmente ou $ 35 por mês faturado anualmente.

  • Painel de equipe
  • Proteção por senha do site
  • Rotulagem branca
  • Exportação de código
  • Estadiamento aprimorado
  • Faturamento do cliente
  • Projetos simultâneos ilimitados

Grande equipe Citação personalizada

  • Preços dos membros da equipe em massa
  • Painel de equipe
  • Proteção por senha do site
  • Rotulagem branca
  • Exportação de código
  • Estadiamento aprimorado
  • Faturamento do cliente
  • Projetos simultâneos ilimitados

Webflow para equipes

Quem deve considerar o uso do Webflow?

Todas as coisas consideradas, nós aplaudimos Webflow para fornecer:

  • Certificado SSL gratuito para conformidade de segurança.
  • Redes de distribuição de conteúdo integradas gratuitas para tempos de carregamento de página reduzidos.
  • Hospedagem global avançada de sites em colaboração com sistemas eficazes como Amazon CloudFront e Rapidamente- para velocidades de carregamento de página rápidas.
  • Um CMS integrado e versátil para criação de conteúdo dinâmico.
  • Um ambiente de teste para testar e revisar vários elementos do site.
  • Gerentes de CSS e JS otimizados para gerenciamento avançado de sites, além de controle holístico de animações e estilos.
  • Um processo flexível de construção da Web que começa com uma tela em branco ou modelos pré-projetados.
  • Uma ferramenta de design da web otimizada para dispositivos móveis que produz código exportável em tempo real à medida que você cria um site.

Além disso, os inconvenientes que encontrei ao longo do caminho incluem:

  • Recursos limitados para suportar sites de comércio eletrônico
  • Um processo de design que favorece muito os programadores
  • Um número limitado de modelos de sites
  • Uma curva de aprendizado íngreme para iniciantes

Agora vamos agrupar tudo. Eu aposto que você concordará que o Webflow é um sistema avançado de criação da Web criado para desenvolvedores, designers e agências que buscam maior versatilidade e controle.

Quais são seus pensamentos?

Avatar

Bogdan Rancea

Bogdan é um membro fundador da Inspired Mag, acumulando quase 6 anos de experiência neste período. Em seu tempo livre, ele gosta de estudar música clássica e explorar artes visuais. Ele é muito obcecado com fixies também. Ele é dono do 5 já.