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

Druckansicht von http://lehrerfortbildung-bw.de/werkstatt/websites/4gestaltungsaspekte/gestalt_website_1.htm, Stand 28. Aug. 2014

Landesakademie für Fortbildung und Personalwentwicklung an Schulen
LehrerInnen Fortbildungs-Server
Sie sind hier: > Startseite > Medienwerkstatt > Websites planen und gestalten

Gestaltungsaspekte 1 - Typografie, Farbe...

 

 
 Typografie Welchen Stellenwert hat die Komponente Text inhaltlich und funktional innerhalb des Gesamtarrangements von Bild, Video und Sound etc.?
Die Darstellbarkeit auf dem Monitor muss unbedingt mitgeplant werden:
Font, Fontgröße, Anzahl der Schriften, Schriftfarbe....
Beim Lesen auf dem Monitor ermüden die Augen relativ schnell (geringe Auflösung des Bildschirms, momentan 72 dpi).
 
 

Schriften für Bildschirmdarstellung unterliegen besonderen Gegebenheiten. Die Bildschirmauflösung ist ca. 30 mal so grob wie die gedruckter Schriften.  Ist die Schrift auch noch klein, eignen sich Serifenschriften nicht mehr, denn der Halt, den die Serifen beim Lesen geben sollen, ist nicht mehr vorhanden.

 
 

Eine allgemeine Empfehlung kann aber nicht gegeben werden. Bei der Schrift- und Schriftattributwahl gibt es sehr unterschiedliche Prioritäten. 

Auch das Argument der Lesbarkeit hat oft nicht erste Priorität - oft sind es viel mehr Trends und Moden.

 
 Farbe Farbtiefe von 8 bit (256 Farben) oder mehr?
 

Bildschirme sind additive Farbmischer. Je heller und intensiver die dargestellten Farben sind, umso mehr beanspruchen sie die Leistung des Sehapparates.

  Basiert das Farbset der Website auf der
Browserpalette?
  Die Farben des Farbsets sind so gewählt, dass sie sich auf allen Systemen (Mac, PC, UNIX) gut unterscheiden lassen (Kontraste, abgestimmte Farben).
 
  Farbe dient der Atmosphäre einer Site:
Dominiert der Inhalt oder  die Unterhaltung?

Strukturfunktion:
Farbe dient der Orientierung innerhalb einer Site: Unterscheidung von Infoteil, Navigationselementen, Interaktiven Elementen...

Eine farbliche Abstimmung der Einzelelemente ist wichtig.

Hintergrundfarbe

Kontraste

Man sollte darauf achten, dass nicht zu viele Farben auf einer Website verwendet werden.
Auf dieser Site wurden die Farben
# CC,33,33 / #FF,CC,66 / # FO,FO,FO / #FF,F1,D5 verwendet.
Es gibt 216 Standardfarben, die Netscape zur Verfügung stellt. Diese Palette ist im Internet quasi Standard.
Siehe dazu Stefan Münz: http://www.teamone.de/selfhtml/tcaeb.htm

 
 Bild / Grafik / Logo Größe, Qualität, Format, Speicherplatz = Ladezeit, Bilder sind, richtig eingesetzt, wirksame Werkzeuge der emotionalen Kommunikation. 

Bilder sollten bereits im Bildbearbeitungsprogramm in der gewünschten Größe hergestellt werden. Denn wenn man später im Editor die Bildgröße verändert, bleibt die Dateigröße unverändert.

   
  Bei einem Logo wird die Schrift als Grafik eingebunden.
  Bilder ermöglichen eine kompakte Darstellung komplexer Inhalte.
 
 Metaphern Metaphern sind Anspielungen auf bekannte und vertraute Objekte des täglichen Lebens
(Das Betriebssystem Windows erzeugt durch Ordner, Ablagen, Desktop und Papierkorb ein virtuelles Büro.).
  Sie können einer schnellen Orientierung dienen und verknüpfen, wenn sie gelungen sind, mit Bekanntem.
 
Metaphern
 
  Dies kann allerdings auch ein Nachteil sein, wenn es um die Einführung von Neuem geht.

Beispiel: "Blatt-Papier"- Metapher impliziert zwar Werkzeuge wie Stift, Sprühdose, Radiergummi etc.., aber keinen Hypertext. 
 

Papier

Zitat: http://aws-1.e-technik.uni-ulm.de/idesign/vorlesung/chapter3sls.html 16.9.2000

 
 Tabelle Tabellen können nicht nur Elemente innerhalb einer Seite organisieren, sie können auch zur Gestaltung der gesamten Seite verwendet werden.

Wie ein Layout-Gitternetz können Tabellen das Basissystem einer Seite darstellen. Wo kommen Überschriften hin, wo liegen Flächen für Grafiken, Bilder etc.?

 
Des weiteren bieten Tabellen die Möglichkeit, eine Internetseite so zu gestalten, dass die Seite in verschiedenen Browsern und bei unterschiedlichen Bildschirmauflösungen ohne den waagerechten Scrollbalken dargestellt wird. Auch ist dann der Ausdruck dieser Internetseite problemlos möglich.
Um diesen Effekt zu erhalten, muss bei der Tabellenerstellung darauf geachtet werden, dass die Breite der Tabelle in Prozent angegeben wird.
Zum Beispiel könnte man als Basistabelle für eine Internetseite eine vierspaltige Tabelle mit 100% Breite verwenden. Den einzelnen Spalten dieser Tabelle werden auch jeweils Breiten in Prozentangaben zugewiesen, z.B.
   
1. Spalte 2. Spalte 3. Spalte 4. Spalte
2 %  20 % 76 % 2 %
   
Der Text innerhalb einer Spalte sollte immer als Fließtext eingegeben werden, damit er sich der jeweiligen Spaltengröße bei veränderter Auflösung anpassen kann.
Bilder oder Grafiken dehnen Spalten entsprechend ihrer Größe.
 
 Link Untersuchungen haben ergeben, dass Textlinks häufiger angeklickt werden, als grafische Links. Sie werden auch schneller aufgebaut als Grafiklinks. In der Farbe sollten sie deutlich vom Text abgesetzt werden. Ohne Grund ändert man die Standard-Linkfarben nicht.
 
 Rahmen
 (Frames)
Komplexe Inhalte können durch Rahmen (Frames) übersichtlicher geordnet werden.

In der Regel können 2 Rahmen diese Funktion erfüllen. Ein Rahmen steht fest und beinhaltet das Inhaltsverzeichnis, der andere dient als Zielrahmen für den ausgewählten Inhalt.

Aber: Keine Frames in Frames

  Websites, die mit Tabellen erstellt wurden, können andererseits viele Funktionen der Frames übernehmen.
 
 Funktions-
 elemente
Navigationselemente
 
 Scrollbalken Kein horizontales Scrollen, vertikales Scrollen nicht über 3 Bildschirmhöhen 

Browser bauen die Seiten von oben nach unten auf: Wichtige Inhalte nach oben.

 

 

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: 09.01.2007