Seletto Odontologia · Site institucional e blog
Seletto: da apresentação da clínica ao conteúdo de cada serviço
Layout, páginas internas e blog construídos em WordPress
Desenhei e construí o site e o blog da Seletto Odontologia, em Taubaté. Organizei a apresentação da clínica, as especialidades e os tratamentos, com caminhos pra explorar cada assunto e entrar em contato.
Explorar as telas§ 01
Contexto
O briefing reunia apresentação da clínica, profissionais, especialidades, tratamentos, localização e acesso a cursos. A questão era organizar tudo isso num site em que a pessoa pudesse conhecer a Seletto e aprofundar o assunto que procurava.
Minha parte foi desenhar essa estrutura e construir as páginas. O projeto tem crédito institucional da Agência Q.Com, que também assina a redação dos textos.
§ 02
Decisões de UX/UI
01Separar a visão geral do conteúdo de cada serviço
Organizei especialidades e tratamentos em duas listagens, com imagem, nome e resumo de cada assunto. A partir delas, a pessoa pode abrir uma página própria e encontrar mais informação.
O conjunto registrado reúne 13 especialidades e oito tratamentos. Essa organização distribui o conteúdo entre apresentação e aprofundamento, sem tentar explicar todos os serviços na home.
Primeira linha do índice de especialidades, com caminhos para páginas de detalhe. - 02
Mostrar o espaço e deixar o contato por perto
Na home, combinei a apresentação da clínica com fotografias do ambiente. A galeria reúne quatro imagens e vem antes de uma nova chamada de agendamento.
Usei esse material pra mostrar o espaço dentro da própria navegação. Depois de conhecer a estrutura, a pessoa encontra outro caminho para a página de localização e contato.
Quatro fotografias do espaço antes da chamada de agendamento. - 03
Dar espaço ao conteúdo do blog
Montei o blog com listagem de artigos e páginas de leitura. No artigo, imagem, título e subtítulos organizam o conteúdo, enquanto a coluna lateral reúne o bloco Autora e os posts recentes.
Meu trabalho está na montagem e na apresentação desses textos. A redação é da Agência Q.Com; o crédito técnico exibido no artigo continua separado da autoria do projeto digital.
Artigo com bloco de autoria técnica. Textos da redação da Agência Q.Com. - 04
Adaptar os grupos de navegação às telas menores
As listagens mantêm três colunas no tablet e passam a uma no celular. O menu recolhido abre os grupos de navegação, com Quem somos e Corpo clínico dentro de Clínica.
Trabalhei essa adaptação pra manter os caminhos de exploração nas telas menores. A apresentação da equipe e os campos de contato também seguem uma composição vertical no celular.
Submenu Clínica aberto na emulação de celular. Os nomes e a interface do projeto permanecem em português.
§ 03
Do Illustrator ao WordPress
Desenhei o layout no Illustrator, manipulei imagens no Photoshop e construí as páginas e o blog no WordPress. Minha atuação incluiu a implantação do site.
- Layout
- Desenhei no Illustrator a composição e a hierarquia visual das páginas do site.
- Imagens
- Manipulei no Photoshop as imagens usadas na composição das páginas do projeto.
- Construção
- Construí no WordPress as páginas institucionais, os serviços e a estrutura do blog.
§ 04
Estrutura para busca local e por assunto
O SEO fez parte do meu trabalho no projeto, ligado à organização dos serviços e à apresentação da clínica em Taubaté.
- Planejamento por página
- O planejamento de SEO reúne propostas de títulos e descrições para 21 páginas de atendimento, ligando os assuntos à presença local da clínica.
- Páginas no site
- A home e as páginas de DTM e localização têm títulos próprios. Cada assunto conta com um endereço para reunir a informação correspondente.
↳ A planilha registra o planejamento; não comprova a aplicação integral. As páginas mostram a estrutura observada, sem representar uma auditoria completa de SEO.
§ 05
Presença na busca relatada
Segundo meu acompanhamento no Google Search Console, a Seletto recebia uma média de cerca de 400 cliques orgânicos por mês. O período dessa média não está registrado aqui, e o relatório não foi consultado para este case.
Esse relato oferece contexto de presença na busca, sem comparação anterior ou dados que permitam atribuir crescimento e agendamentos ao projeto.
§ 06
Telas
Versão registrada em 27/10/2026. As capturas de celular usam emulação de viewport. Os trechos preservam as sobreposições do WhatsApp e outros elementos da interface, sem retoque.
Desktop · 03
Celular · 03
§ 07
Créditos
Matheus Barros: layout, direção visual, UX/UI, construção das páginas, implantação, montagem do blog e SEO. Crédito institucional: Agência Q.Com. Copy das páginas e do blog: redação da agência.
Logo e fotos autorais fornecidos pela cliente. As demais fotos vieram da internet, sem fontes individuais mapeadas nesta documentação. Minha atuação incluiu a manipulação de imagens no Photoshop.