SIMON EYMANN hat sich auf Video- und Fotoproduktion spezialisiert. Mit modernster Technik liefert er seinen Kunden erstklassige Film-, Foto- und 360-Grad-Aufnahmen. Entsprechend hoch waren daher die technischen Anforderungen an den Relaunch: Die neue Website sollte in höchstem Maße individualisierbar sein und zugleich rasend schnell laden. Gar nicht so leicht, wenn auf einer Seite dutzende 4K-Bilder, 4K-Filme und 360-Grad-Frames gleichzeitig geladen werden sollen.
Im ersten Schritt haben wir das vorhandene Corporate Design und die Wordpress-Website analysiert: Was können wir übernehmen, was müssen wir überarbeiten, was können wir weglassen? Als Kern des Designs haben wir eine sehr schlichte, technische Anmutung herausgearbeitet, die in der Schrift DIN von URW Type Foundry mündet. Getragen wird die überarbeitete Marke zudem vom neuen Farbklima: Schrift ist in einem dunklen Blaugrün auf Weiß oder sehr hellem Grün gesetzt. Icons und Call-to-Action-Elemente sind in pastelligem, hellem Lime abgesetzt.
Daraufhin haben wir die bestehende Seite und den Wettbewerb im Hinblick auf ihre Auffindbarkeit analysiert und die wichtigsten Keywords ausfindig gemacht. Gleichzeitig haben wir mögliche Besucherszenarien erstellt, durchgespielt und bewertet (UX). Nachdem wir uns für die jeweiligen Szenarien pro Unterseite entschieden haben, setzen wir die UX in die Gestaltung der Website um (UI). In enger Zusammenarbeit mit Simon haben wir die neuen Szenarien und Keywords in Texte überführt.
Aufgrund der deutlich höheren Performance entschieden wir uns, formatfüllende Filme und die quadratischen Vorschauvideos als reine HTML5-Video-Elemente einzubinden und nicht, wie sonst üblich, über das JS-Embed von Vimeo.
Im Backend lassen sich die oben genannten Bilder, Filme und 360-Grad-Elemente in unzähligen Kombinationen zusammenstellen. Auf diese Weise sieht jede Projektseite anders aus. Zudem haben wir neun frei definierbare Headline- und Freitextfelder erstellt, damit Simon alle Projektbeteiligten klar strukturieren, benennen und verlinken kann.
Scroll-Animationen, wie etwa der Projekte-Slider, und Filter, wie auf der Projekt-Übersichtsseite, wurden mittels schlankem JavaScript umgesetzt. Für einen charmanten Kniff sorgen die Videos auf der Team-Seite: Sie werden erst abgespielt, wenn man drüberfährt (Desktop) oder sie im Viewport sind (Mobile).
Für zusätzliche Abwechslung sorgen Elemente, die zufallsbasiert geladen werden: Die Reihenfolge der Projekte auf der Übersichtsseite und das Foto unterhalb der Leistungskacheln auf der Startseite ändern sich bei jedem Neuladen.
