Ein Hero-Video für die Startseite
Für den Kopf der Startseite wünschte sich Fabian Becker ein bewegtes Video. Ich habe dafür offizielles Material der Hersteller gesichtet und zu einem Hero-Video zusammengeschnitten.
Fallbeispiel · Bürotechnik
Die neue Website für Ordnung Trier
Fabian Becker hat das Trierer Traditionshaus für Bürotechnik im Jahr 2026 übernommen. Für den Betrieb habe ich die alte Website komplett neu aufgebaut. Hier zeige ich Schritt für Schritt, wie das Projekt entstanden ist.
Das Vorhaben
Die Schwerpunkte für den neuen Website-Auftritt
In einem ersten Gespräch haben Fabian Becker und ich uns auf die wichtigsten Punkte seiner neuen Website geeinigt. Daraus sind vier Schwerpunkte für die Struktur und die Inhalte der Website geworden.
Ein einziges Serviceformular
Statt fünf getrennter Formulare sollte eine zentrale Anlaufstelle entstehen. Kunden wählen ihr Anliegen aus, und es erscheinen die dazu passenden Eingabefelder.
Sichtbarkeit
Der Betrieb sollte bei Google und in Antworten von LLMs verlässlich auftauchen. Dafür brauchte jede Seite klare Überschriften, strukturierte Daten und freie Bahn für Crawler.
Echte Fotos für Ordnung
Die neue Website sollte die eigene Werkstatt, das Lager, die Ausstellung und das Team in Trier zeigen. So soll ein persönlicher Bezug zwischen den Kunden und Ordnung Trier entstehen.
Smartphone-Ansicht
Mobile first
Die Website soll es vor allem Bestandskunden leicht machen, Zählerstände und Störungen über das Serviceformular durchzugeben. Deshalb habe ich die mobilen Ansichten in der Gestaltung von Anfang an mitgedacht.
Das Serviceformular deckt alle fünf typischen Anliegen direkt auf dem Display ab, von der Störungsmeldung bis zur Bestellung von Toner. Die Telefonnummer lässt sich mit einem Fingertipp anrufen, damit dringende Fragen sofort geklärt werden können.
Große Bildschirme
Geräte, Marken und Möbel auf einen Blick
Am Desktop begrüßt die Startseite die Besucher mit der Zeile „Ordnung. Ab dem ersten Blatt.“ Die Startseite dient als Weiche zu sieben Unterseiten. Sie vertiefen die einzelnen Bereiche, von Office-Systemen und Production Printing bis zu Service, Karriere und Kontakt.
Das Video rechts zeigt den kompletten Aufbau der Startseite im Durchlauf.
Hero-Video
42 Sekunden Bürotechnik in Bewegung
Für den Hero der Startseite habe ich einen 42-sekündigen Film aus offiziellen Herstelleraufnahmen geschnitten. Eine animierte Szene zeigt, wie ein Büro eingerichtet wird, bevor fliegendes Papier zum Logo überleitet.
Auf dem Handy läuft eine eigene Fassung im Hochformat, die den Bildschirm füllt.
Scroll-Animation
Leasing bei Ordnung anschaulich dargestellt
Um den Ablauf eines Leasingvertrags bei Ordnung darzustellen, verwende ich eine scrollgebundene Animation in Kreisform. Sie führt in sechs Stationen vom ersten Bedarf über die Aufstellung und den laufenden Service bis zur Rückgabe des Geräts.
Die Kreisform verdeutlicht das Prinzip: Nach fünf Jahren beginnt der Ablauf direkt wieder von vorn.
Eigene Bilder
Fotoshooting
Am 17. September 2026 hat Michael Swami von Lebenskunst Photography einen halben Tag lang bei Ordnung Trier fotografiert. Vorab habe ich das Briefing und die Liste der Motive erstellt, danach die Bilder für die Website ausgewählt und aufbereitet.
Farbkonzept
Farben aus der Wortmarke abgeleitet
Die Gestaltung nutzt die Farben aus der Wortmarke: Schwarz und das Rot aus dem O, außerdem Weiß als Hauptfläche und Hellgrau als Zwischenton.
Schwarz#0B0B0C · GrundfarbeTrägt die Überschriften, setzt Knöpfe ab und rahmt dunkle Abschnitte ein.
Weiß#FFFFFF · FlächeBildet die Hauptfläche für alle Texte und technischen Daten.
Hellgrau#F6F6F6 · ZwischentonGliedert als Zwischenton lange Seiten, ohne sie dunkel wirken zu lassen.
Rot#A32712 · AkzentKommt aus dem O der Wortmarke und setzt Akzente bei feinen Linien und kleinen Punkten.
Typografie
Ein Schriftschnitt für alle Texte
Die gesamte Website nutzt die Schrift Geist im Schnitt Regular 400. Durch die einheitliche Schriftart wirken Überschriften und Fließtexte wie aus einem Guss.
Überschriften und FließtextGeistRegular 400
Ordnung. Ab dem ersten Blatt.
122 Jahre Geschichte
Von 1904 bis heute
Eine Chronik auf der Seite „Über uns“ zeichnet die Entwicklung des Betriebs in zehn Jahreszahlen nach. Sie spannt den Bogen von der Gründung 1904 bis zur Übernahme durch Fabian Becker im Jahr 2026.
Vor Ort beim Kunden
Bewertungspaket
Zum Projekt gehört ein gedrucktes Set aus Bewertungskarten im Visitenkartenformat, A6-Aufstellern für die Theke und Serviceaufklebern für die Geräte. Die Karten und Thekenaufsteller laden Kunden mit der Frage „War alles in Ordnung?“ zur Google-Bewertung ein.
Der Aufkleber führt über einen QR-Code direkt zum Melden einer Störung.
Ergebnis
Fakten und Messwerte
Die neue Website habe ich mit Google Lighthouse gemessen.
Sie erreicht in allen fünf Kategorien grüne Werte.
94
Performance94 Punkte für die Ladezeit am Desktop.
100
BarrierefreiheitVolle Punktzahl für barrierefreie Inhalte.
100
Best Practices100 Punkte für moderne Webstandards.
100
SEO100 Punkte für saubere Suchmaschinen-Optimierung.
2/2
Agentic BrowsingBeide Prüfungen bestanden, KI-Agenten finden sich auf der Seite zurecht.
Gemessen mit Google Lighthouse am Desktop über drei Durchläufe, hier ist jeweils der kleinste gemessene Wert angegeben.
Pflege des Google-Unternehmensprofils
Im Profil bei Google stehen nun alle aktuellen Öffnungszeiten samt Feiertagen, neun Kernleistungen mit ausführlicher Beschreibung und fünf Geräteprodukte. Dazu kommen die neuen Bilder aus der Fotoreportage, und jede bestehende Rezension hat eine persönliche Antwort erhalten.
- Weitergeleitete alte Webadressen
- 41
- Eingetragene Leistungen im Profil
- 9
- Angelegte Produkte bei Google
- 5
- Schnelle Auslieferung weltweit
- Cloudflare
„TOP Arbeit & absolut professionelle Homepage! Dankeschön!“
Fabian BeckerGeschäftsführer, Ordnung Trier GmbHNächstes Projekt
Braucht dein Betrieb auch eine neue Website?
Steht bei dir der Umbau, Relaunch oder Neubau einer Website an? Dann melde dich gerne bei mir. Wir treffen uns auf einen Kaffee in der Trierer Innenstadt und sprechen in Ruhe über dein Projekt. Oder du rufst mich einfach an. Das erste Gespräch ist unverbindlich und kostenlos.