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:
- Step 1: Download the MY500 UI Kit. Click here to download MY500. It includes everything you need to create an app with a stunning editorial design, inspired by Bauhaus.
- Step 2: Explore the UI kit and everything it offers. MY500 includes multiple navigation patterns, more than 20 editorial content modules, and elements created with the Reross font.
- Step 3: Start designing. Use the UI kit as a starting point to create your own iOS or web app. All elements follow a mix-and-match concept that allows maximum flexibility when designing, and make it possible to create impactful layouts within a very short time. Simply pick a module, drag it onto your art-board, and insert your content.
- Step 4: Wire screens together to create an interactive prototype you can share.
- Step 5: Share on Twitter and Behance with the hashtag #MadeWithAdobeXD.
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.
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).
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:
- E-Commerce UI Kit: Everything you need to design e-commerce solutions, and some added “pawtastic” dog and cat-related UI elements for pet app fun.
- Travel Companion UI Kit: From hotel, flight, and activity listings, to buttons and icons, here’s a comprehensive kit for travel-themed apps or websites.
- Transportation UI Kit: With more than 60 customizable screens full of symbols and other elements like navigation, Navigo helps you design transportation experiences for apps or websites.
- Apple iOS design resources: These new UI materials make it easier to quickly design iOS apps.
- Google Material sticker sheet: Provides elements like light and dark symbols for status bars, app bars, bottom toolbars, cards, drop-down menus, and more to design Android apps.
- Windows UI Kit: Allows you to start designing Universal Windows Platform (UWP) apps.
- Office UI Fabric Design Kit: Helps you design seamless Office and Office 365 experiences.
- Smartwatch UI Kit: A comprehensive UI kit for the smartwatch, with more than 20 customizable components and more than 30 customizable icons.
- Dashboard UI Kit: Includes 100 customizable components across 10 screens, with more than a dozen charts (the backbone of many dashboards) to help simplify the dashboard design process.
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