Grundlagen
Inhaltsübersicht:
- Grundlagen einer Website
- Navigation auf einer Website
- Farbwirkung, Farbklang und Kontrastanalyse
- 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
Navigation auf einer Website
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
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
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