Projekt-Website
Alexander Kohler

Das Projekt

Graphische Gestaltung

Farben

Die Basisfarben der Projekt-Website sind Cyan und Rot. Es handelt sich dabei um direkte Komplementärfarben, die vom menschlichen Auge sowohl als besonders zusammenpassend, wie auch als besonders konträr empfunden werden.

Farben aus dem Cyan- und Rot-Spektrum:

cyan-rot

Während die Farben aus dem Cyan-Spektrum als Hintergrundfarben Einsatz finden, dienen rote Farben zur deutlichen Hervorhebung von Überschriften und Verlinkungen.

Formen

Für die Gestaltung der Website wurden bewusst klare und klar abgegrenzte Formen und Strukturen verwendet, was der schnellen Übersicht und der einfachen Navigation innerhalb der Projekt-Website zugutekommt. Insbesondere ist der Aufbau auch für Menschen mit leichteren Sehbehinderungen schnell erfassbar und gut lesbar. Unterstützt wird die Abgrenzung der einzelnen Elemente und deren angenehme Anmutung grafisch durch dunkle Umrandungen sowie - bei dazu kompatiblem Browsern - durch abgerundete Ecken und Schatten unter einzelnen Elementen. Sowohl für die Schatten, wie auch für die Rundungen findet CSS Anwendung:

CSS-Code für Schatten (Beispiel):
CSS-Code für Rundungen (Beispiel):

#page {
box-shadow: 0 0 15px #4c5a5a;
          }
#mainPicture {
border: 2px solid #4e5c5c;
border-radius: 13px;
          }

Schriften

Zugunsten einer hohen Browserkompatibilität besteht die Schriftfamilie (font-family) der Website aus einer Kombination von Standardschriftarten, die sowohl Windows®, wie auch die diversen anderen Betriebssysteme abdeckt. Die primäre Schriftart dabei ist Verdana.
Zusätzlich verwendet die Seite eine Webschriftart "Exo", die der Hervorhebung von Überschriften und Navigationslinks dient. Bei der Auswahl der Webschriftart wurde sowohl auf eine zum Topic passende Schrift Wert gelegt, wie auch darauf, dass in den verschiedenen zur Anwendung kommenden Schriftgrößen eine deutliche und klar geformte Darstellung gewährleistet ist. Die Webschriftart ist direkt im Dateisystem der Website hinterlegt und bedarf daher keiner externen Quelle. Eingebunden ist die Webschriftart wie üblich über das CSS.

CSS-Code für Webschriftart (Beispiel):

@font-face {
	font-family: 'exo-regular';
	src: url('../fonts/exo-regular-webfont.eot');
	src: url('../fonts/exo-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/exo-regular-webfont.woff') format('woff'), url('../fonts/exo-regular-webfont.ttf') format('truetype'), url('../fonts/exo-regular-webfont.svg#exoregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

Verweise ("Links")

Der deutlichen Hervorhebung der Verweise dienen zum einen deren farbliche Gestaltung in Rot, wie auch teilweise eine permanente Unterstreichung. Alle Links sind zudem spätestens dann eindeutig als solche zu erkennen, wenn der Betrachter den Mauspfeil über einen Link platziert (hover-Effekt). Es erfolgt hierbei - je nach Art des Links - eine (zuvor nicht vorhandene) Unterstreichung, eine Änderung der Farbe auf helleres Rot oder eine rote Umrandung. Auf eine Farbänderung bereits besuchter Links (visited-Effekt) wurde zugunsten der einheitlichen Kennzeichnung und der gesamten optischen Erscheinung verzichtet.

Galerie

Zugunsten einer übersichtlichen Darstellung aller Galeriebilder gleichzeitig werden diese zunächst in verhältnismäßig kleiner Größe gesammelt angezeigt. Bei Platzierung des Mauspfeiles über einem Bild erfolgt zunächst eine geringgradige Vergrößerung des Bildes. Ein Klick auf ein Bild führt wiederum in die Anzeigeform mittels einer sogenannten "Lightbox". Die Lightbox ist bewusst minimalistisch ausgeführt, um den Betrachter möglichst wenig vom Inhalt der Galeriebilder abzulenken.

Anzeige der Bilder in der Lightbox:

Lightbox Screenshot


Hinweis: Sie verwenden noch den Internet Explorer 7. Das stellt ein Sicherheitsrisiko dar! Wir empfehlen dringend einen Wechsel auf einen aktuellen Browser.