8 etapas para redesenhar seu site Sua lista de verificação para uma reformulação tranquila do site em 2023

O Tooltester é apoiado por leitores como você. Podemos ganhar uma comissão de afiliado quando você compra através de nossos links, o que nos permite oferecer nossa pesquisa gratuitamente.

O seu site parece antigo, feio e desajeitado? Não está funcionando tão bem quanto deveria? Então, uma reformulação do site pode ser necessária.

Claro, é muito mais fácil falar do que fazer.

O exemplo perfeito é o nosso site Tooltester, que renovamos recentemente. O trabalho de redesenho levou 1,5 anos. Sem exagero.

Antes de correr para as montanhas, devemos mencionar que redesenhamos nosso site como parte de um grande exercício de reformulação da marca. Isso provavelmente tornou o processo de redesenho mais complexo do que o esforço médio de relançamento de um site.

Ao longo do caminho, porém, obtivemos informações valiosas sobre como realizar uma reformulação do site da maneira mais tranquila possível . Compilamos o que aprendemos em um roteiro sólido de reformulação do site em 8 etapas, que será útil se você estiver planejando redesenhar seu próprio site:

Análise

1. Analise seu site atual
2. Analise sua concorrência

Planejamento

1. Estabeleça metas para o redesenho
2. Revise a configuração tecnológica do seu site
3. Delegar responsabilidades para o redesenho do site

Realização

1. Prepare-se para o redesenho
2. Dia de lançamento!
3. Melhore constantemente o seu site

Também compartilharemos como aplicamos essas etapas ao nosso próprio projeto de reformulação do site. Mas primeiro, vamos tirar algumas questões fundamentais do caminho.

A saber: por que você precisaria fazer uma reformulação do site e quanto isso poderia custar?

Por que redesenhar um site?

Os motivos para redesenhar um site incluem:

• O design do seu site está desatualizado: inicialmente você pode ter adorado a aparência do seu site. Mas agora você acha seus elementos visuais desagradáveis ​​​​ou fora de sintonia com as últimas tendências de web design. Ou talvez o seu site não tenha um design responsivo, fazendo com que os usuários em dispositivos móveis tenham dificuldade para navegar no seu site.
• Seu site é construído com tecnologia desatualizada: se o sistema de gerenciamento de conteúdo (CMS) do seu site for antigo e raramente atualizado, ele poderá sofrer sérias falhas de segurança. Nesse caso, você está praticamente convidando hackers para roubar seus dados ou derrubar todo o seu site.
• Você precisa de novos recursos e funcionalidades para o site: com o tempo, você pode precisar que seu site faça mais do que o originalmente criado. Por exemplo, se você estiver adicionando uma loja online ao seu blog, precisará redesenhar seu site para incluir essa funcionalidade de loja.
• O design fraco do seu site afeta suas classificações de pesquisa: por exemplo, o Google adotou uma abordagem que prioriza os dispositivos móveis para indexar e classificar as páginas do site desde julho de 2019. Um site que não é otimizado para dispositivos móveis pode levar a classificações de pesquisa baixas e, portanto, precisa de um redesenho . Certifique-se de usar um construtor de sites ou CMS que seja ótimo para SEO.
• Você está reformulando a marca: sua empresa está passando por uma grande reformulação da marca e reformulando os valores de sua marca, logotipo, cores e muito mais. Como parte do processo, você precisará retrabalhar seu material de marketing – o que inclui uma reformulação do seu site.

Esta última razão ressoa especialmente em nós.

Decidimos redesenhar nosso site porque sentimos que nosso design não representava mais quem somos como empresa. Para contextualizar, veja como era nossa antiga página inicial:

O design do nosso site anterior

Nosso antigo site parecia ser uma operação de três pessoas, o que foi verdade em um ponto de nossa história. Mas agora, o Tooltester é administrado por uma equipe incrível de mais de 10 pessoas!

