Quelltext der Seite Pagedesign

'''Diese Seite ist noch in Bearbeitung, bitte nicht verändern!'''

==''' Kurze Definition '''== 

Pagedesign ist die Thematisierung des Aufbaus der einzelnen Seite, Seitenlänge, Typographie, Einsatz 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 der Graphik und des Textes erwecken die Aufmerksamkeit des Lesers, geben der Information, die sie sehen, ein gewisses Gewicht, und ermöglichen die Interaktionen zwischen Webseiten und Besucher benutzerfreundlicher zu gestalten.


==''' Visuelle Hierarchie '''==


Der Einsatz der Graphik bei Powerpointvorträgen sowie im Internet war schon immer mit graphischen Überlegungen verbunden. Schnell neigt man dazu, die Seite mit visuellen Reizen zu überfluten oder ist so sparsam, dass sie auf den Leser triste und einfältig wirkt. 
Hier eine gesunde Ausgeglichenheit zu finden liegt in der Kunst des Pagedesignen.
Worauf es beim Einsatz von Graphik ankommt, ist, sie benutzerfreundlich, und Highspeed-Internet unabhängig ein zu setzten, so dass jeder Besucher, egal mit welchen PC oder Internetleitung er ins Internet geht, die Seite ohne größere Verzögerung laden kann.
Das visuelle managen einer Seite ist besonders behutsam und bedacht anzugehen. Dabei ist es wichtig zu wissen, dass das menschliche Auge zu aller erst 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 wahr zu nehmen.

''Kurz:'' Erst Graphik, dann Text.

[[Bild:Visuelle Hierarchie.gif]]
Autor: Lynch and Horton (http://www.webstyleguide.com)

== '''Konsistenz '''==

Die Graphik einer Internetseite ist die Identität einer Internetseite. Sie prägt sich zu aller erst im Gedächtnis einer Person ein. Wurde die Graphik schön empfunden und übersichtlich, ist der Eindruck automatisch ein besserer, ohne dass man sich den Inhalt der Seite angesehen hat. Deswegen ist es auch von Wichtigkeit ein Design zu wählen, das sich wie ein roter Faden durch die einzelnen „Pages“ der Webseite bahnt. Dadurch werden Verwirrungen des Benutzer vermieden. 

Als besonders elegant werden Websites gesehen, auf der einzelne Fachbereiche einer Seite bezogen auf die Informationen graphisch unterscheidend voneinander getrennt werden (http://www.spiegel.de). Jedoch sollten hier keine Missverständnisse entstehen. Farblich Änderungen oder der Einsatz von Symbolen heben zum Bsp. Verschiedene Informationsbereiche von Zeitungsberichten hervor (Politik, Wirtschaft oder Panorama), doch sollte nicht der Fehler begangen werden zu jedem Fachbereich 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-Benutzer haben in der heutigen hoch technologischen Zeit noch Bildschirme mit einer geringen Auflösung (800x600). Ein großer Fehler, der von vielen Internetanbieter begangen wird, ist die Breite der Texte über eine bestimmte Weite hinaus zu führen. Dadurch kommt ein lästiger Effekt zustande, dass viele Benutzer beim Lesen von links nach recht scrollen müssen. Der informative Text verschwindet im teilweise im Nichts. 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, was zum drucken, von Webseiten verwendet wird. Obwohl es heute schon Browserversionen gibt, die die Optionen haben den Inhalte einer Seite auf Standardpapiergröße (DINA4) anzugleichen, gibt es noch genügend Benutzer, die solche Dinge nicht wissen, 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 designte 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 im Internet lesen, der über mehrere Seiten zu scrollen ist, 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 im Jenseits des Bildschirms verschwinden. Dies ist für den Leser sehr erschwerend, der immer wieder scrollen muss, um 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 dadurhc resultierende Gefahr besteht darin, dass das Interesse schlagartig schwindet. Doch lassen sich längere Seiten aufgrund längere Artikel manchmal nicht verhindern. Hier sind „Jump-to-Top-Button“ zu empfehlen. Damit sind Anker gemeint, die es ermöglichen innerhalb des Textes zum Anfang oder verschiedenen Überschriften zu "springen". So wird 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 – setzten. So zeigt sich in diesem Bereich eine höhere Dichte an graphischen Elementen und Links.



=='''Pagelayout '''==


Was Anfangs mit reinen [[HTML]]-Codierungen ins Internet gesetzt wurde ist heute eine Kombination vieler Möglichkeiten eine Webseite in Szene zu setzen. 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, graphisch hochqualitative Webseiten u. a. durch [[CSS (Cascading Style Sheets)]] dem Internetbesucher zu präsentieren. Webinterfaces, die dem Benutzer mehr Möglichkeiten bieten, als nur zu sehen; Interaktion ist ebenfalls ein heute 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 ist CSS (mehr unter http://www.webstyleguide.com/page/layout.html).



=='''Zusammenfassung'''==


'''Was ist bei Pagedesign zu beachten?'''

Als aller erstes ist beim Pagedesign die Benutzerfreundlichkeit unter die Lupe zu nehmen. Auch wenn es beim designen einer Seite viele Möglichkeiten gibt, um 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, wo 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 Aufteilung der Texte erfasst werden, bevor die einzelnen Inhalte erkannt werden. (Siehe 1. 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 sollten erkennbar Fett abgebildet sein und vom folgenden Text hervorgehoben.

=='''Online - Quellen'''== : 

http://www.webstyleguide.com/page/index.html (Autor: Lynch and Horton – last Update: 05.März.2004)

http://www.spiegel.de

[[category:Webdesign]]