ABUS

Website relaunch

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.

pascher-heinz-abus-website-responsive

Digital Design

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.
 

pascher-heinz-abus-website-digital-design-01
pascher-heinz-abus-website-digital-design-02
pascher-heinz-abus-website-digital-design-03

Main Templates

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.
 

pascher-heinz-abus-website-main-templates

Design system

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.
 

Colours

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.

Typography

Creation of a detailed typography system with an elegant corresponding headline and copy sizes, including the signature red ABUS anchor.

pascher-heinz-abus-website-typo-hover

Product Card

The product cards lay flat on the darker background, show more product information and also accommodate the comparison function.

pascher-heinz-abus-website-productcard

Image Crop

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.

pascher-heinz-abus-website-image-crop-a
pascher-heinz-abus-website-image-crop-b

Controls

All control elements exist for different backgrounds and contain all relevant states and micro-interactions.

pascher-heinz-abus-website-controls

Icons

Custom icon sets for controls, UI elements and technologies were created to maintain the overall brand language.

pascher-heinz-abus-website-icons

Mobile Design

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.

pascher-heinz-abus-website-mobile

Credits

Photography: Michael Müller, Scott Markewitz
Renderings: KRB.BERLIN
Development: Interlutions, Inwebco

Back to top Arrow