Left Background
Right Background
UI / UX Design

Barbaros Barbers Davos

Barbaros Barbers Davos is a premium landing page that blends traditional craftsmanship with a modern, dark-themed experience to build brand authority and drive bookings.

Hero
2020
Year
Duration
UI / UX Design
Category

Project Overview

The Challenge.

Create a high-end digital experience that showcases services and craftsmanship without overwhelming users or losing the brand's rugged yet refined identity.

The Solution.

Designed a sleek dark UI with strong hierarchy, impactful imagery, and clear CTAs to guide users smoothly from exploration to booking.

User-CentricScalable ArchitectureData-Driven

Information Architecture

Mapping the Journey.

User Flow Diagram

User flow visualization showing the primary path from onboarding to core task completion, ensuring minimal friction and logical hierarchy.

Foundation

System Language.

Typography

Primary / Playfair Display , Montserrat

Abc

Heading 1

Bold 32pt

Body Copy

Regular 16pt / Line-height 1.6

Color Tokens

#E61E25

#0B0B0B

#C0C0C0

UI Elements

Enter email...

The Reveal

High-Fidelity
Solutions.

01

Visual Proof Engine

A curated selection of high-resolution images showcasing the shop's work.

  • Increases social proof
  • sets expectations for quality
  • reduces user anxiety
Visual Proof Engine
02

Strategic Booking Flow

High-contrast red Book Now buttons placed at the top and bottom of the page.

  • Optimizes conversion rates
  • provides clear next steps
  • minimizes navigation time
Strategic Booking Flow
03

Expertise Breakdown (Services)

Icon-based cards explaining specific grooming services.

  • Enhances scannability
  • educates the user on service variety
  • helps with SEO keywords
Expertise Breakdown (Services)

Live Preview

Interaction Design.

Experience the flow firsthand through this interactive prototype focusing on micro-interactions and seamless transitions.

Interactive Mode

Reflections

Project Key
Takeaways.

The Power of Negative Space

learned that in dark-themed designs, white space (or black space) is crucial to prevent the UI from feeling heavy or claustrophobic.

Visual Hierarchy in Photography

I discovered that the quality of the imagery dictates the perceived value of the design. Using professional, consistent lighting in photos is what makes a UI look Senior level.

Simplifying UX Logic

Initially, I wanted to show every detail at once, but I learned that progressive disclosure (showing information as the user scrolls) leads to a better user experience and less cognitive load.