Grundlagen

Das barrierefreie Umsetzen einer Website - barrierefreies bzw. barrierearmes Webdesign - ist nicht auf den ersten Blick erkennbar. Es macht sich jedoch bemerkbar, wenn Nutzer gezielt Informationen abrufen können, dabei ein zufriedenes Gefühl hinterlassen wird, verschiedene Navigationsmöglichkeiten angeboten werden, Suchmaschinen die eigene Website weit oben in den Suchergebnissen auflisten und die Website von der Zielgruppe gut angenommen wird.
Stand 11.09.2008

Inhaltsübersicht:

  1. Grundlagen einer Website
  2. Navigation auf einer Website
  3. Farbwirkung, Farbklang und Kontrastanalyse
  4. Beispiele für Farben als Gestaltungsmedium im Web

Grundlagen einer Website

Der Struktur einer Website kommt eine zentrale Bedeutung zu. Identität und Auftrag der Website müssen jederzeit deutlich sein, so dass dem Nutzer klar ist, auf welcher Website er sich befindet und wozu diese dient. Die Struktur muss transparent, Inhalte mit wenigen Klicks erreichbar und der aktuelle Standort innerhalb der Website erkennbar sein. Über einen hierarchischen Aufbau sind Inhalte, Leistungsmerkmale und Organisation der einzelnen Webseiten in Zusammenhang zu bringen. Wichtig ist ebenfalls eine webgerechte Aufbereitung der anzubietenden Inhalte, eine lesefreundliche Formulierung und das Hervorheben von Schlüsselwörtern.

Funktionen einer Website

Eine Startseite, Inhaltsseiten und die Kontaktadresse gehören zu den Standardfunktionen jeder Website. Bei einer größeren Website, ab ca. 25 Webseiten, kommen ein Inhaltsverzeichnis (engl. Sitemap), eine Suche und meist eine Seite häufig gestellter Fragen hinzu.

Lesen Sie mehr zu Funktionen einer Website

Die Startseite

Das Hauptanliegen der Startseite (engl. Homepage) ist es, dem Nutzer den Gesamtzusammenhang der Website zu vermitteln. Bereiche, die auf der Homepage hervorgehoben und auffällig beworben werden, bekommen signifikant größere Aufmerksamkeit.

Lesen Sie mehr zu Die Startseite

Schreiben für das Web

Websites haben sich in den vergangenen Jahren gewandelt. Es stehen nicht mehr die technischen und ästhetischen Möglichkeiten im Vordergrund, sondern die sach- und bedürfnisgerechte Vermittlung der Inhalte.

Lesen Sie mehr zu Schreiben für das Web

Seitenanfang

Anhand der Navigation werden Hierarchien und Inhalte der Website verdeutlicht. Im Idealfall sagt die Navigation etwas über Start- und mögliche Endpunkte aus. Gewöhnlich versucht der Nutzer, im Web etwas zu finden. Wie im wahren Leben wird entweder gefragt (auf Webseiten über eine Suchen-Box) oder auf gut Glück gesucht. Beim selbstständigen Suchen wird i.d.R. zuerst in den Hauptnavigatoren nach einem entsprechenden Begriff geschaut. Dann werden die Unternavigatoren betrachtet. Und mit ein bisschen Glück ist der Nutzer nach ein oder zwei Klicks bei einer passenden Liste oder Seite gelandet. Eine klare, durchdachte Navigation hinterlässt bei den Nutzern einen guten Eindruck.

Konventionen der Webnavigation

Eine persistente Navigation (auch: globale Navigation) ist ein Satz von Navigationselementen, die mit einem einheitlichen Aussehen und mit einer gleichbleibenden Funktionsweise auf jeder Webseite am gleichen Platz wiederkehren.

Lesen Sie mehr zu Konventionen der Webnavigation

Navigationshilfen

Neben visuellen Hinweisen sollte jede Webseite einen Navigationspfad, einen sog. Brotkrumenpfad (engl. Breadcrumb) enthalten. Die Sitemap ist eine Übersichtsseite, vergleichbar mit einem Inhaltsverzeichnis. Auch eine Website-interne Suchfunktion ist hilfreich. Ein ebenfalls wichtiger Bestandteil jedes Accessibility-Konzeptes sind kontextbasierte Hilfeseiten.

Lesen Sie mehr zu Navigationshilfen

Tastaturbedienung

