Embora SEO seja amplamente reconhecido como a chave para aumentar a visibilidade nos motores de busca, e UX seja vital para garantir que os usuários encontrem o que precisam de forma rápida e agradável, muitos profissionais ainda veem essas áreas como separadas. No entanto, quando SEO e UX trabalham juntos de forma estratégica, o resultado é um site que não só ranqueia bem, mas também oferece uma experiência intuitiva e envolvente, que maximiza as conversões.

Neste artigo, exploraremos como alinhar essas duas abordagens para criar sites que não apenas se destacam nos rankings de busca, mas também proporcionam uma jornada do usuário otimizada, gerando resultados reais para o seu negócio.

Por que SEO e UX é o casamento perfeito e devem trabalhar juntos?

SEO e UX compartilham um objetivo comum: fornecer valor ao usuário. O Google e outros mecanismos de busca priorizam sites que oferecem uma experiência satisfatória. Assim, ao melhorar a UX, você também está otimizando para SEO.

Exemplos de convergência entre SEO e UX:

• Velocidade de Carregamento: Páginas rápidas melhoram a experiência e são um fator de ranqueamento.
• Mobile-First Indexing: Um site responsivo garante boa usabilidade em dispositivos móveis e melhor classificação.
• Engajamento: Métricas como tempo na página e taxa de rejeição afetam o SEO e são diretamente impactadas pela experiência do usuário.

A psicologia do design e como ela impacta a experiência do usuário

A psicologia do design é essencial para criar experiências de usuário eficazes, influenciando como os visitantes percebem e interagem com um site. As cores, por exemplo, têm um impacto direto nas emoções e decisões do usuário. O vermelho pode gerar urgência, enquanto o azul transmite confiança. O uso de espaço em branco, ou “espaço negativo”, ajuda a reduzir a sobrecarga cognitiva e torna a navegação mais agradável, enquanto o layout simétrico proporciona harmonia e facilita a compreensão.

A tipografia também desempenha um papel importante na legibilidade e na percepção do conteúdo. Fontes legíveis e de tamanho adequado garantem uma leitura confortável, enquanto a consistência na navegação e no design cria familiaridade e confiança. Além disso, princípios como o efeito de ancoragem, onde informações iniciais influenciam decisões subsequentes, podem ser usados para otimizar ações do usuário, como cliques em CTAs.

Ao aplicar esses princípios psicológicos, é possível criar sites que não só são visualmente atraentes, mas também funcionais e eficazes em guiar os usuários para a ação desejada, melhorando tanto a experiência quanto as taxas de conversão.

Elementos-chave para alinhar SEO e UX

Velocidade de carregamento

A velocidade de carregamento de um site é um dos fatores mais críticos tanto para a experiência do usuário quanto para o SEO. Em um mundo onde a paciência do usuário é cada vez mais limitada, sites lentos podem resultar em altas taxas de rejeição e uma experiência frustrante, o que afeta diretamente as conversões. De acordo com estudos, 47% dos usuários esperam que uma página carregue em dois segundos ou menos, e 40% abandonarão um site se ele demorar mais de três segundos para carregar. Isso mostra o impacto direto que a velocidade tem na retenção e no engajamento do usuário.

O Google utiliza a velocidade de carregamento como um dos critérios para classificar sites nos resultados de busca. Sites mais rápidos não só oferecem uma experiência melhor para o usuário, mas também têm uma vantagem competitiva, já que o Google prioriza páginas com tempo de carregamento rápido, especialmente em dispositivos móveis.

Como otimizar:

• Utilize ferramentas como Google PageSpeed Insights e GTmetrix.
• Comprimir imagens usando formatos modernos como WebP.
• Implementar lazy loading para carregar conteúdos somente quando necessário.
• Ativar o cache do navegador para reutilizar recursos estáticos.

Mobile-first design

Com mais de 60% do tráfego global da web vindo de dispositivos móveis, é imperativo que as empresas e desenvolvedores priorizem a experiência móvel ao projetar suas páginas. Esse conceito não é apenas uma tendência, mas uma necessidade para garantir que os usuários tenham uma experiência fluida e satisfatória, independentemente do dispositivo que estão usando.

