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)

Wie bei der Besprechung des ersten Projektvorschlags besprochen wird der Fokus beim Erstellen der Website für FINITI auf Menschen und deren individuellen Problemen liegen und weniger auf dem Produkt selbst.

Um das zu erreichen werden Stimmungsbilder diese Probleme darstellen. Die Bilder der aktuellen Entwürfe sind noch nicht selbst erstellt. Für die endgültige Umsetzung ist dies jedoch geplant.

Die jeweiligen Situationen (=Stimmungsbild + Fragestellung) werden in kurzen Abständen (5-10 Sekunden) sich auf der Website abwechseln (jQuery), wie man das beispielsweise von Nachrichtenportalen kennt.

Ein wichtiges Kriterium wird es sein die Website einfach zu gestalten. Ein simples und übersichtliches Design soll auch nicht technikaffinen Personen die Verwendung der Website ermöglichen. Vorbild für ein simples Design ist beispielsweise Dropbox.com.

Stimmungsbilder

Unter den Stimmungsbildern werden Textpassagen folgen, in denen erklärt werden wird wie FINITI diese Probleme lösen kann.

Im Rahmen der Lehrveranstaltung "Produktion und Gestaltung interaktiver Medien" werde ich den Webauftritt des Cloud Services "FINITI" erstellen. Die erstellte Webseite wird die Features und den Enwicklungsfortschritt des Projekts präsentieren und Besucher darüber informieren. Das Implementieren des präsentierten Cloud Services ist jedoch nicht Teil oder Ziel des Projekts im Rahmens dieser Lehrveranstaltung.

 

Corporate Identity

Inhaber der Website ist die imaginäre "FINITI GmbH", deren unternehmerisches Ziel das Entwickeln und Anbieten eines Cloud Services zum Verwalten des privaten Finanzhaushaltes seiner Benutzer ist.

Der Name FINITI lehnt sich an die Begriffe Finanz (bzw. Finance) und den englischen Begriff für Unendlichkeit (Infinity), der im Logo durch zwei Achten bzw. Unendlichkeitssymbole vertreten ist, an. Auch die Abkürzung "IT" für Informationstechnologie verbirgt sich darin. Der Begriff "FINITI" hat einen dreisilbigen Rhytmus, was meiner Meinung nach perfekt für eine Bezeicnhung einer modernen Marke ist. Dreisilbig rhytmische Markennamen wie etwa "A|ma|zon" oder "Mi|cro|soft" sind speziell in der DotCom-Welt weit verbreitet. Was zusätzlich für den Namen spricht ist, dass sowohl im Deutschen als auch im Englischen Probleme beim Übertragen des Lautes/der Lautschrift von "FINITI" in ein geschriebenes Wort eher unwahrscheinlich sind. Somit steht einer fehlerlosen Mundpropaganda nichts im Weg.

 

Corporate Design

Das Logo von FINITI werden zwei in Weiß-/Grautönen überkreuzte Achten auf rotem Grund, mit dem Schriftzug "FINITI" in schwarz rechts daneben sein. Die zwei Achten, die ein Kreuz darstellen, auf rotem Grund sollen an die Landesflagge der Schweiz erinnern und die positiven Eigenschaften des Finanzsystems der Schweiz - wie etwa Vertrauenswürdigkeit, Beständigkeit & Sicherheit - auf FINITI übertragen. FINITI wird sich somit hauptsächlich als Textlogo präsentieren, vereinzelt wird auch das Logo ohne Schriftzug verwendet werden.

 

Erster Entwurf des Logos

 

Die Website und alle anderen Medien rund um FINITI werden sich in charakteristischen Blautönen (zu sehen in den folgenden Entwürfen) zeigen. Blautöne deswegen, weil das Rot aus dem Logo eine zu aggressive Farbwahl wäre, das Blau jedoch eine eher beruhigende Wirkung hat. Eine Herausforderung wird sicherlich die funktionierende Kombination des roten Logos und der blauen Website sein - die Entwürfe werden zeigen ob das gelingt. Auch beim blauen Farbschema zeigt sich ein klarer Trend in der DotCom-Welt (siehe Facebook, Twitter, Google, Microsoft, etc.).

 

Themen und Inhalte (Medien)

Die Website wird hauptsächlich dem Präsentieren des - (noch) nicht existierenden - Cloud Services zur Verwaltung des finanziellen Haushalts dienen. Da dem Webauftritt eine wichtige Rolle im Corporate Marketing zufällt, wird das Hauptaugenmerk auf ein positives (übertriebenen?) Präsentieren der zukünftig angebotenen Features liegen.

Bildergalerien (LightBox) und Videos (YouTube) werden ebenfalls Teil der Präsentation sein. Die genaue Verwendung für das Darstellen bestimmter Inhalte ist bis dato noch nicht beschlossen.

Zusätzlich zur marketingtechnischen Präsentation wird es auch einen Blog der (des) Unternehmer(s) geben, der den Entwicklungsvortschritt der Implementierung der Features und des gesamten Projekts dokumentieren und präsentieren soll. Ein RSS Feed und Newsletter wird für Interessierte die Möglichkeit bieten sich am Laufenden zu halten.

 

Zielgruppe

Die Zielgruppen für FINITI sind mannigfaltig:

• Sämtliche Haushalte, die ihren Finanzhaushalt strukturieren und überblicken wollen
• Junge Paare, die Hilfe bei der finanziellen Organisation ihrer aktuellen Projekte (z.B. Hausbau) benötigen
• Studenten, die ohnehin immer mit der quälenden Frage leben, ob sie denn zu viel ausgeben oder nicht

Einfacher ist es vielleicht zu definieren, wer nicht in die eigentliche Zielgruppe des Finanzverwaltungsservices fällt:

• Jugendliche unter 18 Jahren (obwohl junge Lehrlinge möglicherweise eine Nischengruppe sind)
• Personen, die mit dem Umgang mit dem Computer negativ gegenüberstehen
• Personen, die nicht gewillt sind sich mit der Verwaltung ihrerer Finanzen auseinanderzusetzen

Aus dem zweiten Punkt dieser Liste ergibt sich, dass das obersten Ziele dieses Dienstes Einfachheit und Usability sein müssen. Dies ist bei der marketingtechnischen Präsentation zu berücksichtigen.