Nico Bodmer

Zurück zu Arbeiten

Zwei Muster­projekte

Eine Schreinerei und ein Solarinstallateur, beide frei erfunden. Zwei Ziele, zwei eigenständige Auftritte.

Jahr
2026
Rolle
Konzept, Gestaltung, Umsetzung und Texte
Typ
Websites
Technik
HTML, CSS, JavaScript, Lighthouse, Playwright
Startseite von Firstlicht Solartechnik, frei erfundener Betrieb, dunkel gestaltet, mit einem Haus mit Solaranlage und einem Regler für die Tageszeit
odera.ch/musterprojekte/firstlicht, Desktop. Frei erfundener Betrieb.

Damit Betriebe sehen, wie eine ODERA-Seite funktioniert, habe ich für zwei frei erfundene Betriebe vollständige Websites umgesetzt, mit KI-gestützter Entwicklung.

Ausgangslage

Eine Beschreibung überzeugt einen Betrieb weniger als eine Seite, die er selbst bedienen kann. Echte Kundenprojekte zeige ich nicht. Also braucht es Beispiele, die vollständig sind und klar als erfunden gekennzeichnet.

Ziel

Zwei Betriebe mit verschiedenen Zielen: Die Schreinerei will Anrufe, der Solarinstallateur vorbereitete Anfragen. Jede Seite soll zeigen, wie die Gestaltung diesem einen Ziel folgt, und keine Vorlage in anderen Farben sein.

Schreinerei Doppelmeter

Paket Standard, 5 Seiten. Ziel der Seite ist der Anruf, darum steht die Telefonnummer auf jedem Bildschirm: oben rechts als Knopf und auf dem Handy in einer festen Leiste unten.

Die Gestaltung ist ruhig und handwerklich: warmes Papierweiss, eine Serifenschrift für die grossen Überschriften, Dunkelgrün für die Knöpfe und ein grosses Foto einer Küche mit Bildunterschrift. Kleine Zeilen wie «Schreinerei in Hobelwil, seit 1961» stehen in einer Schreibmaschinenschrift.

Schreinerei Doppelmeter auf dem Desktop, frei erfundener Betrieb: Überschrift «Möbel, die Ihre Enkel noch benutzen.», Knopf «Jetzt anrufen» und Foto einer Küche Schreinerei Doppelmeter auf dem Handy, frei erfundener Betrieb, mit fester Leiste «Anrufen» unten

Firstlicht Solartechnik

Paket Pro, 6 Seiten. Ziel ist die vorbereitete Anfrage: Ein Solarrechner rechnet vor, das Ergebnis wandert direkt ins Formular.

Der Auftritt ist dunkel mit Orange als Akzent und hat einen Umschalter für Hell und Dunkel. Im Hero steht ein Haus mit Solaranlage als Illustration. Mit einem Regler verschiebt man die Tageszeit und sieht Produktion, Verbrauch, Speicher und Einspeisung mitlaufen, wahlweise für Sommer oder Winter. Auf dem Handy bleiben «Anrufen» und «Rechner» unten erreichbar. Mit dem Schalter «Was ist hier besonders?» nummeriert die Seite sieben Stellen und erklärt sie.

Firstlicht Solartechnik im Erklär-Modus, frei erfundener Betrieb, mit nummerierten Markierungen und dem Kasten «Was ist hier besonders?» Firstlicht Solartechnik auf dem Handy, frei erfundener Betrieb, mit den Knöpfen «Anrufen» und «Rechner» unten

Entscheidungen

  • Frei erfunden und überall so gekennzeichnet. Jede Seite trägt oben den Hinweis «Beispielseite von ODERA Design. Der Betrieb ist frei erfunden.»
  • Ein Ziel pro Seite. Alles auf der Seite führt zum Anruf bzw. zur Anfrage.
  • Zwei eigenständige Auftritte. Schrift, Farben und Bildsprache folgen dem Betrieb, nicht einer gemeinsamen Vorlage.
  • Messen statt behaupten. Ladezeit und Lighthouse-Werte sind mit Methode und Datum festgehalten.

Ergebnis

Zwei vollständige Websites, die Betriebe auf odera.ch selbst ausprobieren können. Die Messwerte stehen unten mit Quelle und Datum.

Messwerte

Ladezeit Doppelmeter, bis der grösste Inhalt sichtbar ist
0,5 s 1
Ladezeit Firstlicht, bis der grösste Inhalt sichtbar ist
0,4 s 2
Firstlicht, Lighthouse mobil für Leistung, Barrierefreiheit und Best Practices
100 3
Firstlicht, Gewicht pro Seite
84 bis 107 KB 4
  1. Lighthouse Desktop, Median aus drei Läufen, langsamste der fünf Seiten, 1. Oktober 2026.
  2. Lighthouse Desktop, Median aus drei Läufen, langsamste der sechs Seiten, 5. Oktober 2026.
  3. Lighthouse mobil, alle sechs Seiten, 5. Oktober 2026.
  4. Lighthouse mobil, alle sechs Seiten, 5. Oktober 2026.

Technik

HTML, CSS, JavaScript, Lighthouse, Playwright

Was ich gelernt habe

Zwei Betriebe mit verschiedenen Zielen brauchen zwei verschiedene Auftritte, nicht eine Vorlage in anderen Farben. Schnelle Seiten entstehen vor allem durch Verzicht: wenig JavaScript, optimierte Bilder, keine fremden Dienste.