Im Webdesign stehen große gestalterische Umbrüche an. Wir haben mit dem vielfach preisgekrönten Designer und Entwickler Daniel Spatzek über seinen Umgang mit dynamischen Rastern gesprochen. Weiter unten stellen wir aber auch als Alternative für Nichtprogrammierer visuelle Website-Builder vor, die einen innovativen Umgang mit Layoutrastern im Web ermöglichen.
Daniel Spatzek mag fluide Layouts: Auf seiner Portfolio-Site scheinen die Projekte seitlich hineinzufliegen – und dann wieder hinaus Bild: Walter Spatzek
Weniger Aufträge in der Corona-Krise und offen für Neues? Tatsächlich bahnen sich im Webdesign fundamentale Veränderungen an, mit denen alle Gestalter – egal ob selbst Webdesigner oder nicht – sich beschäftigen sollten.
Denn auch wenn seit Jahren in Sachen Bewegung und Animation die verrückstesten Sachen auf Websites passieren, ging es bei den eigentlichen Layouts erstaunlich statisch zu. Warum sich das gerade ändert und welche Rolle das für die User Experience spielt, erfahren Sie in der Titelgeschichte von PAGE 5.2020. Neben Daniel Spatzek stellen dort einige der spannendsten aktuellen Webdesigner und ihren Umgang mit fluiden Rastern vor. So gibt es ein Interview mit David Liebermann, der in Hamburg nicht nur die äusserst experimentierfreudige junge Agentur Liebermann Kiepe Reddemann betreibt, sondern unter hallointer.net regelmäßig einige der technisch innovativsten Sites des Planeten zusammenträgt.
»Sogar relativ extravagante Websites kann man mit Rastern strukturiert aussehen lassen«
Wer öfter bei Awwwards, CSSDesignAwards und FWA nach innovativen Layouts Ausschau hält, kennt den Namen Daniel Spatzek. Der Österreicher kassierte dort schon jede Menge Auszeichnungen – für Sites, die er selbst gestaltete und programmierte. Dynamische Raster spielen oft eine entscheidende Rolle, wobei er CSS Flexbox einsetzt.
Ihre persönliche Website www.danielspatzek.com (siehe oben) arbeitet mit einem sichtbaren, scheinbar unregelmäßigen vertikalen Raster, über das sich Schrift und Bilder schräg bewegen. Welche Idee steckt dahinter?
Die Struktur beruht auf einem simplen 12er-Grid. Es wird durch eine Auswahl einzelner Linien sichtbar, an denen alle Elemente ausgerichtet sind. Die Experience beruht auf den mit Vue.js entstandenen dynamischen Übergängen, die der Site einen One-Page-Charakter geben – ganz ohne Ladezeiten. Der Header bleibt fix, beim Seitenwechsel bewegt sich der angesehene Inhalt mit einer CSS-Out-Animation oben links hinaus, der neue wird unmittelbar danach von unten rechts hineinanimiert.
So geht's weiter
Webraster ohne Code: Sind visuelle Website-Builder eine Alternative für Nichtprogrammierer?