A experiência do usuário em dispositivos móveis deve ser o centro de qualquer estratégia de design. Como as telas dos dispositivos móveis são menores, os usuários precisam ser capazes de navegar facilmente e acessar as informações de forma rápida e sem frustrações. O mobile-first design ajuda a garantir que o conteúdo seja exibido de forma otimizada, com navegação simples e botões de fácil acesso.

Desde 2018, o Google adota o mobile-first indexing, o que significa que o Google agora usa a versão móvel de um site como a principal para determinar o ranking nas páginas de resultados de busca. Isso reforça ainda mais a importância do mobile-first design para SEO. Se seu site não for otimizado para dispositivos móveis, ele pode ter um desempenho ruim nos rankings de busca, mesmo que tenha uma versão desktop bem projetada.

O mobile-first design não só garante uma melhor experiência para os usuários móveis, mas também ajuda a melhorar o SEO, já que o Google prioriza sites que são bem otimizados para dispositivos móveis. Isso significa que, ao adotar uma abordagem mobile-first, você está não apenas melhorando a experiência do usuário, mas também aumentando suas chances de ranquear bem nos motores de busca.

Estrutura de navegação simples e intuitiva

Uma navegação bem estruturada não só melhora a experiência do usuário, mas também tem um impacto positivo no SEO. O Google, por exemplo, valoriza a facilidade de navegação como parte de sua avaliação de qualidade de um site. Sites com uma navegação bem organizada e fácil de entender são mais propensos a serem indexados corretamente, o que melhora seu desempenho nos resultados de busca.

Além disso, uma navegação clara facilita a crawling (rastreamento) do site pelos motores de busca. Quando o Googlebot visita um site, ele segue os links de navegação para entender como o conteúdo está organizado. Se os links forem fáceis de encontrar e seguir, o Googlebot conseguirá indexar melhor o conteúdo do seu site, o que pode ajudar a melhorar o ranking.

Core Web Vitals

Os Core Web Vitals são um conjunto de métricas desenvolvidas pelo Google para medir a experiência do usuário em um site, focando na performance e na interatividade. Elas são essenciais para avaliar como os usuários percebem a velocidade e a usabilidade de uma página. Em 2021, o Google passou a incorporar essas métricas como um fator de classificação nos resultados de busca, tornando-as fundamentais para o SEO.

Principais métricas:

• LCP (Largest Contentful Paint): Mede o tempo para carregar o maior elemento visível. Ideal: até 2,5 segundos.
• FID (First Input Delay): Avalia a responsividade à primeira interação do usuário. Ideal: menos de 100ms.
• CLS (Cumulative Layout Shift): Mede a estabilidade visual. Ideal: menos de 0,1.

Como otimizar:

• Minimize o uso de scripts bloqueadores.
• Reserve espaços para anúncios e imagens para evitar deslocamento de layout.
• Melhore a qualidade do servidor para reduzir tempos de resposta.

Estrutura de links internos

Uma estrutura de links internos bem planejada melhora tanto a experiência do usuário quanto o desempenho nos motores de busca, contribuindo para uma navegação mais eficiente e uma melhor distribuição de tráfego e autoridade entre as páginas.

Links internos ajudam os usuários a encontrar conteúdo relevante de forma rápida e intuitiva. Ao vincular páginas importantes, você transmite autoridade para outras páginas, o que pode melhorar seu SEO.

A estrutura de links internos permite que os motores de busca rastreiem e indexem melhor o conteúdo do site.

Design focado em conversão

O design focado em conversão é uma abordagem que visa otimizar o layout e os elementos de um site para incentivar os visitantes a realizar ações específicas, como comprar um produto, preencher um formulário ou se inscrever em uma newsletter. Esse tipo de design se concentra em facilitar a jornada do usuário, tornando o processo de conversão o mais simples e direto possível.

Para criar um design focado em conversão, é essencial:

• Chamar a atenção para os CTAs (Call to Actions): Botões de ação claros e visíveis, como “Comprar agora” ou “Inscreva-se”, devem ser destacados.
• Garantir uma navegação intuitiva: A estrutura do site deve ser simples e lógica, facilitando o acesso às informações importantes.
• Usar provas sociais e confiança: Incluir depoimentos, avaliações e selos de segurança pode aumentar a confiança do usuário e incentivá-lo a converter.

Um design focado em conversão é crucial para maximizar os resultados de um site, transformando visitantes em clientes ou leads de maneira eficiente.

Como medir o sucesso de SEO e UX?

