Bakery website design example: a $249 Starter and a $1,497 concept.

Who orders custom cakes, and what they need.

Custom cake studios are often run by the person who decorates. The people ordering are planning a birthday, a wedding or a work event, and they need three answers before they commit: what it costs, whether the date works, and what to do next.

In the five independent bakery sites I read, lead times ran from 2 to 3 days at one shop to 2 to 6 months for weddings at another, and deposits ranged from $25 or $50 to a $100 non-refundable deposit to full payment at order. Those are single data points from each bakery’s own pages, not an industry standard.

Days of emails before anyone names a price.

Across those five sites, here is what I found when I looked at the first screen and the ordering path:

• None of the five put a quote or order button on the first screen.
• Three of the five publish no price for custom cakes and send you to a quote form.
• One navigation had 14 links, so the quote link was one of many. On a phone, another site’s logo was cut off at the edge.
• None showed whether a date was workable before you wrote to them.

That became the brief for the demo: put the button on the first screen, say the price, and answer the date question honestly.

What I looked at, and what I could not.

I analyzed five real bakery sites for messaging, navigation, calls to action, ordering flow and trust signals, and read search results for the questions customers ask. The first pass used a text-only tool that could not judge typography or photography, so I took real browser screenshots of all five at desktop and phone size.

Limits: I did not use keyword volume data, so there are no search volume claims here. Two sites could not be reviewed (one returned an error and one loaded only its navigation), and the customer objections are inferred from bakery policy pages, not from interviews.

What each level shows, and where it stops.

The receipt reveal, in plain code.

The quote lines are visible by default. A script marks the card once it scrolls into view, and the style only hides the lines when motion is allowed and JavaScript is on, so nothing can stay invisible.

@media(prefers-reduced-motion:no-preference){
  .js .quote div{opacity:0;transform:translateY(6px);transition:opacity 250ms,transform 250ms}
  .js .quote.in div{opacity:1;transform:none}
}

(function(){var q=document.querySelector('.quote');if(!q)return;
if(!('IntersectionObserver' in window)||q.getBoundingClientRect().top<innerHeight*0.85){q.classList.add('in');return;}
window.addEventListener('beforeprint',function(){q.classList.add('in');});
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){q.classList.add('in');io.disconnect();}});},{rootMargin:'0px 0px -15% 0px'});io.observe(q);})();

One known limit: a tool that captures the page without scrolling shows an empty card there. The notes in the project say so, and printing forces the lines visible.

What I would tell the next client.

• Write the words first. The design gets easier when the order of the page is already decided.
• Put the price and the next step where people can see them. In my research none of the five sites put a quote button on the first screen.
• Let the checkers argue with you, then measure. A font and a background changed after a design checker flagged them, and a keyboard check found a footer focus ring that was brown on brown.
• Label what is a demo and what is custom. The scroll-driven 3D homepage, the cake builder, the 3D cake design and the booking calendar with order tracking are all part of the Complete package, and saying so is part of the work.
• Test the boring things: a phone, the keyboard, reduced motion and JavaScript off.

What was tested, and what was not

Tested in Chrome: automated accessibility checks (0 violations at the end, on every page at desktop and phone size), text contrast on every text style, keyboard use, 320 pixel width, text spacing, reduced motion and JavaScript off. Not tested: real screen readers, Safari, Firefox, real phones and slow connections. This is not a certification of accessibility.