As part of the ABUS brand relaunch, the first digital design ideas for the new website appearance have emerged. The area of mobile safety, which includes bicycle helmets and locks, is the first to benefit from the new design – large, emotive imagery and bold typography that highlights both products and brand, as well as a sophisticated user experience.
The design contains four main website templates as well as different modules, including a product and store finder, a product search and filter function, and a fully functional comparison tool to enable easy navigation of a complex product portfolio. A strong and extensive editable module toolkit, which allows website editors to tell rich stories and create landing pages on their own, combines both worlds – brand and product.
The four main templates – home page, category overview page, product overview page and product detail page – enable a fast and intuitive route from the first touchpoint on the website to the respective product. All pages are designed to ensure fluid responsiveness and to adapt perfectly to all mobile devices and large retina displays.
The Design System follows strict rules for every supported breakpoint. A percentage-based grid system with separate columns for UI elements and typography allows a highly flexible and responsive design with a state-of-the-art digital typography system.
The ABUS main colours are translated from the brand design to ensure compatibility with digital interfaces. The use of paper white backgrounds allow a flat design.
Creation of a detailed typography system with an elegant corresponding headline and copy sizes, including the signature red ABUS anchor.
The product cards lay flat on the darker background, show more product information and also accommodate the comparison function.
An intelligent cropping system was created for images used on the website. This system ensures that the important picture information is displayed with a fluid layout at all times.
All control elements exist for different backgrounds and contain all relevant states and micro-interactions.
Custom icon sets for controls, UI elements and technologies were created to maintain the overall brand language.
The responsive design includes a consistent and holistic approach to whole-screen design for both mobile and desktop. This enables a unique experience to be created – even on smaller devices.
Photography: Michael Müller, Scott Markewitz
Development: Interlutions, Inwebco