Jigx Homepage

Design

Bei der Gestaltung der Website sollte unbedingt die Leichtigkeit und einfache Handhabung des eigenen Produktes im Vordergrund stehen. Auf große Textmengen hat der Kunde absichtlich verzichtet. Technische oder ausführliche Erklärungen wurden durch Grafiken ersetzt. Um die Seite nun aber nicht völlig mit grafischen Elementen zu überfrachten, haben wir uns entschlossen, eine Kombination aus 3D WebGL Modellen und darauf platzierten Videos zu verwenden. So waren wir dann in der Lage, auch komplexere Bereiche aus der Jigx App an einer Stelle zu zeigen. Das Design orientiert sich sehr stark an den in der App verwendetet Widgets. Minimalistisch und einfach.

Develop

Als ersten Schritt haben wir ein 3D Modell eines Smartphones in Cinema4D so aufbereitet, dass es performant in einer WebGL Umgebung dargestellt werden kann. Um die Dateigröße klein zu halten, wurde das Modell als GLTF exportiert und mittels Draco-Komprimierung verkleinert.

Auf der Website ist das 3D Modell in mehreren Containern eingebunden und zeigt Videos von mit Jigx gebauten Apps. Die Anbindung an die Scroll Position des Browserfensters sorgt dafür, dass Videos und Animationen genau dann abgespielt werden, wenn der User zu ihnen hin scrollt. Für die kleinen Details wurden zusätzliche Animationen in After Effects erstellt und mittels Lottie als SVG-Animationen eingebaut. Gesteuert wird alles am Ende durch das JavaScript-Animations-Framework GSAP, das die Scroll Position des Benutzers überwacht und die Komponenten der Website bewegt, die Animationen startet und die 3D Modelle dreht.

Damit der Kunde die Pflege und Aktualisierungen der Website später selbst in die Hand nehmen kann, wurde als Content Management System Wordpress zum Einsatz gebracht. Ein zusätzlicher Pagebuilder (Elementor Pro) sorgt mit seinen Funktionen, für schnelle und flexible Gestaltungsmöglichkeiten.

Deploy

Die fertige Website wurde dem Kunden übergeben und wird von ihm selbst gehostet. Sie kann unter jigx.com besucht werden.