You just finished developing a sophisticated back-end that receives a humble request and churns out world-bending mathematics to produce your desired results, congratulations. But without a welcoming front-end all your hard work will go unnoticed and unappreciated. In the world of Platforms, looks matter; A lot. The best way to tackle this problem is to follow design guidelines developed by user interface professionals with years of proven proficiency. Not being one of these professionals should not dissuade you from designing your own Platform. After all, no one knows its needs and personality more than the person working on its development. Often the one element separating the masters from the amateurs is technique, not talent and that is also true with user interfaces.
Design Systems offer that additional knowledge required by developers to elevate their platform’s front-end using internal techniques created by some of the leading authorities in today’s online presence. In short, a Design System is a design language that is made up of a collection of documentation, code, guidelines, principles, files, assets and techniques that enable developers to quickly and reliably produce quality designs for their products. Companies tend to create their own Design Systems for internal usage by their employees. However, many Design Systems are also made publicly available for free use by individuals and companies. Here is a list of notable Design Systems you might find useful:
Developed by Google and made publicly available, this Design System catalogues a wide variety of design techniques. Material Design is kitted with a variety of explanations on typical user navigation, font creation, iconography and more. Their resources cover web elements along with Android and iOS user interface design. Material can help you create your own color palette and comes with design kits for; Adobe XD, Figma and Sketch. It's interesting to see that Google’s design philosophy extends to more of their products like Google Cardboard and Wear OS but is not included in the Material Design documentation, rather is its own set of tools.
Not entirely open-source, Spotify documents their approach and philosophy towards user interface in great detail, along with the tool (Figma) they use to achieve their ends. This means that users don’t get the assets and in-depth documentation they got with other Design Systems. What they do get is a centralized location for a wide range of information resources provided by Spotify’s development team which is consistently updated with new material. These include in depth advice on tools, techniques, ethics, data visualization and a multitude of other topics on their attitude and approaches towards design.
Atlassian’s design system offers an in-depth explanation into almost every conceivable element of their design approach. Ranging from inclusive language to user patterns, voice and tone, including element by element code examples of their user interface and JavaScript libraries. Every element comes with documentation, examples, usages and best practice approaches. It also allows for using Figma and makes templates freely available. Some resources remain locked for employees only however. Primarily, Atlassian offers an in-depth explanation of not just their UX design approach, but the general front-facing attitude they have adopted. Being more intimate with these resources will lead you to understand how those values bleed into the design process.
Microsoft’s Design System offers a versatile range of approaches for a multitude of system types. Its open-source system provides resources for websites, windows, iOS, Android, macOS and cross-platform applications. Additionally, Microsoft also offers detailed code examples and dynamic playgrounds to teach developers how to use the techniques they have developed. Alongside the practical aspect of building the UI, they also share their design Philosophy and approaches to each of the elements they document. Learners and developers are welcomed, with a part of the website dedicated to a learning track using their resources, Microsoft welcomes new comers to their Design Philosophy.
Apple, in a way, shares what made them giants in the industry. Their system for a sleek and intuitive user interface design on multiple devices. Whether your platform runs on macOS, iOS, watchOS or tvOS, Apple’s Design System has something for you. Their documentation includes in depth dives on every feature of the respective device. Here Apple uses their uniform design as a strength and enables Application developers to follow their guidelines to benefit from that uniformity and maintain the dynamic and enjoyable user experience Apple is so well known for.
Conclusion
Although these resources could tempt one to follow them line by line, that’s not the idea. Ultimately, it’s not enough to copy what someone else has done and plaster it on your own product. However, these resources offer more than just the opportunity to replicate other people’s work, instead, they’re an opportunity to learn from some of the best in the field. It is in fact their intention to teach these design principles because they believe in them. Instead of taking them as dogmatic truths, the most optimal approach to reading these documentations is asking: “What design principles do I support?” and seeing if those apply to your platform.
This is best done by incorporating the design principles you learned and liked into your own workflow. Ultimately, not every approach will appeal to you and the needs of your users or your branding. The more valuable knowledge is understanding how certain design principles and techniques enable a certain attitude or diminish it. Only then can you make a completely informed decision.
