Webdesign: Was fluide Gestaltungsraster alles können

»Das Internet ist für uns alle Neuland«, hat Angela Merkel mal gesagt und dafür viel Spott geerntet. In so mancherlei Beziehung (an die sie gar nicht dachte) lag die Kanzlerin aber keineswegs falsch. Zum Beispiel steckt aus gestalterischer Sicht nach wie vor vie­les in den Kinderschuhen. Nicht etwa bei bild­las­ti­gen Websites, wo mit 2D- oder 3D-Animatio­nen längst viel Sehenswertes passiert. Sondern beim Lay­outen schnöder textlastiger Content-Seiten, die sich sehr oft noch statisch präsentieren. Als hätte sich nicht herumgesprochen, wie sensationell flexibel und vielschichtig digitale Medien im Gegensatz zu Papier prinzipiell sind.

Statische Content-Seiten: Woran liegt’s?

Größtenteils wohl an der Technik, die es über Jahre unmöglich bis schwierig machte, mit beweglichen Grids die aus den Printmedien überlieferten gestalterischen Grenzen zu sprengen. Am Anfang der Internet-Historie standen starre Frames und später CSS-Tabellen, deren Aufgabe es schlicht war, analog gedachte Raster ins Web zu übersetzen. Je mehr Mög­lichkeiten CSS dann im Laufe der Zeit bot, desto komplizierter wurde es – das Potenzial blieb häufig ungenutzt. Dazu kam die neue Herausforderung, Websites responsiv zu gestalten. Um das hinzukriegen, waren möglichst simple Layouts gefragt, nach dem Motto »Bloß keine Experimente«. Ein Zeitalter der Dominanz von Templates und des Designs von der Stange begann.

Flexbox oder CSS Grid? Zukunftsfähige Layout-Module

Das sogenannte CSS Flexible Box Layout Module, kurz Flexbox, erleichtert es seit 2012 zwar, anpassungs­fähige Raster für verschiedene Viewports zu ent­wi­ckeln. An der allgemeinen Gleichförmigkeit än­der­­te sich zunächst aber wenig. Auf Dauer könnte nun das neue CSS Grid (CSS Grid Layout Module) frische Perspektiven eröffnen. Mit wenigen Codezeilen lassen sich damit Flächen in Spalten und Zeilen aufteilen – ein riesiger Schritt in die richtige Richtung.

Die Site des Züricher Ausstellungsraums Lemoyne Project legt per Hover-Effekt ein Grid offen, das bei Berührung immer kleinteiliger und facettenreicher wird: http://lemoyneproject.com  

Weblayout: Endlich tut sich Spannendes

Dass derzeit Layouts immer öfter zum Leben erwachen, erklärt man beim jungen Hamburger Studio Liebermann Kiepe Reddemann jedoch mit einem ganz anderen Trend. »Ein genereller Umbruch geht dahin, dass Gestalter zu programmieren anfangen. Raster sind Teil ihrer Ausbildung, ihre Arbeit ist davon stark geprägt. Das führt natürlich im Webdesign zu anderen gestalterischen Ergebnissen«, sagt Jana Reddemann.

Auch bei den drei Agenturgründern, die sich die »Erforschung und Ausweitung von Möglichkeiten und Konventionen« sowie die »Freude an der Interaktion« auf die Fahnen schreiben, gehen Frontend-Entwicklung und -Design Hand in Hand. Ihr Know-how ist gefragt, an Hochschulen wie der HFBK Hamburg, der HGB Leipzig oder der Burg Giebichenstein Kunsthochschule Halle geben sie es in Workshops und Lehraufträgen weiter. »Das Denken der Studierenden ändert sich gerade. Webdesign hatte lange ein Imageproblem, viele stellten sich eine IT-Abteilung im Keller vor. Aber langsam erwacht die Faszination«, stellt David Liebermann erfreut fest.

