Dra. Larissa Conde · Professional website
Larissa Conde: structure and visual design
A consistent visual language from a personal introduction to care options
I created Dra. Larissa Conde’s website, combining visual direction, copy, UX/UI, and development. Page structure, color palette, and components organize the physician’s introduction, service information, and paths to in-person or online care.
Explore the screens§ 01
Context
The website introduces a gynecologist in Rio de Janeiro, her approach to care, practice areas, procedures, telemedicine, and two offices. My work was to organize this material into a page with different levels of detail and clear contact paths.
Structure, color palette, and visual components are the aspects I value most in this project. I developed them together, connecting the physician’s presence with service explanations and the choice of location or type of appointment.
§ 02
UX/UI decisions
01Make portraits part of the introduction
I used a large portrait in the opening and different photographs throughout the page. In the About section, the portrait sits beside the text, with professional information grouped together.
The supplied images serve different roles in the composition: introducing the physician, accompanying the text, and creating visual continuity between sections.
Two-column introduction using a supplied original photograph. The image documents the layout, without validating the displayed credentials. - 02
Connect the page through color and typography
I used burgundy for headings, buttons, and stronger contrast areas, with blush and cream on lighter surfaces. Cormorant Garamond headings and DM Sans body text connect the components.
The four principles cards bring these choices together in a short overview, using icons, headings, and explanations within a shared visual pattern.
Colors, serif headings, and cards connect the introductory overview with the website’s visual language. - 03
Organize service topics into cards
I grouped practice areas into cards with a photograph, heading, and summary. On desktop, the three-column grid provides a recurring structure for browsing the topics.
Each card offers an initial layer of information. The full section covers nine practice areas without giving every topic a long explanation at this point in the page.
The first cards in the nine-area grid use an image, heading, and summary. The section continues below. - 04
Change the rhythm for longer explanations
For procedures, I used larger blocks that alternate photographs and text. These explanations have more room than the practice-area summaries.
I kept the colors, typography, and rounded corners consistent to connect the two formats. The change in composition follows the different levels of detail in the content.
Longer explanatory blocks vary the composition compared with the practice-area cards. - 05
Give each care option its own contact path
I organized Barra da Tijuca and Botafogo into cards with a map, address, phone number, and dedicated action. Telemedicine has its own section and contact link.
The fixed scheduling button leads to the offices section; WhatsApp links distinguish the location or appointment type. The next step follows the option the visitor is exploring.
Location-specific information and actions. Maps loaded in this section capture; no appointment request was made. - 06
Recompose the opening for mobile
On desktop and tablet, the portrait forms the opening background. On mobile, the text appears in a burgundy block followed by the photograph.
The components also change: practice areas and procedures reorganize at smaller widths, and office cards stack vertically. The composition follows the available space for reading and taking action.
Recomposed opening in mobile emulation: text comes before the photograph, which continues below the frame.
§ 03
AI-assisted development
I used Lovable and ChatGPT to build the website, taking responsibility for visual direction, copy, and implementation.
- Page and components
- The implementation brings together introductory sections, grids, procedure explanations, telemedicine, and offices in a navigable experience.
- Navigation and contact
- Anchors, a collapsible menu, a carousel, and dedicated WhatsApp paths are part of the documented version.
§ 04
SEO
I worked on how the website presents itself in search and social sharing, connecting the physician’s work with its local context.
- Content and location
- The name, specialty, and city establish the local context. Office information distinguishes the two locations and their contact paths.
- Page configuration
- Metadata, a canonical URL, heading hierarchy, image alt text, and physician markup are part of the implementation observed in the rendered page.
↳ No indexing, traffic, appointment, or performance data was provided for this case study.
§ 05
Screens
Version captured on October 23, 2026. Tablet and mobile views are viewport emulations. Screenshots preserve the original Portuguese interface.
Desktop · 03
Tablet · 03
Mobile · 03
§ 06
Credits
Matheus Barros: visual direction, design, copy, UX/UI, section organization, SEO, development, and deployment. Institutional credit: iMedicina.
The client supplied the logo and original photographs. Other supporting images were not individually attributed. Applying these materials to the interface does not transfer their authorship.