Escrevendo um Código Web Melhor

Se você assinar um serviço de um link nesta página, a Reeves and Sons Limited pode ganhar uma comissão. Veja nosso Declaração de ética.

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 veremos em breve. Esta Webflow A revisão discute todos os recursos essenciais que você precisa conhecer, os pontos fracos correspondentes, além do custo de alavancar a plataforma para o design.

Mas primeiro, o que exatamente é Webflow?

Webflow Revisão: visão geral

Como você provavelmente já percebeu, Webflow não é um construtor de sites típico.

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. 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, o mais fascinante aqui é Webflowabordagem inteligente da para toda a coisa de codificação. É uma plataforma sem código que oferece suporte à edição de código para maior flexibilidade.

Está confuso? Sim eu conheço. É por isso que reservei um tempo para avaliar cuidadosamente tudo Webflow tem a oferecer - desde o design do site até o sistema de gerenciamento de conteúdo.

E aqui estão os detalhes ...

Webflow Revisão: Recursos

Sites

Webflow são algumas coisas, sem dúvida. Mas sua ferramenta de web design sem código sempre foi a principal oferta aqui.

Bem, seria compreensível se você 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 Webflow é um mecanismo de automação que opera amplamente em CSS e HTML.

Webflow Gráfico

Nele, você pode introduzir confortavelmente os elementos do site e, em seguida, movê-los de acordo sem usar código. O bit de programação é tratado por Webflowa estrutura subjacente do, que cria e edita sistematicamente 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, sabe que a eliminação da parte de programação tem um custo de flexibilidade limitada. Interessantemente, WebflowA ferramenta de design da não segue essa tendência. Então, vou ser honesto aqui e admitir que é certamente um dos construtores de sites mais avançados e versáteis do 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 à forma, Webflow não é um dos construtores mais simples que você encontrará por aí. Embora sua interface seja extremamente poderosa, é aparentemente complicada e pode exigir algum esforço para aprender as cordas de acordo.

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

Conseqüentemente, o sistema aqui habilmente incorpora alguns aspectos da codificação conforme você constrói um site. Se você pretende apresentar um square no meio da página, por exemplo, você terá que adicionar um novodiv> 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 ir em frente e alavancar Webflow sem nenhum conhecimento de programação, é necessário um conhecimento básico das propriedades HTML e CSS para capitalizar de forma abrangente seu poder absoluto.

No entanto, se preferir outroswise, basta marcar contra 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 com CSS e HTML. De outroswise, você corre o risco de misturar as coisas ou ficar preso em algum lugar ao longo do processo.

A melhor abordagem para iniciantes em codificação é tirar vantagem de Webflowmodelos pré-concebidos de. Acontece que o sistema oferece mais de 200 modelos atraentes, 30 dos quais são totalmente gratuitos. Os pagos, 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.

Hosting

Isso nem é preciso dizer. Que Webflow, como a maioria dos construtores de sites hoje, oferece hospedagem de sites e domínios personalizados junto com seus pacotes de design.

Webflow hospedagem

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

O que isso implica?

Bem, Webflow acontece de possuir e controlar mais de 100 datacenters em todo o mundo. Combine isso com CDNs administrados 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, Webflow garante um desempenho ideal com tempos de carregamento de página de milissegundos mais 99.99% do site uptime. Sua estrutura com tecnologia AWS é particularmente crítica para fornecer uma base sólida para suportar cargas de tráfego comparativamente grandes de sites corporativos.

E como a segurança na web é fundamental, WebflowA infraestrutura de hospedagem da é 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. WebflowO CMS 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 precisa 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 basicamente cobre o back-end do CMS. Mas você sabe o que? Isso não é tudo. Webflow vai em frente para dar ao WordPress uma boa corrida para seu dinheiro por meio do Webflow Editor. É aqui que você incrementa uma página publicada com novo conteúdo baseado no tipo pré-selecionado.

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

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.

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

Webflow colaboração

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
  • Ajuda
  • 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

Webflow Revisão: Preços

WebflowA estrutura de preços da empresa é 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 por causa do complexo processo de comparação que vem com ele, você pode descobrir Webflowos planos de preços da empresa são um pouco complicados. Mas, por outro lado, se você preferir várias opções de preços que se adaptem a diferentes níveis de usuário, vai gostar de como as coisas foram organizadas aqui.

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

Webflow pacotes

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
  • Grátis webflowsubdomínio .io

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 times

Quem deve considerar o uso 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. Aposto que você vai concordar que Webflow é um sistema de construção de web avançado criado para desenvolvedores, designers e agências que buscam maior versatilidade e controle.

Quais são seus pensamentos?

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á.

Comentários Respostas 0

Deixe um comentário

O seu endereço de e-mail não será publicado.

NOTA *

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.