MAGTOUCH | Website

Das Innovationszentrum Schwab KG in Hamburg ist ein technisches Entwicklungszentrum mit Designkompetenz.

Wir haben die Website für das faszinierend neuartige Magnetspiel MAGTOUCH entwickelt, das im Rahmen der 5. Hamburger Innovations- und Technologietage (Hitech 2002) vom 27. - 30. November 2002 erstmals präsentiert wird.

 Die Demo mit dem magnetischen Click
 Fotografische Impressionen und virtuelle Welten

 Die Tücken der Flash-Anwendung

....................................
Projekt
0557 MAGTOUCH
Website
....................................
Auftraggeber
MAGTOUCH Innovations-
zentrum Schwab KG
Dr. Michael Kretzschmar
....................................
Konzept, Web Design und Fotografie
Joerg Kilian
....................................
Programmierung und
3D-Design
Jan Schliemann
....................................
Projektstart
03. Juli 2002
....................................
Auslieferung
27. November 2002

Das erste Briefinggespräch fand bereits im Juli 2002 statt. Dabei wurde der Rahmen für die Zielsetzung der Site abgesteckt. Konkrete Schritte wurden dann im September 2002 unternommen, nach dem der Funktionsumfang der Website abgesteckt war.

Die Site sollte in den Rubriken Idee, Produkt, Promotion und Presse zu allen Aspekten des Produkts informieren, eine Kontaktmöglichkeit schaffen sowie interaktive und unterhaltende Elemente enthalten, die den Besucher die Welt von MAGTOUCH aktiv erleben lassen.

Bei der Präsentation der ersten Screenlayouts zeigte sich, dass eine reine HTML-Präsentation weder die Hausschrift richtig wiedergeben, noch die Anforderungen an ein konsistentes Layout erfüllen könnte, wenn eine Skalierbarkeit der Darstellung gefordert ist, die eine gute Lesbarkeit gewährleistet.

Trotz aller Defizite, die Flash in puncto Usability, Dokumentation und Kompatibilität hat, entschieden wir uns dafür den Kern der Site in Flash umzusetzen. Bei der Entscheidung spielte auch die Anforderung an Audio und Interaktivität für die Demo des Konstruktionsprinzips eine Rolle.

...........................................
Konzeption und
Screendesign
...........................................
Benutzerfreundliches Flash-Interface
...........................................
Interaktive Demo
...........................................
3D-Design und Fotografie
...........................................



Das Keyvisual von MAGTOUCH

Die Demo mit dem magnetischen Click

Die Idee zu der Demo, die das Konstruktionsprinzip von MAGTOUCH im Internet erlebbar macht, kam uns als wir feststellten, dass der "Click" eine wichtige Dimension des Markenkerns ausmacht, und im Internet ideal durch Multimedia vermittelt werden kann.

Die Anforderungen an geringe Ladezeiten liess uns bei der Entwicklung der Anwendung auf die wesentlichen Merkmale des Produkts achten. So wählten wir keine aufwändige Konstruktion, sondern die Nachbildung des Keyvisuals als Modell. Die Elemente - Kobis und Balls - gleiten auf die Spielfläche und formen dabei von selbst einen einfachen transparenten Würfel.

Den letzten Handgriff dann darf der Besucher selbst ausführen... click! Das Geräusch wurde in zwei unterschiedlichen Klang-Varianten digitalisiert und in die schlanke - vollkommen in Vektorgrafik entwickelte - Flash-Animation integriert.

(Flash, 11 KB)
Demo des Konstruktions-prinzips von MAGTOUCH.
Die einzelnen Elemente wurden erst in Cinema 4D konstruiert, dann mit Isometrie gerendert und für Flash exportiert.

Fotografische Impressionen und virtuelle Welten

Bereits unser allererster Kontakt mit MAGTOUCH mündete in einer nicht enden wollenden kreativen Session mit immer wieder neuen gewagten Konstruktionen. Es entstand im Verlauf eine spontane Bildserie, die die vielfältigen kreativen Möglichkeiten zeigt: ein Spiel von Farben, Licht, Oberflächen und Materialien – "build your dreams"!

Auch mit den Möglichkeiten der 3D-Grafik haben wir die Potenziale, die in den Formen, Oberflächeneffekten und Transparenzen liegen, in einem virtuellen Modell dargestellt. Sicher ist das echte Bauen mit MAGTOUCH ein unvergessliches haptisches Erlebnis, doch auch die multimedialen Welten haben ihren Reiz.

Die Bildserien werden als Bitmaps in einer Flash-Animation mit Überblendungen wie in einer Diashow abgespielt. Dank hoher Datenkompression konnten wir relativ große Bildformate einsetzen, die auch mit weniger Bandbreite noch gut zu "empfangen" sind.

(Flash, 387 KB)
Diashow "Impressionen"

(Flash, 78 KB)
Diashow "Virtuelle Welten"

.................................... Flash-Kompatibilität
Europa, Oktober 2002
Flash 2  97.3%
Flash 3  96.9%
Flash 4  96.5%
Flash 5  94.1%
Flash 6  61.3%
Quelle: Macromedia

Wir haben die Anwendung - nach viel Wenn und Aber für Flash5-PlugIns kompatibel gemacht.

Die MAGTOUCH Website wurde im Januar 2006 vom Netz genommen, da das Unternehmen in die Insolvenz ging.

Die Tücken der Flash-Anwendung

Es gab zwei kollidierende Anforderungen: Skalierbarkeit und Einsatz von Bitmap-Grafik. Da die Skalierung der Bitmaps in Flash sehr zu wünschen übrig lässt, haben wir zwei Anwendungen erstellt: Die Standard-Ansicht startet in 100% - optimiert für Bildschirme mit 800x600 Pixeln - die Bilder sind dann unskaliert und "knackig". Bei grösseren Bildschirmen kann der Benutzer sich eines "Lupeneffekts" bedienen: die Anwendung wird auf volle Browsergrösse skaliert - mit dem Vorteil besserer Lesbarkeit, jedoch einer suboptimalen Bitmap-Darstellung.

Auch die Druckbarkeit der einzelnen Seiten war eine wichtige Anforderung. Da Flash-Inhalte je nach Browser und Computerplattform unterschiedlich drucken haben wir eine interne Druck-Funktion implementiert. Damit ist es möglich zuverlässig den Inhalt der jeweiligen Seite zu drucken.

Für die Produktseite "Start mit Serie 01" wollten wir gern die im Flyer eingesetzen Freehand-Daten für eine interaktive Skalierung der Bauelemente (Kobis) benutzen. Da diese Daten nicht originär für einen Flash-Export erstellt wurden, eine Neuerstellung in Flash jedoch wirtschaftlich nicht vertretbar war, mussten einzelne Teile der Vektorgrafik manuell neu angeordnet und gruppiert werden um Effekte wie Füllungen und Verläufe mitzunehmen. Die Darstellungsfehler sind jedoch nach wie vor abhängig von der Skalierung des Browser-Fensters, und somit nicht zuverlässig reproduzierbar.

 Projektarchiv
zur Übersichtsseite