Dra. Larissa Conde · Site institucional
Dra. Larissa Conde: estrutura e direção visual
Uma linguagem consistente da apresentação pessoal à escolha de atendimento
Criei o site da Dra. Larissa Conde, reunindo direção visual, copy, UX/UI e construção. Estrutura, paleta e componentes organizam a apresentação da médica, os assuntos de atendimento e os caminhos para consultas presenciais ou online.
Explorar as telas§ 01
Contexto
O site reúne a apresentação de uma ginecologista no Rio de Janeiro, sua abordagem de atendimento, áreas de atuação, procedimentos, telemedicina e dois consultórios. Meu trabalho foi organizar esse conjunto em uma página com diferentes níveis de informação e caminhos de contato.
Estrutura, paleta e componentes visuais são as partes que mais valorizo neste projeto. Trabalhei essas três frentes em conjunto, conectando a presença da médica às explicações sobre o atendimento e à escolha de modalidade ou unidade.
§ 02
Decisões de UX/UI
01Integrar os retratos à apresentação
Usei o retrato em grande escala na abertura e outros enquadramentos ao longo da página. Na seção Sobre, fotografia e texto ficam lado a lado, com as informações profissionais agrupadas.
Os materiais recebidos entram na composição com funções diferentes: apresentar a médica, acompanhar a leitura e dar continuidade visual entre as seções.
Apresentação em duas colunas com fotografia autoral recebida. A imagem documenta o layout, sem validar as credenciais transcritas. - 02
Manter unidade com cores e tipografia
Apliquei vinho em títulos, botões e áreas de maior contraste, com rosé e creme nas superfícies claras. Cormorant Garamond nos títulos e DM Sans nos textos conectam os componentes.
Os quatro cards de princípios mostram essa combinação em uma síntese curta, com ícones, títulos e explicações dentro do mesmo padrão visual.
Cores, títulos serifados e cards conectam a síntese da apresentação à linguagem visual do site. - 03
Organizar os assuntos em cards
Separei as áreas de atuação em cards com fotografia, título e resumo. No desktop, a grade tem três colunas e permite percorrer os temas por uma estrutura recorrente.
Cada card oferece uma primeira camada de informação. A seção completa reúne nove áreas, sem exigir que todas tenham explicações longas nessa etapa da leitura.
Primeiros cards da grade de nove áreas, organizados com imagem, título e resumo. A seção continua abaixo. - 04
Mudar o ritmo nas explicações mais longas
Para os procedimentos, usei blocos mais amplos, alternando fotografia e texto. O conteúdo ganha espaço em relação aos resumos das áreas de atuação.
Mantive as cores, a tipografia e os cantos arredondados para conectar os dois formatos. A variação da composição acompanha a diferença de profundidade entre os conteúdos.
Blocos de explicação mais longos variam a composição em relação aos cards de áreas de atuação. - 05
Dar contexto à escolha de atendimento
Organizei Barra da Tijuca e Botafogo em cards com mapa, endereço, telefone e ação própria. A telemedicina tem uma seção e um contato específicos.
O botão fixo de agendamento leva aos consultórios; os links de WhatsApp distinguem unidade ou modalidade. Assim, o próximo passo acompanha a opção que a pessoa está consultando.
Informações e ações específicas por unidade. Os mapas carregaram nesta captura de trecho; não houve solicitação de consulta. - 06
Recompor a abertura no celular
No desktop e no tablet, o retrato compõe o fundo da abertura. No celular, o texto aparece em um bloco vinho, seguido da fotografia.
A mudança também chega aos componentes: áreas e procedimentos se reorganizam nas larguras menores, e os consultórios ficam empilhados. A composição acompanha o espaço disponível para leitura e ação.
Recomposição em emulação de celular: texto antes da fotografia, que continua abaixo do enquadramento.
§ 03
Construção com IA
Usei Lovable e ChatGPT na construção do site, com autoria da direção visual, da copy e da implementação.
- Página e componentes
- A execução reúne seções de apresentação, grades, blocos de procedimentos, telemedicina e consultórios em uma experiência navegável.
- Navegação e contato
- Âncoras, menu recolhível, carrossel e caminhos específicos de WhatsApp fazem parte da versão documentada.
§ 04
SEO
Trabalhei a apresentação do site para busca e compartilhamento, ligada à atuação da médica e ao contexto local.
- Conteúdo e localização
- Nome, especialidade e cidade contextualizam a atuação. As informações de consultório distinguem as duas unidades e seus caminhos de contato.
- Configuração da página
- Metadados, URL canônica, hierarquia de títulos, textos alternativos e marcação de profissional médico compõem a implementação observada na página renderizada.
↳ Não foram fornecidos dados de indexação, tráfego, consultas ou desempenho para este case.
§ 05
Telas
Versão registrada em 23/10/2026. Tablet e celular são emulações de viewport. As capturas preservam a interface original em português.
Desktop · 03
Tablet · 03
Celular · 03
§ 06
Créditos
Matheus Barros: direção visual, design, copy, UX/UI, organização das seções, SEO, construção e implantação. Crédito institucional: iMedicina.
Logo e fotografias autorais fornecidos pela cliente. A origem das demais imagens de apoio não foi individualizada. A aplicação desses materiais à interface não transfere sua autoria.