Tag: screendesign

Zusammenspiel aller Teilaspekte

Die verkleinerte Abbildung des Grundlayouts verdeutlicht alle Punkte des Gesamtkonzepts. Aufgrund der begrenzten Darstellungsmöglichkeiten in diesem Seitenformat, kann das Layout nicht in seiner ursprünglichen Breite angezeigt werden. Die Größe wurde auf das gegebene Format angepasst, wodurch besonders typografische Probleme auftreten. Deswegen stellt sich die Schriftgestaltung abweichend vom diskutierten Konzept dar und kann lediglich für die oberflächliche Betrachtung herangezogen werden.

Verkleinertes Layout
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.

Praktisches Zusammenspiel der Farben

Die Wirkung des Farbkonzepts im Zusammenhang soll den Abschluss dieses Teilabschnitts bilden. Nachdem die Motivation für die Farbwahl umfangreich erläutert wurde, soll die farblose Seitenstruktur aus dem vorherigen Abschnitt entsprechend coloriert dargestellt werden, um die voranschreitende Entwicklung des Design- und Layoutkonzepts abzubilden und die getroffene Farbwahl zu begründen.

Zusammenspiel der Farben
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.

Aus der Farbenlehre: die Farbe Weiß

Weiß ist im physikalischen Sinne keine Farbe, da es sich bei diesem Ton um die Summe aller Farben des Lichtes handelt. Trotzdem werden Weiß Gefühle und Eigenschaften zugeschrieben, die mit keiner anderen Farbe verbunden werden. Weiß ist die Vollkommenheit aller Farben und ihr werden kaum negative Eigenschaften zugeordnet. Allerdings handelt es sich um keine sehr beliebte (lediglich 3%) oder unbeliebte Farbe (0,5%).

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.

Seitenstrukturierung/Aufbau der Seite

Werden Überlegungen zur konzeptionellen Strukturierung und dem Aufbau der Seiteninhalte angestellt, empfiehlt es sich, folgende Aspekte zu beachten, die den grundlegenden Prinzipien der visuellen Kommunikation nach Aaron Marcus entsprechen:

  • Der Bildschirminhalt soll bei seiner Gestaltung als Einheit betrachtet werden und die dargestellten Elemente sind zu komponieren, so dass die Effektivität von minimalen Hilfsmitteln maximiert werden kann (Ökonomieprinzip).
  • Die strikte Einhaltung von Konsistenz, Klarheit und Einfachheit, um eine harmonische Ganzheit des Produkts zu vermitteln, ist von enormer Bedeutung (Organisationsprinzip).
  • Zielgruppenorientiert ist zu entscheiden, welche Aufnahmekapazität des Nutzers zu erwarten ist und demzufolge wie strukturiert oder verspielt die Bildschirmkomposition ausfallen darf (Kommunikationsprinzip).

Auf die Berücksichtigung von Gestaltgesetzen sollte ebenfalls geachtet werden. Bei diesen Regeln handelt es sich um gestalttheoretisch begründete Gesetzmäßigkeiten, die der menschlichen Wahrnehmung unterstützend entgegenkommen. Diese Gesetze werden universell gültig verstanden. Die Gestaltpsychologie nimmt sich der Fragestellung an, wie die wahrgenommenen Objekte beschaffen und warum sie in dieser Art beschaffen sind. Grundlage dieser Erklärungsbemühungen sind die von den einzelnen Objekten ausgehende Reize sowie die Wirkung mehrerer Reizverhältnisse verschiedener Objekte im Zusammenhang. Bei der Entwicklung von visuellen Kommunikationsmitteln, wie z.B. dem Design von Benutzeroberflächen, kann die Anwendung dieser Prinzipien eine leichtere und schnellere Aufnahme der angebotenen Elemente bzw. Strukturen ermöglichen. Das Verständnis und die intuitive Greifbarkeit wird erhöht.

Des Weiteren ist für eine durchdachte Strukturierung das Zugrundelegen eines Gestaltungsrasters sinnvoll. So kann das Verschmelzen der einzelnen Elemente zu einer Gesamtheit erreicht werden. Nach der Festlegung der benötigten Elemente kann die Anordnung selbiger im Raster erfolgen.