Para gerenciar é preciso medir. Se você não sabe como medir, precisa aprender. Se o seu site está com eventos mapeados, usa ferramentas de análise de comportamento, gravações de telas, você pode facilmente perceber melhorias (ou não) em mudanças em componentes do site.

Seja rato em:

1. Google Analytics: acompanhe métricas como taxa de rejeição, tempo na página e conversões.
2. Google Search Console: verifique desempenho em palavras-chave e possíveis problemas técnicos.
3. Hotjar ou Crazy Egg: Analise mapas de calor e gravações para entender o comportamento dos usuários.
4. Core Web Vitals Report: acompanhe as métricas de experiência do usuário no Google Search Console.
5. Looker Studio: crie dashboards personalizados integrando dados do Google Analytics, Search Console, centralizando todas as métricas essenciais em um único painel para fácil monitoramento e otimização contínua.

Exemplo de dashboard simples no Looker Studio para mensurar quantidade de pageviews no site e coleta de leads qualificados pelo formulário de passo a passo para simulação de crédito consignado com garantia de imóvel. Acesse o site, clique em simular para ver o fluxo que criamos para coleta de leads.

Erros comuns ao integrar SEO e UX

1. Foco exclusivo em SEO técnico: ignorar a experiência do usuário pode gerar tráfego, mas não conversões.
2. Uso excessivo de palavras-chave: isso pode comprometer a legibilidade do conteúdo.
3. Negligência no design mobile: sites não otimizados para dispositivos móveis perdem ranqueamento e visitantes.

O casamento entre SEO e UX, na verdade SEO e desenvolvimento de produto, cria um elo perfeito entre “aparecer”, “engajar” e “reter”, onde os usuários satisfeitos elevam as métricas de engajamento, que conseqquentemente melhora os rankings e atrai mais visitantes qualificados. Para criar um site que ranqueie e converta, priorize sempre o usuário em suas estratégias mas não deixe de lado o usuário “robô”, no caso o Google ou outro mecanismo de pesquisas, e mantenha-se atualizado com as melhores práticas.

Aqui na Pink and Brain, somos ratos em criar sites que não só chamam a atenção, mas também convertem. Venha tomar um café digital e falar de negócios conosco.

O post SEO e UX: como criar sites que ranqueiam, engajam e convertem? apareceu primeiro em Pink and Brain.

Para ser bem sincero, eu César, já ví muitos casos de mudanças de layout que impactaram diretamente aquisição orgânica, fazendo sites “enormes” se tornarem “pintchers” em termos de visibildiade orgânica.

Uma mudança no design pode alterar a estrutura HTML da página, o que, por sua vez, impacta a forma como os bots de busca interpretam o site. Se o HTML for reorganizado ou otimizado de forma inadequada, o conteúdo que antes era destacado para os mecanismos de busca pode acabar se tornando menos relevante, prejudicando sua classificação. Além disso, elementos como a hierarquia de títulos, tags semânticas, e a velocidade de carregamento são diretamente influenciados pelo design, e todos esses fatores são cruciais para SEO.

Outro aspecto importante é a experiência do usuário (UX), que é diretamente afetada pelo design. A Google valoriza cada vez mais fatores de UX, como a responsividade para dispositivos móveis, o tempo de permanência no site e a taxa de rejeição. Se um redesign torna a navegação mais difícil ou o tempo de carregamento mais longo, isso pode gerar uma queda no tráfego orgânico e nas classificações de pesquisa.

Lembre-se que, ao considerar uma re-prototipação completa de um site, ou mesmo um template (como uma página de matéria ou de produto), ou até mesmo a inclusão de novos componentes em templates já existentes como uma simples sidebar, etc… leve em consideração analisar friamente os impacos para SEO e peça orientações de um analista experiente, que possa recomendar, pré-validar, acompanhar as mudanças e pós-validar.

É de fato vital entender que isso vai muito além da estética.

Mudanças em design de componentes e templates que modificam o HTML e alguns assuntos chave para serem considerados

Quando um novo design é implementado, a estrutura HTML da página pode mudar consideravelmente. Além disso, pode impactar inclusive perfomance, aumentar tempo de carregamento, incluir tags “desnecessárias”, etc…

Impacto por simples mudança na hierarquia dos elementos

