Headergrafik Startseite in Farbe
ExtLink Zum Kultusportal | ExtLink Zum Landesbildungsserver | ExtLink Zum Landesmedienzentrum    Seite drucken 

Druckansicht von http://lehrerfortbildung-bw.de/faecher/deutsch/bs/nm/praesentation/gestaltung/scdueber.htm, Stand 1. Oct. 2014

Landesakademie für Fortbildung und Personalwentwicklung an Schulen
LehrerInnen Fortbildungs-Server
Sie sind hier: > Startseite > Fächer > Deutsch > Berufliche Schulen > Neue Medien im Fach Deutsch

Schrift / Farbe


Screen Design - Gestaltung von Web-Seiten

Informationsgehalt Bilder und Grafik
Text Background
Schrift Farbe
Hypertext Proportion
Benutzerführung Links
Head    

Informationsgehalt
.
Im Web toben sich  Grafik- und Multimedia-Fetischisten nach Herzenslust aus, während der Informationswert vieler Web-Seiten aber eher dem Nährwert eines Toastbrots gleichkommt. 
  • Überlegen Sie selbstkritisch, ob sich überhaupt jemand für Ihre Informationen interessiert. 
  • Geben Sie Ihren Lesern Informationen.
  • Je spezifischer und genauer die Fakten, umso interessanter wird es für Ihre LeserInnen.
  • Geben Sie nur Links zu Web-Seiten an, die zu Ihrem Dokument passen und die nicht jeder kennt.
Text
-
  • Text sparsam einsetzen, prägnant formulieren. Der Bildschirm liest sich nicht wie ein Buch.
  • Gliedern Sie jede Bildschirmseite übersichtlich (z.B. durch Listen und durch Schriftauszeichnungen).
  • Machen Sie umfangreiche Inhalte übersichtlicher: 
    • Sie können den Text  in verschiedene Dateien aufteilen, die Sie durch Links miteinander verbinden.
      • Nachteil: Jede Seite muss neu geladen werden.
    • Sie können den Text in Abschnitte mit Überschriften gliedern und  innerhalb einer Datei durch Links verbinden.
      • Vorteil: Die Datei kann leichter von  Lesern gespeichert und ausgedruckt werden.
Schrift
.
Über die Ästhetik mag man sich streiten, nicht aber über Lesbarkeit. 
Die Lesbarkeit einer Webseite ist wichtiger als grafische Experimente. 
  • Die Schriftart muß zur Aussage / zum "Produkt" passen.
  • Vermeiden Sie eine übermäßige Mischung verschiedener Schriften.
    • Wenn Sie Schriften mischen, mischen Sie nur Schriften, die kontrastieren.
  • Setzen Sie die vom Editor zur Verfügung gestellten Schriftauszeichnungen ein:
    • Schriftgrößen, fett, kursiv.
    • Benutzen Sie diese Auszeichnungen in zusammengehörigen Dokumenten einheitlich.
  • Am besten zu lesen ist Schrift, die zum Hintergrund einen Kontrast bildet.
  • Auf dem Bildschirm ist helle Schrift auf dunklem Hintergrund gut lesbar. 
    • Den Background müssen Sie aber immer mitliefern. 
    • Nicht alle Browser können die von Ihnen gewünschten grafischen Experimente darstellen. 
    • Immer sicher:  dunkle Schrift auf hellem Background.
Hypertext
.
In Webseiten werden Daten in kleine Einheiten zerlegt, die über Links miteinander verknüpft sind. Bei der Erstellung von Texten für die Bildschirmdarstellung genügt es also nicht, umfangreiche Lesetexte einfach nach HTML zu konvertieren. Vielmehr müssen große Datenmengen strukturiert, in Module zerlegt, Querverbindungen gefunden und Hierarchien gebildet werden. 

Links können 

  • ein Navigieren durch die hierarchische Struktur des Hypertextdokuments ermöglichen (vor, zurück, Anfang) 
  • Hierarchische Anordnung
  • oder Querverweise darstellen, die auf einer inhaltlichen Beziehung zwischen den Seiten beruhen:
  • Querverweise
    Querverweise
  • Webseiten haben eine nichtlineare Textstruktur. LeserInnen können mit Hilfe der "Hyperlinks" (Querverweise) ihre eigenen Wege gehen. 

Merkmale einer guten Hypertextseite:
  • Sie kann einfach durchgearbeitet werden.
  • Sie ist übersichtlich.
  • Logisch zusammenhängende Informationen sollten so aufgeteilt werden, dass sie jeweils in einen Bildschirm passen.
  • Kein Dokument sollte mehr als zwei bis drei Bildschirme füllen. Ein Scrollen über viele Bildschirmseiten kann auf diese Weise vermieden werden.

Seitenende:
  • Angaben zur Autorenschaft 
  • Zeitpunkt der letzten Änderung 
  • E-Mail-Adresse und/oder Link auf die Seite des Autors.
 
Benutzerführung
.
Navigationsinstrumente
  • müssen auf dem Bildschirm zur Verfügung gestellt werden.
  • sollten auf der ganzen Web-Seite einheitlich sein.
  • sollten eindeutig und klar sein:
    • Intuitive Benutzerführung ist für Ihre LeserInnen am hilfreichsten.
    • Benutzen Sie bekannte Steuerelemente, z.B. die Video-Rekorder-Tasten.
  • können sprachlich oder grafisch ( durch Icons/Symbole) erfolgen.
  • Gags, die der eigentlichen Funktion nicht dienen, verwirren nur.
  • Symbole sollten auch als Text verfügbar sein, falls im Browser das Laden von Grafik deaktiviert ist.
  
   Fehler
  • Zu viele Interaktionsmöglichkeiten
  • Zu große Datenmenge
  • Zu viele Links
  • Unübersichtlicher Aufbau
  • Ratespiel. Der Benutzer gelangt nur unter Umwegen und nach langem Suchen zum Ziel.

  • Dem Benutzer wird abverlangt, daß er die Systematik der Seite im Kopf hat.
