Estherazeta · Follow
11 min read · Apr 1, 2024
Smartly observe any website, software, or application constructed by a big company. You’ll most definitely find that some issues, such as helping users get from point A to point B, are treated quite consistently. For other issues, there’s a great deal of variance. For example, consider the hot button “log in.” The position of the log in command and how it appears will vary greatly from one section of the website to another. Within a given section of a website, there may be just a few specific variations on the command. Each of these instances represents a design problem that will have a design solution. The command that leads to most users getting confused must be redesigned to be more clear. Traditionally, large companies have lacked a unified approach to things like login or search, resulting in many design solutions being spread out and causing inconsistency. A public-facing design system is an opportunity for modernization. It’s a way to document and distribute a design solution for applied problems throughout a company. The documentation is packaged up into a method that is easily referable.
Public facing design systems are design systems that are open to the public (defined by customers, clients, other end users) both visually and verbally. They define the brand, the products, and services and provide ways for the user to interact. These are different from private design systems, e.g. an enterprise software company’s intranet, because the users are different. Users of public systems may not know anything about the company when they start using it. They want to accomplish a task quickly and easily with a low learning curve. They don’t care about the system’s aesthetics or internal consistency. They are looking for a specific piece of information and do not generally just browse around. If the only users of the system will be the design and development team, then a public system is probably unnecessary. The target audience will directly affect the visual design and the guidelines in a public system. A medical research company may have a target audience of cardiologists looking for information on heart disease. This audience would appreciate a more professional look. An audience of teenagers at a gaming website would appreciate something more fun and laid back. The audience and the company’s brand image should be reviewed to determine the best approach for the design.
These style systems, guarantee uniformity plus effectiveness in item advancement, making it a lot simpler for developers along with programmers to interact without any hassle. As the significance of customer experience remains to expand it’s most likely that a lot more firms will certainly establish their very own layout systems in the future. I believe this is a good thing.
Now let’s dive into the five (5) design systems we’ll be discussing today:
A lot of us use the spotify app and love the pop of colors, interesting design styles and end of year spotify wrapped that comes with it, don’t we? I’m sure we do, I personally do.
Spotify’s layout group pitches 3 essential values that drive their system. These values are Empowering, Consistency along with Performance/Efficiency. They share the message that the team needs to create something that solves problems and makes the users of their products feel really pleased with the new features. It is important that users can easily identify and interact with new features. It’s essential to not overlook more advancements on previous features.
Spotify has one of the simpler design systems as of now. Their implementation into their product and their website isn’t as expansive as other design systems, but that doesn’t mean theirs is any better or worse. As a company, Spotify is growing enormously, especially within the past couple of years. Since then, Spotify created a “dynamic design system” which is a more practical and flexible approach to updating their user interface. This concept is split into 3 different phases: Discovery, Evaluation, and Production. In the discovery phase, the design team for Spotify works separately to gather multiple ideas before thinking about uniting them into a final interface. The next phase would be evaluation, in which co-requirement sessions are held to assess what “discovery” ideas would be combined into a final concept. In the final phase, iteration would take place on the chosen ideas until the team was happy with the final result.
What makes spotify’s design system unique?
Spotify’s public facing design system is unique due to its seamless integration of their brand elements throughout the platform. From the use of bright, bold colors to their consistent typography choices, users are able to easily recognize and connect with the Spotify brand. Additionally, the design system is highly user-friendly, offering a clean and intuitive interface that enhances the overall user experience. By prioritizing visual and functional consistency, Spotify has created a design system that is not only aesthetically pleasing but also highly effective in meeting the needs of its users.
Their design system can be accessed via the link below;
Apple developed a design system that became accessible to the public and called it a design language. This was a first in the industry, no company had so publicly codified its design principles. It was a way to document the rationale and details behind what they believe makes a quality Apple user interface. It was intended to be a living document that is updated as the UI evolves. Apple no longer provides public access to this document, the most recent version was from 2001. After Java was dropped at Apple, it was no longer necessary to provide a public API for any user interface elements. With the recent open sourcing of Swift, I think it would be beneficial to the overall quality of applications on the ecosystem to revisit this and provide a set of guidelines and a design language for third-party developers.
Apple design systems are a huge set of rules, constraints, and principles with vast documentation in the form of Human Interface Guidelines, the Aqua system, developer documentation, and WWDC (World Wide Developers Conference) videos and sample code. According to Apple’s current CEO, Tim Cook, the design rules are so solid that one can see the similarity in principles and rules of the 1980s Mac interface and the iPhone interface. These rules work as a codification for designers and give clear boundaries on what is expected. Though constraints might seem like a negative term, it is something that can force a person to think more creatively and come up with innovative solutions. At Apple, these constraints are considered a good thing and enable designers to fit within the boundaries and come up with better design solutions.
What makes apple’s design system unique?
Apple is known for its design practices and the closely knit ecosystem of hardware, software, third-party applications, installation CDs, and online support. It is imperative to have a design system in this scenario to keep a unified approach and consistent look and feel. A designer at Apple is expected to know these guidelines “like the back of their hand” and use them as a tool to communicate with other designers, engineers, marketing, and executives of the company.
The design system can be accessed via the link below;
Atlassian, for those unfamiliar, is an Australian company that produces enterprise software, with a focus on software development tools. Their most well-known products include JIRA, Confluence, BitBucket, and Stride. They are a successful company, with a share price that has been increasing steadily over the years. They are known for having a very open and friendly work environment, with a focus on innovation. They have a mascot named Atlas, who is depicted as being very strong, which symbolizes the company’s strength and resilience.
Atlassian now has a large selection of products with different design and development teams. A new Unified Design concept was mandated to centralize design information and resources for all employees. Atlassian’s public-facing design system was created to benefit end users.
Atlassian offers various products and services for software development and team collaboration. These include task tracking, code quality, and help desk websites. The company has invested in efficient and intuitive user interfaces for its products, resulting in dispersed designs. JIRA, released in 2002, has undergone multiple redesigns and lacks consistency with other Atlassian products.
What Makes Atlassian Design System Unique?
Atlassian Design System is unique due to its comprehensive approach towards design consistency and usability. It provides a wide range of components, guidelines, and resources to ensure a cohesive and user-friendly experience across all Atlassian products.
Some of the key features that make Atlassian Design System unique include its focus on accessibility, scalability, and flexibility. The system is designed to be accessible to all users, regardless of their abilities or disabilities, and includes a range of tools and resources like; color palette, components, typography, spacing, icons and so on, to help designers create accessible interfaces. In addition, the system is highly scalable, meaning that it can be easily adapted to meet the needs of different products and teams.
Finally, Atlassian Design System is incredibly flexible, allowing designers to customize components and guidelines as needed to ensure that each product has its own unique look and feel while still maintaining consistency across the entire Atlassian ecosystem.
This design system can be accessed via the link below;
Material design is a design language which was developed in 2014 by Google. Understanding that the rise of new devices and platforms has made good design and design consistency increasingly difficult, Material Design aimed to create a more united user experience across all platforms and device sizes. Taking influence from paper and ink, material design’s intention is to make a user interface feel more tactile, almost as if it’s a physical surface. Material design is intended to fully utilize the capabilities of a device or platform yet still remain easy to learn. A key aspect of Material Design is its animation and responsiveness. Designs are more fluid and the user is provided with a clear visual understanding of what is happening.
What makes material design system unique?
Google’s Material Design is unique due to its emphasis on tactile surfaces, bold colors, and responsive animation to create a cohesive and intuitive user experience. The design language focuses on realistic lighting and shadows to give depth to elements, making them appear more tangible and user-friendly. Additionally, Material Design includes specific design components and guidelines to ensure consistency across various platforms and devices, making it a versatile and cohesive design system.
This design system can be accessed via the link below:
Uber’s design features are pretty unique, not just for a company of Uber’s size, but pretty impressive full stop. Over the past couple of years they have set up something pretty amazing and I don’t think there’s really anything like it. First off, the most impressive and at the cornerstone of everything is a design system with an extremely healthy amount of documentation. Uber has been very open with their brand, design, and research guidelines, sharing just about everything they do with the public. Their UI kit, an ongoing project which aims to document patterns and components used throughout the app, acts as a guide for any designer looking to do work with Uber and is open for anyone to take a look. This is a true work of art and more companies should heed what Uber has done on this front. This really is the first basic step in creating a solid design system. The UI kit has managed to cover a range of different platforms, due to something they call a “design for everywhere” initiative. Web, iPhone, Android, email, etc., it’s all covered. All of this has been an ongoing effort to develop and improve since the birth of this baby back in early 2016 and the results are plain to see.
Uber has a well defined design system that serves as the foundation for creating consistent user interfaces across its ecosystem of products and services. To address design challenges, Uber created the Base Web design system. Open-sourced in 2018, Base Web is a React component library that implements the Base design language.
Uber’s Base design system covers a vast array of style facets, ensuring consistency in visual design, interaction patterns, and user experience.
What makes Uber’s design system unique?
Uber’s design system, known as the Base design system, brings together all aspects of the Uber ecosystem under a single, unified framework.
Whether you’re using the Uber app for rides, exploring Uber Eats, or engaging with any other service, the consistent design language ensures a seamless experience.
This holistic approach unifies the brand, making it instantly recognizable across diverse touchpoints. While Uber’s mobility offerings maintain their recognizable black-and-white aesthetic, other sectors — such as Uber Eats — now incorporate color.
This strategic use of color and appropriate buttons allows for creative expression while maintaining consistency and recognition.
Uber’s design system strikes a balance between brand identity and visual diversity. Uber’s layout grid provides a consistent structure and hierarchy across various platforms and marketing materials.
Based on a 4–12 column system, it enables flexible and responsive layouts that adapt seamlessly to different screen sizes and devices4.
This adaptability ensures a smooth experience for users, regardless of their device.
The design system can be accessed via the link below:
Kudos if you’ve made it this far and I’m sure you can say a thing or two about design systems now.
You can access these design systems via the links I’ve shared and also in some of your favorite design softwares like figma, sketch, adobe etc.
Thank you for reading!
Google Search
m3.material.io
atlassian.design
base.uber.com
spotify.design
developer.apple.com/design
