Nico Bodmer

Back to work

Two sample projects

A joinery and a solar installer, both fictitious. Two goals, two distinct identities.

Year
2026
Role
Concept, design, implementation and copy
Type
Websites
Technology
HTML, CSS, JavaScript, Lighthouse, Playwright
Home page of Firstlicht Solartechnik, a fictitious business, in a dark design with a house with solar panels and a time-of-day slider
odera.ch/musterprojekte/firstlicht, desktop. Fictitious business.

So that businesses can see how an ODERA site works, I implemented complete websites for two fictitious businesses, using AI-assisted development.

Starting point

A description convinces a business less than a site it can try for itself. I do not show real client projects. So the examples need to be complete and clearly marked as fictitious.

Goal

Two businesses with different goals: the joinery wants phone calls, the solar installer wants prepared enquiries. Each site should show how the design follows that one goal, rather than being one template in different colours.

Schreinerei Doppelmeter

Standard package, 5 pages. The goal of the site is the phone call, so the number is on every screen: as a button at the top right and, on phones, in a fixed bar at the bottom.

The design is calm and crafted: warm paper white, a serif typeface for the large headings, dark green for the buttons and a large photo of a kitchen with a caption. Small lines such as the founding year are set in a typewriter face.

Joinery Doppelmeter on desktop, a fictitious business: German headline about furniture your grandchildren will still use, a call button and a photo of a kitchen Joinery Doppelmeter on a phone, a fictitious business, with a fixed call bar at the bottom

Firstlicht Solartechnik

Pro package, 6 pages. The goal is the prepared enquiry: a solar calculator works out the numbers, and the result goes straight into the form.

The identity is dark with orange as the accent, with a switch for light and dark. The hero shows an illustrated house with solar panels. A slider moves the time of day, and production, consumption, storage and feed-in follow along, for summer or winter. On phones, «call» and «calculator» stay within reach at the bottom. The switch «Was ist hier besonders?» numbers seven spots on the page and explains them.

Firstlicht Solartechnik in explanation mode, a fictitious business, with numbered markers and a box explaining what is special Firstlicht Solartechnik on a phone, a fictitious business, with call and calculator buttons at the bottom

Decisions

  • Fictitious and labelled as such everywhere. Each site carries a note at the top saying it is a sample page by ODERA Design and the business is made up.
  • One goal per site. Everything on the site leads to the call or the enquiry.
  • Two distinct identities. Type, colours and imagery follow the business, not a shared template.
  • Measure instead of claim. Load times and Lighthouse scores are recorded with method and date.

Result

Two complete websites that businesses can try for themselves on odera.ch. The measurements are listed below with source and date.

Measurements

Load time Doppelmeter, until the largest content is visible
0.5 s 1
Load time Firstlicht, until the largest content is visible
0.4 s 2
Firstlicht, Lighthouse mobile for performance, accessibility and best practices
100 3
Firstlicht, weight per page
84 to 107 KB 4
  1. Lighthouse desktop, median of three runs, slowest of the five pages, 1 October 2026.
  2. Lighthouse desktop, median of three runs, slowest of the six pages, 5 October 2026.
  3. Lighthouse mobile, all six pages, 5 October 2026.
  4. Lighthouse mobile, all six pages, 5 October 2026.

Technology

HTML, CSS, JavaScript, Lighthouse, Playwright

What I learned

Two businesses with different goals need two different sites, not one template in different colours. Fast pages come mostly from leaving things out: little JavaScript, optimised images, no third-party services.