Landingpage Robotrex

Lang Technik

LANG Technik ist nicht nur der Experte für Spanntechnik, sondern bietet auch innovative Automationslösungen für Werkzeugmaschinen an. Die komplexe Welt der Automation auf den Punkt gebracht. Dürfen wir vorstellen: RoboTrex. Durch einen scrollbaren Onepager mit vielen interaktiven Elementen, laden wir ein, genau diese Welt zu erleben. Vorteile der Prozessoptimierung und das Innenleben der einzelnen Arbeitsabläufe werden dargestellt. Feuer frei.

intro_full_width
Konzept

Der Besucher wird von der Frage „Warum automatisieren?“ bis zur Kontaktaufnahme durch eine schlüssige Argumentation begleitet. Mit vielen multimedialen und interaktiven Elementen soll die RoboTrex Automationslösung in Szene gesetzt und die Aufmerksamkeit des Betrachters auf ihre Vorteile gelenkt werden.

User Experience Design

Clean, übersichtlich und aufgeräumt, mit Fokus auf die ausgefeilten Automationslösungen - so präsentiert sich der Onepager zur RoboTrex. Animierte Elemente lenken die Aufmerksamkeit des Besuchers auf die Vorteile und Besonderheiten. Interaktive Elemente laden zum spielerischen Erkunden ein und unterstützen die Entscheidungsfindung des potenziellen Kunden.

3D- und Video Inhalte

Mittels 3D- und Webtechnologie haben wir die einzelnen Komponenten der RoboTrex in Szene gesetzt. Dank der 3D-Modelle ließ sich eine Kamerafahrt um die Maschine und die Zooms zu den verschiedenen Komponenten umsetzen. Neben einer eher schematischen Darstellung im Low-Polygon-Look, die wir nutzen um Speicherplatz zu sparen, gibt es für die Endscreens der Komponenten ein hochauflösendes Renderbild.

3D Animation von der Entstehung zur Umsetzung
3D Animation von der Entstehung zur Umsetzung

Mauszeiger-sensitive Maschinenanimation mit dynamischer Kamerafahrt zu den einzelnen Komponenten

Highlight: Interaktiver Amortisationsrechner

Der interaktive Rechner erlaubt es potentiellen Kunden spielerisch einfach herauszufinden, wie schnell sich eine Automationslösung von Lang amortisiert. Umgesetzt als Vue-Komponente, ist der Rechner problemlos auf allen Geräten nutzbar. Bei Bedarf kann er sogar unkompliziert auch auf der Firmenwebsite oder einer App eingesetzt werden.

Umsetzung

Umgesetzt wurde die Seite bei uns im vg mediastudio in statischem HTML ohne CMS. Die Animationen haben wir mit einer Mischung aus nativen css-Animationen, bewegten Vektorgrafiken und Bildsequenzen mit den Javascript-Bibliotheken lottie-web und pixi.js umgesetzt. Der Amortisationsrechner wird als Vue-Komponente in die Seite eingebunden und kümmert sich selbst um seine Datenhaltung. Außerdem steht der Onepager in Deutsch und Englisch zur Verfügung.