Webdesign & Digital: sechs Website-Konzepte mit einer eigenen Idee

Ein Architekturstudio, ein Design-Shop und eine KI-Arbeitsplattform haben nicht dieselbe Aufgabe. Trotzdem sehen ihre Websites im Alltag oft ähnlich aus: großes Bild, kurzer Werbesatz, ein Raster aus Karten. Im Webdesign- und Digitalportfolio von Haas Arts ist die Ausgangsfrage deshalb eine andere: Was soll ein Mensch auf dieser konkreten Website verstehen oder tun können – und welche Gestaltung unterstützt genau diesen Weg?

Die 24-seitige Konzeptedition zeigt sechs freie Website-Studien: Raumform, Kante, Nordruhe, Frequenz, Orbit und Haas Arts Next. Zu sehen sind Desktop- und Mobilansichten, Seitenstrukturen, Farbkonzepte und geplante Interaktionszustände. Die Bilder sind statische Entwürfe, keine programmierten Websites. Sie dokumentieren weder Kundenaufträge noch nachgewiesene Conversion-Ergebnisse.

Das vollständige Webdesign- und Digitalportfolio ansehen – PDF, 24 Seiten, etwa 4,0 MB.

Raumform: Architektur als redaktionelle Geschichte#

Bei Raumform steht ein fiktives Architekturstudio im Mittelpunkt. Das Nutzerziel ist klar: Projekte verstehen, den Ansatz des Studios kennenlernen und eine erste Anfrage vorbereiten. Daraus entwickelt sich eine ruhige Struktur mit großen Projektbildern und schmaleren Textbereichen.

Das Desktop-Raster ist auf zwölf Spalten angelegt; Projektbilder können acht oder sechs davon einnehmen. Solche Angaben sind mehr als technische Randnotizen. Sie beschreiben, wie große Bildräume und gut lesbare Texte nebeneinander bestehen sollen. Der Auftritt führt vom Überblick zur Auswahl und von dort in eine konkrete Projektgeschichte.

Seite 6: Orientierung, Fokus und Vertiefung als statische Zustände. Ein möglicher Bildübergang ist noch keine implementierte Interaktion.

Mobil wird diese Idee nicht einfach verkleinert. Aussage, Bild, Projektauswahl, Studioinformationen und Kontakt werden neu in eine vertikale Folge gebracht. Das ist der wesentliche responsive Gedanke: dieselbe inhaltliche Richtung, aber eine an den Bildschirm angepasste Gewichtung.

Kante: Produktcharakter und Kaufklarheit#

Kante untersucht einen Design-Shop mit fiktiven Keramikprodukten. Die Bildwelt darf expressiv sein, während Auswahl und nächster Schritt möglichst vertraut bleiben. Ein Produkt soll als Objekt wirken können, ohne Preis, Variante und Zusatzinformationen zu verstecken.

Die gezeigte Produktseite ordnet Materialbild, Produktname, Preis und Farbauswahl klar zueinander. Informationen zu Maßen sowie Versand und Rückgabe liegen in der Nähe der Kaufhandlung. Auch die Tasche wird als eigener Zustand betrachtet. So wird aus einer attraktiven Startseite zumindest konzeptionell ein zusammenhängender Kaufweg.

Die dargestellten Produkte und Preise sind ausdrücklich fiktiv. Es gibt keinen durch die Mappe eröffneten Shop und keine angebotene Ware. Eine optionale 3D-Ansicht ist als Vertiefung gedacht; eine vollständige Bildgalerie bleibt der direkte Zugang. Das ist ein nützlicher Grundsatz: Ein zusätzlicher Effekt sollte den Zugang ergänzen und nicht zur Voraussetzung machen.

Nordruhe: Atmosphäre braucht einen nächsten Schritt#

Die Hotelstudie Nordruhe arbeitet mit einem weiten Bildeinstieg und einer ruhigen Farbigkeit aus dunklem Grün, hellen Flächen und warmen Akzenten. Das Bild soll einen Ort erfahrbar machen. Gleichzeitig bleibt die Anfrage auffindbar.

Die vorgesehene Inhaltsstruktur führt über Haus, Zimmer, Erleben und Lage zur Anfrage. Ankunft, Abreise und Gästezahl werden als klar benannte Informationen behandelt. Auf Mobilgeräten wächst die Anfrage in die Höhe, statt als zu schmale Desktopzeile bestehen zu bleiben.

Die Mappe benennt Tastaturbedienung und sichtbare Fokuszustände als Anforderungen an eine spätere Umsetzung. Das ist noch kein bestandener Barrierefreiheitstest. Es zeigt aber, dass das Konzept über die reine Stimmung hinausdenkt. Eine mögliche Buchung oder Anfrage müsste verständliche Zustände, Eingabeprüfung und eine bewusste Bestätigung erhalten.

Frequenz: Ausdruck und Orientierung müssen sich nicht ausschließen#

