Webdesign Studio
Case Study Webseite

LeoFlex Website

Die Marketing-Website von LeoFlex — eigenständig gestaltet, kein Klon des Systems. Moderne Webtechnologien, ein eigenes Designsystem und Contao als CMS.

Technisch umgesetzt mit Contao
Eigenständig designed

Kein Klon — eine eigene Bühne für die Marke

Das Dashboard folgt bewusst dem vertrauten apaleo-Look. Die Website darf etwas anderes: Sie verkauft. Eigene Bildsprache, eigenes Designsystem — aber dieselbe Marken-DNA aus Orange und klarer Typografie.

Das Designsystem

Farben, Typo und Komponenten

Ein schlankes, konsistentes System trägt die ganze Website — dieselbe Sprache wie das Produkt, nur fürs Marketing übersetzt.

Logo
LeoFlex Logo weiß
LeoFlex Logo in Grau und Orange

Auf dunklem Hintergrund komplett weiß, auf hellem in Grau & Orange. Das „X" bleibt als eigenständige Bildmarke erkennbar.

Farben
Orange
#E8941B
Primär · Signal & Aktion
Orange tief
#C97A0E
Hover & Akzent
Grau-Blau
#565D7B
Sekundär · Text & UI
Hellgrau
#E2E1EA
Flächen & Rahmen
Ink
#1B1B1D
Headlines auf Hell
Typografie
Aa
Roboto Regular 400
Roboto Medium 500
Roboto Mono Code · Daten
Komponenten · Material Inputs

Eingabefelder mit mitwandernder Beschriftung — im vertrauten Material-Stil. Klicken Sie hinein:

Iconografie · Material Symbols

Dieselbe Icon-Familie wie apaleo — konsistent über Website und System.

Galerie

Die Website in Szene

Sechs Stationen durch die LeoFlex-Website, jede in Hell und Dunkel. Ziehen Sie den Regler über das Bild, um beide Designs zu vergleichen — und scrollen Sie weiter zur nächsten Station.

Startseite

Dieselbe LeoFlex-Startseite im hellen Design
Startseite der LeoFlex-Website mit der Überschrift „Machen Sie mehr aus Ihrem apaleo“ im dunklen Design

Klare Botschaft, starker Call-to-Action: Das Nutzenversprechen sitzt in Sekunden, der kostenlose Test ist nie mehr als einen Klick entfernt — Webdesign, das auf Conversion ausgelegt ist.

Scroll-Story

Dieselbe Scroll-Sektion im hellen Design
Scroll-Sektion der LeoFlex-Startseite „Ihr AI Agent für Gästenachrichten“ mit Messaging-Ansicht im dunklen Design

Storytelling statt Textwüste: Die Module inszenieren sich in einer flüssigen Scroll-Dramaturgie — modernes Scrollytelling, performant umgesetzt und trotzdem barrierefrei.

Zusammenspiel

Dasselbe Integrations-Diagramm im hellen Design
Sektion „Tief in apaleo integriert“ mit Diagramm des Datenflusses von apaleo über LeoFlex zu OTAs, Messaging, Smart Locks und Meldewesen im dunklen Design

LeoFlex ist die Schnittstelle zwischen apaleo und den angebundenen Diensten — von der Gästekommunikation bis zu Smart Locks. Die Integrationsgrafik übersetzt diese Architektur in ein Bild, das Hoteliers ohne IT-Wissen sofort verstehen.

Module

Dieselbe Messaging-Modulseite im hellen Design
Modulseite Messaging „Jede Gästenachricht. Ein Posteingang.“ mit Posteingang-Vorschau und Preis ab 25 € pro Monat im dunklen Design

Jedes Modul hat seine eigene Landingpage: klarer Nutzen, transparenter Preis, echter Produkteindruck — Seiten, die verkaufen, statt nur zu beschreiben.

Navigation

Dasselbe Navigationsmenü im hellen Design
Bildschirmfüllendes Navigationsmenü der LeoFlex-Website mit Modulliste, apaleo-Beratung, Support, Kontakt und Testkonto-Karte im dunklen Design

