W A N N   K O M M T  D E R  W E S T W I N D ?

Das mehrfach preisgekrönte Buch-Projekt „Wann kommt der Westwind ist ein transmediales Abenteuer, welches das klassische Buch drahtlos mit dem iPad verbindet und so einen innovativen Ansatz für medienübergreifendes Storytelling bietet. Analog und digital – unsichtbar miteinander verbunden! Mithilfe einer eigens entwickelten, völlig neuartigen Magnettechnologie können die beiden Medien Buch und iPad drahtlos verknüpft werden. Eine Geschichte wird dadurch nicht ausschließlich mit Worten erzählt, sondern mit aufwendig gestalteten Animationen, Videos und akustischer Untermalung angereichert. An sogenannten Interaktionspunkten verstecken sich winzige Magnetplättchen im Papier. Liegt das iPad neben dem Buch, erkennt eine App mit den im Device integrierten Kompass die (magnetische) Spannung und errechnet, auf welcher Seite sich der Leser befindet. Das iPad wird zur dritten Seite des Buchs, auf der multimediale Inhalte den geschriebenen Text oder Illustrationen ergänzen.

„Wann kommt der Westwind?“ entstand zwischen 2013 und 2015 als Masterprojekt von sechs StudentInnen der Studiengängen MultiMediaArt und MultiMediaTechnology an der FH Salzburg. Als Head of Interaction Design bestand meine Projektverantwortung in der Konzeption und Realisierung der analogen/digitalen Schnittstelle. Wireframing, User-Testing, sowie verschiedene Prototypen waren die Voraussetzung für die webbasierte, aufwändig animierte Interactive-Reading App. Darüber hinaus war ich verantwortlich für das visuelle Erscheinungsbild, welches neben dem Corporate Design, dem Motion-Designs für den Werbefilm, auch die Konzeption, Visualisierung und Realisierung der Webseite umfasste. Für die Bewerbung des Projekts wurde außerdem ein animierter Motiongraphics Clip erstellt, der in wenigen Minuten die Technologie und die Handlung der Geschichte vermittelt.

AWARDS
SALZBURGER LANDESPREIS 2015 (1. PLATZ)
MULTIMEDIA ANNUAL AWARD (1. PLATZ)

ENTSTEHUNG
2013-15

AUFTRAGGEBER
MASTERPROJEKT

BEREICHE
CORPORATE DESIGN, UI DESIGN, WEBDESIGN, MOTION GRAPHICS

01

DAS KONZEPT


Eine Innovation im Storytelling. „Wann kommt der Westwind?“ wird aus zwei Perspektiven geschildert – eine als Text im Buch, die andere multimedial im iPad. Es entstehen eine neuartige Interaktivität und damit spannende Möglichkeiten, die Informationstiefe zu verdichten. Der Erlebnisraum Buch dehnt sich aus. Beide Medien können unabhängig voneinander benutzt werden. Erst durch die Verbindung beider offenbart sich der wahre Kern der Geschichte.

Westwind-BuecherWestwind-Buecher
4c5bb728454711.55c1ed88e65104c5bb728454711.55c1ed88e6510

„Die Story zeichnet sich durch eine spannende Analogie zum Mediengebrauch aus: Die zwei Welten in der Geschichte spielen nicht nur in zwei verschiedenen Medien, sondern sind gleichzeitig Metaphern dafür.“

Westwind-Buch-01Westwind-Buch-01

DIE GESCHICHTE

Zwei Welten – getrennt durch das unüberwindbare Meer. Keine von beiden weiß um die Existenz der anderen. Eine der beiden ist eine einsame Insel, bewohnt von nur einem Wesen. Seit Anbeginn der Zeit ist seine Aufgabe, die Insel mithilfe einer geheimnisvollen Maschine vor dem Untergang zu bewahren. Die andere Welt liegt weit entfernt und ist das Reich der Menschen. Sie beten zu einem hellen Stern, der tief am Horizont steht. Ihr Glaube besagt, dass ein Herzenswunsch dann erfüllt wird, wenn er in einer Flaschenpost übers Meer hin zum Stern getragen wird. Ohne voneinander zu wissen, existiert zwischen beiden Welten eine symbiotische Verbindung, die zu zerbrechen droht, als sie von ihr erfahren.

DAS LOGO

