Visão Geral do Projeto
O projeto Florescer Psicologia consistiu no desenho de interface e desenvolvimento web de um portal focado em saúde mental e psicoterapia (presencial e online). Diferente de uma landing page isolada, a arquitetura aqui foi projetada para sustentar uma jornada completa de captação de pacientes: desde o primeiro contato orgânico na busca através de um blog estruturado em silos de conteúdo, passando pela quebra de objeções e apresentação das especialistas, até o funil de agendamento na página de contato.
Engenharia Visual e Elementos do Layout
1. Arquitetura da Homepage (Conexão e Autoridade)
-
Dobra Inicial: A seção hero traz uma foto de fundo ambientada em consultório tradicional com tratamento em tom sépia/marrom, reduzindo o contraste agressivo. A headline foca em benefícios claros (
Psicoterapia para te ajudar a lidar com ansiedade, pensamentos e emoções com mais clareza) acompanhada pelo botão dourado de CTA. No mobile, a imagem sofre o ajuste de proporção mantendo os textos perfeitamente legíveis. -
Mapeamento de Sintomas (Cards de Dor): Logo abaixo, uma seção em ocre exibe um grid com 5 cards limpos (
Cansaço Mental,Desmotivação,Medo,Autocobrança,Dormir Mal). O objetivo de UX é gerar identificação imediata com o momento psicológico do usuário. -
Institucional Humano: Seções intercaladas apresentam fotos reais do consultório físico e uma grade com fotos corporativas de alta qualidade das quatro profissionais (
Nossas Especialistas), estabelecendo rostos reais por trás do atendimento — um fator decisivo no nicho de saúde mental.
2. Estrutura de Blog e Feed
-
Design de Grade Limpa: O blog foi estruturado utilizando um layout de três colunas simétricas no desktop e listagem vertical nativa no mobile.
-
Cards de Artigos: Cada artigo apresenta uma imagem de destaque com bordas quadradas limpas, categoria, título chamativo em tipografia serifada de alto padrão e o link clássico
Leia mais ». Essa seção de conteúdo dinâmico é replicada no rodapé da própria homepage como porta de entrada para estratégias de SEO Orgânico.
3. Experiência de Leitura
-
Foco em Legibilidade (Readability UX): A página interna do artigo (
Terapia online: O ideal para rotinas agitadas e saúde mental) adota uma coluna centralizada e limpa para o corpo do texto. A tipografia serifada escura sobre o fundo esbranquiçado imita a experiência de leitura de um livro físico, reduzindo a fadiga ocular. -
Uso de Intertítulos e Destaques: O uso de headings fortes (
Benefícios práticos...,Como encaixar as consultas na minha rotina?) e trechos em negrito guiam os olhos do usuário de forma fluida. Imagens contextuais quebram os blocos densos de texto. No mobile, o artigo mantém as margens generosas para evitar que o leitor sinta o layout apertado.
4. Funil de Contato e Conversão Local
-
As Três Etapas do Processo: A página de contato inicia preparando o lead com três cards ilustrativos que explicam o fluxo lógico do atendimento:
1. Fale com a gente$\rightarrow$2. Escolha o melhor horário$\rightarrow$3. Inicie seu processo. Isso diminui drasticamente a ansiedade ou fricção da primeira sessão. -
Formulário de Captação Avançado: No desktop, o formulário de contato divide o espaço lado a lado de forma harmônica com o widget do Google Maps (mostrando a localização do consultório físico no bairro da Bela Vista). No mobile, o mapa é suprimido ou movido para baixo, dando prioridade máxima aos campos de digitação (
Nome,E-mail,WhatsAppe o campo abertoFale um pouco sobre o que você tem passado). O sistema exibe um alerta de feedback positivo em verde (✓ Enviado com Sucesso.) após o envio.
Especificações Técnicas do Case
-
Tipo de Projeto: Portal Corporativo / Content Marketing Hub / Healthcare & Psychology UX
-
Tecnologias: WordPress / Elementor Pro / Sistema de Gestão de Blog Dinâmico / CSS Customizado para Legibilidade
-
Foco Estratégico: Construção de autoridade, inbound marketing de conteúdo, retenção prolongada do usuário em tela (Time on Page) e conversão via formulários integrados.