Navigation als Designelement: Das Vollbildmenü macht Orientierung zum Erlebnis und bringt jeden Bereich der Website einen Fingertipp nah — am Smartphone genauso wie am Desktop.

Assistenz

Dieselben drei Helfer im hellen Design
Drei Helfer der LeoFlex-Website übereinander: Barrierefreiheit-Panel, Cookie-Einstellungen und der KI-Chat Leo im dunklen Design

Service auf jeder Ebene: einstellbare Barrierefreiheit, ein DSGVO-konformer Cookie-Dialog und der KI-Assistent Leo für Fragen zu Modulen und Preisen — Details, die Vertrauen schaffen.

Technik

Modern gebaut, sauber gepflegt

Schnell, barrierefrei und vollständig im Backend pflegbar — auf einer Basis, die sich auch in fünf Jahren noch warten lässt.

Contao als CMS

Robustes, datenschutzfreundliches Open-Source-System — vollständig im Backend pflegbar, ganz ohne Programmierkenntnisse.

Schnell & stabil

Kurze Ladezeiten, ruhige Layouts und automatisch optimierte Bilder für jedes Gerät.

Mehrsprachig

Deutsch & Englisch, sauber über den Seitenbaum gepflegt.

Datenschutz zuerst

Nichts Externes lädt vor der Einwilligung — Hosting und KI bleiben in der EU.

Gemessen, nicht behauptet

Werte, die man sonst nur verspricht

Das sind keine Wunschzahlen, sondern echte Ergebnisse von Google PageSpeed Insights — dem Maßstab, an dem Google Websites misst. Höher geht kaum: Bei Best Practices und SEO stehen glatte 100 von 100.

Auch für KI-Agenten lesbar

Und die Core Web Vitals im Detail

Largest Contentful Paint2,1 s Im Bereich
Wann der größte Inhalt sichtbar ist
Cumulative Layout Shift0 Im Bereich
Wie ruhig das Layout beim Laden bleibt
Total Blocking Time0 ms Im Bereich
Wie lange die Seite auf Eingaben blockiert
Speed Index2,9 s Im Bereich
Wie schnell die Seite sichtbar vollständig ist
First Contentful Paint1,8 s Grenzbereich
Wann der erste Inhalt erscheint

Grün gestrichelt = von Google empfohlener Zielbereich · gemessen mit Google Lighthouse (mobil, gedrosseltes 4G).

HTTP/3 & HTTP/2 — ganz ohne CDN

HTTP/3 (QUIC) und HTTP/2 laufen direkt am Server. Ein DNS-HTTPS-Record kündigt h3, h2 an, sodass der Browser sofort die schnellste Verbindung wählt. Kein teurer CDN-Umweg — die Spitzenwerte kommen aus sauber gebauter Technik.

Top-Werte sogar bei langsamem 4G

Gemessen unter Mobilfunk-Drosselung auf einem Mittelklasse-Handy — genau dort, wo viele Websites einbrechen. Schnell für alle, nicht nur für Highend-Geräte.

Bilder automatisch in AVIF/WebP

Contao erzeugt jedes Bild automatisch in modernen Formaten und exakt passender Größe — gestochen scharf auf jedem Gerät, bei minimalem Datenvolumen.

Barrierefrei & auffindbar

Saubere Überschriften-Struktur, volle Tastaturbedienung und geprüfte Kontraste — von Google mit 96 / 100 bestätigt.

Die 96 statt 100 Punkte bei der Barrierefreiheit sind eine bewusste Marken-Entscheidung: Der apaleo-Designbereich nutzt Weiß auf Orange. Wer maximale Lesbarkeit braucht, schaltet mit dem eingebauten Barrierefreiheits-Panel jederzeit auf kontraststarke Farben um — dann stimmt auch der Kontrast.

Ihr Auftritt

Eine Website, die verkauft.

Eigenes Design, moderne Technik, Contao als wartbares Fundament — genau das bringe ich auch für Ihr Projekt mit.