Tempo Odontologia · Site institucional
Tempo Odontologia: do layout ao WordPress
Uma linguagem visual que conecta diferentes páginas e caminhos de navegação
Concebi o layout e montei o site da Tempo Odontologia em WordPress. Mantive cores, tipografia e componentes recorrentes entre a apresentação da clínica, as listagens, os detalhes de serviços e os caminhos de contato.
Explorar as telas§ 01
Contexto
O site apresenta uma clínica odontológica na Vila Mariana, em São Paulo, com conteúdos institucionais, especialidades, tratamentos e localização. A pesquisa registrou 18 páginas públicas distintas entre listagens, conteúdos de detalhe e apresentação da clínica.
Criei o layout no Illustrator e levei a composição para o WordPress. A montagem das páginas foi a parte que mais deu trabalho. Meu foco neste case é essa passagem entre design e implementação, com a redação dos textos creditada ao Pedro.
§ 02
Decisões de UX/UI
01Conectar as páginas pela linguagem visual
Usei roxo e laranja em botões, ícones, cards e faixas de contato, com fundos claros para o conteúdo e rodapé escuro. A tipografia Ubuntu e a variação de peso nos títulos reaparecem entre as páginas.
Nas listagens, imagem, título e resumo seguem o mesmo padrão. A página de especialidades reúne sete cards, distribuídos em quatro colunas no desktop.
Listagem completa com imagem, título e resumo recorrentes. Copy de Pedro, então redator da Q.Com. - 02
Dar mais espaço ao assunto escolhido
As listagens oferecem uma visão geral; as páginas de detalhe aprofundam cada assunto com texto e fotografia. Organizei os conteúdos recebidos em blocos com títulos e chamadas de contato.
A página de implantes exemplifica esse formato. Ela mantém o cabeçalho e a identificação visual do conjunto, com uma leitura mais longa que a do card de entrada.
Início da página de detalhe; o conteúdo continua abaixo. Fonte individual da imagem não mapeada; textos de Pedro. - 03
Apresentar o espaço da clínica
Na página institucional, combinei a apresentação da clínica com uma galeria de oito fotografias do ambiente. A grade permite conhecer diferentes partes do espaço dentro da mesma página.
As fotos também têm visualização ampliada. Meu trabalho foi organizar e aplicar os materiais recebidos à composição, preservando a origem das fotografias autorais fornecidas pelo cliente.
Apresentação do espaço com fotografias autorais fornecidas pelo cliente. Captura integral nativa, sem montagem. - 04
Reunir informações práticas e contato
A localização concentra endereço, telefone, WhatsApp, e-mail, formulário e mapa. Na composição desktop, canais, campos e mapa ficam em áreas distintas.
Também distribuí caminhos de contato pela abertura, pelos conteúdos de serviço e pelo rodapé. A pessoa pode explorar um assunto e encontrar uma ação de contato ao longo desse percurso.
Informação local, formulário e mapa no mesmo trecho. Campos mantidos vazios, sem envio ou contato realizado. - 05
Preservar os grupos na navegação móvel
Nas larguras menores, o menu se expande sob a marca e mantém os subgrupos de especialidades e tratamentos. O estado selecionado mostra o submenu de tratamentos aberto.
As grades reduzem colunas, e texto e imagem das páginas de detalhe passam a uma disposição vertical. A estrutura acompanha a largura disponível sem eliminar os caminhos para os conteúdos internos.
Estado do menu e submenu abertos em emulação de celular. A página ao fundo é A clínica, não um tratamento já acessado.
§ 03
Do layout à montagem
Trabalhei com Illustrator no layout, WordPress na montagem e Photoshop no tratamento das imagens. As estimativas retrospectivas se dividem em três etapas.
- Layout — cerca de 2h30
- Concepção da apresentação visual no Illustrator.
- Montagem — cerca de 6h
- Construção das páginas no WordPress, a parte mais trabalhosa do projeto.
- Refinamento — cerca de 1 a 2h
- Ajustes posteriores na execução do conjunto.
↳ A soma fica em cerca de 9h30 a 10h30. Não há tempo separado informado para Photoshop; esse tratamento não acrescenta horas independentes à estimativa.
§ 04
Estrutura para busca
Nas 18 páginas documentadas, foram observados título, descrição e URL canônica na página renderizada.
- Contexto local
- Assuntos e localização aparecem nos títulos e conteúdos, com informações práticas sobre a clínica na Vila Mariana.
- Organização das páginas
- Hierarquia de títulos, textos alternativos amostrados e marcação estruturada complementam o conjunto. A autoria textual permanece com Pedro.
↳ Não recebi dados de tráfego, posições ou agendamentos para atribuir resultados ao site.
§ 05
Telas
Versão registrada em 23/10/2026. Tablet e celular são emulações de viewport. As aberturas podem mostrar estados diferentes do destaque rotativo.
Desktop · 03
Tablet · 03
Celular · 03
§ 06
Créditos
Matheus Barros: concepção, layout, direção visual, UX/UI, estrutura, montagem em WordPress e tratamento de imagens. Crédito institucional: Agência Q.Com. Copy: Pedro, então redator da agência.
Logo e fotografias autorais fornecidos pelo cliente. As demais fotos foram obtidas por mim na internet, sem fontes individuais mapeadas nesta rodada. O tratamento das imagens não equivale à produção fotográfica.