Tempo Odontologia · Company website
Tempo Odontologia: from layout to WordPress
A visual language connecting different pages and paths through the website
I designed the layout and assembled Tempo Odontologia’s website in WordPress. I carried recurring colors, typography, and components across the clinic introduction, listings, service details, and contact paths.
Explore the screens§ 01
Context
The website presents a dental clinic in Vila Mariana, São Paulo, Brazil, with institutional content, specialties, treatments, and location information. The research documented 18 distinct public pages across listings, service details, and clinic information.
I designed the layout in Illustrator and brought it into WordPress. Assembling the pages took the most work. This case study focuses on that connection between design and implementation, with website copy credited to Pedro.
§ 02
UX/UI decisions
01Connect the pages through a shared visual language
I used purple and orange across buttons, icons, cards, and contact bands, with light content backgrounds and a dark footer. Ubuntu typography and variations in heading weight recur throughout the website.
Listings use the same image, heading, and summary pattern. The specialties page contains seven cards arranged in four columns on desktop.
Complete listing with recurring image, heading, and summary patterns. Copy by Pedro, Q.Com’s writer at the time. - 02
Give the selected topic more room
Listings provide an overview; detail pages explore each topic through text and photography. I arranged the supplied content into sections with headings and contact actions.
The dental implant page illustrates this format. It retains the shared header and visual identity while supporting a longer reading experience than the entry card.
Beginning of the detail page; content continues below. Individual image source not mapped; copy by Pedro. - 03
Present the clinic’s physical space
On the institutional page, I combined the clinic introduction with a gallery of eight photographs of the space. The grid lets visitors explore different areas within the same page.
Photos can also open in an enlarged view. My role was to organize and apply the supplied materials to the composition, preserving the attribution of the client’s original photographs.
Presentation of the space using original photographs supplied by the client. Native full-page capture, without stitching. - 04
Bring practical information and contact together
The location page brings together the address, phone number, WhatsApp, email, form, and map. On desktop, contact channels, fields, and map occupy distinct areas.
I also placed contact paths in the opening, service content, and footer. Visitors can explore a topic and find a contact action along the way.
Local information, form, and map in one section. Fields remained empty; no submission or contact was made. - 05
Keep content groups in mobile navigation
At smaller widths, the menu expands beneath the logo and retains specialty and treatment subgroups. The selected screenshot shows the treatment submenu open.
Grids reduce their column count, while text and images on detail pages move into a vertical arrangement. The structure follows the available width while keeping paths to the internal content.
Expanded menu and submenu state in mobile emulation. The background page is A clínica, not an already opened treatment page.
§ 03
From layout to assembly
I used Illustrator for the layout, WordPress to assemble the pages, and Photoshop for image processing. My retrospective estimates cover three stages.
- Layout — about 2.5 hours
- Designing the visual presentation in Illustrator.
- Assembly — about 6 hours
- Building the pages in WordPress, the most labor-intensive part of the project.
- Refinement — about 1 to 2 hours
- Subsequent adjustments across the implementation.
↳ The combined estimate is about 9.5 to 10.5 hours. No separate Photoshop time was provided, so image processing does not add independent hours to that estimate.
§ 04
Search structure
Titles, descriptions, and canonical URLs were observed in the rendered versions of all 18 documented pages.
- Local context
- Topics and location appear in titles and content, alongside practical information about the clinic in Vila Mariana.
- Page organization
- Heading hierarchy, sampled image alt text, and structured data complement the website. Text authorship remains with Pedro.
↳ I did not receive traffic, ranking, or appointment data to establish website results.
§ 05
Screens
Version captured on October 23, 2026. Tablet and mobile views are viewport emulations. Opening screenshots may show different states of the rotating feature.
Desktop · 03
Tablet · 03
Mobile · 03
§ 06
Credits
Matheus Barros: concept, layout, visual direction, UX/UI, site structure, WordPress assembly, and image processing. Institutional credit: Agência Q.Com. Copy: Pedro, the agency’s writer at the time.
The client supplied the logo and original photographs. I sourced the other photographs online; individual sources were not mapped in this documentation round. Image processing does not establish original photographic production.