Pagedesign

Kurze Definition

Pagedesign ist die Thematisierung des Aufbaus der einzelnen (Web)Seite, der Seitenlänge, der Typographie, des Einsatzes von Frames und Style Sheets.

“If you ask why something works and you push back far enough, eventually everything seems to be based on contrast: the ability to distinguish one thing from another. Composition, sequencing, even legibility all rely on devices that affect the contrast between things." — Chris Pulman, The Education of a Graphic Designer.

Die Anforderung an ein gelungenes Pagedesignen ist, dem Leser solch eine Übersicht zu präsentieren, dass er Vertrauen in die Informationsquelle aufbaut. Sei es bei den traditionellen Printmedien oder im World Wide Web - die räumliche Organisation von Graphik und Text erwecken die Aufmerksamkeit des Lesers, geben der dargebotenen Information ein gewisses Gewicht und ermöglichen es, die Interaktionen zwischen Webseiten und Besucher benutzerfreundlicher zu gestalten.

Visuelle Hierarchie

Der Einsatz von Graphiken bei Powerpointvorträgen sowie im Internet sollte wohl überlegt sein. Schnell neigt man dazu, die Seite mit visuellen Reizen zu überfluten oder ist so sparsam, dass sie auf den Leser trist und einfältig wirkt. Hier eine gesunde Ausgeglichenheit zu finden, liegt in der Kunst des Pagedesigners. Worauf es beim Einsatz von Graphiken ankommt, ist, sie benutzerfreundlich und Highspeed-Internet unabhängig einzusetzten, so dass jeder Besucher, unabhängig von PC oder Internetleitung, die Seite ohne größere Verzögerung laden kann. Die graphische Aufbereitung einer Seite ist besonders behutsam und bedacht anzugehen. Dabei ist es wichtig zu wissen, dass das menschliche Auge zuerst graphische Elemente registriert, bevor es den Text wahrnehmen kann. Je höher die Anzahl der graphischen Aspekte auf einer Seite ist, desto schwieriger wird es für den Leser, den Text wahrzunehmen.

Kurz: Erst Graphik, dann Text.