Für die Internetpräsenz ist für folgende Teilbereiche ausreichend Raum einzuplanen:

  • Signet des Unternehmens
  • Slogan des Unternehmens
  • Navigation (Erweiterbarkeit ist zu berücksichtigen)
  • Metanavigation
  • Bildwelt/Stimmungsbild
  • Inhaltsbereich
  • Pfadanzeige
  • Verweis auf Druckversion der gewählten Seite, Copyright-Hinweis

Die nachfolgende Abbildung soll schematisch das Gestaltungsraster aufzeigen und die reine Positionierung der soeben definierten Elemente verdeutlichen. Dabei soll jedoch noch nicht auf die exakten Ausprägungen der einzelnen Website-Teile wie z.B. Navigation, Inhalt oder Bildwelt eingegangen werden. Farbliche Gesichtspunkte bleiben vorerst ebenso außen vor.

Schematischer Aufbau der Seite
Schematischer Aufbau der Seite

Der Aufbau der Seite ist an webübliche, bereits eingeführte und dem Nutzer wohl bekannte Prinzipien, angelehnt. Die Grobstrukturierung der inhaltlich wichtigsten Teile ist klar gewählt und leicht verständlich in ein zweispaltiges Layout symmetrisch aufgeteilt (Navigation am linken Rand, Bildwelt und der eigentliche Inhalt rechts daneben gruppiert). Bei dieser für den Besucher von vielen Internetauftritten gewohnten Aufteilung findet er sich leicht zurecht und kann sich schnell orientieren. Für eine Website mit einem umfangreichen und hierarchisch stark gegliederten Informationsangebot ist diese Art der Seitengestaltung sehr passend, da für Navigation und Content in vertikaler Richtung ausreichend Freiraum bleibt und sich die Elemente gegenseitig nicht im Weg stehen. Die beiden Bereiche sind frei skalierbar und demnach zukunftssicher.

Die Anwendung von Gestaltgesetzen trägt einen weiteren Teil zum intuitiven Verständnis des Auftritts und der daraus resultierenden Akzeptanz des dargebotenen Angebots bei. In diesem Fall handelt es sich um das Gesetz der Symmetrie, welches besagt, dass durch symmetrische Anordnungen starke und klare Strukturen geschaffen werden, die sich nicht auf dem Bildschirm verlieren können (im Gegensatz zu asymmetrischen Strukturierungen). Die Navigation und der Content stehen in einem starken Abhängigkeitsverhältnis. Durch die räumlich nah beieinander liegende Positionierung werden sie nach dem Gesetz der Nähe passenderweise als zusammengehörig wahrgenommen50. Die Gesamtheit der Elemente präsentiert sich auf weißem Grund, welcher wiederum von einem dunkelgrauen Hintergrund abgesetzt wird. Dadurch wird der für den Betrachter wichtige Inhaltsbereich optisch zusätzlich hervorgehoben, ohne dem Hintergrund eine zu dominante Rolle zuzuordnen. Die Hintergrundebene bleibt statisch einfarbig und unterliegt keiner Veränderung, die den Benutzer stören und ablenken könnte.

Ein Schlagschatten verleiht der Website eine räumliche Dimension und bildet einen visuellen Rahmen für die im Vordergrund stehenden Objekte der Internetpräsenz. Die abgeschlossene und einfache Struktur der Bildschirmelemente erleichtert die Konzentration auf die eigentlichen Inhalte und erfüllt somit das Gesetz der Prägnanz50. Klare Linien führen den Blick des Betrachters geordnet über die Seitenelemente und helfen zusätzlich bei der Orientierung. Die feinen Zwischenlinien wirken elegant und modern.
Des Weiteren bietet sie durch die klare Trennung und Aufteilung der Elemente in eigenständige Logikblöcke ein schnelles Verständnis der Strukturen.

