Dra. Juliana Araújo · Site institucional
Dra. Juliana Araújo: composição e movimento
Uma linguagem visual que acompanha conteúdo, interação e contato
Criei o site da Dra. Juliana Araújo, dermatologista em Barbacena, reunindo direção visual, copy, UX/UI e construção. Integrei retratos, tipografia, transições e estados dos componentes em uma página de apresentação, exploração dos serviços e contato.
Explorar as telas§ 01
Contexto
O site apresenta a Dra. Juliana Araújo e reúne tratamentos, exames, dúvidas e informações do consultório em Barbacena, Minas Gerais. A navegação por âncoras conecta esses blocos dentro de uma página única.
O que mais valorizo neste projeto é a estética e os efeitos. Trabalhei fotografia, tipografia, espaço e movimento como partes da mesma experiência, mantendo uma linguagem recorrente da apresentação pessoal aos caminhos de contato.
§ 02
Decisões de UX/UI
01Integrar retratos, tipografia e superfície
Na abertura, integrei o retrato recebido ao fundo claro por um gradiente, com o texto à esquerda. Na apresentação, outra fotografia se combina com a biografia em duas colunas.
Fundos próximos de areia e off-white, tipografia Manrope, linhas delicadas e ações escuras mantêm referências comuns, enquanto os enquadramentos mudam ao longo da página.
Fotografia recebida, tipografia e fundos claros mantêm a linguagem visual na apresentação profissional. - 02
Relacionar o estado visual à seleção
Organizei os cinco diferenciais em cards com ícone, título e explicação. Ao selecionar um deles, a superfície passa de clara para escura, destacando o item dentro do conjunto.
O estado usa o mesmo contraste das ações principais. A mudança faz parte da interação e mantém a linguagem visual presente nos controles e no conteúdo.
Primeiro diferencial selecionado. O quinto item continua abaixo do enquadramento; a transição é documentada nos registros de estilo. - 03
Usar movimento na apresentação dos blocos
Usei entrada gradual e transições de opacidade e deslocamento para apresentar os blocos. O cabeçalho recebe desfoque de fundo durante a rolagem, compondo uma superfície sobre o conteúdo.
Esses efeitos estão documentados nos estilos e estados coletados. As capturas estáticas mostram a composição e as seleções, sem reproduzir as animações.
04Organizar tratamentos em grupos
Distribuí os tratamentos entre dermatologia clínica, estética, tecnologias e cirurgia. Os cards repetem imagem, título e explicação, com títulos de grupo separando os assuntos.
Na seção de exames, mudei para uma composição com texto e retrato. O formato acompanha a função de cada bloco, preservando as referências visuais da página.
Primeiros cards em três colunas; o conteúdo continua abaixo. Imagens de apoio sem origem individualizada, sem indicação de pacientes reais. - 05
Conectar dúvidas ao próximo passo
O FAQ permite abrir as respostas por escolha. No estado selecionado para o case, a explicação orienta o agendamento pelo WhatsApp.
A localização reúne endereço, mapa e uma ação de contato. Menu, âncoras e botão flutuante oferecem caminhos para explorar o conteúdo ou iniciar uma conversa em diferentes pontos da página.
Estado aberto da resposta de agendamento por WhatsApp. Mostra orientação de contato, sem comprovar consulta solicitada ou confirmada. - 06
Reorganizar a leitura nas telas menores
Os cards de tratamentos passam de três colunas no desktop para duas no tablet e uma no celular. A abertura móvel prioriza título, texto de apoio e ações, com a fotografia seguindo abaixo.
O menu se recolhe nas larguras menores. Mantive os mesmos elementos e estados em composições mais verticais, conforme o espaço disponível.
Grade em duas colunas na emulação de tablet. As explicações e os demais cards continuam fora do trecho.
§ 03
Construção com IA
Usei Lovable e ChatGPT na construção do site. A concepção, a copy, a direção visual e a execução ficaram sob minha responsabilidade.
- Composição e componentes
- Transformei essa direção em seções, grades, cards selecionáveis, FAQ e caminhos de contato.
- Efeitos e estados
- Entradas, transições e navegação por âncoras fazem parte da experiência implementada e documentada.
§ 04
Apresentação para busca
A versão documentada reúne elementos de identificação profissional e local na estrutura da página e nos metadados.
- Conteúdo e localização
- Título com nome, especialidade e Barbacena, descrição, URL canônica, hierarquia de títulos e textos alternativos.
- Dados estruturados
- Marcação de profissional médico e perguntas frequentes complementa o conteúdo da página renderizada.
↳ Esses elementos não demonstram indexação, posições, tráfego ou agendamentos. Não foram fornecidas métricas para o case.
§ 05
Telas
Versão registrada em 23/10/2026. Tablet e celular são emulações de viewport. As imagens são estáticas e preservam a interface em português.
Desktop · 03
Tablet · 03
Celular · 03
§ 06
Créditos
Matheus Barros: concepção, direção visual, design, copy, organização do conteúdo, UX/UI, efeitos, construção e implementação. Crédito institucional: iMedicina.
Logo e fotografias da médica fornecidos pela cliente. Os demais materiais de apoio foram produzidos com IA ou obtidos na internet, sem identificação individual de origem ou ferramenta nesta rodada.