Dokumentieren in Hypermedien
Ziel und Zielgruppenorientierung
Bevor man herangeht eine Website zu produzieren, müssen einige bedeutende Fragen geklärt werden. Erst nachdem diese Fragen geklärt sind, kann man sich über das Design der Website Gedanken machen. Die zwei wichtigsten sind:
- Was soll mit dieser Web-Präsenz erreicht werden?
- Welches Publikum möchte ich ansprechen?
Die 1. Frage dient überhaupt als Grundlage für die Entwicklung einer Website . Folgende Ziele könnte man z.B. verfolgen:
- Verkauf eines Produktes
- Darstellung eines Produktes in einem guten Licht
- Information über ein bestimmtes Thema/Produkt
- Unterhaltung
- Etc.
Auf einer Website, auf der unterhalten werden soll, eignen sich eher grafische Menüs, Flash-Animationen, Streaming-Videos, etc. Wenn dagegen rasches Auffinden von Informationen das Ziel der Webpräsenz darstellt, sind Textmenüs gegenüber grafischen Menüs vorzuziehen. Videos und Flash-Animationen eignen sich allerdings hervorragend für Produktpräsentationen oder Ähnliches. Dennoch ist dazu zu raten, derartige Animationen in der Hierarchie weiter unten anzusetzen. Auf Splash-Screens (Inhaltslose Einstiegsseiten) sollte bei „ernsthaften“ Websites verzichtet werden. Diese verzögern auf überflüssige Weise das Auffinden von Informationen.
Ist diese Frage einmal geklärt, ist als nächstes zu hinterfragen, welches Publikum angesprochen werden soll bzw. welche potentiellen LeserInnen man hat. Besteht die Zielgruppe beispielsweise eher aus Gelegenheitsnutzern ist es wichtig, dass die Website einen gut strukturierten Einstieg hat und auch sonst durch detaillierte Anweisungen diese LeserInnen geführt werden. Für diese NutzerInnen sind grafische Menüseiten, Überblicks¬seiten, Hierarchiebäume, Icons, Glossare, FAQs wichtige Elemente. Professionelle, geübte NutzerInnen hingegen könnte durch viele Zwischenschritte, die den Informationszugriff verzögert, verärgert werden. Profis schätzen eher Textmenüs und verzichten gerne auf grafische, aufgeblähte Seiten, die den Download nur verzögern. Des Weiteren ist auch darauf zu achten, welche Bandbreite das Zielpublikum zur Verfügung hat. Viele Internet-BenutzerInnen besitzen zwar schon breitbandige Internetanbindungen, dennoch gibt es noch zahlreiche NutzerInnen die ein normales Telefonmodem besitzen und eher negativ auf riesige Flash-Animationen, Videos udgl. reagieren. Abgesehen von der zur Verfügung stehenden Band¬breite ist der vordergründige, plumpe Einsatz von Techniken mittlerweile bei vielen NutzerInnen verpönt. Grundsätzlich kann man sagen, dass der Trend eher zu schlankem Design mit hintergründiger Technik geht.
Weiters ist zu beachten, dass potentielle LeserInnen auch aus anderen Ländern sein könnten. Ist dies der Fall, könnten beispielsweise die Webdokumente in einer weiteren Sprache angeboten werden. Es ist allerdings darauf zu achten, dass Farben, Symbole, Zeichen etc. in einem anderen Land eine andere Bedeutung haben können.
Farben und Schriften
Für die Darstellung von Schriften auf Monitoren muss man auf Helligkeit und Kontrast achten. Farben mit ähnlicher Helligkeit oder Sättigung, die dicht nebeneinander liegen, erzeugen ein „Flimmern“ (z.B. gesättigtes blau und gesättigtes rot nebeneinander, siehe [1])
Für die Hintergrundgestaltung ist natürlichen Pastelltönen sowie hellen Grau- und Erdtönen, gegenüber schrillen, gesättigten Primärfarben der Vorzug zu geben. Abgesehen von Bereichen, die besonders hervorgehoben werden sollen. Für die Schrift sollte man dunklere Farbtöne verwenden, die sich deutlich vom hellen Hintergrund abheben. Für die Darstellung der Schrift von Webdokumenten eignet sich z.B. ein nicht zu helles grau besser als schwarz, weil es angenehmer zu lesen ist. Bietet man allerdings Texte zum Ausdruck an, ist es besser wenn dafür Texte auch in schwarz zur Verfügung gestellt werden, da dies auf Papier besser zu lesen ist.
Bei den Schriften in Webdokumenten muss man beachten, dass nicht jede Schriftfamilie für die Darstellung auf dem Bildschirm geeignet ist. „Times Roman“ ist zwar auf einem Ausdruck auf Papier gut lesbar, allerdings nicht die optimale Schrift auf Monitoren. Für den Monitor adaptierte Schriften wie „Times New Roman“ eignen sich zwar besser für die Darstellung am Bildschirm, sind aber dennoch für textlastige Webdokumente geeignet, die man eher ausdrucken würde, als auf dem Monitor lesen. Bildschirmschriften wie „Verdana“ und „Georgia“ eigenen sich am besten für Webdokumente. Grundsätzlich lässt sich sagen, dass für die Darstellung am Monitor serifenlose Schriften („Verdana“, „Georgia“, etc.) besser geeignet sind. Schriften mit Serifen („Times New Roman“, etc.) sind hingegen besser im Druckbereich aufgehoben. Bei der Schriftgröße ist zu beachten, dass dieselbe Schrift im Web-Browser auf einem Windows-Rechner zwei bis drei Punkte größer dargestellt wird, als auf einem Macintosh. Außerdem ist zu beachten, dass auf den unterschiedlichen Plattformen verschiedene Schriften installiert sind. Am besten ist es, wenn man bei der Font Angabe, immer auch eine Mac-Schrift wie z.B. Helvetica dazu nimmt. Z.B. Schriften
Außerdem ist bei Webdokumenten zu beachten, dass sie abhängig von den Computer und Bildschirmeinstellungen des/der NutzerInnen immer anders dargestellt werden. Will man ein halbwegs einheitliches Layout für alle NutzerInnen herstellen, nimmt man dazu unsichtbare Tabellen und/oder Cascading Style Sheets.
Bei der Erstellung von Webdokumenten ist auf die Einheitlichkeit der Schriften und Farben zu achten! Es sollten immer dieselbe Schriftfamilie, immer dieselben (wenigen!) Farben und Formatierungen für Hervorhebungen. Ansonsten wirkt die Website gleich unleserlich und sehr unprofessionell. Um eine Einheitlichkeit der Formatierungen zu erzielen, sollten am besten CSS verwendet werden.
Trennung von Form und Inhalt
Wie schon erwähnt ist es für Websites wichtig, dass eine einheitliche Gestaltung der Elemente wie Farben und Schriften gegeben ist. Um dies in einer optimalen Weise zu erhalten, ist es wichtig, dass Form und Inhalt voneinander getrennt sind. Dies erreicht man am besten mit Cascading Style Sheets. CSS funktionieren im Prinzip wie Formatvorlagen eines Textverarbeitungsprogramms. Ändert man z.B. den Font einer Formatvorlage, wird automatisch an jeder Stelle bei der diese Formatvorlage benutzt wurde durch den neuen Font ersetzt. Das heißt, man braucht nicht mehr umständlich den ganzen Text durchgehen und einzeln die Elemente ändern, sondern nur mehr die entsprechende Formatvorlage. Genauso verhält es sich bei Cascading Style Sheets. Alle Formatierungen, die in einem Stylesheet ausgelagert sind, können durch einen, einfachen unkomplizierten Schritt geändert werden. Augenscheinlich wird dieser Vorteil, wenn es sich um eine umfangreiche Website handelt.
Nicht nur für einzelne Formatierungen, sondern für das gesamte Layout eines Webdoku¬mentes eignen sich CSS hervorragend. Wie schon erwähnt, wird die Bildschirmseite ohne jegliche Formatierung der Seitenformate und -maße je nach Browser- und Computereinstellung des Nutzers anders wiedergegeben. Außerdem ist bei Grafiken zu beachten, dass sie noch auf den Monitor passen und nicht abgeschnitten sind. Wichtig ist es daher, um auch ein einigermaßen einheitliches Bild für LeserInnen der Website herzustellen, Seitenmaße zu beachten. Ausgehend von einem 17- oder 19-Zoll Monitor und dem daraus resultierenden Bildschirmbereich von 800 x 600 Pixel ergeben sich folgende sichere Abmessungen:
Printlayout:
Max. Breite = 560 Pixel Max. Höhe = 410 Pixel (sichtbar ohne scrollen)
Seitenlayout, das die Bildschirmoberfläche optimal ausnutzt:
Max. Breite = 760 Pixel Max. Höhe = 410 Pixel (sichtbar ohne scrollen)
Beim Seitenlayout sind einige wichtige Regeln für die Textausrichtung zu beachten. Blocksatz soll in Webdokumenten nicht verwendet werden, da dadurch unregelmäßige Wortabstände produziert werden, die den Text am Bildschirm schwer lesbar macht. Außerdem sind zentrierte und rechtsbündige Text eher zu vermeiden. Ein zerklüfteter Text am linken Rand erschwert das Lesen eines Webdokumentes erheblich. Ein linksbündiger Text ist die beste Option für Webseiten.[1][2]
Weiterführende Information: http://www.webstyleguide.com/page/dimensions.html
Zeichen und Symbole
Zeichen und Symbole eignen sich hervorragend für Webdokumente, da sie umständliche Erklärungen ersetzen. Als Beispiel hierzu seien Pfeile erwähnt. Bei einem Pfeil der nach einem Textabschnitt nach rechts oder nach links gerichtet ist, wissen NutzerInnen intuitiv, dass man hier nach vorne oder zurück blättern kann. Genauso ist es, wenn auf einer Website ein „kleines Briefchen“ vorhanden ist. WebnutzerInnen wissen sofort, dass man hier jemandem eine Email schicken kann. So gibt es viele Symbole, die das Lesen auf einer Website einfacher und übersichtlicher gestalten.
Allerdings sollte man auch hier wie bei allen Design-Elementen darauf achten, dass man sie nicht in einem überdurchschnittlichen Ausmaß verwendet und, dass sie richtig benutzt werden. Ein unbekanntes Symbol schadet mehr als gar keines, da NutzerInnen nicht wissen, was es bedeutet.
Grafiken
Pixelgrafik
Standardmonitore können nur 72 dpi darstellen. Eine höhere Auflösung ist daher nicht nötig.
Die wichtigsten Dateiformate sind:
GIF (Graphics Interchange Format)
Beim GIF-Format wird ein Komprimierungsverfahren (LZW-Kompression) angewendet, das die Dateigröße stark reduziert, und es erlaubt nur eine 8-Bit Farbpalette mit max. 256 Farben. Es handelt sich hierbei um eine Verlustfreie Kompression. Das GIF-Format eignet sich hervorragend für Bilder/Grafiken mit homogenen Farbbereichen wie z.B. Logos. Durch die Eliminierung unnötiger Farben kann man bei einer Web-Grafik die Dateigröße zusätzlich minimieren. Außerdem ist es möglich, eine Animation zu erzeugen und Farben auf „transparent“ zu setzen.
Weiterführende Information: http://www.martinvogler.de/web_grafikformate.html http://www.ideenreich.com/grafikgrundlagen/grundlagen_2.shtml
JPEG (Joint Photographic Expert Group)
Mit dem JPEG-Format erreicht man eine 24-Bit-Farbtiefe (über 16 Millionen Farben). Es ist daher beispielsweise für Fotografien geeignet. Es sind bei diesem Dateiformat unterschiedliche Kompressionen möglich, allerdings muss man mit einem Qualitätsverlust rechnen. Die Originaldatei sollte daher nie im JPEG-Format abgespeichert werden.
Weiterführende Information:
http://www.martinvogler.de/web_grafikformate.html http://www.ideenreich.com/grafikgrundlagen/grundlagen_2.shtml
PNG (Portable Network Graphics)
Das Grafikformat PNG wurde als Alternative zu GIF entwickelt. Es erlaubt eine frei wählbare Farbtiefe bis 48 Bit. Des Weiteren sind die Transparenzmöglichkeiten verbessert, eine automatische Korrektur der Gamma-Werte bei Monitoren möglich sowie die Integration von Texten, die den Bildinhalt beschreiben.
Weiterführende Information:
http://www.ideenreich.com/grafikgrundlagen/grundlagen_2.shtml
Vektororientierte Grafik
Im Gegensatz zu einer vergleichbaren Pixelgrafik haben Vektorgrafiken bedeutend kleinere Dateigrößen. Als wichtigster Vertreter der Vektorgrafik im Web hat sich Flash etabliert.
FLASH
Der Einsatz des Grafik- und Animationsformat Flash (.swf) kann auf Webseiten zu unterschiedlichsten Zwecken verwendet werden. Zum einen findet man Flash als Banner oder Splash-Screens oder es wird die gesamte Website im Flash-Format erstellt. Da Flash auflösungsunabhängig ist, kann es auf jedem Monitor abgespielt werden.
Weiterführende Information: http://de.wikipedia.org/wiki/Macromedia_Flash
Literatur
Quellen
WEINMAN LYNDA, Insiderbuch.WebDesign.2,Zürich 2000
LYNCH J.PATRICK, HORTON SARAH, Hrsg. ROSDALE RAY M., Erfolgreiches Web-Design, München 1999
Weiterführende Links
Theorieteil: Skriptum
empfohlener Editor.
Einführung in das Arbeiten mit Kompozer: