By Martin Holoubek
01.07.2019
We lead, others follow.
Ganz nach dem Motto des renommierten Tuningriesens mit Sitz in Deutschland und den Vereinigten Arabischen Emiraten haben wir unser Bestes gegeben und dürfen uns stolz über mehrere Design Awards für den Website Relaunch des Unternehmens freuen. Zudem haben uns sehr viele positive Rückmeldungen erreicht und dafür möchten wir uns ebenso bedanken! Getreu unserer Tradition möchten wir einen kleinen Einblick zur Geschichte des Unternehmens und unserer Zusammenarbeit geben und euch zudem zeigen, wie wir die Website aufgebaut haben, welche Designelemente und Technologien zum Einsatz kommen und was das Endergebnis so besonders macht. Lasst uns zunächst einen näheren Blick auf die Geschichte der Firma und die Entstehung unserer Zusammenarbeit werfen.
Die Story
PP-Performance ist der weltweit führende Experte wenn es um Chiptuning und hochwertige Optimierungen im Bereich Motor-, Turbo-, Abgas- und Kompressortechnik, sowohl für Straßen-, als auch Rennfahrzeuge, geht. Das Unternehmen steht grundsätzlich für hohe Qualität und maximale Leistungssteigerungen und ist mit Herz und voller Leidenschaft bei der Sache. Das Unternehmen wurde 2008 von Jimmy Pelka und Salah Alamoudi gegründet, die für ihre jahrelange Erfahrung und die daraus resultierenden hochwertigen Softwareprogrammierungen und Motoroptimierungen bekannt sind. Sie stellten die Fahrzeuge für den Hollywood Blockbuster Fast & Furious 7 bereit und zeigten ihr Können in TV-Sendungen wie GRIP - das Motormagazin. Kennengelernt vor einigen Jahren bei einem Besuch in der Werkstatt in Abu Dhabi und einem lustigen, gemeinsamen Abendessen, hat man schnell den gemeinsamen Fokus und das Mindset festgestellt und so hat sich eine außerordentlich tolle und erfolgreiche Zusammenarbeit mit spannenden Projekten ergeben, die uns allen sehr viel Spaß und Freude bereitet.
Dieses Jahr, pünktlich zum 11-jährigen Firmenjubiläum, wollten wir daher einen drauf setzen und mit einem modernen Website Relaunch, einem bahnbrechenden Image Video, brandneuem Content und einigen weiteren Überraschungen an den Start gehen.
Design & Experience
Bei der Corporate Website von PP-Performance setzen wir unseren minimalistischen, doch exklusiven Designstil fort und schmücken diesen mit einigen neuen Flat Design Elementen, dynamischen Micro Interactions und smoothen Animationen. Das Brand Logo wurde um eine responsive Variante erweitert, welche beim Scrollen im Header animiert dargestellt wird, außerdem haben wir ein neues Ladesymbol designed, bei dem der Außenrahmen während des Ladevorgangs animiert wird. Die Schriftart des Unternehmens wurde ebenso von Grund auf geändert, um mit der Zeit zu gehen und einen Trendwechsel im Unternehmen einzuleiten. Das Marken-Grid bei Tuning und Media reagiert nun auf Mausbewegungen und verleiht den Elementen durch den Parallax-Effekt mehr Tiefe und Dynamik. Durch den Klick auf ein Element unter Media öffnet sich ganz angenehm und subtil die Mediengalerie mit einer frischen Auswahl an coolen Fahrzeugfotografien. Der eigenkreierte Cursor reagiert auf Links und Slider-Arrows und formt bei Erkennung eines dieser Elemente einen magnetischen Kreis um das Element, der ebenfalls animiert wird. Neben einem soliden Design, vermitteln diese Feinheiten eine moderne User Experience, die in Erinnerung bleibt.
Technologie & Entwicklung
Auch innerhalb des Motorblocks passiert einiges an Action - so kommt hier die aktuelle Version unseres PIXIT Frameworks mit neuen Designelementen und Animationen zum Einsatz, ergänzend dazu nutzen wir Bootstrap 4 mit all seinen Vorzügen - die Animationen basieren, wie gewohnt, auf GSAP. Für das Motion Design haben wir besonders viel zeitliche Ressource investiert, da wir neue Arten von Animationen entwickeln, testen und für den Einsatz in realer Umgebung optimieren mussten - zudem müssen die Animationen im Detail synchronisiert werden, um einen optimalen Ablauf zu gewährleisten. Für Animationen, die beim Scrollen ausgeführt werden, kommt ScrollMagic zum Einsatz. Allgemein legen wir den Fokus darauf, Animationen vom Grafikprozessor verarbeiten zu lassen, um eine bessere Performance zu erreichen und gerade bei Mobilgeräten die Batterie zu entlasten. Die Bilder und das Imagevideo werden mit neuesten Komprimierungstools um bis zu 80% verkleinert, ohne dabei stark sichtbare Verluste zu erzeugen. Zudem werden Bilder zum Teil und Videos zur Gänze asynchron geladen, um Ladezeit zu optimieren und die User Experience zu verbessern. Als Content Management System (CMS) zur reinen Verwaltung der Inhalte verwenden wir Wordpress, welches von uns ebenfalls in Richtung Performance und Usability optimiert wurde, um dem Kunden und auch uns eine angenehme Contentverwaltung zu ermöglichen.
"Wow, tolle Arbeit, Jungs! Ich kann gar nicht mehr aufhören, die Seite durchzuscrollen."
Jimmy Pelka - CEO, PP-Performance, Caroline Pelka - Assistant CEO, PP-Performance
Voller Freude und Motivation erreichte uns das Feedback des Kunden kurz nach der Fertigstellung. Anschließend führten wir einige Optimierungen und Fehlerbehebungen durch und bereiteten alles für den Release vor. Kurz nach Veröffentlichung der Website und ausgesprochen positivem Feedback von Kunden und Partnern erhielten wir als sehr positive Draufgabe noch mehrere Design Awards für das Projekt, was für uns natürlich ein freudiger Anlass zum Feiern war.
Wir freuen uns auf viele weitere tolle Projekte und spannende Herausforderungen!
