Source：wearewoodid.com ↗ Checked 2026.10.30
Editor's note
What this site does
A French maker of engraved wooden race trophies that splits ordering by occasion and shows the custom build as four steps that take under two minutes.
Conversion
Notes
What you see
A thin bar at the top announces a launch price of €49 instead of €59, and an orange "Créer un trophée" (create a trophy) button sits at the left end of the header. The first screen shows the trophies with a price badge, the headline "the best gift for a sporting adventure", two buttons — create your own or browse official races — and a "Compatible with Strava" line.
Next come three cards by occasion: for yourself, as a gift for someone who runs or rides, and as a Christmas present, with a note that orders placed before 19 December arrive in time. Then a grid of trophies with official race routes already in place (Paris Marathon, the 100 km de Millau, the Col du Tourmalet), four numbered steps under the heading "ready in under two minutes", customer reviews, seven FAQs and a short brand story.
What to take from it
The same product is bought for different reasons. Giving each reason its own card and button lets people start from their situation rather than from the product.
Custom products look like hard work to order. Breaking the build into four short steps, saying how long it takes, and offering ready-made versions for popular races gives both the careful planner and the quick buyer a clear way through.
Typography
Typefaces
| Element | Desktop size / weight | Desktop line height | Mobile size / weight |
|---|---|---|---|
| h1 | 30px / 700 | 1.20 | 30px / 700 |
| h2 | 30px / 700 | 1.20 | 30px / 700 |
| h3 | 20px / 700 | 1.20 | 16px / 700 |
| Body (p) | 14px / 700 | 1.20 | 14px / 700 |
| Button | 0px / 400 | NaN | 0px / 400 |
Measured values (desktop 1440px, mobile 375px, 2026.10.30). 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 Woodid 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