Links oben, im weiß hinterlegten Kopfbereich/Header der Seite positioniert, befindet sich, durch die in westlichen Ländern herrschende Leserichtung von links nach rechts begründet , das Signet des Unternehmens nordEnergie AG. Rechts daneben steht ein Platzhalter, welcher einen Slogan des Unternehmens aufnehmen kann, um bspw. die Tätigkeitsfelder zu verdeutlichen bzw. zu unterstreichen. Am rechten Seitenkopf bietet die Metanavigation mit Basisfunktionalitäten (Verweis auf die Startseite, Kontaktmöglichkeiten etc.) eine schnell erreichbare Interaktionsmöglichkeit an. Diese Positionierung ist wiederum durch die Anlehnung an gewohnte Strukturen des World Wide Web motiviert, in denen sich das Standardelement „Metanavigation“ oftmals rechts oben im Header wiederfindet. Der Platz wird durchgängig beibehalten und variiert nicht.

Unter dem Header beginnt mit einem farblich hinterlegtem, zweigeteilten Balken der hauptsächliche inhaltliche Abschnitt der Seite, der seinen Abschluss durch die Wiederholung des gleichen Elements im Seitenfuß findet. Durch diese visuelle Gestaltungsmaßnahme wirkt der Inhalt von oben und unten her eingerahmt und optimal in Szene gesetzt. Außerdem wird nach dem Gesetz der Ähnlichkeit die Zusammengehörigkeit unterstrichen . In dem rechten Teil des oberen Balkens kann zusätzlich zur Möglichkeit im Kopfbereich ein weiterer Firmenslogan die Unternehmensphilosophie kommunizieren.

Links unterhalb dieses Elements erstreckt sich die für den Benutzer wichtigste Interaktions-möglichkeit: die Hauptnavigation. Durch die Positionierung am linken Rand der Seite erhält das Navigationsmenü ausreichend Raum in vertikaler Richtung, da keine weiteren Elemente unterhalb dieses Abschnitts platziert werden. So können die tieferen, zweiten und dritten Ebenen der Navigation problemlos, ohne andere Bereich zu tangieren, aufgefächert werden. Der zukünftigen Erweiterbarkeit wurde somit Rechenschaft getragen. Die Navigation ist beinahe grenzenlos skalierbar. Neue Menüpunkte können durch die großzügig gewählte Platzeinteilung zu einem späteren Zeitpunkt eingepflegt werden. Der Navigationsbereich selbst hebt sich farblich von seinem unterhalb zugeordneten Freiraum ab, welcher variabel bei ausgeklappter Navigation seine Größe anpasst.

Im rechts nebenstehenden Bereich ist ein Platzhalter für die Bildwelt vorgesehen, der ein zum Inhalt der jeweiligen Seite passendes Stimmungsbild aufnehmen wird. Von den Dimensionen her ist eine stark horizontale, breitbildähnliche Ausprägung gewählt worden. Dieses interessante Format bietet bei der Bilddarstellung und Komposition sehr viele Möglichkeiten, birgt aber auch Risiken, da durch diese breite Auslegung in der Vertikalen unter Umständen nur wenig Platz für eine ausreichende, erkennbare Darstellung vorhanden sein kann. Daher ist entsprechendes Bildmaterial anzufertigen oder zu organisieren, welches dieses Problem vermeidet.

Der Content beginnt in seinem oberen Bereich mit der Pfadanzeige, die der schnelleren Orientierung und Lokalisierung der aktuellen Position in der Internetpräsenz dient . Direkt anschließend darunter erstreckt sich der nach unten variable Freiraum des Inhaltsbereiches, in dem alle Informationen, Meldungen und weiteren Inhaltsträger dargestellt werden. Sinnvollerweise hat dieses Element den größten, in der Vertikalen vollkommen variablen Freiraum zugeteilt bekommen.

Vergrößert sich dieser Bereich durch viele Text- und Bildinformationen, läuft der linke hellere Part unter der Navigation proportional mit. Dadurch stellt sich der Seiteninhalt ständig als geschlossene Einheit dar und wirkt nicht unterbrochen.

Der Balken im Fußbereich beinhaltet, rechts angeordnet, einen Verweis auf die Druckversion der aktuell abgebildeten Seite. Zusätzlich ist hier ein Verweis an den Anfang der aktuellen Seite („nach oben“) einzupflegen, welcher bei besonders langem Seiteninhalt den Benutzer zurück an den Seitenanfang führt. Als abschließendes Element befindet sich hierunter die Wiederholung der Metanavigation auf weißem Grund. Ein Hinweis auf den Urheber der Seiten wird in derselben Zeile auftauchen.

