Website

Darius — Photography Portfolio

"Natural, cinematic wedding photography — a portfolio that turns emotion into bookings."

A calm, editorial website for a wedding photographer, designed so couples can feel the work, understand what's offered, and reach out in a single tap. Every page lets the photography lead — building trust and emotion instead of pushing a sale.

Role: UX/UI DesignerCompletePhotographyPortfolioBooking

Home — Full Page

View full page

Home — Full Page

OVERVIEW

Problem

Photographers rely on scattered social feeds that can't tell a full story, present packages, or convert a visitor into a booking. Existing template sites feel like generic SaaS landing pages — cold, loud, and off-brand for intimate, human work.

Goal

Design and build a photography portfolio and booking funnel where the work is always the hero, trust is earned quietly, and reaching out is effortless — plus a self-service CMS so the studio stays current on its own.

Outcome

A shipped, production site with seven public pages (home, about, portfolio, project detail, services, packages, contact) and a full admin panel managing five content types, deployed on Vercel with Neon Postgres and Vercel Blob.

PROBLEM & STRATEGY

Problem

A wedding photographer lives on Instagram — but a feed can't hold a full wedding story, explain what's offered, or make booking frictionless. The photographer needed a home base that sells trust rather than spec sheets, and that they can keep current without a developer.

UX Challenge

The visitor arrives emotionally invested, usually on a phone, often comparing two or three photographers at once. The decision is driven by feeling — "can I trust this person with the most important day of my life?" — far more than by megapixels. The interface has to earn that trust in seconds, with the work as the hero and zero hard-sell.

Strategy

I committed to an editorial print-album aesthetic: warm cream canvas, charcoal ink, a single muted gold accent, and a Cormorant Garamond / Inter pairing, with photography always full-bleed. Quiet confidence over persuasion — no countdowns, no popups, no urgency theatre. Contact and WhatsApp stay one tap away. Behind it, a password-gated admin panel lets the studio manage projects, services, packages, testimonials and messages itself, backed by Neon Postgres and Vercel Blob.

Outcome

A cinematic, mobile-first funnel that turns a first impression into an inquiry — paired with a CMS that keeps the entire site alive without touching a line of code.

KEY METRICS

public pages designed and built

content types managed from the admin CMS

100%

responsive — mobile-first, one tap to contact

WCAG 2.1 contrast target across the palette

TARGET USERS

Couples & families

Romanian couples and families (mostly Oradea, Cluj and Transylvania) booking a photographer for a once-in-a-lifetime moment. Arrive on a phone, emotionally invested, comparing a few photographers — deciding on feeling, not features.

Studio owner (admin)

Runs the studio — manages projects, services, packages, testimonials and contact messages through the password-gated /admin panel, keeping the whole site current without a developer.

DESIGNED PAGES

UI DIRECTION

DESIGN PRINCIPLES

The photograph is the hero — chrome recedes, imagery leads every page with full-bleed heroes
Quiet confidence over persuasion — trust is earned by showing work, never by urgency theatre
Editorial calm — generous spacing, deliberate pacing, a serif/sans pairing that reads like a print album
Frictionless to reach out — contact, WhatsApp and booking are always one tap away
One coherent voice — public site and admin share tokens, type and interaction grammar
Restraint with gold — the accent is a 1px thread (dividers, focus, hovers), never a large fill
Cinematic, slow motion — a single signature easing for entrance reveals, not decoration
Reduced-motion first-class — every reveal, marquee and carousel has a prefers-reduced-motion path
Warm neutrals only — cream and ivory surfaces, never cold white or bright pink
Romanian, human copy — warm and emotional, about memory and feeling, not specs

Colour palette

Canvas & Surface

#F5F0E8Cream

#FFFDF7Ivory

#E8E0D5Stone Warm

#FBF7F0Ivory Raised

Ink & Text

#1A1A1ACharcoal

#736A5FWarm Gray

#7C7164Placeholder

#8B7355Taupe

Accent — Gold

#C9A84CGold

#E8D5A3Gold Light

#A8873AGold Dark

#DCC079Gold Soft

Decorative & State

#B8AFA6Muted

#D9CFC2Divider

#EFE8DCHover BG

TYPOGRAPHY & TECHNICAL SPECS

Stories

Display / Headings · Serif

Cormorant Garamond

300 Light400 Regular500 Medium600 SemiBold700 Bold

Hero titles, page headings, editorial display — large, airy, with italics

Display 2xlclamp(3rem, 7vw, 6.5rem) / 1.05 / ls −0.02em

Display xlclamp(2.25rem, 5vw, 4.5rem) / 1.08

Display lgclamp(1.75rem, 3.5vw, 3rem) / 1.1

Body / UI · Sans-Serif

Inter

300 Light400 Regular500 Medium600 SemiBold

Body copy, navigation, buttons, labels and eyebrows

Body16–18px / 1.7 / 400

Label / Eyebrow11–12px / uppercase / ls 0.25–0.35em

Button13px / uppercase / ls 0.18em

Stack

Vite

