The MY500 UI Kit: Everything You Need to Build a Bauhaus-Inspired Editorial Design in Adobe XD

by Patrick Faller

posted on 08-28-2018

It has been nearly a century since the Bauhaus school changed how we collectively think about art and architecture. It’s revered for its cool use of typography, geometric shapes, and simple yet impactful designs. While its brand of modernism is not new, some of the style’s key principles still feel impressively at home in the modern day. To celebrate Adobe’s Hidden Treasures campaign, where typographers revitalize and share traditional Bauhaus fonts with Creative Cloud members, we tasked talented UX designer, Melanie Daveid, to take one of those fonts and apply Bauhaus elements and principles to 21st century product design. This weekend, jump into Adobe XD with this UI kit to travel back in time and create your own digital Bauhaus masterpiece.

Melanie is a Berlin-based designer who lives not too far from Dessau, Germany, the birthplace of Bauhaus. She says the fusion of UX design and Bauhaus principles, found in her free MY500 UI Kit, have the power to create stunning and effective apps.

“Transferring the Bauhaus principles into a modern product design setting means to be brave enough to remove noise,” she said. “This could be visual details and fancy animations that don’t make sense, and barely-used features. The Bauhaus principle ‘form follows function’ could be reinterpreted as ‘solution follows need’ in that case.”

You can download MY500 for free here, and keep reading to learn more about its multiple navigation patterns, tons of elements, and the inspiration behind its iconic design (featuring the Reross font).

The Bauhaus inspiration behind Melanie’s UI kit

The MY500 UI Kit is a modular system, like Adobe XD’s dozens of other free UI kits on offer, and comes complete with tons of UI elements you can use in your own prototypes. The “hidden treasure” of the app, however, is its typography — the kit uses the Reross font originally conceptualized by Bauhaus master Reinhold Rossig and recreated by Elia Preuss. It is a quintessential Bauhaus element, and everything revolves around it.

“Bauhaus is the ultimate form of designing with focus; it’s thoughtful and uncompromising at the same time. That’s why the navigation concepts in MY500 are straightforward — they have a flat hierarchy. The content itself brings everything to life and smoothly wraps around the heavy font Reross,” said Melanie.

Reross itself is a true testament to Bauhaus. Of all the student work produced in master teacher Joost Schmidt’s Bauhaus classes, Reinhold’s alphabet designs were closest to his teachings. The font consists of monolinear, geometric lettering, constructed on grids using compass and ruler.

Reross fonts, now available from Typekit’s Hidden Treasures of the Bauhaus Dessau.

Designer Elia carefully preserved Reinhold’s letters and considerations, but also lent more characteristic letters found on poster designs by fellow Bauhaus student Hermann Werner Kubsch. He created a true Bauhaus-influenced geometric sans, full of different historic influences and contemporary features, and perfect for Melanie’s standout UI elements (and your product designs).

Getting started with the MY500 UI Kit in Adobe XD

First, make sure you download the latest version of Adobe XD, then follow these quick steps to get started with the MY500 UI Kit:

Lessons learned from the Bauhaus way of designing

The whole design of the MY500 UI Kit is created with the intention of bringing elements of the physical world into the digital — from the typography to the shapes, Bauhaus’s pre-digital roots shine through, and so do Melanie’s passions. Observing the style and creating this UI kit reinforced her own approach to design, an approach that has helped keep her grounded in the physical world despite working exclusively in the digital.

“Many projects I am working on are non-physical, they can be used (e.g., interfaces) but you don’t have something tangible anymore — there is always a device in between. Thinking about its history, the main intention of Bauhaus Dessau is to truly live ‘design through crafts,’ and that’s always my inspiration,” she said.

Bauhaus fonts.

Melanie added that the collaborative nature of the Bauhaus school, of many masters and designers collaborating, interpreting, and expressing its design principles in their own ways, speaks to her deeply and is something she has tried to cultivate in her own design practice.

“I like the idea of getting together to create design, no matter if this design is done in a digital way or by crafting something tangible, like they did at Bauhaus Dessau. Communicating digitally might be more relevant today, but nothing beats an inspiring face-to-face chat with other creatives or simply observing others,” she said.

About Melanie Daveid

Originally from Austria, Melanie now lives in Berlin where she is a UX strategist. Her interdisciplinary background has taken her from freelancing, to agencies, to start-ups working in product development, brand design, art direction, and managing teams of creatives. Recently, she’s been focusing on product management at eBay. If you meet her, be sure to give her a high-five (and ask her about Bauhaus).

Melanie Daveid.

More UI kits, including a security UX toolkit to safe-proof your product designs

After you’ve explored the MY500 UI Kit, check out Adobe XD’s many other free UI resources available, including the Vault UI Kit that puts security UX tools in your hands. We’ve also released five recent UI kits and icon sets designed to help you build everything from a restaurant website to a fashion e-commerce hub. See our latest UI kit offerings below:

Not sure where to start? Check out our full list of tools and resources for everything you need to get started designing, prototyping, sharing, and working with unique UI kits in Adobe XD. And for UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.

Topics: Creativity, Design, Typography

Products: Creative Cloud