06 Mai 2010, Geschrieben von Rene Haas in Gestaltung, 4 Kommentare

Gestaltungsraster – Ordnung muss sein!

„Der Ras­ter glie­dert Infor­ma­tio­nen klar und über­sicht­lich inner­halb eines vor­de­fi­nier­ten Rau­mes.“ — Die­ser Satz klingt wenig nach krea­ti­ver Frei­heit, son­dern mehr nach einer schöp­fe­ri­schen Zwangs­ja­cke. Dass dies nicht zwin­gend so sein muss, und wie man Gestal­tungs­ras­ter rich­tig ein­setzt, ohne sich selbst damit ein­zu­schrän­ken, ver­su­chen wir in die­sem Bei­trag aufzuzeigen.

Ein Berg­stei­ger würde wohl nie­mals auf die Idee kom­men, einen Gip­fel zu erstür­men, ohne an Siche­rungs­seil, Kara­bi­ner und Steig­ei­sen zu den­ken. Anders ticken lei­der immer noch die meis­ten Gestal­ter, die nicht für Print­pro­dukte arbei­ten, hier wird meist fröh­lich und frei drauf­los gewer­kelt und das alles ohne Hilfs­li­nien und Sys­tem. Wun­dert es da noch jeman­den, dass wir im Zeit­al­ter der immer schnell­le­bi­ge­ren Infor­ma­tio­nen einen fes­ten Halt suchen? Gestal­tungs­ras­ter kön­nen uns hel­fen, dem Betrach­ter die­sen Halt zu bieten.

Eine klare Glie­de­rung der Infor­ma­tio­nen sollte nicht als Ein­schrän­kung ange­se­hen wer­den, son­dern viel mehr als das was es ist — ein Leit­sys­tem für Infor­ma­tion und Kom­mu­ni­ka­tion. Denn seit jeher bedient sich der Mensch einer natür­li­chen Gabe – das Erfas­sen von wie­der­keh­ren­den Mus­tern, Ereig­nis­sen und deren Bedeutung.

All­ge­mei­nes

Wenn man sich mit Ras­tern beschäf­ti­gen will, sollte man sich zuerst vom Bild eines stei­fen Kon­strukts von Linien und Recht­ecken ent­fer­nen. Die heu­ti­gen Gestal­tungs­ras­ter rei­chen von einem sta­ti­schen Mus­ter aus Blö­cken bis hin zu sehr kom­ple­xen und durch­aus fle­xi­blen Gebil­den. Wer einen Ein­druck über die unglaub­li­che Viel­falt von Gestal­tungs­ras­tern gewin­nen möchte, dem sei das Buch „Grid Index“ von Cars­ten Nico­lai wärms­tens ans Herz gelegt.

Die Vor­teile von Ras­tern (für Gestalter)

Ein Gestal­tungs­ras­ter sollte den Desi­gner lei­ten, ihn dabei aber nicht in sei­ner Krea­ti­vi­tät ein­schrän­ken. Lei­der wird genau diese Ein­schrän­kung immer wie­der als eines der Haupt­ar­gu­mente gegen die Ver­wen­dung von Gestal­tungs­ras­tern auf­ge­führt. Komi­scher­weise habe ich aber noch nie gehört, dass das Zeich­nen auf einem Mil­li­me­ter– oder Kar­o­pa­pier die Krea­ti­vi­tät ein­schrän­ken würde. Die große Kunst beim Gestal­ten mit Gridsys­te­men liegt darin, die Regeln zwar zu ken­nen, sie aber immer wie­der gekonnt zu bre­chen, um der Lan­ge­weile ein Schnipp­chen zu schla­gen. Die Mög­lich­kei­ten, die Grids dafür bie­ten, sind nahezu unbegrenzt!

Die Vor­teile von Ras­tern (für Benutzer)

