Webdesign von Prof. Jürgen Plate

Einführung

Hypertext und Hypermedia

Hypertext ist ein Text, der Verweise zu anderen Texten enthät - wie wir es von einem Lexikon her kennen. Hypertext ist daher nicht-linear, denn man kann zwischen den Texten herumspringen. Insbesondere für kontextabhängige Hilfesysteme und Online-Handbücher wird Hypertext schon lange eingesetzt. Das DOS- oder Windows-Hilfesystem ist ein Hypertextsystem.

Hypermedia ist nicht auf Text beschränkt. Hypermedia-Dokumente können andere Medien enthalten, z. B. Diagramme und Bilder. Dabei gibt es keine Beschränkung auf statische Medien, sondern auch Sounds, Musik, Animationen und Videoseqenzen lassen sich einbinden. Das World Wide Web ist das beste Beispiel für Hypermedia.

Das World Wide Web?

Der ISO-Standard definiert SGML als "eine Sprache für Dokumentenrepräsentation, welche Markup formalisiert und von System- und Verarbeitungsabhängigkeiten löst". SGML erlaubt den Austausch von großen und komplexen Datenmengen und vereinfacht den Zugriff auf diese. Zusätzlich zu den Möglichkeiten des deskriptiven Markups benutzen SGML-Systeme ein Dokumentenmodell, welches die Überprüfung der Gültigkeit eines Textelements in einem bestimmten Kontext erlaubt. Weiterhin enthält SGML Techniken, die folgendes erlauben:

• Zusammenbindung von Dateien zu einem zusammenhängenden Dokument,
• Einbindung von Illustrationen und Tabellen in Textdateien,
• Erzeugen von mehreren Versionen eines Dokuments in einer einzigen Datei,
• Hinzufügen von Kommentaren in die Datei,
• Kreuzreferenzen
• und vieles mehr

Bei SGML handelt es sich nicht um eine vordefinierte Menge von Textauszeichnungen, sogenannten 'Tags', zum Markieren von Textpassagen. SGML beschreibt nicht das Aussehen des Textes, sondern sein strukturelles Aussehen. HTML ist eine Untermenge von SGML.

Der grundlegende Aufbau des World Wide Web unterscheidet sich in keiner Weise von anderen Internet-Diensten. Dokumente auf Servern werden in einem bestimmten Format, im Falle von WWW dem HyperText-Format HTML, abgespeichert. Mittels geeigneter Clients, im HyperText-Jargon auch Browser genannt, wird auf Information zugegriffen, die auf dem Server vorhanden ist. Client und Server verständigen sich untereinander über das HTTP-Protokoll.

HTML (Hypertext Markup Language) ist also ein Format zur Darstellung von Informationen aller Art, unabhängig vom verwendeten Betriebssystem oder Rechner.

Inhaltliche Aspekte

Textgestaltung (Schreiben)

• Denken Sie an Ihre Zielgruppe. Schreiben Sie so, daß ihre Informationen für diese Zielgruppe passend aufbereitet werden. Das betrifft sowohl Inhalt, als auch den Stil der Datstellung.
• Schreiben Sie so einfach und verständlich wie möglich. Bei Fachausdrücken sollte z. B. beim ersten Auftreten eine kurze Erklärung dabei sein. Jede Abkürzung darf erst verwendet werden, wenn die Langfassung aufgeführt wurde.
• Illustrieren Sie komplexe Sachverhalte und beschreiben Sie diese auf verschiedene Art und Weise.
• Denken Sie an gegenseitige Beziehungen einzelner Teile des Inhaltes. Stellen Sie Verknüpfungen und Querverbindungen her.

Grafikgestaltung (Illustrieren)

• Ein Bild sagt mehr als 1000 Worte (alt, aber gut)
• Erzeugen Sie eigene Bilder (selbst malen, scannen, Photo-CD, Bildersammlungen durchsuchen und Bilder modifizieren)
• Vermeiden Sie unnötige Bilder, also solche, die zum Verständnis des Inhalts nichts beitragen
• Verwenden Sie eine konsistente Farbgestaltung, z. B. für Hintergründe, Texte, u.s.w. Verwenden Sie Farbschemata, z. B. nur Pastelltöne, nur Erdfarben, nur Metallicfarben oder nur Neontöne.
• Verwenden Sie ein einheitliches Layout (Schriftart, -größe) und nicht zuviele verschiedene Schriftarten. Ein Buch kommt z. B. mit zwei bis drei Schriftfamilien aus.

