Kapitel 'Design- und Layoutkonzept'

Screendesign & Co. sind Bestandteil dieses Kapitels. Schwerpunkte: Logo, Farbwahl, Typografie, Navigationskonzept, Bildwelt.

Design- und Layoutkonzept

Donnerstag, den 5. Juni 2008

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 […]

Signet

Samstag, den 7. Juni 2008

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, […]

Farbkonzept

Samstag, den 7. Juni 2008

Die Farbwelt und -gestaltung einer Website trägt maßgeblich zu dem Gesamteindruck dieser bei, da bestimmte Assoziationen, Empfindungen, symbolische Wirkungen und psychologische Aspekte mit Farben verbunden werden. Die Wahrnehmung der Internetpräsenz durch den Betrachter wird dadurch beeinflusst. Farben vermitteln unterschwellig eigene Botschaften, erwecken Emotionen und können Aussagen verdeutlichen oder verfälschen. Aus diesen Gründen muss für den […]

Aus der Farbenlehre: die Farbe Blau

Samstag, den 7. Juni 2008

Blau gilt als die Lieblingsfarbe beider Geschlechter (40% der Männer, 36% der Frauen) und wird in seltensten Fällen als unbeliebt angegeben (2% der Männer, 1% der Frauen) . Allein durch diesen Aspekt bietet sich die Verwendung von Blau bereits an. Neben der Beliebtheit gibt es jedoch weitere gute Gründe, die für eine blaue Anmutung der […]

Aus der Farbenlehre: die Farbe Grau

Samstag, den 7. Juni 2008

Ergeben sich für Blau sehr positive Assoziationen, so ist die Farbe Grau auf den ersten Blick eher problembehaftet und mit negativen Begrifflichkeiten belegt. Sie gilt sehr selten als Lieblingsfarbe, ist eher unbeliebt. Allerdings eröffnen sich bei genauerer Betrachtung durchaus erwünschte Effekte. Grau wird oftmals als Farbe ohne Charakter und des Mittelmaßes (die Farbe zwischen Weiß […]

Aus der Farbenlehre: die Farbe Weiß

Samstag, den 7. Juni 2008

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 […]

Praktisches Zusammenspiel der Farben

Samstag, den 7. Juni 2008

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. Eingefärbtes Layout Die mit „Leben“ in Form […]

Typografie

Samstag, den 7. Juni 2008

Texte am Monitor zu lesen, ist für den Betrachter mühsam und anstrengend. Der Leser ist am Bildschirm unkonzentrierter und die Lesegeschwindigkeit ist bis zu 30 % langsamer als bei Printmedien. Aus diesem Grund ist es von besonderer Wichtigkeit für eine gute Lesbarkeit und eine damit verbundene hohe Akzeptanz des Internetauftritts, typografische Regeln und Richtlinien im […]

Navigation/Interaktionskonzept

Samstag, den 7. Juni 2008

Die Struktur der Navigation wurde im vorherigen Kapitel während der Entwicklung der In-formationsarchitektur definiert und mit einer Sitemap abgebildet. Die Festlegung der genauen Position dieses wichtigsten Interaktionselements im Gesamtlayout ist unter Berücksichtigung der getroffenen Entscheidungen zum Aufbau ebenfalls vorgenommen worden. In diesem Teil erfolgt nun die praktische Umsetzung der aufgestellten Kriterien und die Entwicklung des […]

Hauptnavigation

Samstag, den 7. Juni 2008

Am linken Rand neben dem Platzhalter für die Bildwelt erscheint die Hauptnavigation, dar-gestellt in der nächsten Abbildung. 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 […]

Metanavigation

Samstag, den 7. Juni 2008

Für die horizontal ausgerichtete Metanavigation mit vier Elementen sind zwei Positionen im Layout vorgesehen. Einerseits befinden sich diese Basisfunktionen für den Betrachter schnell erfassbar im Seitenkopf und in der Wiederholung im Seitenfuß. Metanavigation im Seitenkopf Rechts oben im Header jeder Seite sind die vier Funktionen der Metanavigation gut erreich-bar angebracht. Bei der Darstellung wurde eine […]

Weitere Navigationsmöglichkeiten

Samstag, den 7. Juni 2008

Neben den eben diskutierten Navigationsformen wird dem Nutzer eine zusätzliche Orientierungshilfe angeboten: eine Pfadanzeige im oberen Bereich des Contents. 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, […]

Bildwelt

Samstag, den 7. Juni 2008

Die Bildwelt einer Website dient zumeist als ein erster Blickfang bei der Orientierung und zur Auflockerung, Gliederung oder Anreicherung der textuellen Ebene. Auf einen Text kann durch die Verwendung gezielter Bild-Text-Zusammenhänge die Aufmerksamkeit gerichtet werden. Allerdings handelt es sich dabei um mehr als nur ein Schmuckelement. Die Bilder werden als wichtiger Informationsträger eingesetzt, welcher die […]

Animationen

Samstag, den 7. Juni 2008

Der Einsatz aufwendiger Animationen kann für die Internetpräsenz der nordEnergie nicht realisiert werden, da die dafür übliche Software „Flash MX“ vom Macromedia nicht vorhanden ist und für diese voraussichtlich einmalige Anwendung nicht angeschafft werden kann. Zu überlegen wäre, ob in speziellen Fällen auf herkömmliche Gif-Animationen zurückgegriffen wird, die technische Zusammenhänge oder andere denkbare Inhalte unter […]

Audioelemente

Samstag, den 7. Juni 2008

Die Verwendung von Audioelementen im Web bietet sich lediglich in sehr speziellen Fällen wie z.B. bei Internetseiten mit Schulungs- oder Fortbildungscharakter, in der Werbung oder zur Unterhaltung an. Auf den Einsatz dieser zusätzlichen Möglichkeit zur Informationsvermittlung wird aufgrund der geringen Akzeptanz im Web und der Unangemessenheit vollständig verzichtet. Eine Audiountermalung würde bei dem Themengebiet „Energie“ […]

Erstellen der Designvorlage

Samstag, den 7. Juni 2008

Als Designvorlage kann eine normale HTML- bzw. XHTML-Seite dienen. TYPO3 verwendet dann diese ohne spezielle Präparationen versehene Vorlage, um nach ihrer Gestaltung die kompletten Seiten für das Frontend dynamisch zu generieren. Das manuelle Erstellen von Webseiten wird dadurch überflüssig und komplett durch das System abgewickelt. Dabei werden zuvor definierte Bereiche in der Vorlage mit Inhalten […]

Zusammenspiel aller Teilaspekte

Samstag, den 7. Juni 2008

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 […]