Dr. Thomaz Godoi · Landing page
Dr. Thomaz Godoi: conteúdo, ilustração e interação
Uma experiência de leitura que prepara o caminho até o contato
Criei a LP do Dr. Thomaz Godoi, conectando copy, seis ilustrações produzidas com IA e componentes interativos. Organizei informações para quem busca atendimento e para quem deseja ajudar alguém, com explicações e caminhos de contato ao longo da página.
Explorar as telas§ 01
Contexto
A LP apresenta o atendimento de um psiquiatra e organiza informações sobre depressão e depressão ansiosa antes do contato pelo WhatsApp. O percurso reúne frases ilustradas, explicações, funcionamento do atendimento, apresentação profissional e dúvidas.
Fiz a copy, o design e a implementação, além das seis ilustrações com IA. Trabalhei texto, repertório visual e interação em conjunto, com duas intenções de leitura: a pessoa que procura ajuda para si e quem deseja ajudar alguém próximo.
§ 02
Decisões de UX/UI
01Relacionar frases e ilustrações
Produzi seis ilustrações com IA para acompanhar frases curtas sobre situações do cotidiano. As cenas entram antes das explicações mais longas, ligando a linguagem da copy à composição visual.
Organizei cada imagem e frase em um card. O conjunto funciona como uma entrada de leitura para o tema, sem coletar respostas ou apresentar um teste de saúde.
Primeira parte do conjunto de seis ilustrações produzidas com IA por Matheus. A sequência não é um instrumento de diagnóstico. - 02
Oferecer duas entradas de leitura
Na abertura desktop e tablet, incluí atalhos para quem está passando por aquele momento e para quem quer ajudar alguém. Os destinos ficam na própria página, em duas áreas com textos específicos.
Essas entradas reconhecem intenções diferentes de visita e compartilham o caminho de contato. Não há formulário ou coleta de informações de saúde nessa escolha.
Destino interno dos atalhos de leitura, sem formulário ou coleta de respostas de saúde. - 03
Variar a composição entre os conteúdos
Usei Playfair Display nos títulos e Inter nos textos e controles. Fundos claros e quentes alternam com azul profundo, enquanto cards, ícones e cantos arredondados conectam os blocos.
Depois das cenas ilustradas, uma superfície escura organiza explicações em cards. A mudança marca outro nível de informação sem abandonar a linguagem do conjunto.
Mudança de composição e profundidade após as ilustrações. Conteúdo clínico não validado por esta documentação. - 04
Explicar o atendimento por etapas selecionáveis
Montei um componente com quatro etapas. Ao selecionar um item, a descrição muda e a prévia atualiza número, título e progresso.
A interação permite explorar a sequência apresentada para o atendimento online. A prévia é uma representação explicativa dentro da LP, sem conexão com uma consulta real ou plataforma de telemedicina entregue neste projeto.
Etapa 1 selecionada. A prévia e o rótulo Ao vivo são representação na LP, sem consulta ou conexão real. - 05
Reorganizar as grades e a prévia
As ilustrações passam de três colunas no desktop para duas no tablet e uma no celular. O seletor da telemedicina e a prévia se empilham nas larguras menores.
No celular de 390 CSS px, os dois atalhos da abertura ficam ocultos; seus conteúdos continuam no percurso vertical. Menu, textos, imagens e controles acompanham essa reorganização.
Grade em duas colunas na emulação de tablet. O trecho não mostra as seis ilustrações inteiras.
§ 03
Construção e ilustração com IA
Usei Lovable e ChatGPT no projeto, com direção da copy, das imagens e da experiência sob minha responsabilidade.
- Seis ilustrações
- Produzi o conjunto com IA e o apliquei às frases da página. Logo e fotografias do médico foram recebidos do cliente.
- Execução integrada
- A LP reúne âncoras, FAQ com oito perguntas, estados explicativos e contato. Estimo cerca de duas horas e meia no total.
↳ O tempo é uma estimativa de execução, sem comparação de produtividade ou indicação de prazo corrido de lançamento.
§ 04
Telas
Versão registrada em 23/10/2026. Tablet e celular são emulações de viewport. As prévias de atendimento são representações explicativas da LP.
Desktop · 03
Tablet · 03
Celular · 03
§ 05
Créditos
Matheus Barros: concepção, copy, organização da informação, design, UX/UI, produção das seis ilustrações com IA, implementação e adaptação responsiva. Crédito institucional: iMedicina.
Logo e fotografias do médico fornecidos pelo cliente. A origem das demais fotografias de apoio não foi individualizada; a autoria das ilustrações não se estende a todas as imagens da LP.