Por isso, queríamos que nosso site fosse mais sofisticado e comunicasse como ele é administrado por uma equipe experiente e dedicada a ajudar pequenas empresas a encontrar as ferramentas perfeitas para suas necessidades.

Quanto pode custar uma reformulação de site?

Se você está contratando profissionais para cuidar de todo o trabalho para você , pode esperar gastar cerca do seguinte para redesenhar um site:

• Criação de modelos de página (incluindo aqueles para um site móvel): US$ 100 a US$ 300 por página
• Codificando um tema de site WordPress de 8 páginas: US$ 1.500– US$ 3.000
• Obtenção de hospedagem na web , nome de domínio e endereços de e-mail: US$ 10 a US$ 30 por mês, dependendo do volume mensal de tráfego do seu site

Alternativamente, você pode preferir uma abordagem de criação de site DIY e usar um construtor de sites para construir um novo site do zero . Nesse caso, o custo do redesenho pode ser de apenas US$ 10 a US$ 25 por mês, dependendo do construtor de sites escolhido.

Por exemplo, o construtor de sites Wix cobra US$ 16/mês por seu plano Combo, que inclui 2 GB de espaço de armazenamento e um certificado SSL gratuito. Por outro lado, custa US$ 16/mês para construir seu novo site no plano pessoal do Squarespace, que vem com largura de banda ilimitada, recursos de comércio eletrônico, análises avançadas de sites e muito mais.

(Também temos um guia completo sobre custos de sites que você pode conferir!)

Na nossa situação, decidimos contratar uma agência de branding para supervisionar o processo de reformulação do site para nós. A agência nos ajudou a criar um novo logotipo e modelos de web design personalizados para quase 20 tipos de páginas.

Seus serviços não eram baratos: reservamos um orçamento de 5 dígitos para trabalhar com eles. Mas eles fizeram um excelente trabalho e estamos muito felizes com os resultados!

E mesmo que você não tenha esse tipo de orçamento, descobrirá que o processo de reformulação do seu site incluirá etapas muito semelhantes às nossas.

Análise

O trabalho de reformulação do site pode ser dividido em três etapas principais:

1. Análise
2. Planejamento
3. Realização

Primeiro, vamos mergulhar no processo de análise…

1. Analise seu site atual

Quanto do seu site existente precisa ser alterado – você precisa redesenhar todo o site ou apenas partes dele?

Considere coisas como:

• Configuração técnica: Talvez você precise alterar o construtor de sites ou CMS se o site existente estiver extremamente desatualizado ou difícil de usar. Alternativamente, talvez você precise apenas recodificar seu tema para um desempenho mais rápido do site.
• Otimização de mecanismos de pesquisa (SEO): faça uma auditoria de SEO em seu site para verificar se há problemas que possam estar prejudicando suas classificações de pesquisa. Ferramentas de SEO com recursos integrados de auditoria de SEO, como Screaming Frog e Ahrefs (Site Audit, que pode ser usado gratuitamente), podem ajudá-lo a identificar esses problemas antes de decidir sobre as próximas etapas. Por exemplo, se a auditoria relatar que você tem páginas de erro 404 em seu site, convém redirecionar os links que apontam para essas páginas em outro lugar.
• Design: os elementos de design do seu site (ainda) são modernos e têm aparência profissional? Eles refletem com precisão sua marca? Se você estiver adicionando novos recursos ao site, também poderá precisar redesenhar seu site para acomodá-los (conforme mencionado anteriormente). Aqui estão algumas dicas para encontrar inspiração.
• Navegação e experiência do usuário (UX): com o tempo, você pode ter recebido reclamações de usuários sobre como algumas partes do seu site são difíceis de navegar ou como certos recursos podem ser difíceis de encontrar. Priorize o redesenho dessas interfaces problemáticas para melhorar a experiência do usuário.

Existem várias ferramentas para realizar esses “exames de saúde” em seu site. Aqui estão alguns para você começar:

