Branche
Projekttyp
Umfang
Für das Luzerner Architekturbüro Dolmus AG überführten wir ein bestehendes Grafikkonzept in ein responsives, interaktives Webdesign. Im Zentrum standen ein massgeschneidertes Grid-System, ein individuell entwickelter Cursor sowie ein dezenter Custom-Scrollbar — alles abgestimmt auf die hohe gestalterische Anspruchshaltung eines Architekturbüros.
Dolmus AG wollte ihren digitalen Auftritt grundlegend erneuern und dabei die Qualität der eigenen Architekturarbeit auch online sichtbar machen. Das visuelle Konzept war bereits von Erich Brechbühl ausgearbeitet worden — als druckoptimiertes PDF, das den klaren, minimalistischen Designanspruch des Büros widerspiegelte. Das Ziel war eine Website, die dieses grafische Konzept konsequent ins digitale Medium überträgt, ohne dabei die technischen Anforderungen an Responsivität und Bedienbarkeit zu vernachlässigen.
Architekturbüros und Grafikdesigner arbeiten mit einer Genauigkeit, die im Web oft nicht direkt abbildbar ist — pixelgenaue Konzepte müssen für fluide, responsive Umgebungen neu gedacht werden. Das erforderte gute Abstimmungen, um die Erwartungshaltung aller Beteiligten zu managen und gleichzeitig ein technisch sauberes Ergebnis zu erzielen.
Eine der zentralen gestalterischen Herausforderungen war das Grid-System: Die Website nutzt zwei separate Grids, eines für den Inhalt und eines für Logo und Navigation. Die einzelnen Buchstaben des Logos sowie die Navigationselemente verteilen sich über die gesamte Seitenbreite, was eine mathematisch präzise Formel erforderte, die Buchstabenbreiten, Abstände und Ränder berücksichtigt. Dazu mussten sinnvolle Breakpoints definiert und festgelegt werden, wie sich beide Grids an diesen Punkten verhalten.
Weitere Besonderheiten: Der Cursor verändert seine Form und Richtung je nach Position auf der Website. Ein Detail, das zur klaren, reduzierten Ästhetik beiträgt und eine sorgfältige Flächendefinition verlangte. Ergänzt wird das Erlebnis durch einen individuellen, sehr dezenten Scrollbar, der sich nahtlos in das minimalistische Design einfügt.
Gestartet haben wir mit der Analyse und Übertragung des bestehenden Design-Konzepts in Figma übertragen. Anschliessend wurden die Grids definiert: Das Content-Grid folgt einem ungewöhnlichen 5-Spalten-System und passt sich über die Breakpoints schrittweise bis auf eine Spalte für Mobile an. Logo und Navigation folgen einem eigenen Grid, das auf einer mathematischen Formel basiert und über alle Bildschirmgrössen konsistent wirkt.
Nach der Grid-Definition wurden Hover-Effekte, das Responsive-Verhalten der Bilder, ein dezenter Custom-Scrollbar und die Cursor-Bereiche ausgearbeitet. Zentrale Frage war, auf welchen Flächen der Cursor welche Form und Richtung annimmt.
Das fertige Figma-File wurde anschliessend gemeinsam mit dem Kunden und dem externen Grafiker besprochen. Durch die konstruktive Zusammenarbeit wurden gemeinsam Lösungen entwickelt, die die grafische Handschrift des Konzepts bewahren und gleichzeitig den Anforderungen des Webs entsprechen.
Schliesslich haben wir das das Developer-Handoff erstellt und das Projekt an die Entwicklung übergeben. Im Anschluss an die Umsetzung folgten Review-Runden, um Details zu verfeinern und zu optimieren. Auch nach dem Launch gab es Kundenwünsche, welche sukzessive umgesetzt wurden.
