Verkleinertes Layout

Die sich auf weißem Grund aufbauende Seite erscheint abgesetzt auf mittelgrauem Hinter-grund und wird durch diese Farbgebung unaufdringlich aber bestimmt in den Vordergrund gesetzt. Die Struktur des Layouts erschließt sich dem Besucher schnell und intuitiv durch das gewählte Gestaltungsraster, die klare Gliederung der Elemente, die saubere Linienführung sowie den Einsatz von harmonischen Farbflächen. Die wichtigen Elementen können schnell im Seitenaufbau lokalisiert werden. Die Seite wirkt nicht überladen, sondern versprüht durch die ruhige und durchdachte Darstellung der unterschiedlichen Objekte Ordnung, Eleganz und Professionalität. Die aufgeräumte Anmutung konzentriert die Beachtung des Besuchers auf die herausstechenden, zu priorisierenden Momente des Internetauftritts. Die Navigation kommt durch ihre Platzierung und farbliche Akzentuierung optimal zur Geltung und wird umgehend als Interaktionsmöglichkeit wahrgenommen. Das schlichte und bewusst einfach gehaltene Design dieses Elements betont die Funktionalität ohne zu simpel zu wirken. Dieser Grundsatz lässt sich generell auf die gesamte Gestaltung übertragen. Weiterhin wird das Navigationskonzept unterstützt durch die Button-ähnliche Darstellung der einzelnen Aktionsflächen. Die Nebennavigation befindet sich an einer für dieses Element üblichen Stelle und kann dementsprechend leicht als Solches identifiziert werden. Dem Betrachter werden mit der Pfadanzeige, der in den Unterseiten veränderten Navigation und den Bezügen im inhaltlichen Bereich der Seite umfangreiche Orientierungshilfen geboten.
Die Ausgewogenheit der Kontrastverhältnisse ist vollkommen und stimmig, so dass das menschliche Auge keiner unangenehmen Belastung ausgesetzt wird.

Das Signet links oben im Kopfbereich leitet in die Seite ein und bieten einen gelungenen Übergang zu den weiteren farblich abgestimmten Einheiten der Seite. Zwei geschickt angebrachte Unternehmensslogans kommunizieren die Firmenphilosophie. Der Platzhalter der Bildwelt nimmt ein zum Inhalt optisch passendes Stimmungsbild auf. Im Contentbereich wird im oberen Bereich die aktuelle Position in der Seitenhierarchie abgebildet. Darunter erstreckt sich der Inhalt. Im Seitenfuß wird ein optischer Abschluss der Gesamtheit gefunden. Ein insgesamt überzeugendes, homogenes, modernes, funktionales und seriöses Erscheinungsbild wird geprägt.

Die pixelgenauen Dimensionen des Aufbaus sind durchdacht gewählt. So belegt das Gesamtlayout inklusive Schlagschatten in der Breite 760 Pixel und ist dadurch ab einer Bildschirmauflösung von 800 x 600 Pixel darstellbar. Die Höhe ist je nach Menge der Seiten-inhalte variabel und passt sich dementsprechend an. Scrollen, also die Möglichkeit den Bild-schirminhalt bzw. einen Teil davon mit Hilfe der Maus zu verschieben , ist in manchen Fällen in der Vertikalen notwendig, horizontal jedoch nie. Für die Betrachtung der Website ist 1024 x 768 Pixel die optimale Auflösung (höhere Modi sind selbstverständlich ebenso geeignet). Der Seiteninhalt wird unabhängig von der eingestellten Monitorauflösung ständig zentriert in der Browser-Software dargestellt.

Abzüglich aller Randbereich bleibt für den reinen Inhalt eine Fläche von 700 Pixel in der hori-zontalen Ausrichtung. 170 Pixel davon sind für die Navigation vorgesehen, die übrigen 530 Pixel stehen der Bildwelt bzw. dem Content darunter zur Verfügung.

Als Format für die Vorlagendatei wird XHTML gewählt. Außerdem soll der Aufbau des Layouts komplett tabellenlos durch Einsatz von entsprechenden CSS-Definitionen angelegt werden.

Der exakte Doctype der Seiten wird „XHTML 1.0 Strict“ lauten, wobei es sich um eine offi-zielle Empfehlung des W3-Konsortiums handelt, die nach und nach den letzten veröffentlichten HTML 4.01-Standard ersetzen wird. XHTML ist XML-kompatibel und wurde im Januar 2000 definiert. Der Hintergedanke bei XHTML ist, dass durch Standardisierung eine medienneutrale Beschreibung von Dokumenten ermöglicht wird. So könnten XML-basierende Formate bspw. für das Web, für den Printbereich oder für mobile Endgeräte verwendet werden. Der Inhalt ist im Idealfall unabhängig vom Ausgabemedium.

Außerdem sind in XHTML definierte Internetseiten schlanker, werden schneller geladen, strukturell flexibler änderbar und bedeuten einen großen Schritt in Richtung barrierefreies Internet. Zusätzlich unterstützt werden diese Vorteile durch den Einsatz von Cascading Style Sheets und den Verzicht auf HTML-Tabellen als Mittel zur Definition des Layouts. Tabellen sind in ihrem Ursprung nicht für die Nutzung als Gestaltungsraster ausgelegt gewesen, um Internetseiten eine Struktur zu verleihen, sondern sollen als Hilfsmittel zur geordneten Darstellung von Textinformation eingesetzt werden. Die Verwendung als Gestaltungsmittel vermischt das Layout mit den Inhalten und vergrößert die Dateigröße der Seiten unnötig. Bei jedem Seitenaufruf müssen die Layoutinformationen neu geladen werden. Dies strapaziert die Bandbreite und erhöht die Ladezeiten. Ein Style Sheet mit den Angaben zum Aufbau wird lediglich einmal in den Browsercache zwischengespeichert und dann von dort aus geladen. Das reduziert das Datenvolumen merklich und führt langfristig betrachtet zu geringeren Kosten für das Webhosting. Das Einhalten moderner Webstandards bringt also, wie aus dieser Kurzbetrachtung hervorgeht, eine Vielzahl an Vorteilen mit sich.

