Zurück zur Übersicht
WEFRAME
Webseite
Aufgabe

Relaunch der WEFRAME Webseite mit neuem Erleben der Marke und Services.

Unsere Leistungen
Strategie & Beratung, UI & UX Design, Entwicklung, Launch, Live Betreuung
Jahr
2021

Über das Projekt

Gemeinsam mit Retro Brunner (Reto Creative) und Florian Fischer haben wir die Herausforderung angenommen den Webauftritt der WEFRAME GmbH vollständig zu überarbeiten und neu zu launchen.

Hierbei wurde uns die Aufgabe zu Teil die von Florian und Reto entworfene visuelle Sprache und den Markenkern ins Digitale zu übertragen und gemeinsam eine sehr hochwertige Anmutung und besondere Erfahrungswelt zu schaffen.

Die Ansprüche waren nicht höher zu stecken mit der Anforderung eine Produkt- und Markeninszinierung zu schaffen, die sich an Apple und ähnliche Größen im Tech-Consumer-Market orientieren sollen.

Hierfür lieferten uns Reto Creative von Anfang an absolut herausragende und ansprechende Realbild und Render-Inhalte, die wir in Bewegtbild, Stills und Animationen überführen konnten.

Collage der Produktdetails
Neue Experience

Im Zentrum steht die WEFRAME Erfahrung und die Services darum. Das Produkt selbst stellt hierbei den „Enabler“ dar.

Entsprechend legten wir den Fokus auf das Erfahrbarmachen und Eintauchen in die Welt, die uns das Sessionboard eröffnet.

Stilistisch und aus UX-Perspektive wählten wir hierfür animierte Scrollsequenzen, die in einer Art Parallax-Effekt Typographie, Ikonografie und animierte Renderings verknüpfen.

So entstehen beeindruckende interaktive Erfahrungen, die diese Welten erfahrbar werden lassen und gleichzeitig zentrale Inhalte vermitteln und leicht bekömmlich konsumierbar machen.

Experience the Display
Inhalte durch Scrollen
Geschichten erzählen

Mittels der Parallax-Video-Interaktionen ist es nun möglich die Komplexität und Vielschichtigkeit der Services gezielt zu bündeln und in kleineren Sinneinheiten spannend darzubieten.

So wurden fünf animierte Geschichten geschaffen, die interaktiv in unterschiedlicher Detailtiefe Informationen zum Produkt, den Services, Abläufen und Vorteilen greifbar werden lassen.

Ausschnitte einer Geschichte

Ein Blick auf die…

Highlights
Modular

Abwechslungsreich in allen Bereichen: Die eigens angelegten Elemente und Inhaltsbereiche sind fein aufeinander abgestimmt und vielseitig kombinierbar.

Interaktiv

Inhalte nicht nur zu sehen, sondern sie live zu erleben erweitert die Erfahrung um neue Dimensionen.

Modern

Mit hochwertigem Design und neuster Technologie bieten wir ein intuitives und komfortables Erleben.

Hochwertig

Kein Projekt startet perfekt und so haben wir uns die Mühe gemacht, jeden Aspekt bis ins Detail zu beleuchten und abzustimmen.

Präzise

Inhalte und Design auf den Punkt gebracht: Ohne Umschweife werden die zentralen Funktionen und Bestandteile vermittelt.

Auf allen Ebenen

Vielschichtigkeit zu kommunizieren bedarf nicht immer vieler Worte.

Software-Funktionen in animierter Spaltenansicht

Bis ins Detail

Komponenten und Anwendbarkeit

Mit Blick auf große Inhaltsmengen haben wir ein modulares Baukastensystem geschaffen. Dieses bedient sich nicht großer unhandlicher Bibliotheken wie sie heute of üblich sind, sondern ist performance-optimiert und abgestimmt für Projekt angelegt worden. Hierdurch ist die Einpflege intuitiv und schnell zu bewältigen ohne unnötigen Overhead.

Vielseitiges Modul mit Akkordeon
Details zum Stift und Software-Features
Design und Details

Viele kleinere Elemente sind modular editierbar und können damit stetig mitwachsen. Sie sind damit den neuen Anforderungen und Ergänzungen gewachsen und es bedarf keinerlei technischer Überarbeitung.

Das Design wurde mit viel Hingabe bis in kleinste Details abgestimmt, um in unterschiedlicher Kombination stets im Einklang zu stehen.

Höchster Anspruch

Das Design spricht für sich selbst und wurde mit höchstem Anspruch durch Planung, Konzeption, Shootings, 3D-Modellierungen, Renderings und das gesamte User Interface konsistent abgebildet.

Hinter den Kulissen

Damit die Animationen flüssig und reaktiv bleiben, habe wir diverse Setups getestet, um die bestmögliche Performance bei geringer Datenübertragung zu ermöglichen. Für das Rendern komplexerer Animationen kamen die Bibliotheken PixiJS und GSAP zum Einsatz. Für mobile Geräte wurde eine vereinfachte Visualisierung genutzt, um die Inhalte schnell, ansprechend und gerätespezifisch darzubieten.

UX/UI Stack
  • Figma
Tech Stack
  • Craft CMS
  • PHP
  • MySQL
  • PixiJS
  • GSAP
  • PHPStorm
  • GitHub
Story Animation mit GSAP

Wie in all unseren Projekten üblich haben wir eine Staging-Umgebung zum Testen von neuen Features, Bugfixes und Inhaltsanpassungen eingerichtet. Diese Umgebung dient auch für User Tests und Freigaben durch Kund:innen. So können wir Features nach umfangreichen Tests im Anschluss ohne Reibungsverluste auf die Live-Umgebung befördern.

Ergebnis

Mittels neusten Technologien haben wir für WEFRAME eine hochwertige und herausragende Internetpräsenz mit spannenden Interaktionspunkten geschaffen. Für das Team intern ist es mittels modularem Inhaltsystem einfach und unkompliziert neue Inhalte einzupflegen und diese performant auszuliefern.

Nächstes Projekt
RECUP
RECUP App Relaunch