Seletto Odontologia · Clinic website and blog
Seletto: from the clinic overview to each service page
Website design, internal pages, and a blog built in WordPress
I designed and built the website and blog for Seletto Odontologia in Taubaté, Brazil. I organized the clinic overview, specialties, and treatments, with paths to explore each topic and get in touch.
Explore the screens§ 01
Context
The brief called for a clinic overview, professionals, specialties, treatments, location information, and access to courses. The challenge was to organize this material so people could get to know Seletto and explore the topic they came for.
My role was to design that structure and build the pages. Institutional credit goes to Agência Q.Com, whose editorial team supplied the copy.
§ 02
UX/UI decisions
01Separate the overview from each service’s content
I organized specialties and treatments into two listings, with an image, name, and summary for each topic. From there, visitors can open a dedicated page for more information.
The recorded site includes 13 specialties and eight treatments. This gives the overview and the detailed content their own space, rather than trying to explain every service on the homepage.
First row of the specialties index, with paths to detail pages. - 02
Show the space and keep contact within reach
On the homepage, I combined the clinic introduction with photographs of its interior. A four-image gallery appears before another scheduling prompt.
I used this material to present the space as part of the browsing experience. After exploring the facilities, visitors find another path to location and contact information.
Four photographs of the space before the scheduling prompt. - 03
Make room for the blog content
I built the blog listing and article pages. Within an article, the image, title, and subheadings organize the content, while a sidebar holds the Autora block and recent posts.
My work covers the implementation and presentation of these texts. The copy comes from Agência Q.Com; the author credit shown in the article stays separate from the digital project credit.
Article with an author credit block. Copy by Agência Q.Com’s editorial team. - 04
Adapt the navigation groups to smaller screens
The listings keep three columns on tablet and switch to one on mobile. The collapsed menu opens the navigation groups, with Quem somos and Corpo clínico nested under Clínica.
I worked on this adaptation to preserve the browsing paths on smaller screens. The team presentation and contact fields also follow a vertical layout on mobile.
Clínica submenu open in mobile emulation. The project’s labels and interface remain in Portuguese.
§ 03
From Illustrator to WordPress
I designed the layout in Illustrator, edited images in Photoshop, and built the pages and blog in WordPress. My work also included deploying the site.
- Layout
- I used Illustrator to design the composition and visual hierarchy of the website pages.
- Images
- I used Photoshop to edit the images that became part of the website’s page compositions.
- Development
- I used WordPress to build the institutional pages, service pages, and the blog structure.
§ 04
Structure for local and topic-based search
SEO was part of my work on the project, connected to the service structure and the clinic’s presence in Taubaté.
- Page-level planning
- The SEO plan includes proposed titles and descriptions for 21 service pages, connecting their topics with the clinic’s local presence.
- Pages on the site
- The homepage, DTM page, and location page have their own titles. Each topic has a dedicated URL to bring the relevant information together.
↳ The spreadsheet records the plan; it does not prove full implementation. The pages show the observed structure, rather than a complete SEO audit.
§ 05
Reported search visibility
In my Google Search Console monitoring, Seletto averaged around 400 organic search clicks a month. The period used for that average is not recorded here, and the report was not reviewed for this case study.
This is reported search visibility, with no before-and-after comparison or evidence tying growth or appointments to the project.
§ 06
Screens
Version recorded on October 27, 2026. Mobile screenshots use viewport emulation. The captures preserve WhatsApp overlaps and other interface elements without retouching.
Desktop · 03
Mobile · 03
§ 07
Credits
Matheus Barros: layout, visual direction, UX/UI, page development, deployment, blog implementation, and SEO. Institutional credit: Agência Q.Com. Page and blog copy: the agency’s editorial team.
The client supplied the logo and original photographs. Other photos came from online sources, which were not individually mapped in this documentation. My role included image editing in Photoshop.