• Google Analytics : para monitorar o tráfego do seu site e as métricas da página de destino
• Hotjar : uma ferramenta de mapeamento térmico para rastrear o comportamento do usuário e aprender como os visitantes do site interagem com suas páginas da web
• Feedback do Sabre : incorpore um botão de feedback em seu site para que os usuários enviem comentários sobre quaisquer problemas que encontrarem no site.

2. Analise sua concorrência

Depois de revisar seu site, volte sua atenção para os sites criados por seus concorrentes.

Faça pesquisas de mercado sobre os líderes do seu setor e os recursos de seus sites. O que eles estão fazendo certo? Os sites de seus concorrentes podem ter recursos que valem a pena roubar – aham, queremos dizer, adaptar para os seus. Você também pode tentar tornar seu site ainda melhor que o deles.

Dito isso, não se limite aos sites do seu espaço . Outros setores podem ter sites que operam de forma semelhante ao seu, com abordagens exclusivas para atender seu público-alvo. “Transplantar” essas abordagens de outros setores para o seu site pode ser a chave para ajudá-lo a se destacar no seu espaço!

Quando analisamos a concorrência em nosso site, nossa agência de branding solicitou uma lista de nossos concorrentes para análise. Eles também obtiveram bons exemplos de redesenho de sites de outros setores. Por exemplo, como ajudamos os usuários a comparar ferramentas de sites, a agência também analisou como as plataformas de reserva de hotéis ajudam os usuários a comparar hotéis.

Depois de realizar toda essa pesquisa, a agência de branding elaborou nosso posicionamento frente às demais marcas do nosso espaço.

Como muitos de nossos concorrentes adotam uma abordagem impessoal em relação às análises de ferramentas e não interagem muito com seus leitores, decidimos que o Tooltester seria o “amigo especialista digital” de nossos leitores, sendo uma fonte confiável, porém amigável, de análises.

Este posicionamento influenciou fortemente o redesenho do nosso site. Por exemplo, decidimos destacar membros da equipe Tooltester em nossas páginas da web para evocar uma abordagem pessoal e compreensível para análises de ferramentas.

Basta verificar nossa página Sobre e você verá o que queremos dizer!

Planejamento

Identificou as partes do seu site que precisam de melhorias? A seguir, você planejará como irá redesenhá-los. Isso involve:

3. Estabelecimento de metas para o redesenho

Faça uma lista das metas gerais de negócios que você deseja alcançar ao redesenhar seu site. Essas metas orientarão a estratégia de redesenho do seu site.

Exemplos de metas gerais incluem:

• Dobrando seu tráfego orgânico no próximo ano
• Atualizando todo o conteúdo do seu blog
• Reduzindo o atrito que os usuários enfrentam ao fazer pedidos em lojas online

Em seguida, divida suas metas gerais em metas menores e viáveis . Estas são as etapas reais que você executará para atingir seus objetivos gerais.

Para atingir a meta geral de duplicar seu tráfego orgânico no próximo ano, por exemplo, pode ser necessário definir submetas como:

• Configurando o rastreamento de palavras-chave para o seu site
• Atualizar uma determinada postagem do blog para direcionar melhor uma determinada palavra-chave
• Conectando o Google Analytics ao seu site para rastrear seu tráfego orgânico mensal

Por outro lado, para atingir a meta geral de reduzir o atrito no comércio eletrônico, suas submetas podem incluir:

• Reestruturando seu formulário de checkout de várias páginas em um formulário de uma página
• Construir um botão que permite aos usuários irem diretamente para a finalização da compra após adicionar um item ao carrinho
• Adicionando um recurso que armazena com segurança as informações do cartão de crédito de seus clientes para uso futuro

Por fim, planeje quando você cumprirá cada submeta.