Die Aufteilung ist in seiner Gesamtheit betrachtet als klassisch, traditionell und klar zu bezeichnen . Die drei Prinzipien der visuellen Kommunikation wurden konsequent eingehalten und in dem Seitenaufbau realisiert. Die Seite wirkt durch die kompakte und geschlossene Anordnung der benötigten Elemente als eine in sich schlüssige Einheit, die ohne überflüssige Hilfsmittel auskommt (Ökonomieprinzip). Das Organisationsprinzip, welches die Konsistenz der Website fordert, wurde ebenso berücksichtigt, da die klar und simpel angelegte Seitenstrukturierung für alle Seiten der Präsenz durchgehend und gleichbleibend angewandt wird. Der Betrachter wird nicht mit unterschiedlichen Darstellungen der Seite konfrontiert oder verunsichert. Die auf die Zielgruppe und die Thematik der Website abgestimmte klassisch/seriöse Aufteilung mit Verzicht auf experimentelle oder wechselnde Anordnungen wird dem Kommunikationsprinzip gerecht. Die einzelnen Bereiche sind klar erkennbar und leicht voneinander zu differenzieren.

Signet

Wie bereits eingehend erwähnt, handelt es sich bei dem Signet der nordEnergie AG um ein bereits existierendes, fest vorgegebenes Element, welches aus Wiedererkennungsgründen übergreifend auf den Internetseiten platziert sein muss. Durch die Diskussion des bestehenden Signets werden erste designspezifische Richtlinien aufgestellt, die aufgrund der Corporate Identity nicht verletzt werden dürfen und der Wahrung eines einheitlichen, homogenen Erscheinungsbildes dienen werden.

Logo / Signet der nordEnergie AG
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.

Integration in TYPO3

Die hierarchische Baumstruktur wurde im CMS bereits vollständig abgebildet. Die Seiten sind jedoch noch komplett ohne Aussehen oder anderen Inhalt. Um diesen Zustand zu ändern, muss dem System die Designvorlage hinzugefügt und für die Seiten ein Template angelegt sowie zugewiesen werden. Das einheitliche Aussehen kann relativ simpel erreicht werden, indem man dem obersten Wurzeldatensatz (in diesem Beispiel „Startseite“) ein Template zuweist, welches automatisch allen untergeordneten Seiten vererbt wird. Das Hinzufügen der XHTML-Designvorlage inklusive Style Sheet erfolgt durch Upload in den „fileadmin-Ordner“ des CMS. In diesem Ordner können alle Dateien, die für den Internetauftritt benötigt werden, (in Unterordnern) abgelegt werden. Es handelt sich in anderen Worten um den Dateimanager von TYPO3.

Der klassische Weg bei der Seitenerstellung mit TYPO3 wäre, den Quelltext der Designvorlage mit verschiedenen TYPO3-Markern, so genannten „Marks“ und „Subparts“, zu versehen, welche dann aus dem CMS heraus angesprochen und mit Inhalten aus der Datenbank gefüllt werden können. Ein eleganterer und modernerer Lösungsansatz wird allerdings durch den Einsatz der zuvor erwähnten Extension „Template Auto-parser“ verfolgt. Eine spezielle Vorbereitung der Designvorlage ist nicht notwendig, da der Auto-Parser selbstständig die austauschbaren Markierungen („subparts“) zur Laufzeit einfügt. Diese wiederum können angewählt und befüllt werden. Somit ist es möglich, die XHTML-Vorlage ohne auch nur eine Anpassung oder Umstellung zu verwenden.

Für die „Startseite“ wird demzufolge ein neuer Template-Datensatz erstellt. Diese Art von Datensätzen hat verschiedene Bestandteile. Die für diese Betrachtung wichtigsten zwei Felder sind „Constants“ (hier werden häufig verwendete Konstanten definiert) und „Setup“ (beinhaltet die in TypoScript formulierte Beschreibung der kompletten Seitenelementerzeugung) .