Da das Stichwort Barrierefreiheit gefallen ist, soll in wenigen Worten der Hintergrund geklärt werden. Mit Barrierefreiheit wird der ungehinderte Zugang zu Informationen im World Wide Web besonders für körperlich eingeschränkte Internetuser bezeichnet. Im Bundesbehindertengleichstellungsgesetz (BGG) ist der exakte Begriff definiert, wobei hier der Paragraf 11 „Barrierefreie Informationstechnik“ besonders interessant ist. Die genauen Richtlinien sind in Deutschland in der „Barrierefreie Informationstechnik-Verordnung (BITV)“ festgelegt. Öffentliche Einrichtungen müssen bis spätestens Ende 2005 durch die „Verordnung zur Schaffung barrierefreier Informationstechnik nach dem BBG“ ihr Informationsangebot problemlos barrierefrei nutzbar machen. Durch die für die nordEnergie-Präsenz getroffenen technologischen Entscheidungen ist der Auftritt aus rein technischer Sicht für die Barrierefreiheit bereits optimal vorbereitet und entspricht modernsten Standards.

Der komplette Quellcode der für TYPO3 umgesetzten XHTML-Designvorlage samt Style Sheet kann im Anhang eingesehen werden. Das entwickelte Design- und Layoutkonzept wird übereinstimmend durch diese beiden Elemente abgebildet. Die Meta-Tags zur Suchmaschinen-Optimierung sind zu diesem Zeitpunkt uninteressant und werden nach späterer Definition eigenständig durch das CMS hinzugefügt.

Eine Audiountermalung würde bei dem Themengebiet „Energie“ bzw. „Photovoltaik“ vollkommen gegensätzliche Eindrücke zu den zu erzielenden Assoziationen wie z.B. Seriosität, Professionalität und Eleganz hervorrufen. Ein zusätzlicher Grund, der gegen akustische Elemente spricht, ist die beschränkte Bandbreite des Anwenders. Hochgeschwindigkeitsinternetzugänge bekleiden eine stetig wachsende Marktposition, dürfen jedoch nicht als Voraussetzung für das Betrachten der Internetpräsenz gelten.

Bilder fallen sofort ins Auge und werden bei weitem schneller aufgenommen als Texte. Der Mensch reagiert auf Bilder intensiv, schnell und eindringlich. Die Thematik eines übersichtlichen Bildes kann im Bruchteil einer Sekunde (wenige Hundertstel) erfasst werden. Um das eigentliche Thema jedoch erinnern zu können, benötigt man eine deutlich längere Zeitspanne (ca. ein bis zwei Sekunden). Bilder stellen lediglich Objekte dar und sind nicht mit Sprache gleichzusetzen. Außerdem beeinflussen Bilder das Verhalten und die Empfindungen des Menschen maßgeblich – oft unbewusst, ungenau und in starker Abhängigkeit der persönlichen Assoziationen und Erfahrungen des Betrachters. Die Wahrnehmung kann sehr oberflächlich und diffus ausfallen, da geglaubt wird, ein Bild bereits zu verstehen, ohne wirklich alle Elemente bewusst erkannt zu haben.

Wie sich bereits nach dieser Kurzbetrachtung zeigt, entstehen durch den Bildeinsatz viele Möglichkeiten. Dennoch dürfen die geschilderten Risiken nicht unbeachtet bleiben und müssen bei der Verwendung von Bildmaterial mit einkalkuliert werden.

Grundsätzlich kann man Bildern in Multimediaprojekten folgende Funktionen zuordnen, die bei der Auswahl der Bildwelt für die nordEnergie-Präsenz beachtet wurden und untereinander nicht vermischt werden dürfen:

