Gestaltungsraster – Grundgerüst für das Webdesign

Jedes Webdesign beginnt mit der Grundfläche der Website. Es muss zum einen festgelegt werden welche Ausmaße diese Grundfläche haben soll und im nächsten Schritt geht es an die Aufteilung für die einzelnen Elemente. Bei diesem Schritt nutzt der Webdesigner gerne ein Raster.

Aber fangen wir erst einmal ganz vorne an und stellen uns die Frage, wie groß bzw. breit unsere Website oder unser Blog werden soll.

Was ist die optimale Breite für eine Website?

Ja… gute Frage – es kommt, wie so oft, darauf an. Um wirklich festlegen zu können, welche Breite für deine Site optimal ist, müsstest Du eine Zielgruppenanalyse durchführen und dabei ermitteln welche Auflösung der überwiegende Teil deiner Besucher hat. Dazu könntest Du nun eine Agentur beauftragen, die sich damit auskennt und für dich die Daten erhebt. Ich persönlich halte so aufwendige und sicher auch teure Nachforschungen für die meisten Webprojekte für übertrieben und bevorzuge die Schätzung mit allgemeinen Bordmitteln und einer Portion Menschenverstand.

Überlege dir einfach, welche Zielgruppe Du erreichen willst, bzw. wer sich für deinen Blog/deine Website interessieren könnte. Es ist zum Beispiel davon auszugehen, dass technikaffine oder junge Besucher einen relativ großen Monitor besitzen und deshalb auch eine größere Auflösung eingestellt haben, als zum Beispiel Senioren, die weniger darauf aus sind permanent das Neueste vom Neuesten zu besitzen.

Mit ein wenig Sucheinsatz lassen sich dazu sicherlich auch ein paar brauchbare Statistiken im Web finden, die Du für deine Auswertungen nutzen kannst, wie zum Beispiel die webhits-webstats.
Diese Statistik sagt uns auch, dass die meisten Surfer im Internet mit einer Auflösung von 1024 x 768 Pixel unterwegs sind.

Um nun betreffend einer geeigneten Websitebreite endlich zum Punkt zu kommen: Aufgrund der verbreitesten Auflösung von 1024 x 768 Pixeln ist eine Breite von ca. 900 bis 1000 Pixeln für deine Website anzuraten.

Die zweithäufigste Auflösung ist 1280 x 1024 Pixel. Bei dieser nächstgrößeren Breite bist Du ebenfalls mit 900 bis 1000 Pixel auf der sicheren Seite. Was Du aber noch beachten solltest, ist, deine Site zu zentrieren, damit es nicht aussieht wie an die Seite rangeklatscht, gerade bei größeren Monitoren wirkt das sehr unschön. Dadurch ist auch auf einer Seite des Bildschirms unverhältnismäßig viel leerer Raum, das ist Disharmonie pur.

Ob Du letztendlich 900 oder 1000 Pixel oder irgendwas dazwischen für deine Website wählst, kommt dann nur noch auf den Inhalt drauf an, je nachdem wie viel Platz die Elemente brauchen. Nachdem wir nun eine ungefähre Vorstellung von der Breite der Website haben, kommen wir nun zu den Rastern.

Der Goldene Schnitt und die Drittel-Regel

Den goldenen Schnitt habe ich bereits in diesem Artikel ausführlich behandelt deshalb gehe ich an dieser Stelle gleich weiter zur Drittel-Regel.

Die Drittel-Regel ist einfacher gestaltet als der goldene Schnitt. Während beim goldenen Schnitt die Fläche in zwei Teile geteilt wird, wovon der eine Teil fast doppelt so groß ist als der andere Teil, sind es bei der Drittel-Regel drei gleichmäßig große Abschnitte. Die Drittel kannst Du nach Bedarf nochmal teilen um mehr Möglichkeiten für die Positionierung kleinerer Elemente zu schaffen.

Zu Anfang ist es ganz hilfreich einige Skizzen dieses einfachen Rasters anzufertigen und dann die Elemente in verschiedenen Varianten im Raster anzuordnen um einen ersten Eindruck der Wirkung zu erhalten. Die Elemente, mit denen Du dabei hantierst sind einmal die Navigation(en), der Header, der wiederum ein Logo oder andere Elemente enthalten kann, der Footer, eventuell eine Seitenleiste und natürlich der größte Baustein, der eigentliche Inhalt. Wenn Du nicht genau weißt, welche Elemente für deine Seite alle wichtig sein könnten und Du unsicher über den Aufbau bist, so kann dir sicherlich ein Storyboard weiterhelfen.

Hier siehst Du eine schnelle Skizze von mir, in der ich das Logo, den Slogan bzw. den Namen, zwei Navigationen und den Text/Inhalt angeordnet habe.

Angeordnete Elemente im Raster nach der Drittel-Regel

Experimentiere mit der Drittel-Regel, die Skizzen müssen dabei nicht genauestens ausgearbeitet sein, es ist kein Kunstwerk gefragt. Es geht dabei darum, ein Gerüst für deine Website zu schaffen auf dem Du aufbauen kannst.

Ein Tipp zum Schluss: Wenn Du keine Lust hast immer wieder eine neue Skizze anzufertigen um ein Layout zu finden, das dir zusagt, schneide deine Elemente einfach aus Papier aus und verschiebe sie auf dem Raster solange, bis Du die passende Layoutvariante gefunden hast.

In einem weiteren Artikel zum Thema Gestaltungsraster schauen wir uns dann das Grid System an.

About The Author

Diana Ludwig

Webdesignerin, Pinselschwingerin, Bloggerin und Studentin der Medieninformatik. Mein Steckenpferd ist das freie Open Source 3D Programm Blender, über das ich auf Blender-Tutorial schreibe. Du findest mich auch auf Google+ oder abonniere unseren RSS-Feed.

1 Comment