Tente dividir seus objetivos gerais em tantos subobjetivos separados quanto possível e, em seguida, separe-os. Dessa forma, você terá melhor controle sobre o impacto de suas alterações (se houver) na classificação do mecanismo de pesquisa.

4. Revendo a configuração técnica do seu site

Seu site precisa ser construído sobre uma base técnica sólida para um desempenho eficaz. Aproveite a oportunidade para revisar se as especificações técnicas do seu site ainda estão atendendo bem ou se precisam de uma atualização.

Por exemplo, você pode querer alterar o CMS ou construtor de sites do seu site para um que ofereça velocidades de carregamento de página mais rápidas. Ou se você deseja estender a funcionalidade do seu site , verifique se a instalação de um plug-in de terceiros resolverá o problema ou se você precisará contratar uma equipe de desenvolvimento web para codificar o recurso para você.

Todas as alterações na configuração tecnológica do seu site incorrerão em custos (veja a discussão sobre os custos de reformulação do site acima), portanto, faça um orçamento adequado para elas.

No nosso caso, estávamos usando o CMS WordPress para nosso site e pretendíamos continuar usando-o. Então, em vez de migrar CMSes, “simplesmente” precisávamos criar um novo tema WordPress e ativá-lo para mudar a aparência do nosso site.

(Dizemos “simplesmente” entre aspas aqui porque criar este novo modelo WordPress foi muito mais difícil do que parece!)

Também tentamos não fazer muitas alterações na funcionalidade do nosso site. Isso foi para evitar que o projeto de reformulação do nosso site fosse mais complicado do que o necessário (e já era muito complexo).

5. Delegar responsabilidades pela reformulação do site

Você mapeou as metas que precisam ser cumpridas para concluir a reformulação do site. Agora, você encontrará as pessoas para realizá-las .

Divida os objetivos em duas categorias:

1. Metas a serem tratadas internamente pela sua equipe
2. Metas a serem tratadas externamente por agências de contratação ou freelancers

Se sua equipe tem o conhecimento e a experiência necessários para lidar com determinadas metas , atribuir essas metas a eles é algo óbvio. Em particular, você pode querer delegar determinadas metas à sua equipe, em vez de a terceiros, se essas metas envolverem o trabalho com informações comerciais confidenciais.

Mas se você deseja ter olhos frescos e opinião de especialistas sobre o projeto de reformulação do seu site, contratar profissionais terceirizados pode ser o caminho a percorrer. Foi isso que fizemos na reformulação do nosso site: contratamos uma agência de branding para criar novos modelos de design para o nosso site. Separadamente, contratamos um programador para implementar esses designs em nosso novo tema de site.

Se você pretende contratar web designers e programadores freelancers para o projeto de reformulação do seu site, você pode postar sua solicitação em plataformas como Upwork, Fiverr ou LinkedIn. Alternativamente, encontre serviços adicionais de web design aqui. Você também pode pedir recomendações às pessoas da sua rede.

Ao buscar ajuda externa, nossa dica é contratar pessoas especializadas nos serviços específicos de que você precisa . Um programador geralmente não é um grande web designer e vice-versa .

Realização

Agora, você vai sujar as mãos com o trabalho de reformulação do site!

6. Preparando-se para o redesenho

Sua equipe e os profissionais externos que você contratou começarão a executar as submetas que você identificou anteriormente. Suas tarefas podem envolver:

• Criando o novo design do site: Figma é a plataforma de design de interface padrão preferida hoje em dia
• Construindo o novo site em um servidor de teste: Este servidor fornece um ambiente de teste para você visualizar a aparência do seu novo site e corrigir quaisquer bugs antes de colocá-lo no ar
• Testando tudo para garantir que funcionam: clique em cada link e em cada botão. Verifique como seu site aparece tanto no desktop quanto no celular. Faça pedidos on-line de teste. Teste TUDO!
• Fazendo backup do seu site antigo: não pule esta etapa. Se algo der errado ao lançar seu site recém-projetado, você desejará ter um backup do site anterior para usar novamente. Você também deve baixar uma cópia offline do seu site antigo.
• Configurar redirecionamentos de link 301 se você estiver alterando seus URLs: isso ajuda os usuários a continuar acessando suas páginas sem encontrar erros 404 desagradáveis. Do ponto de vista de SEO, configurar redirecionamentos de link também ajuda os mecanismos de pesquisa a classificar seus novos URLs e atribuir o “link juice” acumulado pela página no URL antigo à página no novo URL.