React + React Router + SSG

React 18 · Vite · react-router-dom · prerendered public routes

Data

Neon

Postgres + Vercel Blob

Serverless functions (@vercel/node) · Neon Postgres · Vercel Blob for images

Motion

0.22,1,0.36,1

Signature cinematic ease-out

0.3–1.4s reveals · staggered clip-path hero · reduced-motion paths

Accessibility

WCAG 2.1 target

Warm-neutral contrast verified; gold accent decorative-only

FINAL SCREENS

THREE PILLARS

The site is organised around the three things a visitor needs to decide, in order: see the work, understand the offer, and reach out — each a focused, full-bleed surface.

The Work

A filterable portfolio of full wedding, baptism and family stories — cover-led grid, category filters, and an immersive project detail with a lightbox gallery.

The Offer

Services and packages presented as an editorial spread — numbered, photographic, benefit-led, with a single quiet "request a quote" call to action instead of pushy pricing.

The Studio

About, testimonials and a frictionless contact funnel with WhatsApp one tap away — the trust-and-reach layer that turns a browse into a booking.

DESIGN PROCESS

Discover

User interviews
Competitor audit
Problem framing

Define

Personas
User flows
Information architecture

Design

Wireframes
Visual design
Prototype

Validate

Usability testing
Iteration
Handoff

RESEARCH INSIGHTS

Key findings

Phone-first

most couples browse and compare photographers on mobile, so every layout was designed thumb-first with contact one tap away.

2–3 rivals

a visitor is usually comparing a few photographers at once — the work has to earn trust in the first few seconds of the hero.

Feeling > specs

the booking decision is emotional, so copy speaks about memory and emotion, never megapixels or gear.

User voices

"I want to feel the photographer, not read a price list. Show me a whole wedding and I'll know if it's the right person."

Andreea, 28 — bride-to-be

"I update everything from my phone between shoots — I can't wait on a developer to add a new gallery or change a package."

Studio owner

LEARNINGS & NEXT STEPS

Key takeaways

For emotional purchases, showing the work beats describing it — the portfolio grid does more selling than any copy
A single restrained accent reads more premium than a full brand palette — gold works hardest as a hairline
A self-service CMS is a design deliverable, not an afterthought — the studio's tools must feel like the studio's brand

Next steps

Real client galleries and delivery links inside project detail
Availability calendar and deposit flow wired into the contact funnel
Testimonials with source verification and a Google-reviews import
Custom domain (dariuspavel.ro) and full SEO / Open Graph pass

IMPACT & SUCCESS METRICS

A shipped product — these are the KPIs the funnel and CMS were designed to move once real client work populates the site.

Inquiry Conversion

≥ 6%

Visitors who submit the contact form or open WhatsApp from a session

Time to Contact

< 60s

From landing to the contact/WhatsApp tap on mobile

Content Autonomy

100%

Site content the studio can edit without a developer

Portfolio Depth

15+

Full stories the grid is architected to hold without redesign

ACCESSIBILITY AUDIT

The warm cream palette is the main contrast risk, so every text pairing was verified against WCAG 2.1 AA. Where the brand accent can't meet AA, it's used deliberately as decoration with redundant cues, never as essential small text.

Contrast ratios

Charcoal ink on cream

#1A1A1A on #F5F0E8

15.1:1

AAA

Warm-gray labels on cream

#736A5F on #F5F0E8

4.68:1

Placeholder text on ivory

#7C7164 on #FFFDF7

4.69:1

Body on ivory card

#1A1A1A on #FFFDF7

16.4:1

AAA

Gold accent (decorative only)

#C9A84C on #F5F0E8

2.0:1

—

Accessibility checklist

Warm-gray deepened (#8C8075 → #736A5F) so all labels/body clear AA

prefers-reduced-motion path for reveals, hero, marquee, shimmer, carousel

Visible gold :focus-visible rings on all interactive elements

Touch targets ≥ 44×44px on mobile

Romanian content with correct diacritics; descriptive alt text

Gold-as-text kept ~2:1 only for large display italics with redundant cues

Full screen-reader pass on the booking funnel

Gold #C9A84C as text is a deliberate, documented tradeoff — preserved as a brand accent on large display type with underlines/other cues, never for essential small body copy.

DESIGNER'S REFLECTION

"This was the project that taught me restraint. The temptation with a photography site is to decorate — gradients, glass, big gold fills. The right move was the opposite: get out of the way and let the photographs carry the whole thing. Every design decision became a subtraction, not an addition.

Building the CMS alongside the public site was the real lesson — the studio's tools have to feel like the studio's brand, or the whole thing falls apart the first time the owner adds content. If I did it again, I'd design the admin panel in parallel from day one instead of treating the public site as the "real" design."

— Raluca Indrecan, UX/UI Designer

What I'd do differently

Design the admin CMS in parallel with the public site, not after

Verify warm-neutral contrast early — it's the whole palette's risk

Populate with real client work before launch, not placeholders

Wire the availability + deposit flow into the funnel

Want to discuss this project?

Get in touch

All projects