Menschen mit einer Sehbehinderung oder mit motorischen Störungen setzen eine Maus nur bedingt ein. Sie profitieren, ebenso wie jeder der lieber mit der Tastatur als der Maus arbeitet, von der Angabe sog. Tastatur-Kurzbefehle (engl. Shortcuts).

Lesen Sie mehr zu Tastaturbedienung

Seitenanfang

Farbwirkung, Farbklang und Kontrastanalyse

Farben sind das zentrale Element des graphischen Layout. Sie können sehr unterschiedlich wirken, Stimmungen beeinflussen, Vorstellungen wecken und Eindrücke verstärken. Bestimmt durch den kulturellen Hintergrund sowie das Geschlecht werden Farben sogar unterschiedlich wahrgenommen. Nicht jede Farbkombination kann ausreichend Kontraste aufweisen, was für die Gebrauchstauglichkeit jedoch von hoher Wichtigkeit ist. Durch entsprechende Tests ist es aber möglich, passende Kontraste zu finden, wenn für eine neue Website das Farbschema angelegt wird.

Farbwirkung und Farbklang

Farben stehen nie für sich allein, Farben kommunizieren, setzen Kontraste. Eine Website in Schwarz-Weiß kann ein Zeichen für ein klassisches Unternehmen sein, aber auch die schlichte Eleganz der Produkte betonen. Schwache Farben und wenig Kontraste wirken schüchtern, eine ruhige Farbgebung mit kräftigen Kontrasten durchaus seriös und professionell. Zu viel Farbe und zu viele Kontraste lassen eine Website schnell unangenehm aussehen.

Lesen Sie mehr zu Farbwirkung und Farbklang

Kontrastanalyse

Angenehme Farben bedeuten nicht gleichzeitig gut erkennbare Farben. Farb- und Helligkeitskontraste sind wichtig für die Gebrauchstauglichkeit einer Website. Auch hier stehen zahlreiche Werkzeuge kostenfrei zur Verfügung, um den Kontrast zu überprüfen.

Lesen Sie mehr zu Kontrastanalyse

Seitenanfang

Beispiele für Farben als Gestaltungsmedium im Web

Im Gegensatz zu den "maschinellen Nutzern", die auf eine valide Dokumentenstruktur und informative Inhalte angewiesen sind, profitieren "menschliche Nutzer" auch von einem ausgeglichenen Design. Das Design der Website erzeugt Emotionen, übermittelt Botschaften, löst verschiedenste Reaktionen des Nutzers aus und spiegelt Firmenphilosophie sowie Unternehmenskultur wieder. Anhand konkreter Beispiele werden nachfolgend die Farben als Gestaltungsmedium im Web betrachtet.

Farbbeispiele für Rot, Grün und Blau

Für die Farbe Rot werden die Website eines Energiedienstleisters und einer Handelskette vorgestellt. Die Farbe Grün wird bei einem Bierhersteller und einem Ton-Granulat-Produzent untersucht. Ein Versicherungsunternehmen und ein Mineralwasserhersteller repräsentieren die Farbe Blau.

Lesen Sie mehr zu Farbbeispiele für Rot, Grün und Blau

Farbbeispiele für Gelb, Orange und Braun

Für die Farbe Gelb werden die Website eines Briefdienstleisters und eines Eistee-Herstellers vorgestellt. Die Farbe Orange wird bei einem Baumarktbetreiber und einem Flugdienstleister untersucht. Ein Sahnelikör-Hersteller und ein Schokoladen-Hersteller repräsentieren die Farbe Braun.

Lesen Sie mehr zu Farbbeispiele für Gelb, Orange und Braun

Farbbeispiele für Violett und Rosa

Für die Farbe Violett werden die Website eines Schokoladen-Herstellers und eines Parfum-Herstellers vorgestellt. Ein Creme-Hersteller und eine Mädchenzeitschrift repräsentieren die Farbe Rosa.

Lesen Sie mehr zu Farbbeispiele für Violett und Rosa

Farbbeispiele für Weiß, Grau und Schwarz

Für die Farbe Weiß werden die Website eines Schmuckherstellers und einer Pflegemittel-Kette vorgestellt. Die Farbe Grau wird bei einem Elektrokleingeräte-Hersteller und einem Auto-Hersteller untersucht. Eine Getränke-Marke und eine Waschmittelmarke repräsentieren die Farbe Schwarz.

Lesen Sie mehr zu Farbbeispiele für Weiß, Grau und Schwarz

Seitenanfang