Liquide Web-Raster: In Weblayouts kommt endlich Bewegung!
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.
Die Rasterlinien zerreißen die große Typo der Projektnamen und verteilen sie unregelmäßig auf mehrere Spalten.
Ein ästhetisches Element, das den atypischen Look erzeugt. Auf der »About«-Seite sind die Teile dieser großen Schriftzüge innerhalb der Spalten zudem animiert. Diese Bewegung gibt es aus Gründen der Lesbarkeit bei den Projektseiten nicht, wo die Überschriften beim Scrollen komplett lesbar werden und sich mit den Bildern im Raster eingliedern.
Auch bei der Seite für den Fotografen Fabian Ferdinand Fallend haben Sie sichtbare Rasterlinien verwendet. Warum?
Sie sollen ans Gitter im Kamerasucher erinnern. Es ist wieder ein 12er-Grid, mit feineren und stärkeren Quadraten beziehungsweise Rechtecken. Die horizontalen Linien dienen nur ästhetischen Zwecken, da sich bei variablen Browsergrößen Bilder daran nicht ausrichten ließen, zumal sich durch den Parallax-Effekt die Elemente unterschiedlich schnell bewegen. Die große Typo ist konsequent off-grid, um sie markanter zu machen, nur das versale »FERDINAND« liegt zentriert auf einer vertikalen Linie. Die weiteren Elemente halten sich wieder an den Raster.
Beim Online-Auftritt von Artdirektor Andrew Leguay aus Los Angeles scheint das Layout aus den im Intro kreuz und quer liegenden Schriftzügen zu fallen.
Andrew hatte das Basislayout entwickelt. Um eine Struktur zu schaffen, habe ich ein 48er-Grid mit extrem kleinen Spalten hinterlegt. Meine Idee war, durch GSAP-Animationen aus dem Chaos Ordnung zu schaffen und die hin- und herspringenden Wörter beim Scrollen mittels Raster zu ordnen. »Out of Chaos Emerges Order« wurde dann auch zum Motto der Site und steht für die Arbeit von Andrew. Nur wenn man in der »Gallery« weiterklickt, ist es mal umgekehrt: Hier springt alles aus dem Grid.
Wie muss man das Thema Raster im fluiden Web neu denken, wo gelten weiterhin die alten Regeln der Printgestaltung?
Die ästhetischen Regeln aus Print bleiben gültig: Auch wenn man einen Raster auf den ersten Blick nicht unbedingt wahrnimmt, schafft er eine innere Ordnung, die ansprechender wirkt und dem User die Orientierung erleichtert. Sogar relativ extravagante Layouts kann man so strukturiert aussehen lassen. Das wird immer so bleiben, ob Web oder Print.
»From Chaos Emerges Order« lautet das Motto der von Daniel Spatzek realisierten Website des kalifornischen Artdirektors Andrew Leguay
Einen feinen Raster, der an den Kamerasucher erinnert, entwickelte Daniel Spatzek für den Fotografen Fabian Ferdinand Fallend
Webraster ohne Code: Sind visuelle Website-Builder eine Alternative für Nichtprogrammierer?
Schon ewig kann man Websites bauen, ohne eine Zeile Code zu schreiben. Bisher platzierte man dabei aber meist in Baukastentools Elemente per Drag-and-drop in vorgegebene Templates. Raster standen nicht als eigenes Gestaltungsmittel zur Verfügung. Das ändert sich gerade.
Die israelische Firma Wix, die sich mit 160 Millionen Usern weltweit als Marktführer im Bereich der Website-Builder bezeichnet, launchte jüngst die Betaversion von Editor X, der nicht Amateure, sondern gezielt Designer anspricht. Das Besondere: Die Integration von Flexbox und CSS Grid eröffnet neue Möglichkeiten. Mit dem gewohnten Drag-and-drop-Interface und dem neuen Feature »Grid Layouting« kann man jetzt auch rasterbasiert arbeiten. »Flex Layouter« und »Text Scale« sorgen für die automatische Anpassung der Layouts über verschiedene Bildschirmgrößen hinweg. Auch Scroll- und Animationseffekte sind möglich. Welche Designoptionen Editor X bietet, lässt sich unter www.wix.com/editorx/features nachlesen.
Noch einen Schritt weiter geht Webflow. Das Unternehmen aus San Francisco kassierte letztes Jahr 72 Millionen Dollar Venture-Capital und rühmt sich, perfekt performanten Code mit einem Interface zu erzeugen, das einem Layoutprogramm ähnelt. Statt nur wie üblich Prototypen zu entwerfen, sollen Designprofis damit direkt responsive Websites kreieren. Webflow integriert ebenfalls Flexbox und CSS Grid – beides lässt sich auch gemeinsam verwenden, um interessante Layouts zu erzeugen.
Zudem bietet die webbasierte Anwendung eine Menge spannende Animations- und Interaktions-Features. Parallax-Effekte erlauben es, Größe, Style und Position von Elementen beim Scrollen zu verändern. Möglich sind auch interaktive Animationen, die sich bei der Bewegung auf der Site entwickeln. Für Hover-Effekte stehen Varianten wie »Zoom«, »Bounce«, »Spin« et cetera bereit. Wie all das funktioniert, erklärt der »University«-Bereich mit Videos zu allen erdenklichen Themen.
Mehr zum Potential fluider Gestaltungsraster
Mit Flexbox und CSS Grid stehen relativ einfach anwendbare Möglichkeiten für kreative Weblayouts zur Verfügung. In unserer Titelgeschichte aus PAGE 05.2020, die Sie als P+-Abonnent komplett downloaden können, stellen wir Ihnen eine neue Generation von Gestaltern vor, die grafisches mit Coding-Know-how verbindet. Wir verraten, was Raster im Web alles können!
Laden Sie sich die Ausgabe direkt runter oder Sie weitere Teile der Webraster-Titelgeschichte als P+-Abonnent online:
Weblayout: Fluide Gestaltungsraster ++ Identities für Floristinnen und Floristen ++ DesignOps in Unternehmen ++ Step by Step: Vom Variable Color Font zur animierten Illu ++ Corporate Language: Branding in Zeiten von Chatbots und Co ++ Agenturen mit Public Space ++ How-to: Video-triggered AR
