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, seit 2008: Flying Menüs, Stationen und Family Style für Firmen-Events und private Feiern.
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 und 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 und daraus eine Struktur bauen, die auch ohne Vorwissen funktioniert.
Neun Formate als Einstieg
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 und Beispiel-Menüs aus echten Events, von 50 Gästen beim Flying Menü bis 1.500 beim Tischbufett;
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: die Sender-Leiste (WDR, RTL, SAT.1, Kabel 1) und die Referenzen machen das sichtbar; Über-Semi-Sektion mit Sender-Leiste 04
- Anfragen qualifizieren: Das Kontaktformular fragt Datum, Gästezahl und die ersten Wünsche ab; 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
- 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 Gestaltung hält sich zurück, damit das Essen im Vordergrund steht
- Menüs als gestaltetes Element: Gang-Titel typografisch hervorgehoben, Komponenten als Lauftext; Menü-Auszüge lesen sich wie eine Speisekarte
- Im Styleguide festgehalten: 08 Design-Philosophie, Farbpalette, Typografie und Tonalität sind dokumentiert
- 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
- Social Media direkt eingebunden: Die Instagram-Einbindung 10 ist ohne externen Dienst selbst gebaut. Das ist aufwendiger, als es klingt; Facebook selbst verweist dafür an vielen Stellen auf Drittanbieter
- 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 reduzierte Vorab-Version online, indexierbar, mit Impressum, 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 das Formular nutzt, hat Datum und Gästezahl schon genannt, 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
- 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.
Weitere Case-Studies
Das Angebot ist besser als sein Auftritt?
Bei SEMI. gab es am Anfang nur einen Schriftzug. Daraus sind eine Marke und eine Website entstanden, die Anfragen mit Datum und Gästezahl vorbereiten. Der Einstieg dafür ist ein Gespräch über das Angebot, so wie es heute verkauft wird.