Dra. Juliana Araújo · Professional website
Juliana Araújo: composition and motion
A visual language that carries through content, interaction, and contact
I created the website for Dra. Juliana Araújo, a dermatologist in Barbacena, Brazil, combining visual direction, copy, UX/UI, and development. I brought portraits, typography, transitions, and component states into one page for introductions, service exploration, and contact.
Explore the screens§ 01
Context
The website introduces Dra. Juliana Araújo and brings together treatments, examinations, questions, and office information in Barbacena, Minas Gerais, Brazil. Anchor navigation connects these sections within a single page.
The aspects I value most in this project are its appearance and effects. I worked with photography, typography, space, and motion as parts of the same experience, carrying a recurring visual language from the personal introduction to contact paths.
§ 02
UX/UI decisions
01Bring portraits, typography, and surfaces together
In the opening, I blended the supplied portrait into the light background with a gradient, placing the text on the left. In the introduction, another photograph sits beside the biography in two columns.
Sand and off-white backgrounds, Manrope typography, delicate lines, and dark actions provide recurring references while photographic framing changes throughout the page.
A supplied photograph, typography, and light surfaces carry the visual language through the professional introduction. - 02
Connect the visual state to selection
I organized five distinguishing features into cards with an icon, heading, and explanation. Selecting one changes its surface from light to dark, setting it apart within the group.
The state uses the same contrast as the primary actions. This change is part of the interaction and carries the visual language through controls and content.
First feature selected. The fifth item continues below the frame; the transition is documented in the style records. - 03
Use motion to introduce the content
I used gradual entrances and opacity and movement transitions to introduce the sections. The header applies background blur during scrolling, creating a surface over the content.
These effects are documented in the captured public styles and states. Static screenshots show the composition and selections, without reproducing the animations.
04Organize treatments into groups
I grouped treatments into clinical dermatology, aesthetic care, technologies, and surgery. Cards repeat an image, heading, and explanation, with group headings separating the topics.
For examinations, I switched to a text-and-portrait composition. Each section’s format follows its role while preserving the page’s visual references.
First cards in three columns; content continues below. Supporting images were not individually sourced and are not identified as real patients. - 05
Connect questions with the next step
The FAQ lets visitors choose which answers to expand. In the state selected for this case study, the answer explains how to request an appointment through WhatsApp.
The location section brings together an address, map, and contact action. The menu, anchors, and floating button offer paths to explore the content or start a conversation at different points.
Expanded answer about scheduling through WhatsApp. This shows contact guidance, not a requested or confirmed appointment. - 06
Reorganize reading on smaller screens
Treatment cards move from three columns on desktop to two on tablet and one on mobile. The mobile opening prioritizes the heading, supporting text, and actions, with the photograph following below.
The menu collapses at smaller widths. I kept the same elements and states in more vertical compositions that follow the available space.
Two-column grid in tablet emulation. Explanations and remaining cards continue beyond this section.
§ 03
AI-assisted development
I used Lovable and ChatGPT to build the website, taking responsibility for the concept, copy, visual direction, and execution.
- Composition and components
- I translated the visual direction into sections, grids, selectable cards, an FAQ, and contact paths.
- Effects and states
- Entrances, transitions, and anchor navigation are part of the implemented and documented experience.
§ 04
Search presentation
The documented version brings together professional and local context in the page structure and metadata.
- Content and location
- A title identifying the name, specialty, and Barbacena, alongside a description, canonical URL, heading hierarchy, and image alt text.
- Structured data
- Physician and FAQ markup complement the rendered page content.
↳ These elements do not establish indexing, rankings, traffic, or appointments. No metrics were provided for this case study.
§ 05
Screens
Version captured on October 23, 2026. Tablet and mobile views are viewport emulations. Images are static and preserve the Portuguese interface.
Desktop · 03
Tablet · 03
Mobile · 03
§ 06
Credits
Matheus Barros: concept, visual direction, design, copy, content organization, UX/UI, effects, development, and implementation. Institutional credit: iMedicina.
The client supplied the logo and physician photographs. Other supporting materials were produced with AI or obtained online; individual sources and generation tools were not mapped in this documentation round.