Source：unionboulangerie.com ↗ Checked 2026.10.21
Editor's note
What this site does
A Paris neighbourhood bakery whose first-screen buttons are its two shop names, each opening walking directions in Google Maps.
Conversion
Notes
What you see
A video of the ovens, the line "a neighbourhood bakery for the neighbourhood", and two buttons: "Union 09 Arr." and "Union 11 Arr." Each one opens Google Maps directions to that shop.
Further down, each shop gets its address and opening hours by day — the 9th closes at 15:00 on Saturdays, the 11th at 20:00, both are closed on Sundays — and a third shop on the Left Bank is announced as "coming soon". Suppliers are named with their places: the organic flour mill in the Yvelines, a beekeeper near Avignon, a Normandy dairy cooperative. The contact form asks you to choose catering, trade orders for restaurants, hotels and cafés, or anything else.
What to take from it
For a shop-led business, the first question is "where is it and how do I get there". Making the first buttons the shop names, and sending them straight to directions, answers it in one tap.
Opening hours split by day, a named supplier rather than "local ingredients", and a contact form that sorts trade enquiries from the start are all small things a neighbourhood food business can copy directly.
Typography
Typefaces
| Element | Desktop size / weight | Desktop line height | Mobile size / weight |
|---|---|---|---|
| h1 | 40px / 80 | 1.00 | 24px / 80 |
| h2 | 40px / 80 | 1.00 | 24px / 80 |
| h3 | 16px / 80 | 1.00 | 16px / 80 |
| Body (p) | 16px / 400 | 1.20 | 14px / 400 |
| Button | 16px / 400 | 1.00 | 16px / 400 |
Measured values (desktop 1440px, mobile 375px, 2026.10.21). The most frequent setting for each element is shown. Sites that use h1 for a logo or small label will show a small h1.
Download
Download the wireframe
This structure, as a wireframe you can edit in Figma
The page structure above, rebuilt from DevNJ's wireframe parts. It contains none of the original site's copy, images or code.
Using it in Figma
- Download the SVG.
- Drag and drop the file onto a Figma canvas.
- It opens with one layer group per section — start by reordering sections or replacing the copy.
Text comes in as text layers (set in Noto Sans JP).
Screenshots are shown at reduced size as quotations supporting the commentary. All rights in the design, copy and images belong to Union Boulangerie and their respective owners. The wireframes are not copies of the original site; they rebuild its structure from DevNJ's parts. Owners or designers who would like this entry removed or corrected can contact us; we respond within two business days. Featured on: siteInspire