• Mudanças na disposição dos elementos podem alterar a ordem em que o conteúdo é carregado no HTML. Os motores de busca leem o conteúdo em ordem, dando mais peso ao que aparece primeiro no código.
• A posição e “ordem” que as tags são colocadas no HTML influenciam sim muitas premissas para SEO.

Uso de tags semânticas

• Um design bem estruturado usa tags HTML semânticas (como <article>, <section>, <nav>, <aside>, <main>, etc…) que ajudam os motores de busca a entender o propósito de cada parte da página, inclusive identificar o que é “mais importante”, o que se relaciona com o “mais importante”, dentre outras abordagens.
• Se o novo design substituir essas tags semânticas por <div> genéricas ou elementos visualmente atrativos mas semanticamente fracos, como <span>, isso pode dificultar a compreensão do conteúdo pelos crawlers.
  • Fato até interessante mas esses builders de sites famosos (que jamais recomendamos) como Wix e Elementor (pluign de WordPress), acompanharam essa tendência semântica do HTML e, em suas plataformas, já colocam a critério do editor criar a semãntica que ele deseja para cada elemento em tela.

Dica: Se for mudar um template, cuidado com esses pontos e aproveite esse momento inclusive para “potencializar” a semântica do site atual.

Velocidade de carregamento da página

• Alterações no design, como o uso de gráficos de alta resolução, vídeos em autoplay ou scripts complexos, podem aumentar o tempo de carregamento da página. A velocidade de carregamento é um fator essencial para o SEO, uma vez que páginas lentas tendem a ter uma classificação mais baixa.

Dica: Use ferramentas como o Google PageSpeed Insights para avaliar a performance e reduzir o tamanho de arquivos de mídia grandes.

Impactos indiretos de um redesign

Além das mudanças diretas no HTML, outras variáveis afetadas por um redesign também podem ter impacto em SEO. Estes são fatores que não estão necessariamente relacionados ao código, mas que influenciam a experiência do usuário (UX) e a forma como o Google classifica uma página:

Responsividade e Mobile-First Indexing

• Um novo design pode melhorar (ou piorar) a responsividade da página, ou seja, a capacidade do site de se adaptar a diferentes dispositivos e tamanhos de tela. Com o Mobile-First Indexing, o Google utiliza a versão móvel de um site para classificação.
• Se o redesign não for otimizado para dispositivos móveis, isso pode prejudicar o ranqueamento.

Dica: Teste o novo design em diversos dispositivos e use layouts responsivos (como Flexbox ou Grid) para garantir que a página seja otimizada para telas menores. Como dito: aproveite esse momento de mudança de layout para potencializar a semãntica HTML e outras premissas benéficas para SEO.

Experiência do Usuário (UX)

• O tempo que os usuários permanecem no site, a facilidade de navegação e a taxa de rejeição são fatores que afetam SEO. Um design mais truncado, confuso ou difícil de “rolar” pode aumentar a taxa de rejeição, e consequentemente posicionamento na SERP.

Dica: Invista em uma navegação clara e em um design intuitivo para manter os usuários engajados. Menos é MUITO mais em design e desenvolvimento web. Aqui na Pink and Brain costumamos criar aplicações simples porém com ótima acessibilidade.

Core Web Vitals

• As Core Web Vitals são métricas de usabilidade que medem a interação e o desempenho de uma página. Eles incluem Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS). Mudanças no design podem influenciar diretamente essas métricas.
• Por exemplo, um layout que se move durante o carregamento ou que não responde rapidamente pode prejudicar o CLS e o FID.

Dica: Teste o design em relação aos Core Web Vitals e faça ajustes para garantir uma boa pontuação.

De uns 5 anos para cá que de fato falamos que o tempo de carregamento influencia diretamente o posicionamento na SERP. Esse tema é fundamental para qualquer site, independente do mercado e nicho de atuação, você irá se destacar se tiver uma aplicação veloz.

Em 2024 não existe mais espaço para site oneroso nos resultados de pesquisas.

Digo isso a 10 anos aka. Césinha

Redirecionamentos e URLs

Mesmo que não relacionado diretamente, pois na maioria dos casos não há qualquer mudança de URL na mudança de templates, devemos levar em consideração esse aspecto por alguns motivos:

