Große Vorbilder

von Fries Websolutions

Die Seitenentwürfe und Tabellen könnten manchmal schon etwas mehr Schwung und Farbe gebrauchen. Leider machen die Surf- und Sehgewohnheiten aus einer guten Absicht oft auch das Gegenteil. Im Ergebnis sieht dann alles sehr gleich aus. Webdesign könnte seine Vorbilder auch aus der Kunst beziehen.

Wie zum Beispiel Piet Mondrians (1872-1944) Bilder sie zieren als Kunstdrucke unzählige von Wohnzimmern. Seine Linien, Rechtecke und Flächen machen das Design auch für Tabellenlayouts zugänglich. Natürlich lässt sich da nichts 1:1 übertragen, die gemalten Bilder sind schließlich alles andere als mit einem Lineal gezogen.

Aber darum geht es auch nicht. Interessant ist vor allem die Aufteilung der Flächen und ihre Farbigkeit, davon kann man als Webdesigner eine menge Anregungen sammeln. Und selbst wenn sich nur wenig davon in die Praxis umsetzen lässt, ein Nachbau ist eine Herausforderung und macht Spaß.

Mondriantabelle 1
Das Original heißt "Komposition in Rot, Gelb und Blau" und ist aus dem Jahr 1926. Es besteht hier (im Original Öl und Leinwand) aus reinem HTML und ist einfach nachzumachen. Die dicken Rahmen entstehen durch geschicktes "padding und "spacing" innerhalb einer verschachtelten Tabelle. Es lässt sich gut variieren und auf die komplette Seitengröße ausdehnen.

Der Künstler schrieb darüber: "Um zu verhindern, dass Flächenornamente sich als Rechtecke manifestieren, reduzierte ich später die Farbe und betonte die umgrenzenden Linien. Dadurch wurden die Pläne nicht nur getrennt und aufgehoben, sondern ihre Beziehungen wurden auch aktiver". Raum, Form und Farbe bilden ein dichtes Gewebe, das über die Bildränder hinweg strömt, und die Wand füllt, den Raum, das menschliche Leben."

Quellcode

<table width="465" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000" height="576"><tr><td><table width="464" cellspacing="12" cellpadding="12" height="562"><tr><td bgcolor="#FFFFFF" height="89" width="59">&nbsp;</td><td colspan="2" rowspan="2" bgcolor="#FF0000">&nbsp;</td></tr><tr><td bgcolor="#FFFFFF" height="293" width="59">&nbsp;</td></tr><tr><td bgcolor="#000099" rowspan="2" width="59">&nbsp;</td><td bgcolor="#FFFFFF" rowspan="2">&nbsp;</td><td bgcolor="#FFFFFF" width="54" height="66">&nbsp;</td></tr><tr><td bgcolor="#FFFF00" width="54" height="90">&nbsp;</td> </tr></table></td></tr></table>

Mondriantabelle 2
Vorbild war die Komposition Nr. 10. Großflächig, bietet viel Platz für Texte.

Mondriantabelle 3
Vorbild war die Komposition Nr. 3. Ebenfalls mit sichtbaren Tabellenrändern.

Mondrian Info

Zu unserer Schande müssen wir gestehen, dass andere auch schon drauf gekommen sind. Der Mondrimat löst die Sache mit Frames, und zwar ohne dass codiert werden müsste.