SEMI. Event Catering | Vom Schriftzug zur Cateringmarke: Konzept, Design und kompletter Webauftritt
Marken- und Webauftritt 2026 · Zusammenarbeit seit 2014
SEMI. ist das Event-Catering von Semi Hassine aus Hattingen: Flying Menüs, Stationen und Family Style für Firmen-Events, Hochzeiten und private Feste — seit 2008.
Eine Marke, die es nur als Schriftzug gab
Semi und ich kennen uns seit vielen Jahren — als Nachbarn in Hattingen kennengelernt, längst gute Freunde. Unsere Zusammenarbeit begann um 2014 mit der Website für sein Restaurant, das Fachwerk. Als das Catering Jahre später einen eigenständigen Markenauftritt bekommen sollte, kam er wieder.
Der Startpunkt war ein einziges Asset: der SEMI.-Schriftzug. Es gab keine Bildsprache, keine Farbwelt, keine Inhaltsstruktur. Das Konzept musste beides gleichzeitig leisten — eine Marke sichtbar machen und ein Geschäft erklären.
Die eigentliche Aufgabe: Die Branche war neu, die Aufgabe vertraut: ein gewachsenes Angebot verstehen, die entscheidenden Kaufkriterien herausarbeiten und daraus eine Struktur bauen, die auch ohne Vorwissen funktioniert.
Individuell – aber nicht unverständlich
Jedes Event wird neu konzipiert. Trotzdem braucht ein Interessent eine Vorstellung davon, was möglich ist. Die Seite löst das über neun wiedererkennbare Formate: Flying Menü, Live-Cooking-Stationen, Ganztags-Konzepte, gesetztes Menü, Hybrid, Street Food, Family Style, die Signature-Löffel aus der SAT.1-Show und Finger Food. Jedes nennt Größenordnung, Charakter und Beispiel-Menüs aus echten Events — von 50 Gästen beim Flying Menü bis 1.500 beim Tischbufett. Das Angebot bleibt individuell, der Einstieg wird konkret;
Konzept-Sektion mit den Formaten
01
Konzept & Strategie
- Zwei Leitfragen: Was will jemand sehen, der ein Catering für 120 Gäste sucht? Und wie kommt Semis Persönlichkeit durch den Bildschirm? Jede Sektion der Seite beantwortet eine der beiden Fragen
- Persönlichkeit im Hero: Ein Video-Loop eröffnet die Seite, der Button „SEMI. in Action“ startet den vollen Film — man sieht Semi arbeiten, bevor man die erste Zeile liest; Startseite mit Video-Hero 02
- Referenzen als System: Acht Event-Cases nach festen Content-Regeln: Auftraggeber anonymisiert, dafür Menüs, Locations und Gästezahlen konkret; externes Bildmaterial mit Bildnachweis, Partner-Leistungen als solche ausgewiesen; Referenz-Übersicht und Detail-Seiten 03
- Vertrauensbelege: Der Markenauftritt ist neu, die Erfahrung dahinter nicht: Sender-Leiste (WDR, RTL, SAT.1, Kabel 1), Event-Galerien und konkrete Referenzen machen diesen Unterschied sichtbar; Über-Semi-Sektion mit Sender-Leiste 04
- Anfragen qualifizieren: Das Kontaktformular fragt Datum, Gästezahl und die ersten Wünsche ab — Gespräche starten nicht bei null; Kontakt-Sektion 05
- Erfahrung in Zahlen: Direkt unter dem Hero stehen die Eckwerte: seit 2008, mehr als 150 Events, neun Formate, bis 1.500 Gäste. Aus dem atmosphärischen Einstieg wird damit auf derselben Bildschirmhöhe ein belastbares Angebot für professionelle Veranstalter
- Zwei Einstiege ins Angebot: Manche suchen zuerst einen Caterer, andere zuerst einen Ort. Neben den Formaten bildet die Seite deshalb die eigene Villa Au in Velbert-Langenberg und sieben Partner-Häuser ab, von Düsseldorf und Frankfurt bis Offenbach, Bad Vilbel und Dreieich; Messecatering hat einen eigenen Einstieg; Locations-Sektion mit Partner-Netzwerk und Messecatering 06
Gestaltung
- Vom Schriftzug zur Designsprache: 07 die Wortmarke um die Unterzeile „event · catering“ ergänzt, Farbwelt (Mitternachtsblau, Creme, ein goldener Akzent) und Typografie neu entwickelt — Syne als Hausschrift, DM Sans für Lesetexte; das S aus dem Logo trägt als Favicon und App-Icon die Marke bis in den Browser-Tab
- Dunkle Bühne: Flächen in Mitternachtsblau lassen Food-Fotografie und Video leuchten; die Seite inszeniert das Essen, die Gestaltung hält sich zurück
- Menüs als gestaltetes Element: Gang-Titel typografisch hervorgehoben, Komponenten als Lauftext — Menü-Auszüge lesen sich wie eine Karte, nicht wie eine Tabelle
- Im Styleguide festgehalten: 08 Design-Philosophie, Farbpalette, Typografie und Tonalität sind dokumentiert — die Referenz für alle weiteren Anwendungen der Marke
- Print: Visitenkarten als erste Anwendung außerhalb des Webs; weitere Print-Materialien folgen
Technik
- React-Frontend: Vite-Build mit clientseitiger Navigation; jede Referenz, Impressum und Datenschutz sind direkt aufrufbare Adressen
- Automatische Bilder-Pipeline: 35 Eventfotos, je vier Breiten und drei Bildformate; die benötigten Größen und Zuschnitte entstehen automatisch beim Build. Die Event-Galerien 09 laden dadurch auch mobil zügig
- Video-Integration: Hintergrund-Loop und Fullscreen-Film als WebM mit Poster-Fallback; auf Mobilgeräten übernehmen die nativen Player
- Formular-Backend: Eigenes PHP-Backend für das Kontaktformular, Spam-Schutz über Cloudflare Turnstile, kein Formular-Dienst dazwischen
- Social Media direkt eingebunden: Die Instagram-Einbindung 10 kommt ohne Drittanbieter-Dienst aus — technisch überraschend aufwendig, denn Facebook selbst empfiehlt dafür an vielen Stellen externe Anbieter. Hier selbst gebaut, und es funktioniert
- Gemessen über alle Routen: Accessibility, Best Practices und SEO erreichen jeweils 100 Punkte. Die Performance liegt auf dem Desktop bei 89–100. Mobil erreichen die Routen ohne Bild-Hero 96–98; die Bild-Hero-Routen liegen bei 74–75, weil das große Hero-Bild erst nach dem JavaScript angefordert werden kann. Der Weg aus diesem Plateau (Pre-Rendering der Hero-Bereiche) ist dokumentiert und bewusst nicht Teil dieses Projektstands
Impressionen der Webseite
Frontend – Desktop:
Der gestufte Launch
Die Marke brauchte eine Adresse, bevor die große Seite fertig war. Deshalb ging Anfang Mai 2026 eine bewusst reduzierte Vorab-Version online — nicht als „Coming Soon“-Platzhalter, sondern indexierbar: mit vollständigem Impressum, echten Kontaktdaten und den wichtigsten Inhalten.
Rund zehn Wochen später, Mitte Juli 2026, hat der volle Auftritt die Vorab-Version unter derselben Domain ersetzt. Die Marke war zu diesem Zeitpunkt bereits mit echten Inhalten auffindbar, und die fertige Seite konnte eine bestehende Adresse übernehmen.
Was die Seite leisten soll
- Anfragen mit Substanz: Die meisten Anfragen kommen weiterhin per Telefon. Wer aber das Formular nutzt, hat Datum, Gästezahl und seine Vorstellungen schon benannt, und das Gespräch beginnt beim Angebot
- Ein Referenz-System, das mitwächst: Jedes neue Event kann nach denselben Content-Regeln als Case ergänzt werden. Je mehr Referenzen, desto eher findet ein Interessent ein Event, das seinem ähnelt, und fragt mit konkreteren Vorstellungen an
- Ein Auftritt, der mitläuft: Der Bereich „Aktuelles“ zieht die Instagram-Beiträge automatisch ein, für Anlässe wie das Finale bei „Koch des Jahres 2026“ gibt es einen eigenen Einblender. Der Auftritt bleibt lebendig und altert nicht als Broschüre
- Auffindbar ab Tag eins: Durch den gestuften Launch war die Domain beim Go-Live schon indexiert; Marken-Suchen landen seit Anfang Mai auf der eigenen Seite
Für belastbare Suchzahlen ist es so kurz nach dem Launch zu früh. Für Bestandskunden und Direktmarketing arbeitet der Auftritt schon jetzt, und mit dem Styleguide lassen sich Druckmedien und weitere Markenanwendungen umsetzen. Ich betreue die Seite weiter; als Nächstes folgt die Off-Site-SEO- und KI-Suche-Strategie.
Meine Rolle
Konzept und Informationsarchitektur, Markenpositionierung, Tonalität und zentrale Website-Texte, Ausbau der Marke vom Schriftzug aus, UX/UI und Design, Frontend-Entwicklung (React, Vite, Tailwind), Bild- und Video-Pipeline, Formular-Backend (PHP), SEO-Grundlagen, Hosting-Einrichtung und Launch.
Alles aus einer Hand, in engem Austausch mit Semi.