• Um novo design pode exigir mudanças na estrutura da URL, o que pode resultar em links quebrados ou redirecionamentos inadequados. Isso afeta o SEO, pois páginas com links quebrados ou redirecionamentos mal configurados podem ser penalizadas.
• Se houver uma migração de uma plataforma para outra, um CMS para outro, uma loja de e-commerce para outra, já é motivo suficiente para você criar uma frente clara para URLs, padrões, apontamentos.
• Uma simples BARRA “/” diferente de uma URL ppara outra pode comprometer o SEO como um soco do Tyson em 98. Note que as URLs abaixo são diferentes:
  • https://www.pinkandbrain.com/servicos/seo-search-engine-optimization/
  • https://www.pinkandbrain.com/servicos/seo-search-engine-optimization

Dito isso, e mais diversos outras frentes que uma migração de URLs possa gerar, entenda se haverá mudanças nesse sentido.

Dica: Caso exista mudanças inevitáveis nas URLs, mapeie todas as URLs antigas, crie padrões e sinalize possíveis redirecionamentos para serem configurados na mudança.

Benefícios de ter um especialista de SEO na concepção dos protótipos de web design

Especialistas em SEO são profissionais versáteis e autodidatas que acumulam uma vasta experiência ao longo de suas carreiras. Eles não apenas dominam as melhores práticas para otimização de mecanismos de busca, mas também entendem profundamente como a estrutura e o design de um site impactam seu desempenho. Esses profissionais já criaram diversos projetos pessoais, ajudaram empresas de diferentes tamanhos a crescer digitalmente e enfrentaram desafios complexos, como atualizações de algoritmos que muitas vezes mudam radicalmente o cenário do SEO.

Além disso, por acompanharem a evolução do mercado, os especialistas em SEO têm um conhecimento aguçado sobre a anatomia ideal de sites e templates, o que inclui o arranjo estratégico de elementos que favorecem tanto o usuário quanto os mecanismos de busca. Eles sabem como otimizar a formatação do HTML, sugerindo melhorias que podem parecer simples, mas fazem toda a diferença, como a correta hierarquização de títulos, uso de tags semânticas e recursos leves, como sliders e galerias otimizados.

Por essa expertise abrangente, esses profissionais são peças essenciais no desenvolvimento de qualquer produto digital que dependa de tráfego web. Eles atuam como consultores 360º, pensando em marketing, disposição de conteúdo, comercial, aquisição orgânica, performance de renderização, dentro outros “n” assuntos, garantindo que o site não apenas esteja otimizado tecnicamente, mas também ofereça uma excelente experiência de navegação para os usuários.

Além de evitar erros que podem prejudicar a visibilidade do site, um design bem planejado e assessorado por especialistas em SEO oferece benefícios duradouros (ou pelo menos longínquos).

Melhorias na navegação interna

• Um design bem feito pode e deve melhorar e incentivar a navegação interna, facilitando o acesso dos usuários a várias partes do site e uma maior exploração do conteúdo. Essa rede criada, beneficia SEO, mas antes de tudo, cria laços mais sólidos com os produtos e a marca.

Conteúdo mais acessível

• Um design que facilita a leitura e o acesso ao conteúdo aumenta o tempo de permanência dos usuários no site, reduz a taxa de rejeição e aumenta o engajamento dos usuários, fatores que são valorizados pelos motores de busca.

Case rápido para pensar: como a CNN cresceu tanto de 2020 para 2024 no mercado super concorrido de publishers?

A CNN teve a oportunidade de criar um CMS praticamente do zero, com inputs supoer claros de SEO e produto.

Lembro que quando eu e o Mago chegamos praticamente no day 0 da CNN no Brasil, junto com uma equipe super enxuta de produto, já identificamos de cara que a plataforma que eles tinham contratado como publicador era “péssima”, pois não era algo open source, e sim algo que uma empresa terceira tinha feito sob encomenda, cobrado uma fortuna e sem conhecimento NENHUM com SEO: isso em 2020, já com o tema super conhecido e “antigo”.

Pink and Brain

O CMS que tínham não cropavam imagens, não existia semântica, dados estruturados, feeds, para ser bem sincero: o Google nem enxergava as páginas, por ter sido feito e, JS com React sem nenhum tipo de geração de páginas estáticas para leitura dos crawlers. Era um verdadeiro horror.

Mas foi aí que fomentamos a cultura de ter time interno fazendo tudo, criamos um objetivo de prototipar todos os nossos templates com todos os melhores inputs, e usar uma plataforma open source, como o WordPress, parar criar nosso próprio tema, limpo, parrudo, interressante para crawlers, performático, simples, enfim..