Autor: Lynch and Horton (http://www.webstyleguide.com)

Konsistenz

Die Identität einer Internetseite wird durch ihre Graphik bestimmt. Sie prägt sich zuerst ins Gedächtnis einer Person ein. Wurde die Graphik als schön und übersichtlich empfunden, ist der Eindruck automatisch ein besserer, ohne überhaupt den Inhalt der Seite zu kennen. Deswegen ist es von Wichtigkeit, ein Design zu wählen, das sich wie ein roter Faden durch die einzelnen „Pages“ der Webseite zieht. Dadurch werden Verwirrungen des Benutzer vermieden.

Als besonders elegant werden Webpages gesehen, auf denen Bereiche mit unterschiedlichen Informationen graphisch voneinander getrennt werden (vgl.: http://www.spiegel.de). Jedoch sollten hier keine Missverständnisse entstehen. Farbliche Änderungen oder der Einsatz von Symbolen heben z.B. verschiedene Informationsbereiche von Zeitungsberichten hervor (Politik, Wirtschaft oder Panorama), doch sollte nicht der Fehler begangen werden, für jedem Bereich eine gänzlich andere Graphik zu verwenden. Die graphische Basis (Rahmen) sollte immer die gleiche sein, wie man auf der Internetseite http:\\www.Spiegel.de erkennen kann.

Seitendimensionen

Viele PC-User benutzen, trotz neuester Technik, noch Bildschirme mit einer geringen Auflösung (800x600). Ein großer Fehler, der von vielen Designern begangen wird, ist, die Breite der Texte über eine bestimmte Weite hinaus zu führen. Dadurch kommt der lästige Effekt zustande, dass viele Benutzer beim Lesen von links nach recht scrollen müssen. Die Notwendigkeit von links nach rechts zu scrollen sollte auf einer Internetseite vermieden werden. Der Leser ist schon genung damit beschäftigt, von oben nach unten zu scrollen.

"Safe area"

Die „safe area“ für Webgraphiken ist auf zwei Faktoren festgelegt – die kleinste und gebräuchlichste Bildschirmgröße sowie die Breite des Papiers, das zum Drucken von Webseiten verwendet wird. Obwohl es heute schon Browserversionen gibt, die die Optionen haben den Inhalt einer Seite auf Standardpapiergröße (DINA4) anzugleichen, gibt es noch genügend Benutzer, die diese Funktion nicht kennen, damit nicht umgehen können oder dessen Browserverion älter ist als der heutige Standard. Um jedem Benutzer gerecht zu werden, gibt es Regeln. Die Richtlinien für diese graphische „safe area“ sehen wie folgt aus:

Die Richtlinie der "Graphic safe area", um das Layout gut auszudrucken:

Maximale Breite = 560 Pixel

Maximale Höhe = 410 Pixel (sichtbar ohne zu scrollen)

Die Richtlinie der "Graphic safe area" für 800 x 600 Bildschirme:

Maximale Breite = 760 Pixel

Maximale Höhe = 410 Pixel (sichtbar ohne zu scrollen)

Vier Faktoren sind für eine exakte Länge einer „Page“ von Bedeutung:

1. Die Beziehung zwischen Seite und Bildschirmbreite

2. Der Inhalt der Seite

3. Ob der Leser das Dokument online oder ausgedruckt in aller Ruhe lesen will

4. Die zu erreichende Bandbreite der Besucher

Forscher haben bereits herausgefunden, dass Leser, die einen Text, der über mehrere Seiten zu scrollen ist, im Internet lesen, das Interesse verlieren. Genauso leidet ein Leser darunter, wenn interne Links zu den einzelnen Seiten nicht sichtbar genug sind, so dass der Leser immer wieder zu suchen aufgefordert ist. Das Hauptproblem beim Scrollen sind die Informationen, die nicht auf dem Bildschirm sichtbar sind. Es ist für den Leser, der immer wieder scrollen muss, so sehr schwer, den Faden nicht zu verlieren.

Scrolling

Eine Seite, bei der ein Benutzer gezwungen ist zu scrollen, sollte nicht länger als zwei Seiten sein. Die dadurch resultierende Gefahr besteht darin, dass das Interesse an der Seite schwindet. Doch lassen sich längere Seiten aufgrund längerer Artikel manchmal nicht verhindern. Hier sind „Jump-to-Top-Buttons“ zu empfehlen. Damit sind Anker gemeint, die es ermöglichen, innerhalb des Textes zum Anfang oder zu verschiedenen Überschriften zu "springen". So wird es dem Nutzer ermöglicht, immer wieder eine Seite oder Überschrift höher zu "springen". Vor allem am Fuße jeder Seite sollte solch ein Button vorhanden sein.

Designvorlagen für Webpages

Vorlagen dienen nicht dazu, ein festes Muster für alle Webseiten im Netz herzustellen. Man sollte sich jedoch vor dem Designen seiner Seite im Klaren sein, nach welchen Richtlinien man zu arbeiten hat, um dem Besucher ein benutzerfreundliches und übersichtliches Präsentieren seiner Informationen zu garantieren. Mit dem Erstellen seiner eigenen Vorlage wird festgelegt, wie die Überschriften anzuordnen sind und wo die graphischen Elemente platziert sein sollen. Denn ein wirres, planloses Setzen von Text und Graphik vergrault nicht nur den Leser, auch man selber verliert den Überblick.

Informationen auf den Bildschirm "designen"

Im Gegensatz zu den Printmedien, bei denen man beim Aufschlagen eines Buches oder Zeitung immer zwei Seiten auf einmal betrachten kann, sind die Seiten im Internet immer vertikal angeordnet. Dies bedeutet, dass dem Leser nicht die gesamte Seite präsentiert werden kann. Daher ist beim Pagedesign zu beachten, dass man der Seite eine höhere Priorität zuspricht, die der Leser zuerst zu Gesicht bekommt. So sollte man bei einer längeren Seite die wichtigen Links zu einzelnen Themenbereichen – natürlich auf Anker zu unteren Texteinheiten – setzen. So zeigt sich in diesem Bereich eine höhere Dichte an graphischen Elementen und Links.

Pagelayout

Was anfangs mit reinen HTML-Codierungen ins Internet gestellt wurde, ist heute eine Kombination vieler Möglichkeiten eine Webseite umzusetzen. Der einfache Text von gestern, der im Gegensatz zu den Printmedien den Durchbruch in Sachen Flexibilität bot, ist heute ein Zusammenspiel von Hardware, Software und Browsern, denen es möglich ist, dem Internetbesucher graphisch hochqualitative Webseiten u. a. durch CSS (Cascading Style Sheets) zu präsentieren; Webinterfaces, die dem Benutzer mehr Möglichkeiten bieten als nur zu sehen, denn Interaktion ist heute ein großer Bestandteil des Internets. Dem Webdesigner sind hier alle Türen geöffnet, um eine Seite zu kreieren. Doch darf er dabei nie die Nutzer außer Acht lassen. Heute ist es noch fraglich, was für den Benutzer besser ist. Die einen beharren auf „tables“ via HTML, die anderen versuchen es gänzlich mit CSS (mehr unter http://www.webstyleguide.com/page/layout.html).

Zusammenfassung

Was ist bei Pagedesign zu beachten?

Als erstes ist beim Pagedesign die Benutzerfreundlichkeit unter die Lupe zu nehmen. Auch wenn es beim Designen einer Seite viele Möglichkeiten gibt, sie graphisch zu gestalten, sollte man immer darauf achten, sich mit den Fragen der Benutzerfreundlichkeit auseinander zu setzen. Auch die Länge jeder Page und die Fülle der Informationen, die zu sehen sind, sollten wohl dosiert sein. Denn schnell ist man an einem Punkt, an dem das Auffassen der Informationen sehr schwer fällt. Hier sollte noch einmal daran erinnert werden, dass zuerst das Oberflächendesign wie Logos und Banner und die Aufteilung der Texte erfasst werden, bevor die einzelnen Inhalte erkannt werden. (Siehe Visuelle Hierarchie). Auch beim Pagedesign sind gewisse Muster sehr empfehlenswert. Z. B. eine Navigationsleiste, die durch Kontrast sichtbar hervorgehoben wird. Die gesamte Webseite sollte nach einem Layoutmuster gestaltet sein (Kontinuität), Überschriften erkennbar fett abgebildet und vom folgenden Text hervorgehoben sein.

Online-Quellen

• Lynch, Patrick; Horton, Sarah (2004): Web Style Guide. 2nd edition. Online abrufbar unter: http://www.webstyleguide.com/page/index.html

• Spiegel online. Online abrufbar unter: http://www.spiegel.de