Dieser gegenüber Code aufgeschlossenen Desig­nergeneration kommt auch die CSS-Grid-Technik ent­gegen. Noch haben sich erfahrene Webdesigner und -developer bei ihren Experimenten mit Gestaltungs­rastern aufs Um-die-Ecke-Denken mit allerlei Tricks eingeschworen. Zudem ist CSS Grid bisher nicht mit allen Browsern kompatibel (zum Beispiel nicht mit dem neuen Microsoft Edge), was bei Projekten für breite Zielgruppen abschreckt. Die Arbeit damit sei aber »faszinierend einfach«, meint Maximilian Kiepe, der das Layoutmodul zurzeit bei der Entwick­lung einer Typo-App im Auftrag der FH Aachen einsetzt. »Revolutionäre neue Gestaltungsmöglich­kei­ten bringt CSS Grid fürs Erste nicht«, sagt Kiepe, »aber es vereinfacht die Entwicklung responsiver Seiten enorm, auch mit komplexeren Rastern oder etwa verschachtelten Subgrids.«

Muss man also selbst programmieren können, um interessante Layouts hinzubekommen? Für Nichtcoder naht Hoffnung in Form visueller Webedito­ren, die sich wie bekannte Layoutprogramme anfühlen, aber CSS Grid einbinden. Zwei davon stellen wir hier – nach einem Interview mit Daniel Spatzek – kurz vor. 

Was Raster im Web alles können

Lassen Sie sich inspirieren! Wer anfängt, Weblayouts in beweglicher Form zu denken, entdeckt eine Fülle neuer gestalterischer und funktionaler Möglichkeiten. Hier einige Anregungen:

1. Durch Parallax-Effekte setzen sich Layouts erst beim Scrollen zusammen, indem die Elemente im Raster zueinanderfinden (siehe auch  www.danielspatzek.com)

2. Spalten verändern ihre Breite bei Cursorberührung (https://postdesignfestival.org , Design und Development: Peter Urban, Kopenhagen)

3. Beim Herunterscrollen zoomen Bilder aus dem Raster und zeigen sich bildschirmfüllend (www.teamkanyedaily.com, Design und Development: Arvin Leeuwis von Lama Lama, Amsterdam).

4. Im Layout versteckt sich eine mittlere Spalte mit wechselnden Bildern, die jeweils erst bei Berührung der entsprechenden Textzeile links sichtbar werden (https://meltfestival.de, Design: Goodlive AG, Development: Product Gang).

5. Von einer kleinen ausgegrauten Ansicht in einer »Marginalspalte« rechts bewegen sich Fotos per Maus­klick in die breite Content-Spalte links und zeigen sich in ganzer Größe – schön zum Beispiel für Slide­shows (www.davidpayr.com , Design: Studio Es, Development: Florian Karsten)

4. Rasterflächen können auf diversen Ebenen unterschiedliche Informationen enthalten, etwa bei Shopping-Sites. So lässt ein Anbieter edler Beschich­tungen Produktbilder per Klick in die Zelle der benachbarten Spalte springen, derweil an der ursprüng­lichen Stelle Informationen und Links sichtbar werden. Damit lassen sich wiederum weitere Materialvarianten anzeigen. Beide Rasterflächen werden also mehrfach genutzt und interagieren untereinander. Als Produktbilder wurden hier übrigens Filmaufnahmen der Oberflächen als Videoloops ein­ge­bettet (https://adieutristesse.at , Design: Studio Es, De­velopment: Florian Karsten).

5. Beliebt sind momentan auch horizontal betonte Grids, zum Beispiel auf Festival-Websites (www.­miragefestival.com, Design: Cécile + Roger, Development: Martin Laxenaire).

6. Querzeilen, die über die ganze Site laufen, können dabei in einer fließend animierten Bewegung auch mal zur Seitenleiste einer Unterseite werden. In diesem Fall kam barba.js zum Einsatz (https://­kristintrueb.de, Design: KoerperHerfurth, Develop­ment: Willi Harder).

Fluide Gestaltungsraster: eine neue Generation von Gestaltern

In unserer Titelgeschichte aus PAGE 05.2020, die Sie als P+-Abonnent komplett downloaden können, stellen wir Ihnen u.a. eine neue Generation von Gestaltern vor, die grafisches Können mit Coding-Know-how verbindet. Laden Sie sich die Ausgabe direkt runter oder lesen Sie weitere Teile der Webraster-Titelgeschichte als P+-Abonnent online:

• Was unterscheidet Raster im Web von Print?
• Interview mit Webraster-Spezialist Daniel Spatzek/ Webraster ohne Code

PDF-Download: PAGE 05.2020

Produkt-Details anzeigen

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

8,80 €

AGB