Ao completar cada subobjetivo, marque-os em sua lista! Fazer isso irá mantê-lo motivado enquanto você faz a contagem regressiva para:

7. Dia de lançamento!

Depois de verificar duas ou três vezes se tudo está em ordem, lance seu site redesenhado. Isso pode envolver a migração do seu novo site do servidor de teste para o servidor de produção (ou seja, o servidor que hospeda seu site ativo).

E mesmo ao comemorar o lançamento, fique de olho no desempenho do seu novo site . Como os visitantes estão interagindo com o seu site? Eles estão tendo uma experiência de usuário tão boa quanto você planejou?

Você também pode enfrentar uma perda temporária de tráfego se receber muitos visitantes das páginas de resultados do mecanismo de pesquisa. Isso ocorre porque é normal que suas classificações de pesquisa caiam quando você faz grandes alterações em seu site. Mas, com alguma sorte, suas classificações – e, portanto, os números de tráfego – deverão se recuperar rapidamente e ficar ainda melhores.

8. Melhorar constantemente o site

Com o site recém-projetado instalado, o projeto de reformulação do site está concluído. Mas o trabalho nunca termina!

As tendências de design da Web mudam com o tempo , portanto, talvez você precise redesenhar seu site novamente em alguns anos para mantê-lo com uma aparência nova e moderna.

Além disso, monitore seu site para identificar mais áreas potenciais de melhoria . Ferramentas de análise, como as que mencionamos acima, podem ajudar nisso.

Se você encontrar problemas com soluções rápidas e fáceis, como um link quebrado que foi esquecido, resolva-os imediatamente. Por outro lado, outros problemas podem exigir mais tempo e esforço para serem resolvidos. Mesmo que você opte por não abordá-los neste momento, anote-os.

Eles serão úteis para você decidir no que trabalhar na próxima vez que redesenhar seu site!

Redesenhar um site: recapitulação final

Aqui está uma recapitulação útil para acompanhar suas tarefas enquanto você redesenha seu site:

Análise

1. Analise seu site atual para ver o que precisa ser alterado
2. Analise sua concorrência para obter inspiração para melhorias no site

Planejamento

1. Estabeleça metas para o redesenho – tanto metas gerais quanto submetas viáveis ​​para implementar o redesenho
2. Revise a configuração tecnológica do seu site para decidir se ele precisa de uma revisão
3. Delegue responsabilidades pela reformulação do site para que sua equipe saiba quem fará o quê. Envolva profissionais externos, se necessário, também

Realização

1. Prepare-se para o redesenho criando todos os recursos de design necessários, construindo seu novo site e assim por diante
2. Lance seu site redesenhado e monitore seu desempenho
3. Melhore constantemente o seu site à medida que identifica novas áreas de melhoria

Se você ainda se sente intimidado pelo trabalho que o espera, nosso conselho final é dividir seu projeto de redesenho em tantos subobjetivos menores quanto possível. Todos esses pequenos progressos serão somados à medida que você trabalha na transformação do seu site!

Também não faz mal contratar profissionais que lidem diariamente com projetos de reformulação de sites, se o orçamento permitir e se você quiser que um especialista supervisione todo o processo para você.

Por fim, ficaremos felizes em contribuir com nossos dois centavos se você quiser feedback sobre o projeto de reformulação do seu site. Basta deixar seus comentários e perguntas abaixo!