Das erstes Konzept für die Webseite weicht von den anfänglichen Überlegungen ab.

Zu allererst wurde angedacht die Stimmungsbillder der 4 Szenarios (beschrieben in der Überarbeitung des Projektvorschlags) in einer horizontalen Gallerie anzuzeigen, wie man sie häufig auf Webseiten von Nachrichtendiensten findet.


Beispiel für Gallerieansicht - Content in Rot dargestellt, Navigation in Blau

In der letzten Zeit findet man einen alternativen Ansatz wenige aber wichtige Inhalte eindrucksvoll darzustellen: Sektionen.

Hierbei bedient man sich dem HTML5 Tag "Section":

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Eine ausführliche Beschreibung des <section> Tags findet man hier: http://www.impressivewebs.com/html5-section/

Der folgende Entwurf soll darstellen, wie sich die FINITI Webseite gliedern soll. Der Entwurf lehnt sich an die Gestaltung der Webseite http://www.mindbreeze.com/ an.

Im oberen Bereich der Seite wird das FINITI Logo mit einer grundlegenden Navigation platziert. Eine vollständige Bildschirmhöhe darunter beginnt die erste Section (Section 1). Darin wird mit einem eigenen hochauflösenden Hintergrundbild ein neuer Abschnitt der Webseite begonnen. Für den Benutzer soll der Eindruck erweckt werden, dass er sich hier auf einer eigenständigen Seite befindet. Der Unterschied ist jedoch, dass er nicht durch das Klicken eines Links auf diese eigenständige Seite kommt, sondern durch vertikales Scrollen auf einen eigenständigen Bereich derselben Seite kommt.

Auf diese erste Section können beliebig viele weitere folgen (obwohl eine zu hohe Anzahl wohl der Grundidee des Konzepts nicht wirklich entsprechen würde). In meinem Fall werden 4 Sections für die 4 Stimmungsbilder verwendet werden.

In den einzelnen Sections werden Inhalte (Texte, Bilder, Videos, ...) individuell in Boxen dargestellt. Es muss sich sectionübergreifend nicht um eine einheitliches Layout handeln (da ja der Eindruck der Eigenständigkeit des Inhalts erweckt werden soll).

Nach der letzten Section wird in einem Footer-Bereich die bekannten abschließenden Inhalte einer Webseite angezeigt: Impressum, Kontakt, etc.


Schematische Darstellung des Webseitenentwurfs

Zum effektvollen Wechseln zwischen den Sections werde ich mir dem Parallex Scrolling Effekt bedienen, der zwar noch nicht weit verbreitet, aber erfolgreich auf modernen Webseiten eingesetzt wird.

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.

- Parallax scrolling (Wikipedia)