Foram 6 meses desenhando componentes, design system, esboçando templates, diferentes editorias, até sempre ter um consenso dos especialistas sobre o status da arte. As recomendações de SEO foram fundamentais para gerir essa orquestra: aquisição orgânica não se discute em um publisher.

Nós já tínhamos larga experiência com Publishers na verdade. Tínhamos trabalho na Exame, fazendo a migração completa do grupo Abril para o BTG, mudando domínio, design, criando novas verticais, plataformas de cursos, enfim, tínhamos voz bem ativa para as propostas, mesmo que sempre bem fundamentada.

Saimos de lá 2 anos depois para iniciar nossa jornada enquanto Pink and Brain, mas até hoje vejo o quanto esse alicerce foi fundamental para o contínuo crescimento da visibilidade da empresa na internet. Inclusive esse crescimento vertiginoso de audiência assustou os outrosa players e um dos diretores do G1 que mudou para a CNN dizia que eles nem “viram a gente chegar”, de tão rápido e expressivo que foi.

Repare no gráfico retirado do SEMRUSH o período de incubadora, onde desenhamos e desenvolvemos, e uma enorme ascenção ao longo de 16 meses. Saímos na crista alta, mas por um desafio maior. Desde então, mesmo com todas as mudanças que ocorrem no Google, chegada de AI, eles se mantiveram grandes, criaram novas editorias como Esportes que é por si só muito maior que outras existentes, e quando pesquisamos sobre fuitebol por exemplo, eles sempre estão bem, brigando com os maiores do segmento.

Além disso, absurdos 91 de autoridade de domínio, maior que o G1 que possui 90, e ainda distante dos 97 da UOL.

Esse tema tem muito para falar. E esse psot nem seria suficiente para tratar tudo que enxergamos de fundamentais numa estratégia de mudança de aplicação, seja em design, tecnologias, e seus impactos para aquisição orgânica.

Mas lembre-se:

Uma simples mudança no design pode ter grandes implicações para SEO, afetando desde a estrutura HTML até a experiência do usuário. Ao planejar um redesign, é essencial garantir que todos os aspectos da página — tanto visuais quanto técnicos — estejam otimizados para SEO. O equilíbrio entre um design atraente e uma estrutura de código eficiente é a chave para garantir que seu site não apenas tenha uma boa aparência, mas também tenha um bom desempenho nos motores de busca.

Se você precisa de ajuda para criar uma estratégia fundamentada em desenvolvimento web, design UX, UI, SEO e Web Analytics, conte com a Pink and Brain. Somos ratos quando o assunto é SEO.

O post Vou mudar o layout do meu site: como não prejudicar o SEO? apareceu primeiro em Pink and Brain.

Antes de mergulhar no conceito de “mobile first”, é essencial entender o produto, criar diretrizes claras para a aplicação da marca e desenvolver soluções que realmente ressoem com as necessidades específicas de cada negócio.

Por isso: Mobile First é uma OVA!

Existem diversas empresas que querem ir para o ambiente digital, mas ainda não possuem referência visual de aplicação da marca nem para o mundo físico, imagina para a web, ou seja, precisam criar, e isso vem muito antes de um ptotótipo de página do site.

Estudo marketing desde 2004 e já participei de centenas de projetos que nasceram no físico e foram para o digital, ou mesmo projetos que nasceram no digital de “qualquer forma”, e depois se lascaram para se remodelar: tiveram que repensar branding para “atualizar” suas interfaces.

Mobile first é uma ova! Antes de pensar em fazer um site, ou mesmo refatorar o antigo, as empresas precisam repensar suas estratégias de branding e produto, já que em muitos casos, não possuem diretrizes claras sobre o que fazem e onde querem chegar…. se o site vai ser de uma forma ou de outra, é o menor dos problemas.

Césinha, Brain behind Pink and Brain

O que é “design de marca e produto first” no meu ponto de vista?

Antes de sair criando um site novo, ou mesmo refatorando o atual, precisamos estabelecer uma base sólida que passa pela estratégia de branding, posicionamento de produto, ter um ótimo guia visual de aplicação da marca, tom e maneira de interagir com os usuários e planejamento estratégico para os próximos ciclos (anos, etc…): onde quero chegar!

