Gestaltungsraster für Webseiten

0 | 26767 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Gestaltungsraster für Webseiten" mit Ihrem Wissen!

Anzeige Hier werben

Raster werden in der Gestaltung dazu genutzt Inhalte ansprechend anzuordnen. Zusätzlich geben Sie dem Designer die Möglichkeit auf flexible Weise mehrere Entwürfe zu erstellen, die im Kern jedoch zusammengehören. Bei Betrachter schaffen Raster eine Orientierungshilfe und ein Wiedererkennungsgefühl ohne dabei, danke der Flexibilität, langweilig zu wirken.

Vorüberlegungen & Einführung

Bei der Planung von umfangreichen Webauftritten sollten Sie das Design der neuen Seite, sowie das Layout digital erstellen. Mit Hilfe von Programme wie Adobe Photoshop oder Adobe Illustrator lässt sich dies leicht realisieren.

Ein Raster besteht eigentlich nur aus einem Gitter aus Hilfslinien, die jedes professionelle Layoutprogramme von Haus aus schon mitbringt. Mit diesen Hilfslinien erstellen wir uns eine Aufteilung in Quadranten in denen später Inhaltselemente oder Navigationselemente platziert werden.

Dabei können die Raster entweder durch einfache Hilfslinien erstellt werden, oder durch doppelte Hilfslinien. Durch die doppelten Hilfslinien können zugleich Zwischenräume für das Raster definiert werden.

Bild zu Gestaltungsraster für Webseiten

Die Nutzung eines Designrasters bedeutet nicht gleichzeitig Langweile. Durch die Nutzung von Rastern kann sich der Benutzer auf die Struktur und den "Rythmus" der Seite einstellen. Die Webseite bekommt dadurch zusätzlich auch einen Wiedererkennungswert.

Raster erstellen

Bei der Gesamtbreite Ihres Layouts empfiehlt es sich, sich an der Zielgruppe der Webseite zu orientieren. Für technisch versierte Webseiten, kann hier eine höhere Auflösung gewählt werden, wohingegen Sie bei Seiten über alte Uhren beispielsweise eine niedrige Auflösung wählen sollten. Bei Webangeboten die für eine breite Zielgruppe oder Leuten mit Sehschwächen oder Behinderungen gedacht ist, sollten Sie im Rahmen der Barrierefreiheit auch immer zu der niedrigeren Auflösung tendieren.

Beginnen Sie bei der Erstellung des Rasters am Besten mit der Spalte für Ihren Hauptinhaltstext. Diese Spalte sollte weder zu breit noch zu schmal sein, um eine optimale Lesbarkeit durch den Besucher zu gewährleisten. Bewegen Sie sich am Besten im Bereich von 400-500 Pixel für die Inhaltsspalte.

Fügen Sie der Inhaltsspalte "Stege" hinzu. Diese schaffen Zwischenräume zwischen den einzelnen Spalten. Die Breite Ihrer Stege sollten sich zwischen 10-20 Pixel bewegen.

Legen Sie nun die weiteren Spalten an. Achten Sie hierbei auf die nötige Breite für Navigation und ggf. einer dritten Inhaltsspalte, z.B. für ein rechtsorientiertes Untermenü. Die Spalten dafür sollten niemals zu klein sein, weil sonst Texte die sich in den Spalten befinden unschön umbrechen und es zu hässlichen Textblöcken kommt.

Zu guter Letzt ergänzen Sie Ihr Raster um horizontale Linien. Hier können Sie getrost auch eine größere Anzahl von Hilfslinien aufziehen. Erstellen Sie auch horizontale Rasterlinien für Bereiche die Sie später mit Werbebannern oder Farbflächen füllen möchten.

Raster befüllen

Bevor man mit der Befüllung eines Rasters beginnt, sollte man sich zuerst eine Liste erstellen mit allen Elementen die später auf der Webseite platziert werden sollen. Dazu gehören beispielsweise Bereiche für Inhalte, Navigation, Footer, Suchbox, Unternavigation, Infobox, etc.

Anhand dieser Liste und unter Berücksichtigung von Usabilityerkenntnissen kann man dieses Raster nun befüllen. Dabei sollten Sie immer eine Hand voll Variationen erstellen. Einerseits um ein Gefühl dafür zu bekommen wie sich Elemente sinnvoll platzieren lassen, andererseits um eine Auswahl an Möglichkeiten zu haben.

Bild zu Gestaltungsraster für Webseiten

Das gefüllte Raster dient uns nachfolgend als Mustervorlage für die Erstellung von Rastern für Unterseiten.

Raster variabel nutzen

Das im vorherigen Schritt erstellte Masterraster, kann jetzt zum Rastern von Unterseiten genutzt werden. Dabei ist zu beachten, dass die Navigationselemente (hier dunkelgrau) an Ihrer Position stehen bleiben, damit der Benutzer die Navigation erneut finden kann.

Für die Platzierung von Inhalten auf dem Raster gibt es extrem viele Möglichkeiten, so dass Sie einzelne Inhaltsseiten jeweils andersartig gestalten können. Sie sollten jedoch nicht zuviel an Ihrem Grunddesign verändern, damit der Besucher nicht auf jeder Unterseite neu erlernen muss, wie die Seite aufgebaut ist und funktioniert.

Anschließend ein Beispiel, wie so ein variables Raster funktionieren kann.

Bild zu Gestaltungsraster für Webseiten

Umsetzung in HTML

Die Umsetzung von aufwendigen Raster ist leider nicht immer ganz einfach. Sie sollten auf jeden Fall ohne HTML Tabellen arbeiten. Die richtige Wahl ist CSS. Hierfür benötigt es jedoch eine Menge Erfahrung in HTML und CSS (Besonders CSS Floats). Die Raster sollen dabei nämlich valide und Cross-Browser-Kompatibel sein, außerdem besitzen die Spalten oft relative Breiten.

Es gibt sogenannte CSS Frameworks, die die Erstellung von rasterbasierten Webseiten vereinfachen sollen, z.B.das Blueprint CSS-Framework.

Bild zu Gestaltungsraster für Webseiten
FAZ Webseite mit darübergelegtem Raster

Raster in der Praxis

Auch wenn es Ihnen vielleicht noch nicht bewusst aufgefallen ist, fast alle größeren Webseiten benutzen Raster um Inhalte darzustellen. Unterhalb finden Sie eine Screenshot der FAZ mit darübergelegtem Raster. Das Raster solcher großen Newsportale orientiert sich dabei oft an Werbeformate. Die Breite der einzelnen Blocks ist maßgeblich durch eine gute Leserlichkeit der Texte vorgegeben. Dabei dürfen die einzelnen Blocks nicht zu klein oder groß sein, damit der Besucher die Texte ideal lesen kann.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "Gestaltungsraster für Webseiten" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Gestaltungsraster für Webseiten" hier bearbeiten.

Mitarbeiter