Die kommentierte Anführung von TypoScript-Codeausschnitten des Setup-Feldes soll verdeutlichen, wie die Seite von TYPO3 aufgebaut wird. Sollten zusätzlich Konstantendefinitionen benötigt werden, wird dies deutlich sichtbar gemacht. Der gesamte, konfigurierte Template-Datensatz kann im Anhang gefunden werden.

Statische und dynamische Bereich im Layout

Um zu verdeutlichen, welche Regionen im Layout von TYPO3 dynamisch ergänzt werden und an welcher Stelle statische Inhalte platziert sind, soll das Gesamtlayout samt Markierungen dienen. Hierzu sind dynamische Bereiche rot umrahmt, statische Abschnitte besitzen eine schwarze Umrandung.

Verkleinertes Layout mit Markierungen der dynamischen und statischen BereicheVerkleinertes Layout mit Markierungen der dynamischen und statischen Bereiche
Verkleinertes Layout mit Markierungen der dynamischen und statischen Bereiche

Aus der Abbildung geht hervor, das insgesamt sieben relevante Bereiche vorhanden sind. Zwei sind statischer Natur, die für jede Seite wiederkehrend dargestellt werden. Es handelt sich um den Kopfbereich mit dem Signet und einem Slogan sowie den weiteren Platzhalter für die zusätzliche Kommunikation der Firmenphilosophie. Selbstverständlich ist das umschließende Gesamtlayout ebenfalls statisch durch die Designvorlage zu beschreiben. Zu den fünf dynamischen Elementen gehören die Hauptnavigation, die Metanavigation im Kopf und Fuß, das Stimmungsbild, der Content inklusive Pfadanzeige und die Funktionalitäten im Fußbereich der Seite (z.B. Druckversion). Beide unterschiedlichen Objekttypen müssen in TYPO3 eingepflegt werden, die Herangehensweise an die Umsetzung differenziert. Die als statisch deklarierten Teile können bereits über die Designvorlage selbst festgelegt werden. Die dynamischen Elemente werden dann mit Hilfe von TypoScript im System erzeugt.

Design- und Layoutkonzept

Die Ausarbeitung des visuellen Erscheinungsbildes der Website muss das erarbeitete Konzept optisch zu 100 Prozent widerspiegeln, die Inhalte dabei optimal in Szene setzen und eine intuitiv verständliche Navigationsstruktur bieten.

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.

Navigation

Wie für jedes multimediale Produkt muss ebenso einer Internetpräsenz eine einfach zu bedienende, intuitiv erlernbare Navigation zugrunde liegen. Denn für den Erfolg oder Misserfolg der Website kann, neben dem optischen Erscheinungsbild (Screen-Design), eine durchdachte, anwenderfreundliche Nutzerführung, die in einer sinnvoll konzipierten Navigationsstruktur begründet ist, entscheidend sein. Des Weiteren sind für die Akzeptanz eines Webauftritts die Emotionen und Eindrücke des Anwenders bei dem Besuch der Seiten und der Bewegung über diese ausschlaggebend. Durch eine gut strukturierte Navigation können die Empfindungen maßgeblich zum Positiven beeinflusst werden.

Wichtige Kriterien einer gute Navigation sind:

  • Einfache Bedienung
  • Schnelle Erlernbarkeit
  • Konsistenz
  • Sichtbarkeit
  • Klarheit
  • Orientierung

Bei den Überlegungen zum Bedienkonzept dürfen diese sechs Vorgaben keinesfalls außer Acht gelassen werden, um das gesteckte Ziel, eine benutzerfreundliche und logische Navigation zu entwerfen, zu erreichen. Kann sich der User schnell in die Strukturen, der für ihn noch unbekannten Website hineindenken, und den Aufbau gedanklich erfassen, wurde gute Entwicklungsarbeit geleistet.

Die abzubildenen Funktionalitäten wurden bereits bei der Präzisierung und verbalen Be-schreibung inhaltlich in zwei Bereiche getrennt. In der Navigation spiegelt sich diese Unterteilung einerseits in der Mainnavigation mit Hauptfunktionalitäten, andererseits in der Metanavigation mit Standardinformationen wieder. Zusätzliche Navigationsmöglichkeiten, die dem Anwender die Orientierung auf der Seite und die Steuerung der Seite selbst erleichtern, runden das Navigationskonzept schließlich ab.