Was unterscheidet Raster im Web von Print?
David Liebermann kennt sich aus mit innovativem und experimentierfreudigem Webdesign. Wir haben mit ihm über den Umgang mit Webrastern gesprochen und stellen aktuelle Sites vor, die die bisher üblichen Layoutregeln brechen. Inspiration für den Aufbruch in ein neues Zeitalter des Web- und UX-Designs.
Und da kommt das übliche Design aus Header, Content, Seitenleiste und Footer heraus?
Es gibt das Stereotyp einer Website, wie es das Stereotyp eines Buches gibt. Wir versuchen, dies aufzubrechen und die Möglichkeiten, die das Medium bietet, auch bei der Seitenaufteilung verstärkt zu nutzen.
Bei der Website für Julien von Schultzendorff lassen Sie etwa die Spalten durch Cursor-Berührung größer oder kleiner werden (siehe PAGE 01.20, Seite 11).
Generell wird es leichter einen Fokus zu setzen, Inhalten mehr Platz zu geben, die den User gerade mehr interessieren. Bei https://julienvonschultzendorff.com haben wir die Texte einfach als SVGs mit der Box, in der sie enthalten sind, in die Breite gezogen. In Zukunft würde man das wohl mit variablen Fonts von Ultra-Condensed bis Ultra-Extended lösen.
Hängt die Gestaltung immer an den technischen Möglichkeiten, die gerade existieren?
Ganz wenig ist tatsächlich technisch neu. Die Leute entwickeln nur immer wieder neue Ideen, mit der Technik umzugehen. Inzwischen gibt es eine Community, die diesen Ansatz ganz konsequent verfolgt.
Sehr angesagt sind derzeit prominente horizontale Textzeilen, die wie Ticker durchlaufen. Manche Websites bestehen fast nur noch daraus.
Das ist eigentlich ein Retro-Trend, eine Reverenz ans Internet. Die Möglichkeit mit dem Tag <marquee> eine Laufschrift zu machen, ist ein Relikt aus frühen HTML-Tagen, das gerade wieder äußerst hip ist. Als Strukturelement ist das perfekt, weil nichts deutlicher trennt als sich bewegender Text. Sogar Texte, die zu lang sind für eine Zeile, kann man so unterbringen – wenn sie im richtigen Tempo laufen, bleiben sie gut lesbar.
Die Website, die Ihr Studio für die Kunsthalle Rostock gestaltete, beruht auf einem strengen Gridsystem. Der Header mit seinen rechteckigen Menü-Buttons bewegt sich beim Scrollen im Raster über die unteren Bild- und Textelemente.
Der Header ist relativ dominant, nimmt fast ein Viertel der Desktop-Seite ein. Die Navigation bleibt beim Scrollen nicht nur präsent, sondern gibt der kompletten Seite im Zusammenspiel mit den großen Headlines und dem unterschiedlichen Bildmaterial strukturellen Halt.
Zugleich füllen alle Headlines immer perfekt die Spalte aus. Wie funktioniert das?
Wir haben eigens für die Seite ein System entwickelt, das die Headlines so lange hochskaliert, bis sie die komplette Breite der Spalte ausfüllen. Ein JavaScript-Loop prüft, wie lang die Headline im Initialzustand ist, und setzt die Schriftgröße so lange nach oben, bis sie richtig abschließt. Für den optischen Randausgleich haben wir bei jedem einzelnen Buchstaben geprüft, welchen negativen Margin-Wert er am Zeilenanfang nach links haben muss. Wie beim Setzen einer Buchspalte.
Das sind die spannendsten Websites mit fluiden Rastern
David Liebermann, Maximilian Kiepe und Jana Reddemann stellen einige Websites vor, die auf innovative Weise mit dem Thema Raster umgehen. Neue Anregungen kommen auf http://hallointer.net ständig dazu. Wer die Site im Tab öffnet, versteht auch die Emoji-Headline:
1. Retro-Ästhetik, die sich an Default-macOs-Designelementen bedient, mit denen der User sich selbst ein Grid mit beliebig vielen Spalten bauen kann. Ein Filtersystem erlaubt es dabei, die gewünschten Inhalte nicht nur nach Projekten, sondern auch nach Tags nebeneinander zusammenzustellen, sei es, um einen Überblick zu bekommen oder den Content zu reduzieren. Eine sehr gute Idee! https://haegeman-temmerman.be
2. Sehr gelungen, wie bei diesen Schnittmengen ein Filtersystem für die Inhalte der zappelnden Bubbles entwickelt wurde und wie diese in Relation zueinander stehen! Dahinter steckt wohl ein Datenvisualisierungs-Framework, das aus dem Archiv die über den Filter ausgewählten Arbeiten hinein- oder herausnimmt. Ein beweglicher Raster, der hier mal eine ganz andere Form annimmt, inspiriert von infografischer Gestaltung: http://lynnecarty.info
3. Auch bei der Site von Fanette Mellier stellen die Scrollbalken ein interessantes Strukturelement dar, bei dem die Ästhetik sich perfekt aus der Funktion ableitet: Sie sind notwendig, aber durch ihre überproportionale Breite werden sie zum dominantesten Gestaltungselement. Entwickler Raphaël Bastide arbeitete mit dem jQuery-Plug-in Tiny Scrollbar, im WordPress-Backend kann die Designerin Fanette Mellier die zum Projekt jeweils passenden Farben wählen. Ein simples Design, bei dem nichts zu viel und nichts zu wenig ist.
4. Designer und Entwickler Ole Jenssen zitiert auf der sehr »internettigen« Site des Künstlers Thilo Jenssen kontemporäre Webästhetik und hat unterschiedliche Hover-Effekte verbaut: Bilder kippen in Schräglage, Textfelder färben sich Neongrün ein. So entsteht eine Mischung aus einem strengen zweispaltigen Layout und Verspieltheit, realisiert mit Flexbox. In den Inhaltsboxen kann man in Slideshows scrollen, statt zu klicken (wobei Firefox die Scrollbalken übrigens nicht farbig darstellt).
Hover-Effekt: Für jedes Buch eine Extrafarbe
Liebevoll ausgetüftelte Details machen das Schmökern auf dieser Website zum Vergnügen:
Das dürft ihr doch nicht ändern! So dachten wohl viele in der Community des Berliner Verlags Sternberg Press, bei der sich der einst von Markus Weisbecks Frankfurter Studio Surface definierte schwarze Hintergrund eingeprägt hatte. Doch Knoth & Renner sorgten für einen erfrischenden Cut: Nun definiert Farbe das Layout. Das bunte Kacheldesign entsteht mit den JavaScript-Libraries Color Thief und Tiny Color, die jedes vom Verlag hochgeladene Cover auf die dominantesten Farben untersuchen und Komplementärfarben dazu bestimmen. »Wir lassen daraus wiederum automatisiert die Farbe aussuchen, die die höchste Saturation hat, also am leuchtendsten ist. Sie wird Hintergrund der Kachel – und es ist sehr unwahrscheinlich, dass exakt dieselbe RGB-Farbe noch mal vorkommt«, erklärt Christoph Knoth.
Raster: Details machen die UX zum Vergnügen
Ein Jahr lang arbeiteten er und Konrad Renner (beide sind zudem Professoren für Digitale Grafik an der Hochschule für bildende Künste Hamburg) an der neuen Verlagsseite. Und die ausgetüftelten Details machen die User Experience zum Vergnügen. Die Infotexte zu den Büchern sind quasi in den Kacheln versteckt und gleiten bei Cursor-Berührung hoch. Wobei ein Teil des Covers sichtbar bleibt, sodass man immer weiß, wo man ist. Beim Raster erwiesen sich fünf Spalten für die Darstellung der Bücher nebeneinander als günstig. Aber nicht nur der gelegentliche Wechsel zu drei Spalten lockert das durch die starken Farbabgrenzungen scheinbar strenge Grid auf. »Auf den Themenseiten zu Kunst, Politik et cetera wachsen die Bücher unten auf der Seite plastisch über den Raster hinaus, als ob man sie auf einem Tisch liegen hätte«, so Knoth. »Erst beim Scrollen gleiten sie in die farbigen Kästen hinein.«
Zudem sind die Kacheln verschieden hoch. Denn während die Bücher, die mal extrem hochkant, mal eher quadratisch daherkommen, von der Größendarstellung automatisch ein wenig angeglichen werden, brauchen Publikationen mit ausführlichen Titeln nun einmal mehr Platz. Steht in einer Zeile also ein Buch mit langem Namen, müssen alle Kacheln entsprechend höher werden. Die Designer, die selbst direkt im Browser mit HTML gestalten, lösten Probleme dieser Art mit Flexbox. Dabei arbeiteten sie eng mit systemantics zusammen, Lutz Isslers »bureau for informatics«, das viel für Kundschaft aus dem Kulturbereich tätig ist. Die Entwickler setzten das Backend schließlich in WordPress auf und sorgten mit dem WooCommerce-Plug-in für die Shopping-Funktionalität. Das Ergebnis: eine perfekte Onlinebuchhandlung.
Webdesign: Das 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, zeigen wir ihnen, was für aufregende Ergebnisse sich durch flexible Weblayouts gestalten lassen. Erfahren Sie, was Raster im Web alles können!
Weitere Teile des Webraster-Artikels können Sie als P+-Abonnent hier online lesen:
- Webdesign: Was fluide Gestaltungsraster alles können
- Interview mit Webraster-Spezialist Daniel Spatzek/ Webraster ohne Code
TIPP! Dieser Artikel stammt aus PAGE 05.2020 , die Sie als PAGE+ Abonnent gratis hier downloaden können:
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