Den größ­ten Nut­zen aus der Ver­wen­dung von Ras­tern zieht aller­dings nicht der Gestal­ter, son­dern der Benut­zer. In einem so gestal­te­ten Lay­out fin­det er sich schnel­ler zurecht, kann Struk­tu­ren fest­stel­len und hat sowohl opti­sche als auch inhalt­li­che Anker­punkte. Sol­che Sys­teme unter­stüt­zen die natür­li­che Auf­nahme von Infor­ma­tio­nen, und bie­ten sich somit ins­be­son­dere dann an, wenn eine Pro­duk­tion nicht nur hübsch aus­se­hen, son­dern auch Infor­ma­tio­nen trans­por­tie­ren soll (und das ist in den aller­meis­ten Fäl­len so).

Bei­spiele gän­gi­ger Rastersysteme

Die hier auf­ge­führ­ten Bei­spiele bezie­hen sich vor­nehm­lich auf Print­pro­dukte – kön­nen aber durch­aus auch im Web­de­sign ihre Ver­wen­dung fin­den. Jedoch gibt es bei Non-Print Pro­duk­ten bedingt durch die Moni­tor­auf­lö­sung einige Beson­der­hei­ten, auf die wir spä­ter ein­ge­hen werden.

• Ein­spal­ti­ger Ras­ter:
  Die­ses „Ras­ter­sys­tem“ ist wohl das ein­fachste und eig­net sich vor allem für Pro­dukte mit hohem typo­gra­fi­schen Anteil wie z.B. Bücher. Hier­bei sollte man aller­dings schon beim Satz­spie­gel beach­ten, dass die Zei­len nicht zu lang aus­fal­len, um eine gute Les­bar­keit zu erzie­len, die in sol­chen Wer­ken stark im Vor­der­grund steht. Der ein­spal­tige Ras­ter ist span­nungs­los und über­trägt Infor­ma­tio­nen sehr neutral.

• Zwei­spal­ti­ger Ras­ter:
  Mit dem Ein­satz eines zwei­spal­ti­gen Lay­outs ste­hen dem Gestal­ter wesent­lich mehr Mög­lich­kei­ten zur Ver­fü­gung, indem er die Spal­ten in unter­schied­li­che Grö­ßen ein­teilt oder Bil­der bzw. Text­blö­cke abwech­selnd über eine oder auch beide Spal­ten lau­fen lässt. Hat man sich mit die­sem Sys­tem ange­freun­det und die Funk­tion dahin­ter ver­stan­den, bie­ten sich schon hier immense Lay­out­va­ria­tio­nen. Durch den rela­tiv ein­fa­chen Auf­bau ist das zwei­spal­tige Ras­ter in mei­nen Augen das kom­for­ta­belste Sys­tem wenn es darum geht, sich mit Gestal­tungs­ras­tern zu beschäf­ti­gen. Pro­dukte, die basie­rend auf einem sol­chen Sys­tem ange­fer­tigt wer­den, hin­ter­las­sen den Ein­druck der Wer­tig­keit und wir­ken groß­zü­gig. Wer hat, der hat!

• Drei­spal­ti­ger Ras­ter:
  Bei drei­spal­ti­gen Sys­te­men sind wir beim All­roun­der ange­kom­men. Wohl kein ande­res Sys­tem wird von Print und Non-Print so exzes­siv genutzt wie der bekannte „Dreier“. Viele Gestal­ter schwö­ren wegen sei­nem Span­nungs­reich­tum auf das drei­spal­tige Lay­out. Bil­der über eine, zwei oder auch alle drei Spal­ten sind denk­bar um das Ras­ter auf­zu­lo­ckern. Ebenso ver­hält es sich mit Text­blö­cken, Head­lines , Farb– oder Frei­flä­chen (Weißraum).