Head (Kopfteil)
.
Bedeutung
  • Der Kopfteil enthält Informationen über die Seite, die zur Identifikation des Dokuments dienen.
  • Der Tag <Title> beschreibt den Text, der nach Aufruf der Seite in der Titelleiste des Browsers angezeigt wird. 
  • Wird die Seite den Lesezeichen hinzugefügt, erscheint der Text in der Lesezeichenliste.
  • Wenn Sie unter <Title> keinen Eintrag machen, erscheint in Titelleiste und Bookmarks das nichtssagende "untitled".

  •  

     
     
     

    Meta-Informationen sind Elemente, die vom Browser nicht dargestellt, von Suchmaschinen aber gelesen werden. Sie dienen also dazu, dem Browser nicht darstellbare Informationen zum Zwecke der Identifikation, Indizierung und Katalogisierung von Dokumenten zu übergeben. Wenn Sie Wert darauf legen, daß Ihre Dokumente durch Suchmaschinen eindeutig klassifiziert werden können, dann sollten Sie auf die Erstellung dieser Elemente (Meta-Tags) nicht verzichten. 



Eintrag des "Titles" im Netscape-Editor:
    "Properties" -> "Document" -> Tragen Sie einen möglichst aussagekräftigen und kurzen Titel (und am besten noch den Verfassernamen) ein.
 
Bilder und Grafik
.
  • kleine und wenige Bilder vermeiden lange Übertragungszeiten Ihrer Web-Seiten.
  • Viele Standard-PCs zeigen lediglich 256 Farben an.
  • GIF- und JPEG-Formate können von allen Browsern angezeigt werden.


Bildschirm-Effekte
  • 3-D-Effekte verleihen dem flachen Medium räumliche "Tiefe".
  • Methoden:
    • Schatten,
    • Glanzlichter
    • Beleuchtungseffekte
    • Perspektive

Durch Anklicken der rechten Maustaste können Sie mit dem Netscape-Browser eine Grafik aus dem Internet importieren. 
Background (Seitenhintergrund)
.
Der Background
  • sollte auf die Funktion, die die Seite erfüllen soll, abgestimmt sein.
  • darf das Lesen nicht erschweren, sondern soll es erleichtern.
    • Ein im Grafikprogramm kontrastarm aussehendes Bild kann im Browser stärker stören als vorgesehen.
    • Am besten verwenden Sie dunkle Schrift auf hellem Grund.
  • kann Ihr persönliches Erkennungszeichen im Internet sein.

Einrichten einer Grafik als Background: 
  • Eine Grafik wird als Hintergrund ausgesucht und gespeichert.
  • Es reicht eine Größe von 200 mal 200 Pixel.
  • Grafikformat Gif oder JPG.
  • Netscape-Editor: "Eigenschaften" -> "Dokument" -> "Gesamtbild" - Hintergrundgrafik aufrufen und öffnen ->"Ok".

Importieren einer Grafik aus dem Internet mit dem Netscape-Browser 
  • Mauszeiger auf den gewünschten Hintergrund einer HTML-Seite einstellen.
  • Rechte Maustaste anklicken ->"Hintergrund speichern unter" -> Der Dateiname erscheint. -> Speichern im gewünschten Verzeichnis.

Links zu Backgrounds
  • http://home.netscape.com/assist/net_sites/bg/backgrounds.html
  • http:/www.meat.com/textures/textures.html
  • http://www.everyicon.com/backgrounds/default.html
  • http://the_tech.mit.edu/KPT/bgs.html
  • http://www.vnet.com/users/deee/backgrnd.html
Farbe
..
.Noch immer gibt es grafisch unempfindliche Naturen, die knallig-orangefarbene Schrift auf 
giftgrünem Grund für ästhetisch halten. Machen Sie nicht jede Mode mit.
 
  • Die Farbwahl muß zur Aussage passen.
  • Wählen Sie harmonische Farbkombinationen.
  • Arbeiten Sie mit Kontrasten!
    • Hell-Dunkel-Kontraste
    • Farbkontraste
  • Schatten verstärken die Kontrastwirkung.
Proportion
.
    Achten Sie auf eine ausgewogene Seitenaufteilung. Als ausgewogen gilt immer noch der Goldene Schnitt.
    • Aufteilung der Seiten und der Bilder im Verhältnis 3 : 5 : 8. 
    • Auch Leerräume können als Gestaltungsmittel eingesetzt werden.
Links zu Screen Design
.
 
e@mail an (Bt) 
Bereichs-Logo
 
SUCHE NACH:
Inhalt Fortbildungen

Fachportal Deutsch Berufliche Schulen

Zum Seitenanfang         Startseite | Impressum | © Copyright |

Zuständiger Redakteur: Dirk Weller, weller@lehrerfortbildung-bw.de
© Landesakademie für Fortbildung und Personalentwicklung an Schulen, für diese Seite gilt http://lehrerfortbildung-bw.de/impressum/copyright/urheber_standard.html
Letzte Änderung: 28.08.2007