• Veranschaulichung, Umschreibung, Erklärung (als Ergänzung der textuellen und sprachlichen Inhalte
• Strukturierung (zeigt die Struktur eines Themas auf, verleiht Ordnung)
• Dekoration, Illustration (als Motivation durch hochwertigen bildlichen Kontext)
• Stimmungserzeugung

Im entworfenen Layout ist für jede einzelne Seite ein eigenes, aussagekräftiges Stimmungsbild vorgesehen, welches die Aufmerksamkeit des Betrachters auf den Text konzentriert. Die Position des Platzhalters ist unlängst aus den vorherigen Abschnitten bekannt. Die exakte Dimensionierung beläuft sich auf 530 Pixel in der Breite und 149 Pixel in der Höhe. Die ungerade Pixelzahl in der Horizontalen ist durch die weiße Trennlinie und dem exakt passenden linksbündigen Abschluss mit dem Hauptnavigationsbereich im Ausgangszustand begründet.

Zuerst sollen allgemeine Erläuterungen zu den erlaubten Motiven und Ausschnitten der nordEnergie-Bildwelt einen übersichtlichen Einstieg in die Materie bieten. Anschließend werden diese aufgestellten Regeln und Bedingungen anhand exemplarischer Stimmungsbilder erläutert und verdeutlicht.

Der Großteil des für die Website auserkorenen Bildmaterials stammt aus freien Bildarchiven im Internet und darf lizenzfrei ohne Einschränkungen verwendet oder manipuliert werden. Weitere Bilder wurden von der nordEnergie geliefert bzw. angefertigt. Die verwendeten Bilder werden zumeist zur Veranschaulichung und Dekoration der im Zusammenhang stehenden Textinformationen dienen.

Das Thema der Internetpräsenz beschäftigt sich mit einem sehr technologischen Hintergrund. Die nordEnergie ist ein Unternehmen, welches auf dem Energiesektor tätig ist. Zur Zeit gehört zu dem Firmenportfolio ein Tätigkeitsfeld: die High-Tech-Branche der Photovoltaik, Stromerzeugung durch Nutzung der Sonne. Die Ausweitung der Aktivitäten auf zusätzliche Energieschwerpunkte ist im Laufe des Jahres fest eingeplant. Aus diesem Grund ist das hauptsächliche Thema der Präsenz „Energie“. Solarenergie als momentan einziger Schwerpunkt darf selbstverständlich nicht außen vor gelassen werden. Des Weiteren lautet der Firmenslogan „Energie und Meer“ und soll zum einen auf die regionale Verbundenheit des Unternehmens zum Norden bzw. dem Standort Bremerhaven abzielen, zum anderen eine breite Palette an Leistungen und Tätigkeiten der nordEnergie andeuten. Die durch den Slogan hergestellte Verbindung mit Meer und allgemein der Natur ist zusätzlich in der Bildwelt zu berücksichtigen.

Der ökologische und natürliche Anspruch kann durch Bildmotive abgedeckt werden, welche thematisch eine Beziehung von Umwelt und Energie herstellen. Als Solaranbieter bieten sich hier besonders Himmelmotive mit strahlender Sonne oder interessanten Wolkenkonstrukten an. Der Himmel nimmt eine spezielle Position im Konzept der Bildwelt ein und wird aus Wiedererkennungsgründen mehrfach verwendet. Freigestellte Objekte vor blauem Himmel sind wünschenswert.
So könnte bspw. bei der Seite „Sitemap“, die eine Übersicht der gesamten Seitenstruktur zur Verfügung stellt, ein Wegweiser vor blauem Himmel erscheinen, der passend zum Inhalt der Seite die verschiedenen Wege aufzeigt. Andere Assoziationen zu der Natur bringen Abbildungen von kräftigen, grünen, gesunden Pflanzen oder blühenden Blumen, insbesondere Sonnenblumen dank der sprachlichen und optischen Nähe zur Sonne, auf den Plan. Die Verbundenheit zum Standort, zum Norden, zur Küste und zu Bremerhaven kann durch regional aufgenommene Abbildungen bzw. in diesen Kontext passende Motive ausgedrückt werden, welche das Meer bzw. Küstenregionen zeigen. In Kombination mit den bereits diskutierten Begriffen „Himmel“ und „Sonne“ versprühen all diese Motive Natürlichkeit, Umwelt- und Zukunftsverantwortung, Entschlossenheit sowie etwas Beruhigendes und Erholendes.

Der Bereich Energie und Energiegewinnung stellt einen sehr technischen und komplexen, aber dennoch aus dem alltäglichen Leben nicht wegzudenkenden Themenkreis dar. Jeder Mensch verbraucht Tag für Tag Energie in verschiedenster Form – wahrscheinlich ohne sich dabei über die Gewinnung oder Erzeugung tiefere Gedanken zu machen. Für die Visualisierung bieten sich für das Oberthema Energie/Energiegewinnung starke, mit dem Begriff im Zusammenhang stehende Symbole wie bspw. Strommasten als Transportmedium für Energie bzw. Strom an. Hierdurch kann bspw. technologischer Anspruch und Stärke verdeutlicht werden. Abbildungen von negativ belasteten Bildzeichen wie z.B. Kraftwerken sind nicht zulässig, da sie mit der erwünschten natürlichen, ökologischen Anmutung brechen.
Der spezielle Unteraspekt der Solarenergie wird durch Motive berücksichtigt, die Komponenten einer Photovoltaikanlage in den Mittelpunkt stellen. Besonders interessant sind hier Abbildungen, die Solarmodule zeigen, da diese Elemente durch ihre Anbringung auf Dächern den größten Wiedererkennungswert bieten. Ein Wechselrichter, der bspw. im Keller montiert wird, macht keinen Sinn. Da Module meist in blauen Farbtönen gefertigt sind, passen sich diese Fotos optimal in den Gesamtkontext ein.

Es folgen mehrere ausgewählte Stimmungsbilder samt gedanklicher Beschreibung.

Beispiel der Bildwelt: Stimmungsbild der Seite „Ablaufbeschreibung“

In der obigen Abbildung für den Punkt „Ablaufbeschreibung“ der Rubrik „Leistungen – Photovoltaik“ ist eine Photovoltaikanlage dargestellt, welche von einem Mitarbeiter momentan gewartet wird. Das Bildmotiv ist stark technologisch und modern orientiert. Eine Vielzahl von Solarmodulen in zwei Reihen ist zum Teil angeschnitten, zum Teil fast komplett sichtbar. Die vordere Reihe ist detaillierter zu sehen, die hintere Reihe bietet eine größere Übersicht des Photovoltaikarrays. Trotz des inhaltlich komplizierten Bildthemas kann der Betrachter das Motiv im Kontext der Gesamtseite ein- und zuordnen. Das Thema Photovoltaik spiegelt sich optimal im Stimmungsbild wider und wird veranschaulicht.

Beispiel der Bildwelt: Stimmungsbild der Seite „Leistungen“

Ein Bildausschnitt eines Strommastes in Nahaufnahme aus starker Untersicht bzw. aus der Froschperspektive aufgenommen, leitet die Oberrubrik „Leistungen“ ein, welche über die verschiedenen Tätigkeitsfelder der nordEnergie informiert. Der hoch gebaute, im Sonnenlicht stehende Strommast kann leicht als Solches von dem Betrachter aus seiner Erfahrung mit der Umwelt heraus identifiziert werden. Er bietet durch seine Form eine klare Linienführung und steht eindeutig im Zusammenhang mit Energie, Strom und Leistung.

Beispiel der Bildwelt: Stimmungsbild der Seite „Gründe für Photovoltaik“

Dieser Ausschnitt eines Fotos einer weiblichen Person (wahrscheinlich ein Kind oder junges Mädchen) in der Profilansicht mit einer Pusteblume vor wolkenlosem, hellblauen Himmel erscheint bei der Unterseite „Gründe für Photovoltaik“ der Rubrik „Leistungen – Photovoltaik“. Da es sich bei Sonnenenergie um eine besonders saubere und reine Energieerzeugung handelt, die auf ökologischem und regenerativen Wege die vorhandenen Ressourcen der Erde nutzt, bietet sich dieses leichte, unbekümmerte, umweltnahe Motiv an. Durch Photovoltaik werden CO2-Emmissionen eingespart, was die Umwelt schont und gut für die Zukunft sowie für die nachkommenden Generationen ist. Durch die nahe Ansicht ist dieses Bild emotional geprägt und wirkt dadurch stärker bei dem Betrachter.

Beispiel der Bildwelt: Stimmungsbild der Seite „Grundprinzip“

Für die Seite „Grundprinzip“ der Rubrik „Wissen – Photovoltaik“, die das grundlegende Prinzip der Photovoltaik, nämlich die Nutzung der Sonne verdeutlichen soll, wurde thematisch passend ein stark sonnenbezogenes Motiv gewählt. In einer Großaufnahme ist eine auf der rechten Seite stehende Person ab Schulter und bis Hüfte angedeutet, die ihre Hände so im Bild hält, dass die im dunkelblauen Himmelhintergrund mittig stehende Sonne zwischen den Händen zu liegen scheint. Die Sonne stellt sich dabei groß, stark und leuchtend dar, jedoch nicht zu übermächtig oder gewaltig. Verschiedene Sonnenstrahlen und Reflexionen komplettieren den Eindruck.

Pfadanzeige im Contentbereich

Als weitere Möglichkeit zur Orientierung neben der ständigen Zustandsanzeige in der Hauptnavigation kann der Betrachter diese Abbildung der hierarchischen Position, ange-fangen von der obersten Ebene des Seitenbaums, nutzen. Es ist keine bloße Anzeige, sondern die einzelnen Seitentitel sind interaktiv verwendbar. Ein Klick auf die entsprechende Bezeichnung führt zu der damit verknüpften Seite. Die Funktionalität wird durch einen einleitenden Kurztext beschrieben. Gesetzt wird der Text in elf Pixel und in dunkelgrau, die Hyperlinks erhalten die für den Auftritt festgelegte Farbe der Interaktivität Dunkelblau und werden bei dem Überfahren mit dem Mauszeiger unterstrichen dargestellt. Unter der Pfadanzeige trennt eine horizontale feine graue Linie das Element von dem darzustellenden Inhalt ab.

Metanavigation im Seitenkopf

Rechts oben im Header jeder Seite sind die vier Funktionen der Metanavigation gut erreich-bar angebracht. Bei der Darstellung wurde eine sehr reduzierte Visualisierung gewählt, die sich auf das Wesentliche beschränkt und die Funktion an sich in den Vordergrund stellt. In einer Zeile erscheinen die Punkte nebeneinander mit luftigen Raum dazwischen von einer vertikalen Linie, dem Pipe-Symbol („|“), getrennt. Der Schriftgrad beträgt elf Pixel, farblich wird in dunkelgrau gearbeitet. Dadurch ist der Kontrast zwischen dem weiß leuchtendem Hintergrund und der Schriftfarbe angenehm abgemildert. Bei dem Überfahren des Bereiches mit dem Mauszeiger wechselt die Schriftfarbe zu Dunkelblau.

Metanavigation im Seitenfuß

Die Wiederholung im Footer der Seite ist von der Darstellung her prinzipiell gleich. Der einzi-ge Unterschied besteht in den Abstände zwischen den Punkten: diese sind geringer und dadurch rückt der Bereich enger zusammen.

Hauptnavigation im Ausgangszustand

Insgesamt fünf, logisch untereinander angeordnete Navigationselemente befinden sich in der ersten Ebene der Hauptnavigation, die mit kurzen, prägnanten Titeln versehen sind. Die Höhe beträgt 25 Pixel und die Breite ist mit 170 Pixel auch auf längere Bezeichnungen ausgelegt. Getrennt werden sie jeweils von einer feinen horizontalen Linie (ein Pixel hoch) am unteren Rand des Objekts. Die in der Fläche um zehn Pixel nach rechts versetzte Beschriftung wird in zwölf Pixel gesetzt und von der horizontalen Ausrichtung her zentriert. Oben und unten befinden sich jeweils acht Pixel Abstand. Eine Unterstreichung des Verweistextes zur Verdeutlichung des Hyperlinkcharakters wird nicht vorgenommen, da das Element bereits in seinem jetzigen Zustand als Mittel zur Interaktion wahrgenommen wird und eine weitere Hervorhebung überflüssig macht.

Im Ausgangszustand der Navigation (kein Punkt angewählt), schließt das Interaktionselement mit der Bildwelt bündig ab. Die Farbe Dunkelblau ist in dem kompletten Konzept in seiner Funktionalität mit Interaktion belegt. Dunkelblaue Objekte werden immer wiederkehrend und konsistent eine Aktion auslösen.

Der weitere Aufbau des Hauptnavigation wird in dem folgenden Screen deutlich.

Hauptnavigation bis zur dritten Ebene

Das Auswählen eines Bereiches aus der ersten Navigationsebene bezweckt die Auflistung der ihm zugeordneten Seiten unterhalb des aktuellen Punktes. Die vorherig unmittelbar darunter platzierten übrigen Hauptpunkte verschieben sich passend nach unten. Das Listing erscheint um zehn Pixel in der zweiten Ebene und nochmals weitere zehn Pixel in der Dritten eingerückt auf mittelblauen Grund und ist der Oberrubrik optisch einfach zuzuordnen. Der Schriftgrad liegt bei elf Pixel und bei aktiver Auswahl wird der fette Schriftschnitt benutzt, um die momentan gewählte Seite in der Navigation anzuzeigen. Dadurch ist eine bessere Orientierung gegeben und der Besucher ist sich über seine aktuelle Position innerhalb der Seitenhierarchie ständig bewusst. Die Abstände zwischen den einzelnen Navigationspunkten sind ausreichend dimensioniert, so dass das Erfassen der verschiedenen Teilbereiche problemlos möglich ist. Anklickbar ist nicht nur der textuelle Bereich, sondern eine mit den Abmessungen 170 Pixel in der Breite und 25 Pixel in der Höhe deutlich größere Zone. Eine gewisse Toleranz bei dem Auswählen wurde also einkalkuliert, was das System robuster macht und keine unnötig hohe Präzision fordert. Außerdem ist klar strukturiert, welche Wahlmöglichkeiten der User von dem Navigationssystem angeboten bekommt.

Diese Art des kaskadierenden Aufbaus wird für die gesamte Navigation konsistent eingehalten. Sie ist leicht verständlich und bietet dem Website-Besucher eine schnelle Orientierung. Die visuelle Umsetzung der Struktur wirkt aufgeräumt, klar und benutzerfreundlich. Es wird auf webübliche Prinzipien zurückgegriffen, die dem User aus seiner Interneterfahrung bereits vertraut sind und in einer hohen Akzeptanz resultieren.

Drei grundlegende Anforderungen müssen in dem Interaktionskonzept beachtet werden:

• Auf jede Aktion des Nutzers muss eine Reaktion des Systems folgen
• Die Reaktion des Systems erfordert Konsistenz, so dass sämtlich anklickbare Elemente auf immer dieselbe Weise reagieren
• Die Darstellung von interaktiven und statischen Elementen muss wiederkehrend und konsistent sein und darf nicht vermischt werden

Außerdem müssen die drei wesentlichen Fragen der Orientierung optisch unterstützt werden: Wo bin ich? Wo bin ich gewesen? Wohin kann ich gehen?

Bei der Gestaltung von Dialog- bzw. Navigationselementen sollten nach ISO 9241-10 folgende weitere Merkmale beachtet werden. Der Dialog hat der Aufgabe angemessen zu sein, d.h. er soll den Benutzer bei der Erledigung der Aufgabe optimal unterstützen (Aufgabenangemessenheit). Die Schritte und Ebenen des Navigationselements sollten klar und verständlich sein (Selbstbeschreibungsfähigkeit) und der Nutzer soll die Ablaufgeschwindigkeit des Systems selbst bestimmen können – nicht das System (Steuerbarkeit). Konsistenz der Navigation steht an oberster Stelle (Erwartungskonformität) und eine gewisse Fehlertoleranz und Robustheit ist einzuplanen, so dass das System bei Fehleingaben keine unkontrollierten Reaktionen zeigt.

Wie sich leicht erkennen lässt, erfordert der Entwurf der visuellen Navigation also eine durchdachte, strukturierte und konsequente Herangehensweise, um dieses bedeutende Element benutzerfreundlich, übersichtlich und intuitiv erlernbar zu gestalten.

Aus dem Signet leitet sich die Vorgabe für die zu verwendende Standardschrift des Auftritts ab: der serifenlose Font „Arial“. Er gehört zu der Schriftgattung der Linearantiqua (auch als Groteske bezeichnet) und ist speziell in kleineren Schriftgraden besonders am Bildschirm weitaus besser lesbar als Serifenschriften (auch Antiqua genannt), da sich die geometrischen Formen und geraden Linien der Linearantiqua besser in das Pixelraster des Monitors einfügen. Dies resultiert in einem glatteren Schriftbild und deutlich angenehmerer Lesbarkeit der gebotenen Textinformationen.
Durch diese charakteristischen Vorteile qualifiziert sich die Arial als Schrift für die Online-Typografie. Außerdem ist sie durch ihre schmale Laufweite gut geeignet, große Text-mengen unterzubringen. Ein weiterer Grund für die Arial besteht darin, dass sie zu der Grundausstattung der Standardinstallation des Betriebssystems gehört – plattformübergreifend bei Windows und auf dem Mac. Somit ist die Schriftart weit verbreitet, auf allen gängigen Systemen in der Browser-Software darstellbar und die Internetpräsenz wird von dem Betrachter so wahrgenommen, wie sie entworfen wurde. Die Größenangaben der Schrift für das Web erfolgt in Pixel (kurz px), bei den Angaben für die Druckversion wiederum in Punkt (pt) .

Die Schriftausrichtung aller typografischen Elemente der Website wird linksbündig gehalten. Diese Absätze mit Flattersatz sind im World Wide Web leichter lesbar als Text im Blocksatz, da durch die fehlende Silbentrennung unterschiedlich große Abstände zwischen den Wörtern erzwungen werden und ein sehr unruhiges Graubild entsteht. Der Lesefluss wird zerstört.

Der Zeilenabstand spielt gerade bei langem Fließtext eine große Rolle. Für ein angenehmes und leichteres Lesen wurde ein 1,5-facher Abstand gewählt (Schriftgröße 12 px zu Zeilenhöhe 18 px). Der Raum zwischen den einzelnen Textabsätzen ist mit 1,5-facher Zeilenhöhe (Abstand bei 18 px) ausreichend groß gewählt, so dass sie sich deutlich voneinander abheben können und als eigenständige optische Einheit wahrgenommen werden.

Die äußeren Abstände des Textblocks zu seinem umschließenden Rahmenelement sind so gewählt, dass der Text nicht eingesperrt, sondern frei und „luftig“ wirkt (jeweils 20 px an allen vier Rändern). Der Text erscheint durch diese Maßnahme bedeutsamer, gewinnt mehr Aufmerksamkeit und wird leichter lesbar.

Der Texthintergrund bildet einen optimalen Kontrast zur Farbe des Textes. Es handelt sich um einen mittleren Kontrast von „Hellblau leicht“ zu „Dunkelgrau“, der als besonders angenehm empfunden wird. Das Auge wird weder durch zu starke Kontraste wie Schwarz-Weiß oder Bunt-Unbunt übermäßig belastet, noch durch zu schwache Kontraste gefordert die dann schwer auseinander zu haltenden Vorder- und Hintergrundobjekte zu unterscheiden. Durch die Reduzierung des Kontrastes zwischen Text und Hintergrund wird das Sehorgan entlastet und der Text wird entspannter aufgenommen.

In folgender Tabelle werden die Elemente des entwickelten typografischen Konzepts, in denen die eben diskutierten Aspekte verwirklicht wurden, theoretisch eingeführt und anschließend am praktischen Beispielscreen verdeutlicht. Die ausführlichen Definitionen der möglichen Zustände der Navigation sind im entsprechenden Abschnitt nachzulesen.

Die Überschriften werden in bis zu vier Ordnungen unterschieden, die sich durch passend gewählte Abstände von den zugehörigen Absätzen hervorheben, aber dennoch eine inhaltliche Verbindung aufzeigen. So ist bei der textlichen Gestaltung und Gruppierung ein größtmöglicher Handlungsspielraum gegeben. Der Fließtext selbst ist durch seine Größe (zwölf Pixel), die dunkelgraue Farbgebung und den Zeilenabstand gut lesbar. Eine Verlinkung im Text erscheint in dem bekannten Dunkelblau. Die Pfadanzeige wird einen Pixel kleiner gesetzt, um das Element in seiner Wichtigkeit dem eigentlichen Fließtext unterzuordnen. Ein Hyperlink in der Anzeige erscheint konsistent dunkelblau. Der Metatext, welcher z.B. in der Fußzeile verwendet wird, erscheint ebenfalls in elf Pixel. Die Navigation differenziert durch die drei Ebenen in der Schriftgröße um ein Pixel von zwölf zu elf. Die Metanavigation taucht ebenfalls in elf Pixel auf.
Aufgrund der Beschränkung des Papierformates lässt sich leider keine originalgetreue Abbil-dung der kompletten Startseite der Website realisieren. Deshalb kommt ein Ausschnitt des Inhaltsbereiches zum Einsatz.

Screenausschnitt des Inhaltsbereiches

Der Screen beginnt mit der Pfadanzeige im oberen Bereich. Darunter trennt eine horizontale Linie diesen Interaktionsbereich vom eigentlichen Inhalt ab. Eine Überschrift erster Ordnung begrüßt den Besucher. Diese Darstellung ist konsistent für jede Unterseite des gesamten Auftritts. Es folgt ein Leadelement in einem fetten Schriftschnitt, der in die Seite einleitet. Darunter mit ausreichend Abstand positioniert beginnt der Fließtext, der am Ende mit einem Hyperlink versehen ist. Eine Überschrift der zweiten Ordnung führt zum nächsten inhaltlichen Schwerpunkt, der Anzeige von aktuellen Neuigkeiten mit verkleinerter Datumsanzeige, der mit dem kompletten Nachrichtentext verknüpften Überschrift sowie einem kurzen Interesse weckenden Ausschnitt der Meldung. Die dargestellten Schriftgrößen sind für die Anwendung als Bildschirmtext harmonisch zueinander zwischen elf Pixel und vierzehn Pixel gewählt, der Hintergrund überstrahlt durch den Einsatz einer milden Grundfarbe nicht und der Fließtext ist durch den gewählten Zeilenabstand weder zu dicht noch zu eng beieinander.

Eingefärbtes Layout

Die mit „Leben“ in Form von Farbe gefüllte Variante lässt den Aufbau und die Strukturierung der Seite deutlicher werden. Die Farbtöne spielen optimal zusammen. Lediglich die Bildwelt bleibt weiterhin ausgespart. Die farbliche Komposition und Gruppierung versprüht Professionalität, Klarheit, Seriosität und Eleganz. Der graue Hintergrund wirkt neutral und sachlich , wodurch die eigentliche Seite in ihrer Wichtigkeit betont wird. Der weiße Grund des hauptsächlichen Bereiches hat einen sauberen, reinen und modernen Charakter inne . Der mittelblaue Balken bietet zum einen den optischen Einstieg in den inhaltlichen Teil der Internetpräsenz und bildet zum anderen wiederum, am unteren Ende platziert, einen logischen Abschluss der Einheit. Der Inhalt wird umschlossen und sozusagen „eingerahmt“.
Dazwischen präsentiert sich zu linker Hand in dem dominanten Dunkelbau die Navigation, welche durch ihre Farbgewichtung deutlich erkennbar hervorgehoben und somit ihrer wich-tigen Rolle als Hauptinteraktionselement gerecht wird. Der variable Freiraum unterhalb der Navigation wird bis zum abschließenden Balkenelement mit dem Mittelblau bei 50% Deck-kraft aufgefüllt. Direkt rechts daneben ist mit 30% Deckkraft zum wiederholten Male das Mittelblau zu finden.

Es herrschen deutliche, jedoch nicht zu extreme Farbkontraste zwischen Vorder- und Hintergrund und obwohl die Liste der eingesetzten Farben relativ lang ausfällt, wirkt das Layout nicht zu bunt oder überladen. Die drei Variationen des Mittelblautons ergeben durch die Reduzierung der Deckkraft einen harmonischen Bunt-Unbunt- bzw. Hell-Dunkel-Kontrast.
Durch die im Rechteck angeordnete Platzierung der verschiedenfarbigen Elemente wird eine geschlossene Einheit gebildet. Der Blick des Users findet eine, durch die Farbwahl unterstützte, klare Linienführung, die den Weg zu den wichtigen Elementen leitet.

Weiß allgemein steht für das Licht und die Leuchtkraft und durch religiöse Zusammenhänge begründet für die Frömmigkeit und den Glauben. In Kombination mit Blau steht Weiß symbolisch für das Vollkommene, das Ideale und für das Gute. Mit weitem Vorsprung wird dieser reinen Farbe außerdem die Sauberkeit, aber auch Sterilität zugeordnet. In Verbindung mit Grau gilt Weiß wie bereits angeführt als Farbe des Einfachen, der Bescheidenheit, der Sachlichkeit, der Funktionalität und Neutralität. Im engen Zusammenhang mit Blau stehen Wahrheit, Ehrlichkeit, Klugheit, Wissenschaft usw. – diese Bedeutungen wurden bereits für Blau diskutiert. Weitere symbolische Bedeutungen, die Weiß als Einzelfarbe zugeordnet werden, sind die Milde und die Eindeutigkeit.

Durch die Verwendung der Farbe Weiß als Gestaltungsmittel kann der Auftritt demnach durch Sauberkeit bzw. eine saubere und klare Gliederung der Elemente glänzen. Der weiße Hintergrund ist eindeutig, vollkommen, sachlich und stellt die wichtigeren Inhaltselemente in den Vordergrund .

Unübersehbar sind nach Betrachtung der dritten Farbe des Farbkonzepts die häufigen Über-schneidungen von Weiß in der Farbsymbolik und -bedeutung mit ihren zwei Partnerfarben, was ebenso umgekehrt gilt. Die Nähe kommt nicht von ungefähr. Die drei Farben ergänzen sich harmonisch, prägen ein sehr sachliches Erscheinungsbild und verleihen dem Auftritt die nötige Sicherheit, einen gewissen funktionalen Anspruch sowie eine vertrauliche, professionelle Basis.

Grau wird oftmals als Farbe ohne Charakter und des Mittelmaßes (die Farbe zwischen Weiß und Schwarz, aber nicht die goldene Mitte) bezeichnet. Dabei muss beachtet werden, dass das Farbempfinden bei Grau besonders stark von der jeweiligen farblichen Abstufung selbst und der begleitenden Farben abhängt.

Bei Pünktlich- und Nachdenklichkeit („graue Zellen“) steht Grau bei den Nennungen an oberster Stelle. Außerdem gilt Grau als Farbe der Theorie. In Kombination mit Weiß und Blau gilt Grau als sehr sachlich und funktional. Neben Weiß erscheint Grau als Farbton der Neutralität, Bescheiden- und Einfachheit. Des Weiteren kann eine graue Farbgebung auch Eleganz signalisieren.

Wie sich zeigt, bringt Grau vor allem in Verbindung mit Weiß und Blau angemessene und verwendbare Assoziation zum Vorschein, die sich harmonisch und zusammenhängend in das Gesamtbild des Internetauftritts einpassen. Die Seite erhält einen sachlichen und funktionalen Charakter. Gemäß der hohen Unternehmensansprüche lässt Grau einen eleganten, aber dennoch bescheidenen, besonnenen und nicht übertrieben protzigen Eindruck entstehen. Grau neutralisiert außerdem und unterstreicht den einfachen Charakter der intuitiven Strukturierung und simplen Aufteilung.

Psychologisch und symbolisch sind mehrere Wirkungen festzustellen:
Blau gilt als Farbe der unbegrenzten Dimensionen, wird mit Ferne, Weite, Unendlichkeit und dem Himmel sowie Wasser assoziiert. Darüber hinaus steht Blau symbolisch für die Treue, das Vertrauen und die Zuverlässigkeit. Des Weiteren lässt sich feststellen, dass Entspannung, Erholung, Ruhe und Leistung mit Blau in Verbindung gebracht werden. Außerdem werden in Kombination mit der Farbe Weiß, welche ebenfalls im Farbkonzept vorgesehen ist, die Konzentration, die Klugheit, die Wissenschaft, die Genauigkeit, die Wahrheit, die Sicherheit und das Ideale dem Farbton Blau zugeschrieben. Weiterhin kann Blau für Logik, Technologie, High Tech und scharfes Denken stehen.
Traditionell wirkt die Farbe Blau für jede Gelegenheit passend sowie korrekt und galt durch ihre kostenintensive Herstellung als eine der kostbarsten und wertvollsten Malerfarben.

Betrachtet man die Auflistung der genannten farblichen Verbindungen, so wird schnell deutlich, dass Blau bei einer, wie in diesem Fall, seriös, professionell, modern und hochwertig anmutenden Website, eine sehr treffende Farbwahl darstellt. Eine Vertrauensbasis zum potenziellen Kunden kann errichtet werden, Zuverlässigkeit und Pünktlichkeit des Unternehmens werden ausgedrückt. Der ruhige Charakter rückt die Inhalte in das richtige Licht und verkörpert die hohe Leistungsfähigkeit des Unternehmens.
Der wissenschaftliche und stark technologische Aspekt der Tätigkeiten und Leistungen der nordEnergie wird nicht nur inhaltlich in den Mittelpunkt gestellt, sondern zusätzlich durch die nuancierten Blautöne in Kombination mit Weiß untermauert, verdeutlicht und vertieft. Dass die Arbeit der nordEnergie sehr genau, gewissenhaft und konzentriert ausgeführt wird, erhält weitere Unterstützung durch die entsprechend getroffene Farbwahl.

Als Einstieg in das erarbeitete Farbkonzept sollen die exakten Farbdefinitionen dienen:

Farbe : „Dunkelblau“
Hex-Code: # 000080
RGB: 0r 0g 128b
C: 100% M: 98% Y: 14% K: 17%

Farbe : „Mittelblau 100%“
Hex-Code: # C9D6EA
RGB: 201r 214g 234b
C: 19% M: 10% Y: 2% K: 0%

Farbe: „Mittelblau 50%“
Hex-Code: # E4EAF4
RGB: 228r 234g 244b
C: 9% M: 4% Y: 1% K: 0%

Farbe: „Mittelblau 30%“
Hex-Code: # EFF3F9
RGB: 239r 243g 249b
C: 5% M: 2% Y: 1% K: 0%

Farbe : „Hintergrundgrau“
Hex-Code: # A6A6A6
RGB: 166r 166g 166b
C: 37% M: 30% Y: 30% K: 0%

Farbe : „Dunkelgrau“
Hex-Code: # 555555
RGB: 85r 85g 85b
C: 64% M: 56% Y: 55% K: 31%

Farbe : „Mittelgrau“
Hex-Code: # 999999
RGB: 153r 153g 153b
C: 43% M: 35% Y: 35% K: 1%

Farbe : „Weiß“
Hex-Code: # FFFFFF
RGB: 255r 255g 255b
C: 0% M: 0% Y: 0% K: 0%

Wie aus der Auflistung der für die Website zu verwendenden Farbtöne leicht zu erkennen ist, wird stark in Richtung der Farben Blau und Grau gewichtet. Zum einen stellt dies eine Firmenvorgabe dar und ist durch die bereits diskutierte Farbwahl im Signet begründet, zum anderen lassen sich aus der Farbenlehre klare Assoziationen, Bedeutungen und Verbindungen ableiten, die gerade für diesen Farbeinsatz in dem bestehenden thematischen Zusammenhang sprechen.

Bevor detailliert auf die Aspekte und Zusammenhänge aus der Farbenlehre eingegangen wird, sollen Aspekte allgemeiner Natur und die Anwendungsbereiche für das entwickelte Farbharmoniekonzept angeführt werden.

Zum Einsatz kommen mit Blau und Grau zwei Grundfarbtöne, die zueinander passend gewählt sind. Das Gesamtbild ist dadurch ruhig und verständlich. Weiß als zusätzliche Farbe im Hintergrund der Gesamtseite bietet einen hohen Kontrast zum übrigen Farbbild, ohne dabei als Fremdkörper zu wirken. Durch die Farbbegrenzung auf zwei bzw. drei grundlegende Töne ergibt sich eine höhere Akzeptanz durch den Nutzer als bei einer Fülle von grellen oder schreienden Farben.

Bei den Farbtönen „Dunkelblau“ und „Mittelgrau“ handelt es sich exakt um die Farbvorgaben aus dem Signet des Unternehmens. Um diese zwei Farben wurde ein stimmiges Harmoniekonzept aufgebaut, indem ähnlich anmutende, verwandte Abstufungen der Grundfarben für die Internetpräsenz auserwählt wurden. Das sehr dominante und kühle „Dunkelblau“ wurde durch das Hinzufügen von leichten, modernen und unbeschwerten Blautönen abgemildert. Die drei Farbtöne stehen in einem besonderen Verhältnis zueinander. „Mittelblau 50%“ und „Mittelblau 30%“ sind stark abhängig von „Mittelblau 100%“. Wie die prozentualen Zusätze bereits andeuten, handelt es sich bei den zwei Tönen um Variationen von „Mittelblau 100%“ mit jeweils 50% bzw. 30% der ursprünglichen Deckkraft (auf weißem Grund). Durch die farbliche Nähe wird ein besonders zusammengehöriges und harmonisches Gesamtbild ohne Farbsprünge geprägt. Die Farben ergänzen sich gerade zu gegenseitig. Zumeist kommt dieser Teil der Farbwelt als Färbung für Hintergrundobjekte, Flächen und Schmuckelemente auf dem Internetauftritt zum Einsatz.

Die drei übrigen grauen Farbtöne des Konzepts bilden einen weiteren Ruhepol und passen als leichter Kontrast optimal zur blauen Anmutung des restlichen Erscheinungsbildes. Durch den großflächigen, aber dennoch dezent wirkenden Einsatz im Hintergrund wird die farbliche Zusammenstellung im Vordergrund besonders betont. Ein weiteres Gebiet, in dem ein Grauton Anwendung findet, ist die textuelle Ebene. Hier macht die Verwendung des dunkelsten Grau des Farbkonzepts Sinn, um durch die kontrastreiche, aber dennoch milde Absetzung eine gute Lesbarkeit der Schrift zu gewährleisten.

Aus der Farbenlehre und -theorie sollen nun die Ableitungen zu den gewählten Farben aufgezeigt werden.

Signet der nordEnergie AG

Der Schriftzug „nordEnergie AG“ ist in der serifenlosen Schriftart „Arial Bold“ gesetzt. Die Größe des Font ist dabei durchgehend gleichbleibend (in der obigen Abbildung bei 36 pt). Es handelt sich bei diesem Signet um ein Wortzeichen, welches ohne ein unterstützendes grafisches Element auskommt.

Eine zu erwähnende Besonderheit innerhalb des Signets stellt die typografische und farbliche Gestaltung dar. Auf eine korrekte Rechtschreibung des Schriftzuges wird bewusst verzichtet und stattdessen die erste Silbe „nord“ komplett in Minuskeln gesetzt. Die Schriftfarbe ist dunkelblau (auf die exakten Farbdefinitionen wird später im Abschnitt „Farbkonzept“ eingegangen). Ohne ein Leerzeichen einzufügen schließt „Energie“ direkt mit einer Majuskel bzw. Versalie an, die restlichen Buchstaben erscheinen in Minuskeln. Farblich wird mit einem hellgrauen Ton zur Abhebung des vorangestellten Teils des Firmennamens gearbeitet. Der Zusatz „AG“, für die Rechtsform des Unternehmens, in Versalien gesetzt, bildet den Abschluss des Signets und erscheint wieder im Kontrast zu dem Hellgrau im bereits bekannten Dunkelblau.

Aus dem gelieferten Signet ergeben sich typografische sowie farbliche Anforderungen. Als Standardschriftart des Internetauftritts ist die Verwendung der serifenlosen Arial in verschiedenen Schnitten und Größen zu empfehlen, um dem Signet gerecht zu werden und keinen unnötigen Bruch durch einen andersartigen, zusätzlichen Font zu erzwingen. Es dür-fen durchaus große typografische Unterschiede zwischen Signet und Grundschrift herr-schen, jedoch wird in diesem Fall darauf verzichtet. Durch den Einsatz einer serifenlosen Schrift kann am Monitor außerdem eine bessere Lesbarkeit und Verständlichkeit der gelieferten Textinformationen erreicht werden (auf diese Aspekte wird unter „Typografie“ genau eingegangen).

Als eine zusätzlich im Signet begründete Bedingung wird sich das Farbkonzept durch die getroffene Farbwahl auf zwei wesentliche Bereiche konzentrieren. Die Farbe Blau wird durch die dunkelblaue Farbgebung des Signets neben der Farbe Grau, begründet im hellgrauen Ton in Teilen des Wortzeichens, eine bedeutende Rolle einnehmen und das Erscheinungsbild der Internetpräsenz maßgeblich prägen.

Das beteiligte Unternehmen nordEnergie äußerte in Gesprächen als firmenspezifische Anforderungen für das Design folgende Kriterien:

• Berücksichtigung des vorhandenen Firmensignets (dazu mehr unter „Signet“)
• Farbliche Orientierung an den Firmenfarbtönen „Blau“ und „Grau“
• Schlichte, einfache, aber dennoch elegante, professionelle und seriöse Anmutung

Die Einhaltung dieser Vorgaben ist unumgänglich und muss sich in der zu entwickelnden Internetpräsenz widerspiegeln.

In diesem Kapitel sollen nun abschnittsweise, aufeinander aufbauend unterschiedliche, designspezifische Aspekte erläutert werden, die im Zusammenspiel für das positive, schlüssige und überzeugende Gesamtbild verantwortlich sind.