Nach dem ersten Schnee vor unserem Büro gestern, wollten wir die weihnachtliche Stimmung auch in unser Büro bringen. Um das zu bewerkstelligen haben wir einen kleinen Tannenbaum für den Desktop gebastelt. Und weil wir die Stimmung nicht für uns behalten wollen, könnt Ihr ihn hier direkt installieren. Einige werden ihn wiedererkennen aus unserer letzten Weihnachtsaktion. Viel Spaß.

Technische Umsetzung
Neben der Gestaltung lag ein besonderer Schwerpunkt auf der aufwendigen Entwicklung, die auch Demonstration für die technischen Möglichkeiten sein sollte. So sollten Browserintegration, Suchmaschinen-Optimierung und einfache Pflege der Inhalte möglich sein.

www.3spin.de

Flash und Papervision
Die Umsetzung der Website erfolgte in Adobe Flash auf Basis von ActionScript 3. Dabei wird die 3D-Engine Papervision zum Rendern der 3D-Welt zur Laufzeit verwendet. Besondere Herausforderung war die Abbildung des Spins im dreidimensionalen Raum, weil dieser aufgrund seiner Größe im Vektorformat geladen wird. Dazu setzen wir die mittlererweile in Papervision integrierte Bibliothek Vectorvision ein, die wir für diesen Zweck erweitert haben.

Der Spin als Bezierkurve
Die Flugbahn durch die Welt entspricht dem Verlauf des Spins und auch die Inhalte der Seite sind senkrecht auf dem Spin platziert. Um dies zu ermöglichen, musste die Form des Spins in eine Art berechenbares Format gebracht werden: Ein geschlossenes Band aus einzelnen Bezierkurven. Mittels mathematischer Formeln können aus ihnen die erforderlichen Daten für Animation und Platzierung der Inhalte berechnet werden. Die Ermittlung der Bezierkurve erfolgte über einen eigens dafür entwickelten Bezier-Editor.

Bezierkurve im Editor

spinOne
Auch dieses Projekt basiert auf unserem ActionScript 3 Framework spinOne, das wir im Laufe der Entwicklunsphase nochmals stark erweitert haben. Zu den bisherigen Funktionen (Navigations-, Inhalts-, Kommando-Controller, Ladesystem, …) kamen u.a. Module für Lokalisierung, Deep-Linking, CMS-Anbindung, Debugging, Scaffolding und Wiedergabe von Sound hinzu. Damit können wir in zukünftigen Projekten noch stärker Entwicklungszeit für unsere Kunden sparen und die Stabilität der Produkte erhöhen

Browser-Integration und Deep-Linking
Ein weiteres Merkmal der Website ist die Integration in die Browser-Navigation und -Chronik (History). Dadurch kann der Benutzer trotz der Verwendung von Flash die Browser-Buttons (Vor/Zurück) zum Navigieren verwenden und die aufgerufenen Seiten erscheinen in der Chronik. Weiterhin passt sich auch die Adresszeile an, so dass diese kopiert, gespeichert oder weitergeschickt werden kann und der Benutzer beim Aufrufen der Adresse wieder genau an die Stelle kommt, auf der er war. Möglich wird dies durch die Verbindung von spinOne mit SWFAddress.

Content-Management-System (CMS)
Zur einfachen Pflege der Website verwenden wir das Content-Management-System Redaxo, dass mittels eigener Erweiterung die Inhalte für Flash bereitstellt. Dort bereitet die CMS-Erweiterung von spinOne (die auch mit anderen CMS kommunizieren kann) die Daten zur Weiterverarbeitung auf. Mehrsprachigkeit und beliebige Typen von Inhalten können damit schnell umgesetzt und anschließend leicht gepflegt werden. Erwähnenswert ist, dass auch die Platzierung der Seiten auf dem Spin dynamisch erfolgt und dabei noch berücksichtigt, dass die Kreuzungen frei bleiben. Wird eine neue Seite im CMS angelegt, platzieren sich die Seiten automatisch neu, ohne dass man Koordinaten für die Position angeben muss.

Redaxo CMS

Suchmaschinen-Optimierung (SEO)
Um optimale Suchergebnisse zu erzielen, ist eine Indexierung der einzelnen Seiten und deren Adresse durch die Suchmaschinen wichtig. Eine Flash-Website wird allerdings von Suchmaschinen nur als eine Seite wahrgenommen und auch die Inhalte, die innerhalb des Flashs geladen werden, bleiben den Suchmaschinen verborgen. Zu diesem Zweck lassen wir das Content-Management-System die gesamte Website nochmals in einer statischen HTML-Version mit einzelnen Unterseiten generieren, die von den Suchmaschinen indexiert werden kann und auch Screen-Readern den Zugang ermöglicht. Gelangt ein Benutzer nun über eine Suchmaschine auf eine der statischen HTML-Unterseiten, wird automatisch der Flash-Film mit der entsprechenden Seite geladen. Mit dieser Technik ermöglichen wir Suchmaschinen-Optimierung auch bei Flash-Websites.

Suchmaschinen-Optimierung und Deep-Linking

Dieser Artikel sollte einen kurzen Einblick in die Erstellung von www.3spin.de geben. Über Ideen, Kommentare und Anregungen freuen wir uns natürlich sehr.

Jetzt heißt es nur noch Sound an und ab geht der Flug: www.3spin.de

Analyse
Zu Beginn des Projekts wurden klassische Wege gegangen – Zielgruppenanalyse, Szenarien und Marktpositionierung, um nur einige zu nennen – um die optimale Ansprache für unsere Kunden zu finden und die Ziele der Website zu definieren.

Ideen
Unser Anspruch war keine klassische Website zu entwickeln. 3spin ist innovativ und sucht das Neue. Gleichzeitig wollten wir Elemente des Corporate Designs aufgreifen, um die Identität von 3spin zu vermitteln. In der Ideenphase entstanden viele interessante Konzepte, vom Brettspiel bis zur dreidimensionalen Achterbahn.

Ideenfindung

Aufgrund der Ergebnisse der Analysephase haben wir uns für eine Weiterentwicklung der letzten Idee entschieden. Hierbei sollte der markante „Spin“ des Logos in eine dreidimensionale Welt gelegt werden, auf dem die Inhalte wie auf Werbeplakaten platziert werden. Der Benutzer kann die Website erkunden, indem er auf dem Spin zum jeweiligen Inhalt fliegt.

Finale Idee

Die Reduktion des Spins auf eine Ebene erleichtert dem Benutzer die Orientierung was den dreidimensionalen Raum fassbar macht und die Usability erhöht. Gleichzeitig wird der Spin in der Form hervorgehoben, wie er auf den Geschäftspapieren verwendet wird.

Design und Inhalte
Aus Basis des Konzepts wurden die Gestaltungselemente, das Navigations- und Interaktionskonzept erstellt. Die heterogene Zielgruppe erfordert einen besonderen Fokus auf Usability, weshalb z.B. redundante Navigationsmöglichkeiten (Hierarchische Navigation, Vorwärts-/Rückwärts-Buttons, Tastatureingabe) geschaffen wurden. Zur Unterstützung der visuellen Gestaltung wurden anschließend passende Sounds produziert und auch die inhaltlichen Elemente führen den Designgedanken fort.

Erstes Screenlayout

Hier geht’s zum zweiten Teil: Making of www.3spin.de, Teil 2