Mit Flexbox und CSS Grid stehen relativ einfach anwendbare Möglichkeiten für flexible Weblayouts zur Verfügung. Aber das ist es nicht allein: Eine neue Generation von Designern verbindet grafische Sensibilität mit Coding-Know-How – und das führt zu aufregenden Ergebnissen. Wir verraten, was Designer mit fluiden Rastern erreichen können.
Es bewegt sich was … Probieren Sie doch mal aus, was mit den Rastern auf der von Liebermann Kiepe Reddemann gestalteten Website http://lemoyneproject.com passiert
»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 vieles in den Kinderschuhen. Nicht etwa bei bildlastigen Websites, wo mit 2D- oder 3D-Animationen längst viel Sehenswertes passiert. Sondern beim Layouten 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öglichkeiten 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, anpassungsfähige Raster für verschiedene Viewports zu entwickeln. An der allgemeinen Gleichförmigkeit änderte 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.
So geht's weiter
Was Raster im Web alles können
Fluide Gestaltungsraster: eine neue Generation von Gestaltern
