03 — Web Design

Serenamente.

A full landing page for a hair salon in Ravenna — services showcase, interactive mosaic gallery, booking CTA, embedded Google Maps, and a mobile-first experience with a full-screen overlay menu and floating call-to-action bar.

Role

Designer & Developer

Year

2025

Stack

Vanilla JS · HTML/CSS · Google Maps

Status

Live ↗

GitHub

View Source ↗

Live Site

Open Site ↗

What

Serenamente is a hair salon — parrucchieri donna & uomo — located at Via Bovini 28, Ravenna. The website presents the salon's identity through a warm, typographically rich aesthetic using Cormorant Garamond (serif) paired with Jost (sans-serif): a calm, elevated tone that reflects the brand name itself.

The site covers the full discovery-to-booking journey: a full-screen hero with the salon tagline, a 6-service grid with pricing, a photo gallery preview mosaic linking to a dedicated gallery page, an "About" section with a brand quote, a booking CTA with phone and hours, and an embedded live Google Maps view.

· · · ◆ · · ·

Why

The salon relied entirely on word-of-mouth and an Instagram account. Potential new clients had no way to browse services, check prices, or find the address without messaging directly. A professional web presence was overdue.

The design needed to convey calm, feminine sophistication without feeling cold. Warmth came from the terracotta accent colour, soft cream backgrounds, and the Cormorant Garamond typeface. Functionality came from making the phone number and booking CTA impossible to miss on mobile.

Mosaic Gallery Preview

A 6-cell CSS grid mosaic with asymmetric spanning — the first cell spans 2 columns and 2 rows for visual hierarchy. Each cell has hover zoom on the photo, a gradient overlay, and a label that fades in on hover. Clicking any cell navigates to the dedicated full gallery page. Placeholder divs are shown if images are missing — no broken layouts.

Mobile-First Experience

On mobile, the desktop nav is replaced by an animated hamburger button that triggers a full-screen overlay menu with staggered link entrance animations. A persistent floating bar at the bottom of the screen shows the salon's phone number and a "Prenota" button — one tap to call, always visible. This was the most impactful UX addition for a physical-service business.

· · · ◆ · · ·

Outcome

What shipped

Full landing page (hero, services grid, gallery preview, about, booking, map, social, footer) plus a separate dedicated gallery page. IntersectionObserver-powered scroll animations throughout. Fully responsive — separate mobile menu overlay, floating bottom CTA bar, and adapted grid layouts at 480px and 900px breakpoints.

What I learned

Designing for a service business with a female-skewing clientele requires a fundamentally different visual language than a tech product. Serif typography, warm colours, generous whitespace, and soft transitions communicate trust and care — not just aesthetics, but conversion signals. The floating mobile CTA bar, added late in development, dramatically simplified the path from discovery to contact.

NEXT PROJECT

Space Blog →

↗