By Martin Holoubek
11.11.2019
Als Designagentur freuen wir uns ganz besonders, wenn unsere Designs honoriert werden und so hat es unser neuestes Projekt - der Website Relaunch von ECD-Performance - ganz weit nach oben in die Webdesign Charts von Awwwards und CSS Design Awards geschafft und erfreut sich bei der Jury und den Usern großer Beliebtheit. Wie wir das Design und die Struktur der Website aufgebaut haben und welche Technologien zum Einsatz kommen, zeigen wir euch im folgenden Beitrag.
Die Story
ECD-Performance steht für Exclusive Car Detailing - Performance und ist der unbestrittene Experte, wenn es um exklusive und hochwertige Fahrzeugveredelungen, sowohl im Interieur als auch im Exterieur, geht. Der deutsche Handwerksbetrieb legt dabei den Fokus einerseits auf die Veredelung von Bauteilen mit Alcantara, Carbon- und Nappaleder, andererseits geht es um die Optimierung der Motorsteuerung, den Verbau von hochwertigen Aerodynamikparts und die Installation von brutal klingenden Auspuffanlagen. Die langjährige und für beide Seiten zufriedenstellende Zusammenarbeit zwischen uns und ECD-Performance basiert in erster Linie auf gemeinsamen Werten und demselben Mindset, was Design, Qualität, Kundenbetreuung und das fortschrittliche Denken anbelangt.
Deshalb war es an der Zeit, dem mittlerweile etwas in die Jahre gekommenen Auftritt ein frisches Design, mit modernen Animationen, sowie aktuellen Content und die neuesten Technologien zu verpassen - und so sind wir das Projekt voller Freude und einer Vision angegangen.
Design & Experience
Der Designstil basiert voll und ganz auf unserer neuen Designlinie, die eine Vielzahl an modernen Designelementen , außergewöhnlichen Animationen, unkonventionellen Layouts sowie eine neuartige, zukunftsorientierte User Experience beinhält und frische, ästhetischere Wege der digitalen Kommunikation geht. Minimalismus & Exklusivität ziehen sich einheitlich durch den gesamten Auftritt und sorgen gemeinsam mit ästhetischen Animationen & Micro Interactions sowie der passenden Farbwahl und stimmigen Bildkompositionen für einen bleibenden Eindruck. Um die Experience noch smoother zu gestalten, haben wir das Scrollverhalten auf Desktopgeräten verlangsamt - eine etwas umstrittene Methode, da die Scrollgeschwindigkeit prinzipiell natürlich sein und dem jeweiligen Betriebssystem bzw. Browser überlassen sein sollte - jedoch kann man dadurch bei den passenden Websites gezielt ein Erlebnis kreieren, das ein Gefühl von Tiefe und schwebendem Content vermittelt.
Technologie & Entwicklung
Unter der Haube geht auch einiges vonstatten. Unser agentureigenes, selbst entwickeltes PIXIT Framework ist gemeinsam mit dem populären Frontend Framework Bootstrap in der vierten Version für das Visuelle zuständig - das bedeutet die Bereitstellung aller Design-, Layout und Steuerelemente, Animationen und der Funktionalität bzw. Logik auf der Clientseite. Da das System modular aufgebaut ist, können wir ausschließlich die benötigten Module einbinden und somit die Performance erhöhen. Für moderne & flüssige Animationen nutzen wir das Animation Framework GSAP (GreenSock Animation Platform), da hiermit einfache, aber auch komplexe Animationen realisierbar sind, die auf nahezu allen Geräten funktionieren. Für "Scroll based animations" eignet sich ScrollMagic ausgezeichnet, gemeinsam mit GSAP ergibt das ein Dreamteam für moderne Animationen. Zusätzlich nutzen wir eigene Frameworkmodule für Menu/Navigation, Slider, Imagebox, Imagegrid, Parallax etc. Als Content Management System (CMS) kommt Wordpress - mit rein den notwendigen Plugins - zum Einsatz, sodass optimale Performance und einfache Verwaltbarkeit, sowohl für den Kunden als auch für die Agentur, gegeben sind.
"Alter, das ist richtig geil, ich bin echt sprachlos!
Das Design und die Animationen überzeugen mich zu 200%!"
-Andre Bender - CEO, ECD-Performance
Das waren die erste Worte des Kunden, als er die ersten Screens des Redesigns zu Gesicht bekommen hat - das freut uns natürlich sehr. Nach einigen weiteren Schritten der Contentpflege, des Textings, Anpassung und Optimierung der Module ging es dann zur gesamtheitlichen Optimierung der Website sowie zum Testing und Bug Fixing. Pünktlich zur Essen Motor Show 2018 war ECD-Performance dann live und konnte sich von und mit seiner besten Seite präsentieren. Nach weiteren Optimierungen im Live Betrieb und ausgezeichnetem Feedback zum Auftritt, haben wir uns dazu entschlossen, das Projekt bei Awwwards und anschließend CSS Design Awards einzureichen, was der Website und dem Kunden eine tolle Präsentationsplattform bietet und uns, als Agentur, zu glücklichen Designaward Gewinnern gemacht hat.
Wir freuen uns auf das, was kommt und bedanken uns für die großartige Unterstützung!