Dr. Thomaz Godoi · Landing page
Thomaz Godoi: content, illustration, and interaction
A reading experience that leads from explanation to contact
I created Dr. Thomaz Godoi’s landing page, connecting copy, six illustrations I produced with AI, and interactive components. I organized information for people seeking care and those supporting someone close to them, with explanations and contact paths throughout.
Explore the screens§ 01
Context
The landing page introduces a psychiatrist’s care and organizes information about depression and anxious depression before directing visitors to WhatsApp. The page moves through illustrated statements, explanations, how care works, a professional introduction, and questions.
I wrote the copy, designed and implemented the page, and produced six illustrations with AI. I developed text, visuals, and interaction together around two reading intentions: seeking help for oneself and supporting someone close.
§ 02
UX/UI decisions
01Connect short statements with illustrations
I produced six illustrations with AI to accompany short statements about everyday situations. The scenes come before longer explanations, connecting the copy’s language with the visual composition.
I placed each image and statement in a card. Together they introduce the topic without collecting responses or presenting a health assessment.
First part of the six-illustration set produced with AI by Matheus. The sequence is not a diagnostic instrument. - 02
Offer two ways into the content
In the desktop and tablet opening, I included shortcuts for people experiencing that situation and those who want to help someone. Both lead to sections within the page, with different copy for each intention.
These entries recognize different reasons for visiting and share a contact path. The choice contains no form or collection of health information.
Internal destination of the reading shortcuts, without a form or collection of health responses. - 03
Vary the composition across content sections
I used Playfair Display for headings and Inter for body text and controls. Light, warm backgrounds alternate with deep blue, while cards, icons, and rounded corners connect the sections.
After the illustrated scenes, a dark surface organizes explanations into cards. The change marks another level of information while retaining the shared visual language.
Change in composition and depth after the illustrations. Clinical content was not validated in this documentation. - 04
Explain care through selectable stages
I built a four-stage component. Selecting an item changes its description and updates the preview’s number, title, and progress.
The interaction lets visitors explore the sequence presented for online care. The preview is an explanatory representation within the landing page, without a connection to a real consultation or a telemedicine platform delivered in this project.
Stage 1 selected. The preview and Ao vivo label are representations within the page, without a real consultation or connection. - 05
Reorganize grids and the preview
Illustrations move from three columns on desktop to two on tablet and one on mobile. The telemedicine selector and preview stack at smaller widths.
At 390 CSS px mobile width, the two opening shortcuts are hidden; their content remains in the vertical page flow. Menu, text, images, and controls follow this rearrangement.
Two-column grid in tablet emulation. The capture does not show all six illustrations in full.
§ 03
AI-assisted development and illustration
I used Lovable and ChatGPT for the project, taking responsibility for the direction of copy, imagery, and the experience.
- Six illustrations
- I produced the set with AI and paired it with the page’s statements. The client supplied the logo and physician photographs.
- Integrated execution
- The page combines anchors, an eight-question FAQ, explanatory states, and contact paths. I estimate about two and a half hours in total.
↳ The time is an execution estimate, without a productivity comparison or a claim about elapsed launch time.
§ 04
Screens
Version captured on October 23, 2026. Tablet and mobile views are viewport emulations. Care previews are explanatory representations within the landing page.
Desktop · 03
Tablet · 03
Mobile · 03
§ 05
Credits
Matheus Barros: concept, copy, information organization, design, UX/UI, production of six AI illustrations, implementation, and responsive adaptation. Institutional credit: iMedicina.
The client supplied the logo and physician photographs. Other supporting photo sources were not individually identified; illustration authorship does not extend to every image on the page.