North Studio
Back to Work
Healthcare2026

Harbour Dental

A private dental practice concept exploring how editorial design and considered interaction can make private healthcare feel calmer and more trustworthy — before a patient ever picks up the phone.

harbourdental.co.uk

Industry

Healthcare

Project Type

Private dental practice website concept

Services

UI Design, UX Design, Frontend Development, Brand Direction

Timeline

Concept Project

Platform

Responsive Website

Status

Concept

Business Overview

A calm, premium website concept designed to reposition a modern dental clinic through thoughtful design, refined interactions and patient-focused user experience.

The Challenge

Most dental websites feel outdated, cluttered and transactional.

Our Approach

Why we designed it this way

01

Editorial Typography

A considered pairing of display, body and serif-italic accent type gives the site an editorial voice rather than a clinical one.

02

Minimal Layouts

Generous whitespace and restrained grids let each treatment and case speak for itself, without competing for attention.

03

Premium Spacing

A consistent, generous spacing scale runs through every section, so the site never feels rushed or crowded.

04

Clear Navigation

Seven core pages are organised around how a prospective patient actually thinks — treatments, people, results, then trust.

05

Accessible Forms

Every field is clearly labelled, validated inline, and usable by keyboard alone — reassurance shouldn't stop at the visual design.

06

Patient-First UX

Every page leads toward a calm next step — a consultation, not a hard sell — reflecting how people actually decide on private healthcare.

Design Details

The craft behind the surface

Typography

Manrope carries structure, Inter carries body copy, and an italic serif accent marks quieter, more editorial moments.

Colour Palette

A deep navy and warm gold sit on a soft cream base — closer to a members' club than a waiting room.

Spacing

A generous, consistent spacing scale gives every section room to breathe, even on a content-dense page like Treatments.

Layout System

Each page varies its composition — split screens, editorial feature cards, horizontal timelines — so the site never feels like a repeated template.

Component Consistency

Rounded panels, soft shadows and a single accent colour repeat throughout, so every page still feels like one practice.

Animation Philosophy

Motion is restrained to fade-ups, hover lift and the occasional line-drawing reveal — calm by default, never decorative for its own sake.

Image Treatment

In place of stock photography, abstract gradient panels and fine line art carry the brand — deliberately avoiding generic clinical stock imagery.

Responsive Experience

Designed mobile-first

Every page — including the treatment filters, team grid and FAQ search — was designed to feel just as considered on a phone as it does on desktop, not simply stacked.

Harbour DentalBook Consultation
Private Dental Care · Chelsea

Dentistry, done with care — and considerable calm.

A private clinic built around unhurried appointments and honest advice.

Book a Consultation
15+ Years
4.9/5 Rated
GDC Registered
Harbour DentalBook Consultation

Treatments

CosmeticInvisalignImplantsGeneral
Porcelain VeneersFrom £950
InvisalignFrom £3,200
Dental ImplantsFrom £2,800

Performance & SEO Considerations

Built to be found, built to be fast

Built on Next.js with static generation, so every page loads instantly. Content is structured with proper heading hierarchy and semantic landmarks throughout, and every interactive element — accordions, filters, forms — is fully keyboard accessible.

Fast Load Times

SEO Foundations

Mobile Optimised

Technologies Used

Next.jsTypeScriptTailwind CSSFramer MotionLucide Icons

Project Gallery

A closer look

Homepage
Treatments
About
Meet the Team
Smile Gallery
FAQ
Contact
Mobile

Our Process

How this project came together

01

Research

Understanding the business, audience, and goals first.

02

Wireframes

Mapping structure and user flow before any visual design.

03

Design

Crafting the look, feel, and interactions around the brand.

04

Development

Building the site to be fast, responsive, and reliable.

05

Testing

Checking every page, device, and interaction before launch.

06

Launch

Going live, then staying on to support what comes next.

The Outcome

What the finished site achieves

Explores how editorial, premium design can make private healthcare feel more trustworthy before a patient ever calls.

Shows a considered, patient-first alternative to the transactional dental website template.

Harbour Dental is a fictional concept practice created for this portfolio. It is not a real dental clinic, and no part of the live site sends or stores real enquiries.

Like what you see?

Let's build something similar for your business — starting with a conversation, not a sales pitch.

Start a Project

No obligation. Response within one business day.