By Martin Holoubek
01.07.2019
We lead, others follow.
True to the motto of the renowned tuning giant based in Germany and the United Arab Emirates, we have done our best and are proud to receive several design awards for the website relaunch of the company. In addition, we have received a lot of positive feedback and we would like to thank you as well! True to our tradition, we would like to give you a little insight into the history of the company and our collaboration, and also show you how we built the website, what design elements and technologies we've used, and what makes the end result so special. First let's take a closer look at the history of the company and the origins of our collaboration.
The story
PP-Performance is the world's leading expert when it comes to chip tuning and high-quality optimization in the engine, turbo, exhaust and compressor technology sector, both for road and racing vehicles. The company stands for high quality and maximum performance and is passionate about everything it does. The company was founded in 2008 by Jimmy Pelka and Salah Alamoudi, who are known for their years of experience and the resulting high-quality software and engine optimization. They provided the vehicles for the Hollywood blockbuster Fast & Furious 7 and showed their skills in TV shows such as GRIP - the motor magazine. We got to know each other a few years ago during a visit to the workshop in Abu Dhabi and a nice and enjoyable dinner. We quickly realized the common focus and the mindset and so this has resulted in an extremely great and successful cooperation with exciting projects that we all enjoy a lot.
This year, just in time for the company's 11th anniversary, we wanted to reach the next level with a modern website relaunch, a groundbreaking image video, brand new content and a few more surprises.
Design & Experience
When working on PP-Performance's corporate website, we continued our minimalist yet exclusive design style with some new flat design elements, dynamic micro-interactions and smooth animations. The brand logo has been extended by a responsive variant, which is shown in the header with a slight animation when scrolling, and we have also designed a new loading icon, in which the outer frame is animated during the loading process. The company's font has also been changed from the ground up to keep up with the time and initiate a trend change in the company. The brand grid for tuning and media now reacts to mouse movements and gives the elements more depth and dynamics through the parallax effect. Clicking on an element under Media opens the media gallery quite pleasant and subtle with a fresh selection of cool vehicle photography. The self-created cursor responds to links and slider arrows, forming a magnetic circle around the element that is also animated when one of these elements is detected. In addition to a solid design, these subtleties convey a modern user experience that will be remembered.
Technology & Development
There's a lot of action going on inside the engine block as well - here's the latest version of our PIXIT framework with new design elements and animations, plus bootstrap 4 with all its benefits - the animations are based on GSAP as usual. We spent a lot of time on motion design because we had to develop, test, and optimize new types of animation for use in real-world environments - and we also needed to synchronize the animations in detail to ensure the best possible experience. For scrolling animations, ScrollMagic is used. In general, we focus on getting animations processed by the graphics processor to get better performance and reduce battery drain on mobile devices. The images and the image video are reduced by up to 80% using the latest compression tools without causing any visible loss. In addition, partial images and videos are fully loaded asynchronously to optimize loading time and improve the user experience. As content management system (CMS) for the pure content management we use Wordpress, which has been optimized by us regarding performance and usability in order to allow the customer and us a pleasant content management.
"Wow, great work, guys!
I can not stop scrolling through the page."
Jimmy Pelka - CEO, PP-Performance, Caroline Pelka - Assistant CEO, PP-Performance
Full of joy and motivation, the feedback from the client reached us shortly after completion. Afterwards, we made some optimizations and fixes and prepared everything for the release. Shortly after the publication of the website and very positive feedback from clients and partners, we received several design awards for the project as a very positive bonus, which of course was a happy occasion for us to celebrate.
We look forward to many more great projects and exciting challenges!
