Self-check

Portfolio

Demo

Website for a photography studio

A website for newborn and family photography, with a 3D camera you can rotate and a calculator for the best date to book a session.

Type
Technical demonstration · website
Status
A demonstration with a fictional studio, text and prices; photographs from Unsplash
Technology
HTML, CSS and JavaScript, with no libraries
Language
German
Home page of the fictional Kleinwunder studio: the headline “Die ersten Tage, festgehalten” and a 3D camera with photographs playing on its screen.
Home page of the fictional Kleinwunder studio: the headline “Die ersten Tage, festgehalten” and a 3D camera with photographs playing on its screen. Tap the image to see it at full size.
The same page on a phone, with the menu button and a bar that stays in view to call or ask for a booking.
The same page on a phone, with the menu button and a bar that stays in view to call or ask for a booking. Tap the image to see it at full size.
The four types of session with photographs and starting prices for maternity, newborn, baby and family sessions.
The four types of session with photographs and starting prices for maternity, newborn, baby and family sessions. Tap the image to see it at full size.

The starting point

In newborn photography studios, timing is everything: the calmest photographs are taken in the first two weeks of life, and that means booking while the baby is still on the way. Many studio websites are slow, show the prices late and don't explain when to book. The idea: a fast page that brings photographs, packages and booking together into one clear path.

What was done

  • A 3D camera built with CSS alone, which you rotate by dragging or with the arrow keys; photographs from the studio play on its screen.
  • A due date calculator: it shows the days for a posed session and for a lifestyle session, and says whether this is a good time to book.
  • Sessions, packages with prices and frequently asked questions, all on a single page.
  • On a phone, a fixed bar to call or ask for a booking.

Decisions that made a difference.

The date comes first.

The calculator answers the first question an expectant parent has, before they go looking for prices.

Fast, even with many photographs.

Images at the right size, fonts hosted on the site itself and no website builder.

Calm movement.

Photographs and text appear gently as you scroll; anyone who asked for less movement in their system settings sees everything straight away.

Data and privacy

The demonstration stores nothing: the calculator runs in the browser and there's no form. Fonts and images are on the site itself, with no connections to Google. In a real version, booking requests would arrive by email or through the studio's booking tool, with a privacy policy in line with the Swiss Federal Act on Data Protection (FADP).

See the project

Open the demonstration

A fictional studio, in German: names, text, prices and contact details are made up, and the photographs come from Unsplash.

Next case

DemoSnackBoxA responsive web app to record what people take, keep an eye on stock and settle the accounts of an office snack box.See the case

Would you like something similar for your business?

Tell me what you use today and what you would like to simplify. I'll explain what I'd recommend and what the project would include.

Talk to me