Dr. Kelson Kawamura · Site institucional e blog
Site e blog do Dr. Kelson Kawamura
Direção visual e conteúdo legado no mesmo projeto
Desenhei e construí o site do Dr. Kelson Kawamura, conectando apresentação profissional, páginas de procedimentos e blog. Além da interface, trabalhei na migração e no tratamento do conteúdo que já existia no WordPress.
Explorar as telas§ 01
Contexto
O projeto reunia duas frentes: definir a apresentação do médico e trazer o blog antigo para a nova estrutura. A copy das páginas internas e os artigos foram recebidos, assim como o logo e os retratos.
A parte que mais me exigiu trabalho foi tratar esse acervo no CMS. Havia formatação para corrigir, capas para recuperar e links para organizar. O conteúdo precisava funcionar nos novos templates e manter unidade com o restante do site.
§ 02
Decisões de UX/UI
01Uma linguagem visual entre as páginas
Escolhi fundos escuros, textos claros e acentos champagne para sustentar a apresentação do médico. Os retratos entram na composição junto da tipografia e dos pontos de ação.
Repeti essa linguagem nas páginas internas e no blog para manter uma identidade reconhecível entre os diferentes tipos de conteúdo.
Retrato e informações do médico na composição da página. - 02
Orientação dentro das páginas longas
Trabalhei a apresentação do texto recebido nas páginas de procedimentos, usando títulos, listas e um índice lateral para orientar a leitura.
O visitante encontra caminhos para se localizar no texto, enquanto a composição mantém a linguagem visual da home.
Índice lateral e seções na página de procedimento. - 03
O blog dentro da navegação do site
A listagem usa capas e um padrão de cards para apresentar os artigos, com títulos, resumos e acesso à leitura. Tratei essa entrada como parte do site, mantendo os mesmos padrões visuais.
O botão para carregar mais artigos permite continuar a exploração da lista.
Entrada do blog com as capas dos artigos. - 04
Estrutura para o conteúdo recebido
Nos artigos, organizei subtítulos, parágrafos e listas para dar ritmo à leitura. Essa estrutura reaparece nas páginas e usa os mesmos detalhes visuais do site, como os marcadores em champagne.
O trabalho foi de tratamento e apresentação do conteúdo recebido, preservando a autoria dos textos.
Subtítulos e parágrafos no template de artigo. - 05
A apresentação em telas menores
No tablet e no celular, reorganizei a abertura para dar espaço ao texto, às ações e ao retrato. A navegação passa a um menu recolhido.
Mantive as cores e a hierarquia entre os componentes, ajustando a composição às larguras menores.
Texto e ações antes do retrato no tablet.
§ 03
Conteúdo e construção com IA
O histórico da migração registra 25 artigos trazidos do WordPress. Usei Lovable e ChatGPT na construção e no tratamento do material, com duas rodadas de revisão da estrutura.
- Estrutura dos textos
- Corrigi listas, subtítulos, parágrafos e blocos repetidos para adequar os artigos aos novos templates.
- Capas e imagens
- Recuperei capas, removi repetições no corpo e ajustei o enquadramento das miniaturas.
- Conteúdo conectado
- Organizei os artigos por temas e trabalhei links contextuais e leituras complementares junto das páginas do site.
§ 04
SEO
O SEO entrou na organização do site e no tratamento do blog. Trabalhei títulos e descrições próprios para as páginas, mantendo a distinção entre os metadados de busca e os títulos e resumos exibidos na interface.
- Arquitetura do conteúdo
- Páginas de procedimentos e artigos relacionados conectam os temas dentro do site.
- Metadados e estrutura
- Títulos, descrições, canônicas e marcação estruturada conforme o tipo de página.
§ 05
Telas
Tablet e celular registrados em emulação de viewport.
Desktop · 03
Tablet · 03
Celular · 03
§ 06
Créditos
Crédito institucional: iMedicina.
Matheus Barros: direção visual, UX/UI, construção, SEO, migração e tratamento do blog.
A copy das páginas internas e a redação original dos artigos foram recebidas. Logo e retratos fornecidos pelo cliente. As demais imagens foram reaproveitadas do blog antigo ou geradas com IA.