Designexploration fuer den Web-Auftritt: vier Stilrichtungen, statisch und versioniert
Eine Sammlung statischer HTML-Mockups fuer den Web-Auftritt von Reconic. Jeder Mockup ist eine vollstaendige, eigenstaendige One-Pager-Seite, die dieselbe Inhaltsstruktur in einer eigenen visuellen Stilrichtung umsetzt. Eine schlanke Index-Seite buendelt alle Varianten als klickbare Uebersicht und macht die Versionen direkt vergleichbar. Das Repository dient als Grundlage fuer die Wahl von Stilrichtung, Tonalitaet und Aufbau der spaeteren Produktivseite.
Ziel ist es, vor dem Bau der finalen Website mehrere ausgearbeitete Designrichtungen nebeneinanderzustellen, statt sich frueh auf eine Optik festzulegen. Inhalt (Copy, Sektionsreihenfolge, Aufbau) und Form (Farbe, Typografie, Layout) werden getrennt iteriert, sodass die passende Kombination gefunden werden kann. Die Mockups sind bewusst statisch und ohne Backend gehalten, damit sie ohne Aufwand geteilt, im Browser geprueft und auf Desktop wie Mobile bewertet werden koennen.
Reine statische HTML-Seiten mit eingebettetem CSS, eine Datei pro Mockup, ohne Build-Schritt und ohne Server. Schrift Montserrat. Eigenes Markenfarbsystem (Primaergruen, dunkle Flaechen, neutrale Toene, Teal-Akzent) sowie SVG-Logos und web-optimierte Fotos im assets-Ordner. Begleitend ein kleines Design-System (Foundations: Farben, Typografie; Komponenten: Buttons, Cards) als ebenfalls statische HTML-Karten. Auslieferung als statische Site. Die spaetere Produktivseite ist davon getrennt und nutzt Astro mit Tailwind CSS, selbst gehostete Schriften und einen reinen Static-Build.
Pro Stilrichtung wurde eine verbindliche Inhalts-Vorlage geschrieben und anschliessend als statischer HTML-Mockup umgesetzt. Versioniert in zwei Generationen: v3 als erste vollstaendige Runde mit allen vier Stilrichtungen, danach v4 als ueberarbeiteter Stand (gestraffter Inhalt, neuer Hero-Zuschnitt, eine Richtung entfaellt). Jede Variante traegt ihre Versionsnummer im Dateinamen; die Index-Seite kennzeichnet aktuelle gegenueber vorherigen Staenden. Geprueft wurde im Browser inklusive responsivem Verhalten; Desktop- und Mobile-Renderings wurden automatisiert per Headless-Browser erzeugt.
Im Kern stehen die Mockup-HTMLs (eine Datei je Stilrichtung und Version) sowie eine Index-Seite, die alle Varianten als Karten auflistet und nach aktuellem und vorherigem Stand gruppiert. Dazu kommen die Inhalts-Vorlagen je Variante, ein assets-Ordner mit Logos (SVG, positiv und negativ) und web-optimierten Fotos sowie ein begleitendes Design-System mit Foundations und Komponenten. Alle Seiten sind eigenstaendig und ohne Installation direkt im Browser zu oeffnen.
Clean Light: hell, Swiss-Style, viel Weissraum, klare Raster, ruhig und sachlich. Techy Data: dunkel, Dashboard-Charakter, betont belastbare Zahlen und Datenbasis. Editorial Dark: dunkel und editorial, zurueckgenommene Akzentfarbe, Haltung in Wir-Form. Warm Material: warme, taktile Sand- und Beton-Anmutung (nur in der Vorversion enthalten). Jede Richtung transportiert dieselbe Botschaft in einer eigenen Tonalitaet.
v3 ist die erste vollstaendige Runde mit allen vier Stilrichtungen. v4 ist der aktuelle, ueberarbeitete Stand: gestraffter Inhalt, breiterer Hero, ein entschlacktes Beispiel und ein staerkerer Netzwerk-Fokus. In v4 sind drei Stilrichtungen fortgefuehrt (Clean Light, Techy Data, Editorial Dark), eine Richtung entfaellt. Die Versionen bleiben nebeneinander erhalten, sodass der Fortschritt nachvollziehbar und vergleichbar ist; die Versionsnummer steht jeweils im Dateinamen.
Alle Mockups teilen ein gemeinsames Markensystem: Montserrat als Schrift (Regular, Medium, Bold; Ueberschriften eng getrackt) und eine feste Farbpalette mit Primaergruen fuer Akzente und Call-to-Actions, dunklen Flaechen, neutralen Hintergruenden und einem Teal-Akzent. Das Design-System haelt diese Foundations (Farben, Typografie) und wiederverwendbare Komponenten (Buttons, Cards) als referenzierbare statische Karten fest, damit die Stilrichtungen auf einer einheitlichen Grundlage variieren.
Jeder Mockup folgt derselben kanonischen Sektionsreihenfolge eines Marketing-One-Pagers: Navigation, Hero mit Kennzahlen-Strip, Leistungsuebersicht, eine vertiefende Fachsektion mit Beispieldarstellung, weitere Nutzen- und Nachhaltigkeitssektionen, Team, Kontakt- beziehungsweise Anfrageformular und Footer. Diese feste Struktur sorgt dafuer, dass die Stilrichtungen rein visuell und tonal vergleichbar sind, weil Inhalt und Reihenfolge ueber alle Varianten hinweg konstant bleiben.
Die Mockups sind eine Designexploration und kein Produktionscode. Die spaetere produktive Website wird getrennt davon gebaut und ist als statisch generierter One-Pager mit Astro und Tailwind CSS angelegt, mit selbst gehosteten Schriften, in der Marke definierten Design-Tokens und einem reinen Static-Build ohne Backend. Die gewaehlte Stilrichtung und Inhaltsstruktur fliessen dort als Grundlage ein.
Reconic. Strukturierte Kurzdokumentation.