Concept project

Maple & Rye Bakery

A sample redesign for a made-up neighborhood bakery, from the first call to launch. Maple & Rye isn't a real business and the photos are free stock images, but the steps, pages and prices are exactly how a Main & Front project works.

The new Maple & Rye home page on a laptop, with the headline Bread worth getting up early for, an Order ahead button and a photo of fresh loaves
The same home page on a phone, with today's hours at the top and a full-width Order ahead button

The brief

The bakery's old site was one long page with a 4 MB PDF menu. On phones, customers had to pinch and zoom to find the hours, and ordering meant printing a Word form.

The owner wanted three things: hours and location at a glance, a menu people can read on a phone, and online pre-orders, so weekend bread stops selling out before the regulars arrive.

Before and after

Drag the handle, or use the arrow keys, to compare the old home page with the new one.

Before: a dated page with a script-font banner, a sidebar of links, a PDF menu and the hours at the very bottom. After: the hours and an Order ahead button at the top, a large photo and a menu you can read.

Before, on a phone: the old desktop page shrunk to fit, with text too small to read
Before. The desktop page, shrunk to fit a phone.
After, on a phone: large text, today's hours and an Order ahead button
After. Built for phones first, then laptops.

Pages on a phone

Five pages in all: Home, Menu, Order ahead, Visit and Our story.

Menu page: croissants, bread of the day and coffee, each with a photo and price
Menu. Prices and photos instead of a PDF.
Order ahead page: three numbered steps and a Start an order button
Order ahead. Three steps, no printing.
Visit page: opening hours, a Get directions button and a map
Visit. Hours and directions in one place.

What it would cost

At the posted prices

  • Business website, five pages$1,200
  • Google Business Profile setup$100
  • One-time total$1,300
  • Standard care plan$100 a month

A real bakery would add a brand photo session ($300), so photos of its own bread, counter and team replace the stock images.

Colors and fonts

  • Cream#F7F1E7, background
  • Maple#9C3D23, buttons
  • Honey#D9A441, details
  • Rye#2A1C12, text

Young Serif for headings and Figtree for text, the Warm and welcoming pair in the style builder. The layout started from the Harbor template.

How it came together

About four weeks from the first call to launch, the usual time for a Business build.

  1. Week 1: Call and content

    A 30-minute call, then the menu, hours, logo and photos gathered in one shared folder.

  2. Week 2: Design

    The Harbor layout in the bakery's own colors and fonts, approved on a phone and a laptop.

  3. Week 3: Build and review

    All five pages built, with two rounds of changes.

  4. Week 4: Launch

    The site goes live, the Google listing gets the new hours and links, and the care plan starts.

Want a site like this?

Every project follows the same steps, with posted prices and a written contract.

Start a projectBrowse templates

Photos from Pexels, free to use under the Pexels license: croissant by Marcelo Verfe, breads in baskets by Maria Fernanda Perez, dough by Skyler Ewing, and the bread loaves and coffee photos.