• Vier­spal­ti­ger Ras­ter:
  Dyna­mik, Fle­xi­bi­li­tät und Kon­trast­reich­tum bie­tet die­ses Grid. Mit Sys­te­men, die vier oder mehr Spal­ten auf­wei­sen, kommt der Fak­tor der mini­ma­len Medi­en­größe noch bei der vor­he­ri­gen Pla­nung hinzu. Das kleins­tes For­mat für ein vier­spal­ti­ges Lay­out sollte DIN A4 (gilt nur für den Print­be­reich) nicht unter­schrei­ten, da sonst Zei­len­länge oder Schrift­größe einer ver­nünf­ti­gen Les­bar­keit ent­ge­gen­ste­hen. Bei solch einem Spal­ten­um­fang soll­ten Texte und Bil­der prin­zi­pi­ell über meh­rere Spal­ten lau­fen, um die Über­sicht nicht nega­tiv zu beein­flus­sen. Eine Aus­nahme bil­det hier natür­lich die Mar­gi­nalspalte (Rand­spalte). Durch Ein­satz von Frei– oder Farb­flä­chen lässt sich das Lay­out auf­lo­ckern und so Über­sicht schaffen!

Sta­ti­sche und fle­xi­ble Rastersysteme

Möchte man bei der Erstel­lung eines Cor­po­rate Design schon auf Ras­ter­sys­teme zurück­grei­fen, so sollte man beach­ten, wel­che Medien der Kunde als Wer­be­trä­ger ver­wen­den möchte. So kön­nen Flyer der Größe DIN A5 oder DIN LANG nicht wie ein Brief­bo­gen oder gar eine Web­prä­senz behan­delt wer­den. Um die­ses Pro­blem zu umge­hen, sollte man auf ein dyna­mi­sches Ras­ter zurück­grei­fen. Dyna­misch kann im ein­fachs­ten Sinne ein Erset­zen von abso­lu­ten Zah­len­wer­ten durch pro­zen­tuale Anga­ben sein.

Ein Logo, das auf­grund eines ein­heit­li­chen Gestal­tungs­ras­ters für eine Vis­ten­karte auf 1cm x 1cm  ver­klei­nert wer­den müsste, liegt natür­lich nicht im Sinne des Anwen­ders. Eine bes­sere Mög­lich­keit wäre es, die ein­zel­nen Ras­ter­zel­len, anhand von For­meln in ihrem Ver­hält­nis zuein­an­der zu ver­klei­nern. So  kann sowohl eine mini­male als auch maxi­male Fix­größe für ein Ele­ment bestimmt werden.

Beson­der­hei­ten im Non-Print Bereich

In Sachen Non-Print gibt es, wie anfangs schon erwähnt, einige Beson­der­hei­ten, was das Erstel­len von Grids angeht. Zum einen wäre auch hier wie­der die For­mat­frage, also wel­che Bild­schirm­auf­lö­sung hat der Benut­zer, zum Ande­ren gibt es im Web einige Stan­dards, die sich über die Jahre ein­ge­bür­gert haben und von denen man kei­nes­falls abwei­chen sollte. So sollte man z.B. beach­ten, dass das Logo stets in der lin­ken obe­ren Ecke einer Web­site wie­der­zu­fin­den ist. Die Navi­ga­tion sollte ent­we­der hori­zon­tal im obe­ren Bereich oder ver­ti­kal am lin­ken Rand der Web­site ihren Platz fin­den. Eine Navi­ga­tion an ande­rer Stelle der Seite ist zwar theo­re­tisch mög­lich, erfor­dert aber sehr viel Erfah­rung und eine makel­lose Umset­zung,  da sie ansons­ten vom User nicht als sol­che erkannt und genutzt wird. In Pro­gram­men, die für das Lay­ou­ten von Web­sei­ten her­an­ge­zo­gen wer­den, in unse­rem Bei­spiel Adobe Pho­to­shop, las­sen sich soge­nannte Doku­men­ten­ras­ter in den Vor­ein­stel­lun­gen defi­nie­ren. Diese kön­nen mit einem abso­lu­ten Wert wie „XYZ Pixel“ oder auch mit einem pro­zen­tua­len Wert dekla­riert wer­den. Eine wei­tere und viel­leicht etwas ele­gan­tere Lösung bie­ten hier Plug-Ins wie zum Bei­spiel der Grid­ma­ker von And­rew Ingram. Sol­che Plug-Ins sind inso­fern nette Hel­fer, dass sie uns Zeit spa­ren und gleich Spal­ten anstatt nur eines Doku­men­ten­ras­ters anle­gen. Doch zurück zum Doku­men­ten­ras­ter! Für das Arbei­ten an Soft­ware­ober­flä­chen bie­tet sich eine Unter­tei­lung des Doku­men­ten­ras­ters in 8 Pixel an, da jede Bild­schirm­auf­lö­sung durch die­sen Wert teil­bar ist. So erreicht man, dass einem am Doku­men­te­nende nicht eine halbe Ras­ter­zelle über­bleibt, was das Rech­nen unge­mein erschwert. Da für Webauf­tritte (mitt­ler­weile) meis­tens eine Breite von 960 Px bis 1000 Px gewählt wird, kann man sich dort durch eine Zeh­ner­auf­tei­lung eini­ges an Zeit beim Errech­nen der Spal­ten­breite ersparen.

