\n Profissionais de marketing inteligentes sabem que um web design pode aumentar ou diminuir a taxa de convers\u00e3o.\n<\/p>\n
\n Embora seja verdade que o SEO e o marketing de m\u00eddia social s\u00e3o vitais para as convers\u00f5es, ter um excelente design pode fazer toda a diferen\u00e7a.\n<\/p>\n
\n Todos os componentes de marketing digital s\u00e3o importantes. No entanto, o web design pode aumentar ou diminuir as taxas de convers\u00e3o. Em um estudo da Universidade de Stanford, 46,1% das pessoas afirmaram que sua principal medida para distinguir se uma empresa \u00e9 confi\u00e1vel ou n\u00e3o \u00e9 o web design. Com isso em mente, o design do seu site \u00e9 vital e deve parecer profissional.\n<\/p>\n
\n A est\u00e9tica do seu site tamb\u00e9m pode desempenhar um papel nas convers\u00f5es. Dois ter\u00e7os das pessoas consumiriam conte\u00fado e ficariam se o site fosse bem projetado, de acordo com um estudo da Adobe. Dito isso, seu site precisa ser atraente se voc\u00ea quiser que seus visitantes leiam suas postagens.\n<\/p>\n
\n Nesse caso, voc\u00ea n\u00e3o pode ignorar o web design. Voc\u00ea pode contratar um freelancer ou contratar um designer para garantir que seu site seja esteticamente agrad\u00e1vel.\n<\/p>\n
\n Aqui est\u00e3o alguns truques de web design que podem lhe dar um impulso sustent\u00e1vel nas convers\u00f5es.<\/strong>\n<\/p>\n \n A lei afirma que, ao aumentar o n\u00famero de op\u00e7\u00f5es, aumenta tamb\u00e9m o tempo que o indiv\u00edduo leva para tomar uma decis\u00e3o. Esta lei \u00e9 frequentemente referida em web design. Neste estudo, os pesquisadores descobriram que mais nem sempre \u00e9 melhor porque uma mesa com menos variedades de gel\u00e9ia atrai mais pessoas do que uma mesa com 24 tipos de gel\u00e9ia. As pessoas provavelmente comprariam quando vissem uma pequena tela.\n<\/p>\n \n Para aplicar a lei em web design, voc\u00ea precisa limitar o n\u00famero de op\u00e7\u00f5es que voc\u00ea tem para seus visitantes. Em seu site, avalie o que est\u00e1 em sua barra de navega\u00e7\u00e3o. \u00c9 o melhor lugar para encontrar o que voc\u00ea pode se livrar para diminuir o n\u00famero de op\u00e7\u00f5es. Quanto mais links seus visitantes puderem escolher, mais eles perder\u00e3o o interesse em seu site.\n<\/p>\n \n Al\u00e9m da barra de navega\u00e7\u00e3o, voc\u00ea tamb\u00e9m deve observar os outros elementos do seu site que os visitantes ter\u00e3o que decidir quando estiverem em seu site. Isso incluiria determinar se os leitores devem rolar a p\u00e1gina mais para baixo ou usar a barra de navega\u00e7\u00e3o; decidir baixar seu e-book ou compartilhar sua postagem nas m\u00eddias sociais ou optar por ler uma resenha de produto ou procurar mais produtos.\n<\/p>\n \n Como pode haver v\u00e1rios locais em seu site onde voc\u00ea pode reduzir o n\u00famero de op\u00e7\u00f5es, conv\u00e9m instalar um port\u00e3o de boas-vindas em sua p\u00e1gina inicial. Aqui, seus visitantes ver\u00e3o uma mensagem de boas-vindas que cobre toda a tela e vem com uma \u00fanica chamada para a\u00e7\u00e3o. Com isso em mente, os visitantes ter\u00e3o apenas uma escolha ao visitar seu site. Se quiserem ver mais op\u00e7\u00f5es, podem rolar para baixo, minimizando assim as distra\u00e7\u00f5es em sua p\u00e1gina inicial.\n<\/p>\n \n Quando voc\u00ea aplica essa lei, no entanto, \u00e9 vital que voc\u00ea considere as a\u00e7\u00f5es que s\u00e3o cruciais para seus resultados. Lembre-se de que cada p\u00e1gina do seu site deve atingir um objetivo principal. Ent\u00e3o, novamente, quanto menos op\u00e7\u00f5es seus visitantes tiverem, mais f\u00e1cil para eles usarem seu site, o que pode aumentar a taxa de convers\u00e3o de seu site.\n<\/p>\n \n Seus visitantes ficam impacientes quando navegam na web. Um segundo atraso pode resultar em uma redu\u00e7\u00e3o de 7% na convers\u00e3o. Existem v\u00e1rias ferramentas para verificar a velocidade da sua p\u00e1gina e saber mais sobre seus problemas. Voc\u00ea pode usar o PageSpeed \u200b\u200bInsights do Google, Page Load Speed \u200b\u200bAnalyzer do SEO Chat e Pingdom, entre outros.\n<\/p>\n \n Lembre-se que voc\u00ea tem oito segundos para chamar a aten\u00e7\u00e3o do seu leitor. Nesse caso, voc\u00ea tem uma pequena oportunidade de atrair seus visitantes depois de acessar seu site. Se o seu site demorar para carregar, eles v\u00e3o embora e nunca mais voltar\u00e3o.\n<\/p>\n \n Al\u00e9m de acelerar o seu site, voc\u00ea deve considerar ter um t\u00edtulo breve e uma imagem atraente que possa comunicar o objetivo da sua p\u00e1gina ou chamar a aten\u00e7\u00e3o dos visitantes para a chamada \u00e0 a\u00e7\u00e3o principal. Certifique-se de que seus bot\u00f5es de inscri\u00e7\u00e3o sejam grandes e simples. E certifique-se de que sua c\u00f3pia seja atraente.\n<\/p>\n \n A regra dos ter\u00e7os \u00e9 um princ\u00edpio de fotografia que os web designers podem implementar. Nesta regra, voc\u00ea precisa dividir sua p\u00e1gina da web em ter\u00e7os, de modo que ela forne\u00e7a nove quadrados com tamanhos iguais. Os quatro quadrados do meio s\u00e3o locais de interesse. Qualquer objeto que voc\u00ea colocar nesses pontos pode ter um grande impacto em seu site, aumentando assim as convers\u00f5es.\n<\/p>\n \n Voc\u00ea pode colocar seu bot\u00e3o de chamada para a\u00e7\u00e3o mais importante nessas \u00e1reas. Mas n\u00e3o coloque sua barra de navega\u00e7\u00e3o nesses locais. Dessa forma, seus visitantes se concentrar\u00e3o na chamada \u00e0 a\u00e7\u00e3o principal em sua p\u00e1gina da web.\n<\/p>\n \n N\u00e3o h\u00e1 necessidade de redesenhar todo o seu site. Em vez disso, voc\u00ea pode usar a regra dos ter\u00e7os como uma forma de colocar as partes mais importantes do seu site. Primeiro, voc\u00ea precisa tirar uma captura de tela do seu site acima da dobra. Em seguida, divida-o em nove partes iguais. A partir da\u00ed, voc\u00ea pode decidir se deseja ajustar seu site ou n\u00e3o.\n<\/p>\n \n Nessas \u00e1reas, voc\u00ea pode colocar seu v\u00eddeo, \u00e1udio e outros conte\u00fados interativos. Considere ter efeitos de foco em seus bot\u00f5es de call-to-action. Dessa forma, seus visitantes ser\u00e3o mais atra\u00eddos a clicar. Em seguida, adicione alguns pop-ups de sa\u00edda animados. Eles s\u00e3o vitais para reengajar seus visitantes quando eles perdem o interesse.\n<\/p>\n \n O espa\u00e7o negativo \u00e9 o espa\u00e7o em branco no web design. Esse espa\u00e7o \u00e9 positivo, pois torna seu site mais leg\u00edvel e utiliz\u00e1vel. Este espa\u00e7o n\u00e3o \u00e9 apenas o espa\u00e7o entre os elementos da sua p\u00e1gina. Em vez disso, tamb\u00e9m se refere ao espa\u00e7o entre os pequenos elementos da sua p\u00e1gina, como a \u00e1rea entre os par\u00e1grafos ou linhas de texto.\n<\/p>\n \n Voc\u00ea deve prestar aten\u00e7\u00e3o aos espa\u00e7os negativos em seu site porque eles tornam seu site agrad\u00e1vel aos olhos, levando a um aumento da convers\u00e3o. Dependendo do seu web design, voc\u00ea pode usar uma tonelada de espa\u00e7o negativo em sua p\u00e1gina inicial. Dessa forma, seus visitantes se concentrar\u00e3o na chamada \u00e0 a\u00e7\u00e3o principal.\n<\/p>\n \n Para ter espa\u00e7o negativo suficiente, voc\u00ea pode usar uma fonte menor para ter mais espa\u00e7o entre as letras. Ent\u00e3o, a altura da linha deve ser 1,5. Se voc\u00ea optar por ter fontes menores, dever\u00e1 ter mais alturas de linha.\n<\/p>\n \n Em seguida, divida esses grandes blocos de texto em par\u00e1grafos menores para aumentar o espa\u00e7o negativo entre os par\u00e1grafos, tornando as postagens mais leg\u00edveis. N\u00e3o se esque\u00e7a de usar margens e preenchimento para adicionar espa\u00e7o em branco entre os elementos grandes em seu site.\n<\/p>\n \n Por qu\u00ea? Eles s\u00f3 podem prejudicar suas taxas de convers\u00e3o. Eles eram emocionantes antes. Mas agora, eles se tornam pedras de estima\u00e7\u00e3o. Al\u00e9m disso, os controles deslizantes tornam seu site lento por causa das imagens grandes usadas. Eles tamb\u00e9m distraem, pois n\u00e3o permitem que os visitantes consumam seu conte\u00fado.\n<\/p>\n \n Esses elementos s\u00e3o confusos por causa de como os olhos humanos reagem ao ambiente. Os c\u00e9rebros humanos s\u00e3o projetados para detectar movimento em uma paisagem est\u00e1tica. Antigamente, era \u00fatil rastrear mamutes em uma tundra. Mas essa resposta faz com que as pessoas prestem mais aten\u00e7\u00e3o ao movimento dos controles deslizantes e ignorem os pontos de convers\u00e3o nos quais voc\u00ea deseja que eles se concentrem.\n<\/p>\n \n Al\u00e9m disso, os controles deslizantes n\u00e3o far\u00e3o sentido quando seus visitantes navegarem em seu site por meio de um dispositivo m\u00f3vel. E \u00e9 por isso que as pessoas acham mais f\u00e1cil rolar do que deslizar. Lembre-se de que quanto mais f\u00e1cil para seus visitantes navegarem em seu site usando seus dispositivos m\u00f3veis, maiores ser\u00e3o as taxas de convers\u00e3o.\n<\/p>\n \n Os controles deslizantes tamb\u00e9m causar\u00e3o muitas tags H1 em seu site. Voc\u00ea pode pensar que eles s\u00e3o \u00f3timos para o seu site, mas os rastreadores da web os desprezam. A raz\u00e3o para isso \u00e9 que eles confundem a hierarquia de informa\u00e7\u00f5es em seu site. Como os rastreadores da Web os odeiam, eles podem afetar significativamente a classifica\u00e7\u00e3o da sua p\u00e1gina. Portanto, certifique-se de evit\u00e1-los o m\u00e1ximo poss\u00edvel.\n<\/p>\n \n Em vez de usar controles deslizantes, opte por ter uma imagem est\u00e1tica com um t\u00edtulo forte.\n<\/p>\n \n Em v\u00e1rios estudos, os pesquisadores descobriram que a maioria dos usu\u00e1rios navega na web para ler uma postagem em um padr\u00e3o F. Ou seja, eles olham da esquerda para a direita na parte superior da tela. Depois disso, eles examinam a p\u00e1gina e fazem algumas leituras do conte\u00fado. Raramente chegam ao canto inferior direito de uma p\u00e1gina.\n<\/p>\n \n Como voc\u00ea pode usar o padr\u00e3o F para aumentar suas convers\u00f5es? Coloque essas chamadas cr\u00edticas para a\u00e7\u00e3o e objetos ao longo das linhas em forma de F. Em seguida, insira aqueles objetos de menor import\u00e2ncia em \u00e1reas com pouca visibilidade.\n<\/p>\n \n Como o lado esquerdo da p\u00e1gina \u00e9 onde seus visitantes olhar\u00e3o primeiro, considere colocar a frase de chamariz principal nessa \u00e1rea. Em seguida, coloque as manchetes no lado esquerdo da p\u00e1gina. Agora, para seus an\u00fancios patrocinados, voc\u00ea pode coloc\u00e1-los na barra lateral \u00e0 direita da sua p\u00e1gina. Qualquer coisa que n\u00e3o precise estar vis\u00edvel, mas essencial para os rastreadores da web, deve ser colocada na parte inferior direita da p\u00e1gina.\n<\/p>\n \n Como as cores podem evocar emo\u00e7\u00f5es, voc\u00ea deve escolher a combina\u00e7\u00e3o de cores que transmita a personalidade da sua marca e estimule as pessoas a agir. Lembre-se de que as pessoas tomar\u00e3o suas decis\u00f5es de compra de um ponto de vista emocional. Dito isso, a combina\u00e7\u00e3o de cores que voc\u00ea escolher para o seu site ter\u00e1 um papel significativo na otimiza\u00e7\u00e3o das taxas de convers\u00e3o.\n<\/p>\n \n Uma sugest\u00e3o \u00e9 criar um painel do Pinterest com algumas fotos que reflitam a vis\u00e3o da sua marca. Use a roda de cores da Adobe para criar um esquema de cores com base nas cores dessas fotos. Mas voc\u00ea pode twittar as cores individuais movendo as sele\u00e7\u00f5es.\n<\/p>\n \n Depois de criar um esquema de cores, certifique-se de usar contraste, pois ele tamb\u00e9m pode fazer ou quebrar suas convers\u00f5es. O contraste pode ser usado para tornar as manchetes, o texto e os bot\u00f5es de chamada para a\u00e7\u00e3o mais leg\u00edveis e percept\u00edveis. As cores da frente e dos bot\u00f5es devem contrastar com o fundo e os demais elementos que voc\u00ea deseja destacar, como os bot\u00f5es de assinatura. Eles devem estar em um tom que realmente se destaque do resto da p\u00e1gina.\n<\/p>\n \n Em um teste da Hubspot, descobriu que os bot\u00f5es vermelhos s\u00e3o melhores que os bot\u00f5es verdes. Ent\u00e3o, novamente, antes de considerar os bot\u00f5es vermelhos, certifique-se de que o vermelho n\u00e3o seja a cor dominante em sua p\u00e1gina. Caso contr\u00e1rio, n\u00e3o criar\u00e1 mais contraste.\n<\/p>\n \n Como mencionado anteriormente, voc\u00ea pode usar a roda de cores para escolher uma cor complementar, que \u00e9 uma cor totalmente oposta \u00e0 sua cor dominante.\n<\/p>\n \n No entanto, antes de escolher a combina\u00e7\u00e3o de cores certa, voc\u00ea deve entender que as pessoas veem as cores de maneira diferente. As cores sempre dependem de como combinam com a sua marca. \u00c9 por isso que voc\u00ea precisa escolher uma cor que combine com a personalidade da sua marca, pois ela afeta as decis\u00f5es de compra de seus visitantes.\n<\/p>\n \n Por exemplo, se sua marca for robusta ou masculina, voc\u00ea n\u00e3o deve optar por um bot\u00e3o de call-to-action rosa. Em vez disso, opte por um grande bot\u00e3o laranja.\n<\/p>\n \n O impacto das cores nas convers\u00f5es depender\u00e1 do contexto. Por exemplo, como o azul \u00e9 uma cor comumente usada em designs da Web para hiperlinks, as pessoas sempre os associam a hiperlinks. Assim, eles sabem que se o texto estiver em azul, podem clicar nele.\n<\/p>\n \n Tamb\u00e9m \u00e9 verdade para os bot\u00f5es CTA. Voc\u00ea n\u00e3o precisa escolher azul. No entanto, tenha em mente que qualquer que seja a cor que voc\u00ea escolher para um bot\u00e3o, ela estar\u00e1 associada a uma a\u00e7\u00e3o. Use essa cor consistentemente para todos os CTAs em seu site. Mas evite usar as mesmas cores para itens que n\u00e3o s\u00e3o clic\u00e1veis. Al\u00e9m disso, n\u00e3o use cores de CTA diferentes na mesma p\u00e1gina.\n<\/p>\n \n O “\u00f3bvio sempre vence” em web design. \u00c9 por isso que o design plano e minimalista melhora as taxas de convers\u00e3o. A raz\u00e3o para isso \u00e9 que ele se concentra nos elementos mais vitais. Um design limpo emerge sobre outros efeitos visuais dram\u00e1ticos. Ao focar nos elementos fundamentais e se livrar desses enfeites, essa abordagem pode ser \u00fatil na cria\u00e7\u00e3o de um layout organizado que certamente pode otimizar as taxas de convers\u00e3o.\n<\/p>\n \n Al\u00e9m disso, um design minimalista permite ter mais espa\u00e7o em seu site para CTAs relevantes, evitando assim que a p\u00e1gina tenha elementos n\u00e3o essenciais.\n<\/p>\n \n Mesmo que o design minimalista seja \u00f3timo, voc\u00ea n\u00e3o deve exagerar, pois as pessoas perder\u00e3o o interesse. Por exemplo, em bot\u00f5es CTA, as pessoas est\u00e3o acostumadas a ver bot\u00f5es com profundidade ou dimens\u00e3o. Essas caracter\u00edsticas s\u00e3o indicadores de intera\u00e7\u00e3o.\n<\/p>\n \n Se voc\u00ea tiver um bot\u00e3o plano, no entanto, seus visitantes podem ignor\u00e1-lo facilmente quando digitalizarem sua p\u00e1gina. Por esse motivo, certifique-se de usar uma cor de bot\u00e3o contrastante. E escolha um local que torne os bot\u00f5es vis\u00edveis.\n<\/p>\n \n Assim, toda vez que voc\u00ea criar uma p\u00e1gina, voc\u00ea deve se perguntar se existe uma maneira de ter uma vers\u00e3o mais simples. Ao mant\u00ea-lo simples, voc\u00ea pode esperar melhores convers\u00f5es e um design esteticamente mais agrad\u00e1vel.\n<\/p>\n \n Um design simples atende a pessoas que podem lidar com menos informa\u00e7\u00f5es ao mesmo tempo. Se seus visitantes veem muitas coisas em uma p\u00e1gina, eles ficam sobrecarregados e v\u00e3o embora. Ao fornecer ao usu\u00e1rio uma \u00f3tima experi\u00eancia em seu site, certifique-se de eliminar os elementos que n\u00e3o s\u00e3o essenciais.\n<\/p>\n \n \u00c9 um princ\u00edpio de design que aborda a lei da semelhan\u00e7a. Aqui, a lei afirma que o c\u00e9rebro humano gosta de agrupar os mesmos objetos. Esse mecanismo permite que os humanos entendam as coisas e os ajudem a organizar ambientes ruidosos.\n<\/p>\n \n Ao seguir esse princ\u00edpio, voc\u00ea precisa agrupar itens ou elementos semelhantes que possam ser associados entre si. Isso incluiria bot\u00f5es de convers\u00e3o, imagens e caixas de depoimentos.\n<\/p>\n \n Por exemplo, voc\u00ea pode ter um depoimento incr\u00edvel em seu formul\u00e1rio de inscri\u00e7\u00e3o para aumentar as convers\u00f5es. Embora os depoimentos n\u00e3o sejam projetados para iscas digitais, os visitantes podem associ\u00e1-los, pois ainda est\u00e3o pr\u00f3ximos.\n<\/p>\n \n Quando os humanos veem o rosto de outro humano, eles s\u00e3o acionados para simpatizar com essa pessoa. \u00c9 por isso que quando voc\u00ea transmite um problema, seus visitantes podem entender ou sentir uma conex\u00e3o com ele. Por isso, especialistas recomendam incorporar rostos humanos em artigos, p\u00e1ginas de opt-in, estudos de caso, entre outros.\n<\/p>\n \n Se voc\u00ea tem um endossante de sua marca ou se voc\u00ea \u00e9 o rosto de sua marca, voc\u00ea precisa fazer uma sess\u00e3o de fotos. Pe\u00e7a ao fot\u00f3grafo para tirar fotos horizontais com muito espa\u00e7o negativo de um lado, onde voc\u00ea pode colocar um CTA ou texto.\n<\/p>\n \n Para um site imobili\u00e1rio, um dos segredos da foto imobili\u00e1ria \u00e9 adicionar um rosto humano e n\u00e3o apenas a imagem de uma casa ou parte do im\u00f3vel. Voc\u00ea pode contratar modelos ou apenas usar fotos. No entanto, certifique-se de que o rosto escolhido represente sua marca com precis\u00e3o. Ao usar rostos que refletem seu p\u00fablico-alvo, isso pode ajudar a aumentar significativamente a taxa de convers\u00e3o do seu site.\n<\/p>\n<\/p>\n\n 1 Consulte a Lei de Hick
\n<\/h5>\n\n 2 Acelere seu site
\n<\/h5>\n\n 3 Siga este princ\u00edpio de fotografia
\n<\/h5>\n\n 4 Aproveitar o Espa\u00e7o Negativo
\n<\/h5>\n\n 5 Livre-se de controles deslizantes ou carross\u00e9is
\n<\/h5>\n\n 6 Considere o padr\u00e3o F
\n<\/h5>\n\n 7 Escolha as Cores Certas
\n<\/h5>\n\n 8 Mantenha a simplicidade
\n<\/h5>\n\n 9 Siga o Princ\u00edpio da Similaridade da Gestalt
\n<\/h5>\n\n 10 Adicionar rostos
\n<\/h5>\n