Vier zentrale Motive sollen beim Darstellen des Finanzverwaltungsdienstes FINITI helfen. Zu Beginn war ein fünftes Stimmungsbild vorgesehen, da dieses aber das einzige ist, dass sich auf Geldbeschaffung und eben nicht um Geldverwaltung konzentriert, ist es vorerst aus der Auswahl genommen worden (es wird hier aber der Vollständigkeit halber angeführt).

Es wurde versucht die Situationen in einfachen Grafiken (Sprech-/Gedankenblasen) festzuhalten. Die Grafiken wurden auf einem Apple iPad 4 mit der App Bamboo Paper und einem Kuel H10 Stylus erstellt.

Wie viel gebe ich wofür aus?

Ist Hausbauen nicht viel zu teuer?

Wie soll sich das nur ausgehen?

Kann ich mir das leisten?

Ist mein Geld richtig veranlagt?

Veranschaulichung des Parallax Scrolling Effekts (Quelle: Wikipedia)

Der Parallax Scrolling Effekt bedient sich einer optischen Täuschung, wobei durch das unterschiedlich schnelle Bewegen von Vordergrund und Hintergrund die Illusion von Dreidimensionalität geschaffen 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)

Dieser Effekt wird in der Medientechnik schon seit vielen Jahren verwendet, durchaus bekannte Beispiele hierfür sind zweidimensionale Computerspiele (siehe Super Mario, etc.).

Die Anwendung dieses Effekts für Webseiten ist eher neu, da der notwendige Fortschritt der Rechenkapazität und Browserkompatibilität erst in den letzten 1-2 Jahren eingetreten ist. Ein durchaus beeindruckendes Beispiel der Anwendung dieses Effekts bietet Nike mit der Darstellung ihrer Air Jordan Produktserie. Dieses Beispiel ist eines, das die heutigen Möglichkeiten der Multimedialität in Browsern ausreizt, vorallem wenn man bedenkt, dass hierbei völlig auf den Einsatz von Flash verzichtet wird.

Für meine Webseite werde ich den Effekt natürlicherweise etwas weniger effektvoll einsetzen. Ich orientiere mich an einem online verfügbaren Tutorial, das unter http://richardshepherd.com/smashing/parallax/ zu finden ist.

Technisch realisiert wird der Effekt durch den Einsatz von JavaScript, das die Berechnung der Positionierung der Elemente übernimmt. Auch berechnet und verändert wird die Positionierung der Hintergrundgrafiken der Sections. Mit dem Parameter/Attribut data-speed="..." wird für eine Section bestimmt um welchen Faktor sich der Hintergrund schneller bewegen soll als er Vordergrund, was eben durch das Verändern der Positionierung der Hintergrundgrafik erreicht wird.

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)