AMAG Pattern Library



Pattern Library Development

By following a strategic repositioning of the AMAG brand, it was important to transfer the company’s new image to all channels, in particular to the widest variety of online appearances. An important basis has been created with the pattern library, a browser-based library of all common web building elements (such as buttons, form fields, etc.). The difference between a classic style guide is that the elements are functionally programmed in a pattern library and can be exported as ready-to-use front-end components and reused in digital projects. In addition to the primary goal of creating a unified customer experience in all digital channels, increased efficiency in project execution and improved code quality are further advantages of using a pattern library.

Conception, design, and technical implementation of the pattern library were carried out by an interdisciplinary, cross-company team. We developed the superordinate design language and designed the individual web-building components. An agile and iterative approach enabled an efficient and goal-oriented project implementation in only three months. The Pattern Library was designed based on the concept of Atomic Design by Brad Frost and implemented with the React-Styleguidist Framework.

Client #AMAG / Date #2018 / Category #Digital / Branding Agency #Heads / Web Developer Nexum / Designer Marco Simonetti / Consultants Marc Gooch, Ralph Hermann

Design DirectionMarco Simonetti @Heads Corporate Branding

This is a unique website which will require a more modern browser to work!

Please upgrade today!