Como se tornar um designer de modelos do Webflow
Desbloqueie todos os modelos
Pense em usar suas habilidades de web design para ganhar algum dinheiro extra? Transformando-se em um Fluxo da web O criador de modelos pode ser seu próximo bom passo. Vamos ver o que você precisa aprender:
- O que faz um Criador de modelos Webflow fazer? Eles fazem planos de sites prontos para uso que as empresas podem escolher e usar, economizando tempo e dinheiro.
- Por que você deveria tentar? Os fabricantes recebem tanto quanto 80% das vendas, com alguns chegando Mais de $3.500 por mês a partir de apenas alguns modelos.
- Como você começa? Conheça as ferramentas do Webflow, aperfeiçoe-se em habilidades básicas de web design (HTML, CSS, design responsivo) e crie bits que você possa usar mais de uma vez para trabalhar com mais rapidez.
- O que vende um modelo? Preste atenção às necessidades de determinados campos (como imóveis, saúde), torne-o adequado para telefones e garanta que ele carregue rapidamente.
- Como você se destaca? Tenha um bom conjunto de trabalho para mostrar, cumpra Mercado Webflow regras e comercialize bem seus modelos.
Ponto principal a ser abordado: A criação de modelos do Webflow permite que você seja criativo, obtenha dinheiro estável e ajude as empresas a se expandirem, tudo isso enquanto você cria uma fonte de dinheiro que cresce sozinha.
Fluxo de podcast - Fluxo da web Modelo de site para podcast | Fluxo da web Tutorial para iniciantes
Começando com o Webflow
Para começar com o Webflow, mergulhe em sua aparência e aprenda o cerne do web design. O Webflow facilita a codificação, tornando-a visual, mas conhecer os fundamentos da criação na Web ajuda você a criar modelos melhores. Depois de conhecer as ideias, use a aparência da ferramenta para usá-las.
Como usar o Webflow Look
O visual do Webflow tem cinco partes principais: a tela central, a barra superior, as ferramentas à esquerda, as ferramentas à direita e a barra inferior. No meio está o lona, onde você cria seu site agora. O barra superior tem guias como Design, CMS, Insights e View ways. Na ferramentas esquerdas, encontre maneiras de adicionar bits e manipular páginas. O ferramentas certas são para estilo e atos, e o barra inferior tem maneiras de se mover e definir pausas.
Aprenda atalhos para trabalhar rapidamente. Como:
- Bata UM para abrir o espaço Adicionar para inserir trechos como texto, fotos e caixas.
- Uso P para entrar no espaço das Páginas para configurar seu site.
- Prensa Z para ver a ordem dos bits.
- Toque S para abrir o espaço Estilo para fixar cores, palavras e espaço.
O Ferramenta de busca rápida (Command + E no Mac ou Control + E no Windows) permite que você encontre ferramentas rapidamente. Saiba que o Webflow é melhor em telas grandes e funciona bem com mouse e teclas.
Fundamentos do Web Build: HTML, CSS e design fácil de usar
Embora o Webflow seja um bom CSS para você, conhecer HTML, CSS e design fácil de usar ajuda você a fazer escolhas de design inteligentes. O design fácil de usar agora é mais importante: com mais da metade das visitas à web a partir de celulares, um grande aumento em relação ao anterior. Isso significa que você deve garantir que seus modelos tenham uma boa aparência em telefones, guias e desktops.
Use tamanhos soltos, não pixels fixos. Para texto, use em ou rem, para larguras, use% e, para alturas, use unidades de visualização (vh, vw). Como diz o designer Nick Gard: “Nunca use unidades fixas!” Use coisas como Flexbox para criar designs fáceis de usar e adicionar itens como menus móveis para uso no telefone. Certifique-se de que o texto possa ser lido em qualquer ferramenta definindo o tamanho correto da palavra e o espaço entre linhas.
Criação de peças e símbolos reutilizáveis
Peças reutilizáveis, antes chamadas de Símbolos, são essenciais para tornar os modelos fáceis de manter e alterar. Quando você cria uma peça, qualquer alteração na primeira altera todas as cópias. Os mais comuns são barras de navegação, rodapés, partes superiores e designs de cartões, que mantêm sua aparência estável e simples de mudar.
Por exemplo, se você alterar a aparência de um botão em uma parte, essa alteração aparecerá em todos os lugares em que o botão for usado. Para manter as coisas organizadas, nomeie suas peças com rótulos claros e claros, como “Menu principal” ou “Cartão de artigo”, para que você saiba imediatamente para que servem. As peças também podem ter características, pontos e tipos de estilo, oferecendo opções, mas mantendo o design principal seguro. Ao pensar com antecedência em seu sistema de peças, você facilita a alteração dos designs pelos usuários sem estragar a aparência.
Criação de modelos para campos de trabalho específicos
Depois de se familiarizar com o básico do Webflow, o próximo passo é criar modelos para determinados campos de trabalho. Analise os problemas especiais em áreas como imóveis, saúde ou vendas on-line e crie modelos que resolvam esses problemas reais, não apenas os básicos.
Como aprender sobre os mercados-alvo
Para criar bons modelos, você precisa conhecer os campos de trabalho que está buscando. A pesquisa é importante: as empresas que usam ferramentas para ouvir palestras nas redes sociais têm 2,5 vezes mais chances de estarem no topo de seu mercado. Na verdade, 45% das empresas bem-sucedidas usam essas ferramentas para ver tendências e atender a necessidades específicas.
Comece analisando relatórios e notícias do setor. Obtenha revistas especializadas, veja estudos de mercado e acompanhe os blogs que são importantes para sua área-alvo. Por exemplo, designers de serviços de saúde podem analisar Cuidados de saúde modernos ou Informações do HIMSS, enquanto os imobiliários podiam verificar Notícias do Inman ou atualizações da National Association of Realtors.
Converse com grandes nomes do setor no LinkedIn e no Twitter. Deixe comentários em suas postagens, faça perguntas nítidas e faça conexões. Esses influenciadores costumam falar sobre novas tendências e ideias antes de se tornarem populares. Você também pode usar ferramentas para seguir palavras e conversas importantes.
Ir a conferências e feiras comerciais - pessoalmente ou on-line - oferece muitas ideias em primeira mão. Esses lugares também são bons para conhecer pessoas que possam usar seus modelos.
Crie perfis de usuário detalhados fazendo entrevistas e pesquisas. Conversar diretamente com os funcionários sobre o que eles precisam em seus sites, seu trabalho diário e quais problemas eles podem ajudar você a ver o que seus modelos precisam ter.
“Aproveite as várias ferramentas existentes - mapas de calor, por exemplo - e faça com que pessoas não envolvidas no processo de design do site as usem antes que ele seja lançado. Se você descobrir que os usuários estão com raiva em algumas áreas ou nunca visitam outras, a equipe de desenvolvimento da Web obterá informações valiosas que impulsionarão as correções de curso necessárias antes que um site seja lançado, melhorando significativamente a jornada e a experiência do usuário com um determinado site.” — Amanda Foley, sócia-gerente da Kiterocket
Primeiro, confira seus rivais. Veja o que existe em seu mercado para ver o que funciona e o que não funciona. Verifique seus preços, o que dizem os compradores e onde talvez haja necessidades ainda não atendidas. Isso ajudará você a criar ideias que realmente se destacam.
Obtendo seu CMS e tornando-o fácil de usar
Seu estudo deve ajudá-lo a configurar seu CMS e torná-lo fácil de usar. Um bom CMS se encaixa bem com a forma como o trabalho é feito em determinados campos. Por exemplo:
- Modelos imobiliários: Tenha listas de detalhes da propriedade com espaço para preço, tamanho, número de quartos e onde está.
- Modelos de comércio eletrônico: mostre listas de produtos com formas de acompanhar o estoque, os diferentes níveis de preços e tipos.
- Modelos de saúde: Faça listas de serviços, informações sobre funcionários, ajuda ao paciente e tipos de visitas.
- Modelos de seguro: Tenha páginas sobre os tipos de políticas, o que elas abrangem e o que dizem os clientes.
- Modelos de energia solar: Concentre-se em mostrar produtos e fale sobre ser ecológico.
Também é fundamental garantir que todos possam usar seus designs, especialmente em empregos de saúde e dinheiro. Cerca de 15% das pessoas no mundo têm uma deficiência, mas WebAIM diz que 98% dos sites têm coisas que os tornam difíceis de usar e que podem ser corrigidas. Use ferramentas como o verificador de cores do Webflow para garantir que seus designs sejam fáceis de usar para todos. Além disso, coloque texto claro nas imagens para que os leitores de tela possam explicá-las bem.
Configure suas coisas com títulos fáceis de seguir (H1, H2, H3) para deixar tudo claro. Isso ajuda tanto as pessoas que usam leitores de tela quanto os sites de pesquisa. A ferramenta Vision do Webflow pode mostrar como as pessoas com problemas de visão podem ver seus modelos.
“Os consumidores exigem segurança de dados na forma de um SSL - esse símbolo de cadeado na barra de endereço aumenta sua credibilidade e dá aos usuários tranquilidade enquanto navegam.” — John Li, cofundador e CTO da Fig Loans
Em trabalhos que lidam com informações privadas, a segurança é essencial. Adicione partes às regras de privacidade, cumprindo as leis (como a HIPAA na área da saúde) e a segurança comprova a confiança dos usuários.
Criação de modelos rápidos e compatíveis com o telefone
A rapidez com que um site carrega pode mudar a forma como os usuários agem e moldar os resultados comerciais. Por exemplo, sites que carregam em dois segundos têm uma baixa taxa de saída de 9%. Mas se demorarem mais de cinco segundos, as taxas de licenças podem subir para 38%. Reduzir o tempo de carregamento em apenas um segundo pode aumentar as vendas em 17%.
Aqui estão algumas maneiras de fazer com que os sites carreguem mais rápido:
- Imagens melhores: Reduza as imagens e altere-as para WebP com as ferramentas do Webflow. Use o carregamento lento para que as imagens apareçam à medida que os usuários rolam e escolha SVGs para imagens nítidas que não atrapalhem o site.
- Fontes simples: Muitos tipos de fonte podem tornar as coisas mais lentas. Se você precisar de fontes exclusivas, adicione-as você mesmo com a configuração “swap” para que as fontes de backup apareçam imediatamente enquanto as fontes exclusivas são carregadas.
- Design que prioriza o telefone: Com mais da metade das visitas ao site por telefone, é necessário fazer com que os sites funcionem bem em telefones. A geração Z, em especial, deseja um uso rápido e personalizado do telefone. Teste modelos em dispositivos reais para garantir que funcionem corretamente.
Elimine coisas inúteis de terceiros que podem tornar o carregamento lento. Para itens indispensáveis, como estatísticas ou ferramentas de bate-papo, defina scripts para serem carregados um por um ou use o atributo delay. Gerenciador de tags do Google pode ajudar a lidar bem com eles.
Use a opção de limpeza do Webflow no Gerenciador de Estilos para descartar CSS desnecessário, mantendo seus modelos organizados. Verifique o quão bem os sites funcionam com frequência com ferramentas como Informações sobre o PageSpeed, GTmetrix, ou Pingdom para detectar e corrigir quaisquer problemas.
Pense nas coisas extras que seus modelos de trabalho podem precisar. Por exemplo, os modelos de aluguel de carros geralmente precisam de configurações de reserva e shows de frotas, enquanto os modelos de lojas virtuais precisam de maneiras de lidar com pagamentos e acompanhar o estoque. Pense nisso para manter uma boa combinação de uso e velocidade.
Criando seu livro modelo
Depois de se tornar bom em usar o Webflow e criar alguns modelos personalizados, é hora de mostrar o que você criou. Um portfólio forte é fundamental para mostrar sua habilidade e ajudar as pessoas a ver como você pode ajudá-las. Seu site de portfólio não é apenas onde você lista seu trabalho, é sua chance de mostrar como você vê as coisas e o que você pode fazer. Como Jason Marder, que lidera o design na Listra, muitas vezes aponta:
“[Seu portfólio] é o único lugar na internet onde você tem controle total sobre o meio e a mensagem”.
Criando um site de portfólio de trabalho
Seu portfólio precisa mostrar seu caminho. Indique seus melhores trabalhos e conte o como e o porquê de cada um. Como diz Sergie Magdalin, que ajudou a iniciar o Webflow:
“Como alguém que analisa candidatos a designers diariamente, conferir um portfólio é uma das primeiras coisas que faço. Eu posso ter uma ideia da experiência dessa pessoa muito rapidamente com base nas simulações do projeto que ela fornece e na forma como apresenta suas informações”.
Comece com força mostrando seu melhor design logo na frente do seu site. Agrupe seus outros trabalhos por campo, como lojas virtuais, saúde ou residências, para que as pessoas que procuram possam encontrar rapidamente o que precisam.
Vá além das imagens. Transforme cada projeto em uma história completa compartilhando os problemas que você encontrou, as correções que você fez e o que você fez. Adicione resultados claros, como carregamentos de página mais rápidos, melhores taxas de conversão ou uso móvel mais suave para fazer seu trabalho se destacar.
Use imagens de alto nível e forneça links para demonstrações ao vivo para que os usuários possam brincar com seus designs. Acelere os tempos de carregamento de imagens e mostre visualizações nas telas do computador e do telefone para destacar suas habilidades em design responsivo.
Adicionar avaliações de clientes pode aumentar a confiança, então inclua-as quando puder. Mantenha suas informações de contato fáceis de identificar em todas as páginas e use fortes apelos à ação que incentivem os visitantes a contratá-lo ou comprar seus designs.
Quando sua vitrine estiver ótima, combine seu estilo de design com o que seus clientes precisam para tornar seus modelos ainda mais atraentes.
Colocando os clientes em primeiro lugar no design
Uma vitrine forte é só o começo. Para realmente se destacar, concentre-se primeiro no que o cliente precisa, o que significa designs fáceis de usar e alteráveis. Seus modelos devem mudar facilmente para diferentes usos.
Crie peças que funcionem para qualquer campo. Por exemplo, crie seções principais com partes que os clientes possam alterar, como imagens, texto ou cores, sem mexer no design.
Pense em como as coisas podem crescer. Use grades e peças que possam ser movidas ou alteradas conforme necessário, seja para uma página simples ou para um site grande.
Manter as coisas iguais é vital. Crie sistemas de design reproduzíveis com espaço, tipo e cores consistentes que os clientes possam usar em todos os sites. Anote essas opções com clareza para ajudar os clientes a terem certeza de que podem mudar as coisas.
Além disso, pense em quem usará seus designs. Seja para pequenas empresas ou grandes empresas, fazer com que seus modelos se ajustem ao nível de habilidade deles os tornará mais fáceis de usar e mais apreciados.
Como escrever e empacotar modelos
Uma escrita clara pode tornar seus modelos especiais. Cada design deve ter três partes principais: um guia de estilo, uma página de instruções e um registro de alterações.
- Guia de estilo: mostre todos os tipos de texto - títulos, parágrafos, listas, links e botões - para que os clientes saibam como ficará.
- Página de instruções: forneça etapas fáceis para editar partes complexas, como animações. Se estiver usando animações GSAP, adicione uma parte intitulada “Como editar animações GSAP” com etapas fáceis para alterações ou remoção.
- Página de licenças: Liste todas as fontes (imagens, ícones, fontes e desenhos) com links para as informações da licença. Isso garante que os clientes conheçam seus direitos e evite problemas legais.
Pense também no acesso. Escreva como seus designs atendem às regras de acesso, como contraste de cores, texto para imagens e títulos corretos. Forneça dicas para ajudar os clientes a manter essas regras ao adicionar mais conteúdo.
Ao classificar seus modelos, use etiquetas adequadas para ajudar as pessoas a encontrá-los rapidamente. Dê a cada uma tag principal para mostrar o uso da chave e adicione tags extras para obter mais informações. Por exemplo, um modelo de aplicativo de terapia pode estar em “Beleza e bem-estar” com uma tag secundária “Aplicativo”.
No final, certifique-se de que seus documentos sejam fáceis de ver. Use títulos, listas e imagens para ajudar os clientes a ter ideias difíceis. Adicione informações de versão em seu pacote para que os clientes possam acompanhar as alterações ou correções. Isso cria confiança com o passar do tempo.
sbb-itb-fdf3c56
Colocando modelos à venda no Webflow Market
Quando você vende seus modelos no Mercado Webflow, você pode obter um grande 80% de desconto em cada venda. Mas apenas colocar um design não fará com que ele venda bem. Você precisa atingir marcas de alta qualidade e brilhar, entre muitas outras. Aqui estão as etapas que você deve seguir para que tudo funcione bem.
Atingindo o alto nível do mercado de Webflow
O Webflow quer apenas o melhor em termos de qualidade de modelo. Uma pessoa da equipe do Webflow Market diz:
“Na Webflow, temos muito orgulho da qualidade. Cada envio de modelo que recebemos é avaliado pessoalmente por um membro da equipe do Webflow Marketplace, de acordo com os critérios abaixo.”
Para obter uma classificação “Boa” em sua escala, seu modelo deve atingir essa marca. Se for apenas “satisfatório”, você receberá dicas e terá até duas tentativas para acertar antes que seja jogado fora. Qual é o grande motivo para jogar fora? Não está seguindo as regras de envio. Então, é fundamental conhecer o regras para envio, escala de design, e como funciona: escala bem antes de você começar a trabalhar.
Seu modelo também precisa ser aprovado material básico da web nas telas da mesa e do telefone. Certifique-se de que todas as imagens, sinais e tipos possam ser vendidos novamente da maneira correta e evite usar logotipos marcados ou materiais de marca. O material personalizado geralmente é proibido, exceto em alguns casos, como suavização de digitação, material sem índice em algumas páginas e SVGs feitos da maneira certa.
Ao nomear seu modelo, crie-o curto e claro - uma a duas palavras que mostram para que serve. Não use muitas palavras, não use palavras de rua, sinais estranhos ou letras grandes e pequenas estranhas.
Como enviar seu modelo
A forma de envio está repleta de etapas, portanto, criar uma lista com as regras do Webflow pode ajudar você a se manter correto. Se você é novo, lembre-se, envie apenas um modelo por vez até que você tenha um bom histórico.
Seu pacote de envio deve ter os seguintes itens:
- UM Guia de estilo para looks uniformes
- Um Página de instruções (se seu modelo tiver movimentos complexos)
- UM Registro de alterações com a tag no-index ativada
Além disso, você deve ter algumas coisas no rodapé: adicione um link “Powered by Webflow” e um link de licenciamento à sua página de licença. Certifique-se de colocar tags alt em imagens perfeitas para dar uma olhada e tornar seu código CSS pequeno.
Escolha um tag principal que mostra o estilo e o tipo do seu modelo. Além disso, a configuração de SEO da sua página inicial deve se adequar ao nome do seu modelo.
Quando a equipe do Webflow fizer anotações, analise cada uma delas profundamente. Mantenha seu registro de alterações atualizado e informe a equipe sobre quaisquer grandes mudanças no design. Isso garante que apenas o topo, modelos de alta qualidade alcance compradores. Depois que seu modelo for aprovado, o próximo passo é comercializá-lo bem.
Promovendo seus modelos para mais vendas
Criar um modelo de alto nível é só o começo. Para impulsionar as vendas, você precisa de um plano de vendas forte para mostrar seu produto aos prováveis compradores.
Marketing de conteúdo é uma jogada forte. Por exemplo, um modelo Webflow e um kit de interface de usuário são colocados como Flowzai, escreve postagens no blog para dar dicas sábias e atrair compradores. Ao misturar pesquisa inteligente de palavras com SEO, eles transformam visitas na web em vendas.
Sites de mídia social como Twitter, Instagram, e LinkedIn são os melhores lugares para mostrar seus designs e conversar diretamente com prováveis compradores. Participar de grupos de design também pode dar dicas e opiniões úteis sobre o que as pessoas gostam.
Não se esqueça de dizer por que seus modelos são especiais. Carregamento rápido, movimentos interessantes ou coisas feitas para determinadas áreas de trabalho mostram claramente o valor que seus modelos oferecem.
Para aumentar as vendas, pense em usar envios de e-mail e anúncios pontiagudos. Ofertas especiais, cortes de preços ou equipes com os melhores profissionais de design e planos de ajuda podem aumentar ainda mais seu alcance.
Por último, não ignore o valor de ajuda para compradores. Forneça guias fáceis, tenha muitas formas de ajuda e respostas rápidas às opiniões dos usuários podem formar um grupo forte de compradores. Compradores satisfeitos geralmente voltam e contam aos outros sobre seus modelos.
Ganhando dinheiro com seus modelos de Webflow
Quando seus modelos estiverem à venda no Webflow Marketplace, você poderá fazer com que eles gerem dinheiro estável com preços inteligentes, bom suporte e serviços extras. Vamos ver como você pode aumentar seus ganhos.
Como definir preços para seus modelos
Definir preços inteligentes para seus modelos é fundamental. Procure preços que mostrem a economia de tempo e dinheiro que seus modelos trazem. Preços variados podem atrair compradores diferentes. Alguns podem querer pagar uma vez para adquirir o design totalmente, enquanto outros podem achar valor na ajuda e nas atualizações contínuas. É importante notar que 52% das empresas com uma base de assinaturas optam por uma taxa fixa, o que pode ser uma boa ideia para obter dinheiro contínuo. Aposte em uma faixa de lucro de 10 a 20% após todos os custos.
No entanto, o preço não é o único caminho para manter o dinheiro estável — a ajuda e as atualizações também são importantes.
Atualizando modelos e ajudando clientes
Atualizações regulares e uma boa ajuda ao cliente podem transformar um comprador ocasional em um comprador fiel. Mantenha seus modelos atualizados com os novos recursos do Webflow e as tendências de design para se manter atualizado. As atualizações também permitem que você entre em contato com compradores antigos, mantendo sua fidelidade.
Defina um sistema de ajuda simples e eficaz, como um e-mail ou um formulário em seu site, e ofereça guias claros ou ajuda em vídeo para problemas comuns. Mantenha um bom sistema e um registro de alterações para atualizações, mostrando aos compradores seu compromisso com a qualidade.
Pensando em fazer ainda mais? Pense em oferecer serviços personalizados.
Oferecendo serviços e extras personalizados
Os modelos são só o começo. Muitos compradores querem ajustes extras para se adequar à sua marca ou adicionar recursos exclusivos. Oferecer esses serviços pode aumentar muito sua renda. Por exemplo, Rebecca Lowe, da Marion & Co, dobrou sua renda comercial depois de entrar no Webflow e depois a triplicou misturando vendas de modelos com visibilidade de marca e novos projetos.
Você também pode oferecer extras, como manutenção contínua, ajustes avançados ou até mesmo sessões de aprendizado. Esses extras não apenas aumentam sua renda, mas também tornam seus modelos a porta de entrada para mais serviços. Alguns designers ganham entre $1.500 e $2.000 por mês com um pequeno conjunto de modelos. Ao dar valor a cada passo, você pode ter sucesso modelo de negócio.
Palavras finais: Seu passo para vencer como criador de modelos de fluxo de web
Ficando bom em fazer Modelos de Webflow dá trabalho, mas a recompensa pode ser grande. Muitos fabricantes ganham muito dinheiro criando e vendendo os melhores modelos. O truque é melhorar seu ofício e saber como mostrar e vender bem seu trabalho.
Como já falamos, comece conhecendo bem o web design e aprendendo tudo o que puder sobre o Webflow. Em seguida, analise o mercado para encontrar áreas nas quais você é bom e que precisam de suas habilidades.
Antes de começar a vender, faça um conjunto de trabalhos que mostre muitos designs bons. Seus designs devem ter uma aparência limpa, funcionar bem e atender às necessidades de pessoas reais. É fundamental atingir as marcas do Webflow para garantir que seus designs sejam vendidos e apreciados.
A chance de ganhar dinheiro cresce à medida que mais pessoas querem designs do Webflow. Muitos fabricantes vencedores combinam planos de design inteligentes com mais ofertas.
O marketing também é fundamental. Mostre seus modelos nas redes sociais, em grupos de design e em lugares onde as pessoas buscam ideias. Adicionar itens como páginas de estilo, regras, etapas e notas de atualização pode fazer seu trabalho valer mais a pena e atrair compradores.
Permanecer no topo a longo prazo significa oferecer um ótimo suporte, manter seus designs atualizados com o novo material do Webflow e focar no bom em vez de muito. Um bom nome para ajuda e um novo trabalho trará de volta compradores e uma ascensão constante.
O caminho é claro: conheça suas ferramentas, crie os melhores designs, crie um conjunto de trabalho sólido e encontre maneiras inteligentes de vender seu trabalho. Comece agora e você poderá transformar sua habilidade de design em um trabalho em crescimento.