Das Logo besteht aus einer nach Westen gerichteten Welle, die den Luftstrom des Westwindes symbolisiert. Umrahmt ist diese von einem angedeuteten Kompass, der dem Symbol eine Richtung gibt. Die Strahlen im Hintergrund stellen das Licht des Sterns der Hoffnung dar und geben dem Symbol eine zusätzliche Tiefe, die auf dem Buchcover mit einer Goldfolienprägung zusätzlich betont wird. Für die App im iPad ist darüberhinaus auch eine animierte Version des Logos entstanden.

02

DIE APP


Das Interface bietet funktional die Möglichkeit, die Interaktion zwischen den beiden Medien Buch und iPad zu steuern bzw. in dessen Verbindung einzugreifen. Über ein zentrales Menü, welches jederzeit aufrufbar ist, können die Animationen pausiert und erneut gestartet werden. Darüber hinaus ist es möglich, die Synchronisierung auszuschalten oder den Synchronisierungsprozess erneut zu starten. Desweiteren bietet sich die Funktion Untertitel einzuschalten oder manuell in den Verlauf der Geschichte einzugreifen, indem das jeweilige Kapitel manuell ausgewählt werden kann.

Westwind-interface-iso-webWestwind-interface-iso-web

DAS INTERFACE

Technisch basieren die Animationen nur auf HTML5, CSS3 und Javascript, können so praktisch von jedem Browser und sogar auf mobilen Endgeräten dargestellt werden. Sämtliche Icons, Grafiken, Schriften etc. sind aufwändig animiert, um den Userinnen und Usern ein optimales Feedback für die Touch-Gesten zu geben. Die Herausforderungen bei der Umsetzung des Interfaces waren einerseits die technische Neuheiten, anderseits das Zusammenspiel und die Verlinkung der Funktionen mit dem nativen Rahmen der App.

 

[unex_ce_button id="content_fd52ws5tg,column_content_x9djivdz6" button_text_color="#000000" button_font="semibold" button_font_size="14px" button_width="auto" button_alignment="left" button_text_spacing="4px" button_bg_color="#ffffff" button_padding="15px 60px 15px 60px" button_border_width="1px" button_border_color="#000000" button_border_radius="1px" button_text_hover_color="#ffffff" button_text_spacing_hover="4px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://www.zoerfie.de/Westwind_Interface_32.html" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]INTERFACE DEMO[/ce_button]
Interface_04Interface_04

03

DIE WEBSEITE


Um das Konzept für die Öffentlichkeit zugänglich zu machen, wurde die Webseite „interactivereading.de“ ins Leben gerufen. Diese sollte einerseits die verwendete Technologie, andererseits aber auch die erzählte Geschichte sowie die Event-Woche in Salzburg bewerben.

Westwind-WebseiteWestwind-Webseite

ONE PAGER DESIGN

Die Webseite ist als One-Pager aufgebaut und beinhaltet alle Inhalte auf einer einzigen Seite. Beim Scrollen erscheinen bzw. schieben sich verschiedene Elemente automatisch ins Bild, was die Userinnen und User über das Konzept, die Geschichte bis hin zur einer Projektvorschau, dynamisch durch die Webseite leitet. Bei der Umsetzung der Webseite wurde besonderen Wert darauf gelegt, dass die Webseite auch auf den verschiedensten Endgeräten reibungslos funktioniert, d.h. komplett repsonsive aufgebaut ist. Darüberhinaus wurde in der Seite eine Demofunktion für den Produktprototypen implementiert.

[unex_ce_button id="content_m75o7kr9r" button_text_color="#000000" button_font="semibold" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="4px" button_bg_color="#ffffff" button_padding="15px 60px 15px 60px" button_border_width="1px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="4px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://www.interactivereading.de" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]WEBSEITE ANSEHEN[/ce_button]
westwind-webscreenfullwestwind-webscreenfull

06

MOTION GRAPHICS


Der Teaser-Film besteht aus einem illustrativen Teil, der einen abstrakten Vorgeschmack auf den Inhalt der Handlungen gibt, sowie einem realistischen Teil mit Real-Footage, der das eigentliche Endprodukt zeigt. Die besondere Herausforderung bestand hierbei darin, beide Teile visuell und konzeptionell sinnvoll zu verbinden.
 

GruppenfotoGruppenfoto