Animationen

• Typen von Animationen
  • Trickfilm (Character Animation): Man verleiht einem Objekt menschliche Züge. Man kann so einer Zahnbürste, einem Auto, einer Bohrmaschine, einem Spielzeug etc. 'Leben' verleihen. Beim Entwurf des Characters sind zu beachten:
    • Emotionen (glücklich, spassig, traurig, uninteressiert, ...)
    • Bewegung (schnell, langsam, tolpatschig, ...)
    • Erscheinung (muß zum Stil des Gesamtwerks passen)
    • Copyright (Micky Maus nur verwenden, wenn man die Erlaubnis von Disney hat)
  • Hervorhebungen: Ein wichtiges Wort zoomt aus dem Text heraus, ein Logo bewegt sich, etc.
  • Bewegter Text: Die Schrift erscheint z. B. Zeichen für Zeichen als würde sie getippt, ein Wort pulsiert, Laufschrift, Textblöcke 'poppen' aus dem Hintergrund, etc.
    Aber Vorsicht: Laufschriften oder andere Schrifteffekte machen den Text leicht unlesbar. Also nur in Ausnahmefällen verwenden.
  • Video: Digitalisierte Videos sind oft beeindruckender als Photos und meist auch leichter herzistellen als Trickfilme. Sie benötigen jedoch sehr viel Speicherplatz. Für den Schnitt benötigt man meist spezielle Hard- oder Software.
• Wann soll man animieren? Animationen sollten - wie letztlich auch Bilder - nicht ohne triftigen Grund auftauchen. Nur 'Zappeln um des zappelns willen' ist schlecht.
  • Emotionen verstärken
  • Darstellungen von Handlungen (z. B. Zusammenbau eines Gerätes)
  • Hervorheben von Informationen
  • Zeitabläfe anzeigen ('Fortschrittsbalken', Sanduhr, etc.)
  • Übergang zum nächsten Kapitel oder Abschnitt, z. B. Auf- und abblenden, Wischblenden, Überblendungen, Schnitt.

Akustische Informationen

• Musik: Sie dient der Untermalung der dargestellten Bilder und Texte und kann auch bestimmte Stimmungen und Emotionen hervorrufen.
• Geräuscheffekte: Sie bringen etwas 'Leben' ind die multimediale Präsentation und heben bestimmte Dinge hervor.
• Sprache: Mit ihr können die bildlichen Darstellungen erklärt und kommentiert werden. Achtung: 'Vorlesen' des Textes, der auf dem Bildschirm erscheint, ist Unsinn.

Interaktion

Eine ebenso wichtige Rolle spielt die Laufzeit der einzelnen Passagen oder Takes. Wenn beispielsweise eine Video zu lange dauert und sich nicht abbrechen läßt, wird der Benutzer sich schnell verärgert abwenden. Bewährt haben sich folgende Zeiten:

• selbstlaufend (nicht zu unterbrechen): 2 - 3 Minuten
• mit beschränkter Interaktion: 5 - 6 Minuten
• vollständige, interaktive Unterweisung: bis 15 Minuten
• Lernprogrammlektion: ca. 30 Minuten

Multimedia-Anwendungen lassen sich in drei Gruppen einteilen:

• Menügesteuerte Programme und Präsentationen: Diese haben oft eine hierarchische Struktur aus Menüs und Untermenüs.
• Hypermedia-Anwendungen: Hier bietet sich die vorteilhafte Möglichkeit von Querverweisen und einer vermaschten Struktur, die einen schnellen Zugriff auf die gewünschte Info erlaubt. Hier lassen sich auch mehr multimediale Eigenschaften einbringen, aber gleichzeitig besteht die Gefahr, daß sich der Benutzer in den Dokumenten 'verliert'.
• Simulationen: In diese Gruppe fallen Spiele genauso wie ernsthafte Simulationen technischer oder wirtschaftlicher Vorgänge.

Software für Multimedia-Designer

• Soundbearbeitung: Programme zum Aufnehmen und Bearbeiten von Klängen und Musik über die Soundkarte. MIDI-Sequencer und -Bararbeitungsprogramm; gegebenenfalls mit der Möglichkeit, Noten zu schreiben und umzusetzen.
• Bildbearbeitung: Programme zum Bearbeiten von Pixelgrafik und für Photos. Wichtig sind hier diverse Malwerkzeuge, Filter- und Effektfunktionen. Außerdem sollten die Programme das Konvertieren verschiedener Dateiformate erlauben. Typische Vertreter sind Paintshop, Photoshop, PhotoSuite, PhotoImpact, xv.
  Die andere Gruppe von Programmen zur Grafikerzeugung bilden die sogenannten Konstruktionstools, die Vektorgrafiken erzeugen, z. B. AutoCAD, Autosketch. Schließlich gibt es noch spezielle Programme zum Erzeugen von Diagrammen, z. B. Visio.