Frequenz ist als digitales Haus für Klangkunst angelegt. Expressive Typografie gibt dem Auftritt einen eigenen Charakter; der Programmindex hält die Inhalte auffindbar. Ausstellungen, Live-Sets und Gespräche erhalten eine gemeinsame Ordnung, ohne ihre Unterschiede zu verlieren.

Die statischen Ansichten zeigen drei Schritte: vollständige Übersicht, aktiver Filter und Veranstaltungsdetail. Farbe markiert die Auswahl, Titel und Format bleiben lesbar. Für eine Umsetzung schlägt das Portfolio URL-basierte Filter vor. Damit könnte ein gefilterter Zustand auch verlinkt werden, statt nur flüchtig im Browser zu existieren.

Seite 15: Eine Auswahl soll eine erkennbare Antwort erhalten. Das PDF zeigt den geplanten Zusammenhang, nicht ein laufendes Filtersystem.

Gerade bei einer markanten Kulturwebsite ist diese Unterscheidung wichtig: Ausdruck entsteht nicht dadurch, dass die Bedienung zum Rätsel wird. Ein eigenständiger visueller Ton kann mit eindeutiger Navigation zusammengehen.

Orbit: Ein Interface erklärt durch Prioritäten#

Orbit verschiebt den Schwerpunkt von einer öffentlichen Website zu einer Arbeitsoberfläche. Die freie KI-Plattform verbindet eine Produktdarstellung mit einem Dashboard-Entwurf. Aufgaben, Status und nächste Schritte teilen Farbe, Typografie und Komponenten mit der Marketingseite.

Die gezeigten Kennzahlen sind Demo-Daten. Die Studie ist kein Nachweis einer funktionierenden Agentenplattform. Interessant ist vielmehr, welche Informationen Vorrang erhalten: Was ist offen? Was läuft gerade? Welche Entscheidung steht als Nächstes an?

Mobil rücken die nächsten Schritte stärker nach vorn; Kennzahlen werden neu angeordnet. Einheitliche Abstandsstufen und wiederverwendbare Bausteine sollen das System zusammenhalten. Als technische Möglichkeit nennt die Mappe Container Queries: Ein Modul könnte sich am tatsächlich verfügbaren Raum orientieren, nicht ausschließlich an der gesamten Fensterbreite.

Haas Arts Next: Das eigene Angebot als zusammenhängende Geschichte#

Die sechste Studie ist eine freie Weiterentwicklung des eigenen Studioauftritts. Gestaltung und Entwicklung erscheinen darin nicht als getrennte Inseln. Arbeiten, Leistungen und Kontakt bilden einen nachvollziehbaren Weg.

Besonders wichtig ist der geplante Aufbau einer Projektseite: Einordnung, Aufgabe, zentrale Gestaltungsentscheidung, konkrete Ansichten und ein passender nächster Kontakt. Ein Projekt soll nicht nur mit großen Bildern beeindrucken, sondern erklären, was den Entwurf trägt. Freie Studien bleiben als solche erkennbar.

„Haas Arts Next“ ist in dieser Mappe ausdrücklich ein Redesign-Entwurf. Die Veröffentlichung dieses Blogartikels ist keine Umsetzung der dort abgebildeten Website. Konzept, vorhandener Liveauftritt und mögliche spätere Entwicklung werden nicht gleichgesetzt.

Technik ist eine Möglichkeit, kein Gütesiegel#

Die Systemseite nennt View Transitions, Container Queries und scrollgesteuerte CSS-Animationen. Ihre Aufgaben sind jeweils konkret: Zusammenhang zwischen Ansichten halten, Module an ihren Raum anpassen oder den Lesefluss behutsam begleiten. Semantisches HTML, reduzierte Bewegung, responsive Bilder und normale Navigation bilden die vorgesehene Grundlage.

Ob eine Technik passt, müsste bei der Implementierung anhand von Browserunterstützung, Leistung und Bedienbarkeit geprüft werden. Eine Animation ist nicht automatisch eine Verbesserung. Die Inhalte sollen auch ohne den Effekt erreichbar bleiben.

Das Portfolio unterscheidet außerdem sorgfältig zwischen Referenz und eigener Arbeit. Genannte Award-Projekte dienen als Impulse für Prinzipien; die Auszeichnungen gehören den jeweiligen Originalprojekten. Die sechs Haas-Arts-Studien beanspruchen keine eigenen Design-Awards.

Was die sechs Studien gemeinsam zeigen#

Die Gemeinsamkeit ist kein wiederholtes Layout. Es ist eine Arbeitsrichtung: Nutzerziel klären, Inhalte ordnen, Bildsprache entwickeln und Zustände so beschreiben, dass eine Umsetzung daraus werden könnte. Die Mappe eignet sich deshalb als Gesprächsgrundlage – nicht als fertige Spezifikation oder Leistungsnachweis einer bereits gebauten Anwendung.

Im Artbook „Zwischen den Systemen“ werden diese digitalen Entwürfe mit Illustration und räumlichen Studien zusammengeführt. Dort tritt ihre Verwandtschaft besonders deutlich hervor: Auch eine Oberfläche ist ein gestalteter Weg durch Informationen.