TITUS ORIGINALCreate With Titus Original

FEATURED PROJECT

The Original Barber

A complete website designed and built by Titus Original for a fictional barbershop: a confident brand, a fast mobile site and a booking path that is always one tap away.

Built by Titus Original Demonstration, not a client project

Open the live website ↗

An honest note. The Original Barber is a real website we designed and built from start to finish, but the barbershop is fictional. Every business detail, price and review in it is invented, and the images were created for the demo. We made it to show what we do for appointment-led businesses. Try the live website: browse the services, open the gallery and book a (pretend) appointment.

DESKTOP AND MOBILE

Designed for both, on purpose.

The Original Barber homepage on desktop: a photo of the shop interior behind the headline 'Cut with intention.' and a Book your chair button.

The shop itself is the first thing you see. A live "Open now" label reads the opening hours, the header condenses as you scroll, and "Book a Cut" is always close.

The Original Barber on a phone: the hero with the headline and a Book a Cut button.
The services list on a phone, with tabs for Cuts, Beard and Shave, and Packages.
The booking steps on a phone: service, barber, day and a grid of free times, with a sticky Book a Cut bar.

On a phone there is a full-screen menu, tap-to-book services and a sticky "Book a Cut" bar that slides up once you start scrolling, so booking is never more than a tap away.

KEY SECTIONS

A page that walks you to the chair.

The Craft section of The Original Barber.
The Craft. The shop's story, told with photos of the work.
The Services section: tabs, a changing photo and clear prices.
Services. Tabbed price lists. Tap a service and it is added to your booking.
The Gallery section: a grid of photos of the shop, tools and cuts.
Gallery. A photo grid that opens into a full-screen viewer.
The Barbers section introducing the team.
The barbers. Each barber's speciality, their work, and a "Book with" link.
The Visit section with a photo of the shopfront and opening hours.
Visit. The shopfront, directions, and opening hours with today highlighted.
The Booking section: choose a service, barber, day and time, with a live summary and price.
Booking. Four quick steps with free and taken times, a live price and a confirmation.

DESIGN DETAILS

What went into it.

  • ColourDeep charcoal, warm bone and brass: a calm, premium palette.
  • TypographyFraunces for headlines and Inter for text.
  • ImageryWarm, low-light images of the shopfront, chairs, tools and finished cuts, all carrying the brass "T" monogram.
  • Mobile-first bookingA sticky Book a Cut bar and a full-screen menu on phones.
  • Built withHand-written HTML, Tailwind CSS and a little plain JavaScript. No heavy framework, so it loads fast.
  • The booking flowA front-end demonstration only. It shows a confirmation and doesn't send anything anywhere. On a real site it would connect to a booking system.

Want something like this?

Tell us about your business. We'll build around what you actually need.

Create With Titus Original →Open the live website ↗Back to all work →