Zeit­ras­ter

Bis­her haben wir uns auf Sys­teme beschränkt, die aus­schließ­lich aus geo­me­tri­schen For­men bestan­den und einen Raum in zwei­di­men­sio­na­ler oder  auch drei­di­men­sio­na­ler Weise ein­teil­ten. Ein beson­de­res Häpp­chen haben wir uns aber bis zu Letzt auf­ge­ho­ben und zwar das Zeit­ras­ter. Es wurde anhand von Stu­dien fest­ge­stellt, dass „ein Augen­blick“ für den Men­schen ziem­lich genau 3 Sekun­den dau­ert. Auf die­ser Grund­lage auf­bau­end kann man nun damit begin­nen, Zeit­ras­ter zu erstel­len um das emo­tio­nale Erleb­nis des Ber­ach­ters zu stei­gern. Häu­fig fin­den sol­che Zeit­ras­ter in der Film­bran­che ihre Ver­wen­dung, jedoch lässt sich diese Erkennt­nis auch auf Ani­ma­tio­nen im Web oder in Audio­for­ma­ten übertragen.

Fazit

Wie man sieht, sind Ras­ter­sys­teme alles andere als lang­wei­lige Gebilde. Sie sind unsere Hel­fer in Sachen erfolg­rei­cher Kom­mu­ni­ka­tion. Eben­falls sind sie keine Web 2.0 Erfin­dung, wie man viel­leicht durch das ver­mehrte Auf­tre­ten der Ras­ter­sys­teme in den letz­ten Jah­ren den­ken könnte, son­dern schon seit hun­der­ten von Jah­ren ein viel ver­wen­de­tes Hilf­mit­tel für Gestal­tungs­auf­ga­ben. Ihren Sie­ges­zug im Web haben sie gerade erst begon­nen und es bleibt abzu­war­ten, wie sich Ras­ter auf die­sem Gebiet wei­ter­ent­wi­ckeln wer­den. Span­nend dürfte in den nächs­ten Jah­ren ins­be­son­dere die Ver­wen­dung von Ras­tern bei der Gestal­tung von Inhal­ten für neu­ar­tige Geräte wie das iPad wer­den — hier ent­steht ja im Grunde ein völ­lig neuer Markt mit neuen Mög­lich­kei­ten aber auch Her­aus­for­de­run­gen. Die Zukunft ist da — und wir sind mit­ten­drin, im 3-Sekunden-Raster der Zeit ;)

Was hal­tet ihr von Gestal­tungs­ras­tern? Uner­läss­li­che Hilfe bei der täg­li­chen Arbeit oder fühlt ihr euch durch Ras­ter doch eher in eurer schöp­fe­ri­schen Tätig­keit ein­ge­schränkt?  Übri­gens — die Frage geht nicht nur an die Gra­fi­ker: Auch wer als Foto­graf zum Bei­spiel die Drit­tel­re­gel oder den gol­de­nen Schnitt zur Gestal­tung sei­ner Bil­der ver­wen­det, greift auf eine Art Ras­ter­sys­tem zurück!

Wei­ter­füh­rende Links (engl.):

• www.Grid-Based.com
• Grid Based Design Toolbox
• www.thegridsystem.org
• www.960.gs
• Flickr — the­gridsys­tem Pool
• 15 Extre­mely use­ful css grid lay­out gene­ra­tor for web designers