Trata-se de priorizar a compreensão profunda do produto, da marca e das regras de negócio antes de pensar em estar em qualquer dispositivo ou plataforma. Não adianta também construir uma experiência ótima para dispositivos móveis se ela não respeita os valores da marca, não resolve os desafios centrais do negócio com consistência, de forma a ser lembrado como “WOW que produto top”.

Se a empresa não possui um plano de negócios, brand book, design system, enfim, nenhum material que norteie a criação dos protótipos web, como as pessoas entendem que podem criar algo substancial seja no mobile ou no desktop?

Essa abordagem começa com perguntas fundamentais:

• Como está meu plano de negócios? meus desejos enquanto empresa?
• Possuo um brand book? ele é completo? Contempla aplicações web?
• Quem é o público alvo ou persona que quero atingir ao criar um site?
• Quais são as metas de negócio a serem alcançadas?
• Como a identidade visual da marca será traduzida para o digital?
• Quais são as particularidades do segmento em que a empresa atua?
• Como se comporta meu concorrente que já está na web?
• O que quero evidenciar e o que quero dar menos destaque?
• Para onde posso crescer? (para já contemplar esse crescimento e não precisar refazer templates no futuro novamente)
• Etc..

Responder a essas questões certamente ajudará a criar uma estratégia robusta de aplicação da marca, passando pelos protótipos das páginas, com aplicações visuais concisas, tom de comunicação e elementos chave para páginas consistentes.

O mito do “mobile first”

Não é que o conceito de “mobile first” seja irrelevante. De fato, vivemos em um mundo onde a maior parte do tráfego na internet vem de dispositivos móveis. No entanto, essa abordagem não é universalmente aplicável.

Muitas empresas ainda não estão na intenet, não possuem clareza de aplicação da marca seja no mundo físico ou digital, ou, se já estão na internet, podem depender significativamente do tráfego desktop, especialmente em setores como B2B, educação e tecnologia, jurídicos, governamental, onde os profissionais preferem acessar informações detalhadas em telas maiores.

Ao focar exclusivamente no “mobile first”, você corre o risco de criar soluções que:

• Ignoram as necessidades do usuário desktop: uma experiência ruim no desktop pode afastar clientes valiosos.
• Sacrificam a identidade visual da marca: um design excessivamente simplificado para caber no móvel pode comprometer a comunicação da marca.
• Desconsideram o contexto do uso: nem todo produto ou serviço é consumido da mesma forma em dispositivos diferentes.

Como criar diretrizes fortes para aplicação da marca na web?

Para que o design de marca e produto seja realmente eficaz, é preciso pensar além do layout. Aqui estão alguns passos cruciais para desenvolver diretrizes consistentes:

1. Definir a essência da marca: quais são os valores centrais? Quais cores, fontes e elementos visuais representam melhor a identidade da empresa?
2. Estabelecer a hierarquia da informação: pense em como os usuários interagem com o conteúdo no desktop e no mobile. Ajuste conforme necessário, sem sacrificar o design.
3. Criar protótipos responsivos: prototipagem é mais do que ajustar tamanhos de tela. É sobre garantir que cada versão ofereça uma experiência consistente e impactante.
4. Integrar as regras de negócio: se o produto tem particularidades, como integrações ou funções específicas, elas devem ser priorizadas no design.
5. Testar com usuários reais: avalie como diferentes perfis de público interagem com a aplicação da marca e os elementos do produto em dispositivos variados.

Se você não tem um guide de marca e nem sabe onde quer chegar, você precisa voltar alguns passos e organizar as ideias. Meu conselho de amigo: não gaste dinheiro e tempo fazendo um site ou refatorando o atual sem ter diretrizes claras de marca e produto. Você pode até cirar algo legal para ser lançado, mas em muito breve irá precisar alterar, atualizar e muitas vezes, fazer novamente. Cansei de ver casos assim.

Gaste seu tempo e dinheiro com branding e produto. Você vai economizar muito dinheiro para o futuro, que poderão pagar o desenvolvimento de 20 sites ou mais.

Césinha

Case: Essencial Aparelhos Auditivos

A Essencial Aparelhos Auditivos chegou até nós em outubro de 2023 com um site feito em Wix, gastando em média 10 mil reais por mês em campanhas de Google Ads, que levavam o tráfego diretamente para uma landing page “horrível”. O primeiro contato das pessoas eram com essa prateleira toda desorganizada, feia, mal montada e sem storytelling nenhum.