• Video- und Animationsbearbeitung: Um Animationen zu bearbeiten sind Programme nötig, die es erlauben, Einzelbilder zu Filmen zusamenzusetzen. Manche dieser Tools erlauben auch automatische Generierung von Zwischenphasen. Bei der Erstellung eigener Trickfilme wird zuerst ein Drahtmodell der Objekte verwendet, das dann in einem zweiten Schritt, dem sogenannten 'Rendering' in ein 3D-Bild mit Beleuchtung und glatten Oberflächen übergeführt wird. Weiterhin sollte das Programm gestatten, beliebige Bilder oder Texturen auf die Objektoberfläche abzubilden. Beispiel: Adobe Premiere, MGI VideoWave.
• Autorensysteme: Um komplette Multimedia-Präsentationen zu erstellen werden gerne Autorensysteme verwendet. Sie ermöglichen das Zusammenführen von Text, Bild, Video und Sound und den Einbau interaktiver Elemente. Sie beherrschen eine Skriptsprache (z. B. Lingo), die auch Fehlersuche und Simulation der MM-Applikation erlaubt. Das Ergebnis wird dann mit einem Abspielprogramm zusammengebunden und beispielsweise auf CD-ROM gespeichert. Typische Vertreter dieser Autorensysteme sind Macromedia Director oder Authorware.
  Seit der Entwicklung des World Wide Web (mit HTML) genügt schon ein Texteditor zur Produktion multimedialer Dokumente (siehe Kapitel 4).

Zielgruppe definieren

1. Erforschen Sie das spezifische Know-how und die individuellen Ansprüche ihrer Zielgruppe.
2. Erforschen Sie die sozialen Wertvorstellungen Ihrer Zielgruppe.
3. Erforschen Sie die grundlegenden Wünsche und Ängste ihrer Zielgruppe.

Startet ein Anwender eine CD oder betritt ein Besucher eine Homepage, so hat er eine Reihe von Fragen:

• Wo bin ich?
• Wo kann ich hin?
• Ist das das Richtige für mich?
• Wie alt ist die Information?
• Von wem ist die Information?
• Werde ich hier meine Zeit verschwenden?
• Gibt es hier überhaupt etwas, was mich interessiert?
• Gibt es noch etwas Besseres?
• Wo verstecken sich die coolen Sachen?
• Wie lange dauert es?
• Darf ich das?
• Ist das riskant?

All diese Fragen müssen bestmöglich beantwortet werden. Dabei helfen die folgenden Richtlinien:

• Muß sich ein User erst durch drei Menüseiten klicken, um zu einer weiteren Auswahlseite zu gelangen, wächst die Unlust
• Hyperlinks müssen klar bezeichnet und informativ sein
• Schaffen sie übersichtliche Menüs und Inhaltsangaben
• Für umfangreiche Datenmengen empfiehlt sich eine Suchfunktion
• Weniger ist mehr. (im Web: Ladezeit contra Volumen --> pro Seite nicht mehr als 40 KByte)
• Verwenden Sie möglichst wenig Schriftarten innerhalb eines Dokuments
• Der Schrift-Charakter sollte die inhaltliche Aussage unterstützen
• Eine schlichte Schrift ist auf dem Bildschirm leichter zu lesen; setzen Sie Fettschrift nur sparsam ein
• Verwenden Sie Farben und Schattierungen, um bestimmte Wörter hervorzuheben
• Schriften mit Serifen (Times, Concorde, Courier, usw.) sind besser lesbar als (serifenlose) Groteskschriften (Helvetica, Arial, etc.).
• Gehen Sie sparsam mit Fettdruck und Kursivschrift um.
• Verwenden Sie Groß- und Kleinschreibung und nicht reine Großschreibung
• Kurze Absätze werden als bildliche Ideen wahrgenommen

Zum vorhergehenden Abschnitt

Zum Inhaltsverzeichnis

Zum nächsten Abschnitt

Copyright © FH München, FB 04, Prof. Jürgen Plate