O que fizemos antes de prototipar as telas do novo site?

• Convecemos os gestores a recriar a marca para aplicação na web, pois a agência que tinha feito no passado não havia contemplado o futuro da empresa;
• Vetorizamos o logo, criamos ícones e elementos de grafismo diversos do absoluto zero com a cara da empresa;
• Criamos referências visuais próprias de aplicação dos aparelhos auditivos, inclusive com modelagem 3D;
• Criamos um projeto de hierarquia da informação, onde pudessemos ter clareza na prototipação e da navegação do site no futuro;
• Criamos referências sólidas dos profissionais que trabalham na empresa, visando tornar a marca mais próxima das pessoas, ao invés de só vender aparelhos auditivos
• Estudamos dezenas de concorrentes pelo Brasil e pelo mundo (e digo que vimos 90% dos players com os problemas citados acima: sem força de marca, sites horrosos, comunicação falha, etc…)
• SEO foi o epicentro da contrução dos componentes do site, além de trazer uma frente editorial forte onde a aquisição orgânica estivesse baseada no apoio aos deficientes auditivos, e não somente em pautas de bico de funil (venda).

Só depois de tudo isso estar bem esclarecido é que iniciamos a prototipagem das telas. E sim, começamos pelo mobile, mas sempre com o desktop em mente. Afinal, o desktop oferece maior clareza para exibir, destacar e comparar modelos. Além disso, 90% dos usuários alternam entre dispositivos antes de realizar uma compra, especialmente quando se trata de produtos com valores acima de 10 mil reais, pois essa decisão exige maior análise e consideração.

O site foi lançado em dezembro de 2023 e desde então vem batendo recordes atrás de recordes, e se tornou a referência nacional em assuntos relacionados a saúde auditiva. O movimento criado em 2023 trouxe frutos carnudos para a empresa.

A estratégia de colocar o SEO no centro das ações transformou a Essencial em uma referência no Google, fortalecendo sua marca e autoridade. Basta visitar os sites dos concorrentes para entender do que estou falando: nenhum deles investiu no trabalho prévio de design de marca e produto. Como resultado, possuem sites desenvolvidos por agências que não capturam e entregam o valor necessário para se destacar.

Se você digitar “Aparelhos auditivos“, “Aparelho Auditivo”, a empresa já é a top 1 no Google, mas se digitar também “RG PCD“, “CNH para surdo“, e milhares de outros temas, eles dominam, e são lembrados p´ro ativamente pelos usuários web.

Uma informação relevante: eles costumavam vende de 3 a 5 aparelhos por semana e atualmente já estão vendendo mais de 50 unidades/mês, e projetam vender mais de 100 unidades já no primeiro semestre de 2025.

Por que o desktop ainda importa?

Embora o mundo esteja cada vez mais “mobile-centric”, ignorar o desktop pode ser um erro caro. Aqui estão alguns motivos:

• Setores específicos dependem do desktop: negócios que vendem soluções complexas ou oferecem muito conteúdo técnico geralmente veem maior engajamento no desktop.
• Maior potencial de conversão: compras de alto valor ou decisões empresariais são frequentemente feitas em desktops, onde os usuários têm mais espaço para analisar informações.
• Melhor utilização de dados: interfaces de desktop permitem exibir relatórios, dashboards e outras visualizações detalhadas que são mais difíceis de consumir no móvel.

Não seja mais um “tolo” que replica o jargão “mobile first”: é hora de repensar prioridades

Antes de adotar cegamente o “mobile first”, faça uma análise profunda das necessidades do seu negócio, do público e da marca. Um “design de marca e produto first” cria a base para experiências digitais verdadeiramente impactantes, que respeitam a identidade da empresa e atendem às expectativas dos usuários, independentemente do dispositivo que utilizam.

No final das contas, o que importa é como sua marca se comunica e como o produto resolve problemas reais. O dispositivo é apenas um canal – e não o ponto de partida.

Se você precisa de mentes diferenciadas no seu projeto, entre em contato conosco e venha tomar um café digital.

Somos ratos quando o assunto é desenvolvimento web e marketing digital.

O post Mobile first é uma ova! Design de marca e produto first apareceu primeiro em Pink and Brain.