Design Systems Around the World: 5 Best Examples for Inspiration

Contents:

• Apple Design System: Fundamentals and Current Trends
• Google Material Design System Overview
• IBM Carbon Design System
• Microsoft Fluent Design System
• Atlassian Design System Overview

Apple Design System: Fundamentals and Current Trends

Apple Human Interface Guidelines (HIG) are one of the most authoritative and oldest design systems in the world. They cover a wide range of platforms, including the Web, macOS, iOS, iPadOS, watchOS, visionOS, and tvOS. These recommendations help developers and designers create intuitive and aesthetically pleasing interfaces that meet Apple standards. Following the HIG helps achieve a high degree of user experience, which is especially important in the increasingly competitive technology market. Developing interfaces that comply with the Apple Human Interface Guidelines improves the user experience and increases loyalty to Apple products.

Since its inception, the HIG has accumulated significant experience and numerous examples that serve as a guide for designers, editors, developers, and managers. It's important to note that these guidelines are required not only by Apple's internal employees, but also by all third-party app developers seeking to submit their products to the App Store. This underscores the importance of maintaining quality and design standards for successful app promotion on the platform. Correct application of the HIG guidelines helps create intuitive and usable interfaces, which in turn improves user experience and increases the chances of success in the App Store.

Key sections presented in the HIG:

• Typography;
• Layout and grids (support for right-to-left writing);
• Color palette, translucency, and dark theme;
• Icons, SF symbols, and app icons;
• Components;
• User experience patterns;
• Branding;
• Editorial style;
• Accessibility and inclusion;
• Privacy.

The HIG provides design guidelines for various platforms, including macOS, iOS, iPadOS, as well as wearable devices such as watchOS, virtual reality on visionOS, and TV interfaces on tvOS. These guidelines help developers create intuitive and functional interfaces that adhere to Apple standards, improving the user experience across all devices.

The Apple design system encompasses not only the physical dimensions of components but also a variety of user interaction methods. It takes into account gestures, game consoles, the gyroscope, the Apple Pencil, and other devices. Every element, including input fields and buttons, is described in detail across all supported platforms, ensuring consistency and ease of use. This enables developers to create apps that meet high quality and UX standards, enhancing the user experience with Apple products.

The HIG design system stands out from others thanks to the abundance of available resources for designers. The collection includes files for various platforms, including Sketch, Figma, Adobe XD, and Photoshop. While the organization of these files may seem disorganized, it's worth noting that Apple HIG files for Figma are regularly updated and are considered among the best in their category. These resources provide high quality and ease of use, making them indispensable for professional designers.

For a deeper understanding of UX/UI design, we highly recommend studying materials on the following key topics. These topics will help you master the fundamental principles of user interface design and improve user interaction. Studying these aspects will allow you to create more intuitive and effective designs, which in turn will increase user satisfaction and conversion. Pay attention to current UX/UI design trends and various testing methods to stay competitive in this rapidly evolving field.

In this text, we will consider eight useful websites for UX/UI designers. These resources offer component libraries, ready-made templates, and tools for testing user flows. Using these platforms can improve the efficiency of designers and streamline the interface development process. On these sites, you will find a variety of elements that will make it easier to create intuitive and attractive interfaces, and also have access to tools for analyzing and testing the user experience.

Google Material Design System Overview

Development Platforms: Web, Android, and Flutter. These technologies allow you to create high-quality applications for various devices and operating systems. Web platforms make applications accessible through browsers, which makes them universal and user-friendly. Android is a popular mobile operating system that supports a wide range of applications, and Flutter is a modern framework from Google that allows you to develop cross-platform applications with a single codebase. Using these technologies ensures rapid development and improves the user experience, which makes them an ideal choice for creating modern applications.

Launched in 2014, Google Material Design quickly gained popularity and established itself as one of the world's leading design systems. In 2021, its third version, Material You, also known as Material Design 3, was released. This update was a response to the release of new Google Pixel smartphone models and reflects modern design trends. The evolution of the design system can be explored in detail on the official resources m2.material.io and m1.material.io, where the key changes and principles that make Material Design relevant and in-demand in interface development are presented.

Material Design 3 is an updated version of Google's design system that emphasizes user experience and responsiveness. Key principles include improved accessibility, dark mode support, and the ability to customize the appearance of interface elements. Users can customize color schemes and fonts, allowing them to create unique and personalized apps.

Another important aspect is the use of large, expressive components that simplify interaction and make it more intuitive. Material Design 3 emphasizes flexibility and adaptability of interfaces to different devices and screens, ensuring a comfortable experience on smartphones, tablets, and computers.

Furthermore, the system incorporates principles of ecology and sustainability, reflected in the use of minimalist and lightweight elements, which contribute to optimized app performance. Material Design 3 also integrates new technologies such as animations and gestures, making interaction with the interface more dynamic and engaging.

The implementation of Material Design 3 contributes to the creation of a harmonious and modern design that meets user requirements and current trends in interface development.

• Interaction Fundamentals: accessibility, content design, customization, design tokens, states, gestures, layout.
• Styles: color schemes, depth, iconography, animation, shapes, typography.
• Components: from buttons and modal windows to various navigation solutions.

The Material Design team has made significant progress in uniting user experience (UX) and user interface (UI). The guidelines of this design system have become the basis for teaching interface design and developing usable, intuitive applications. Using Material Design principles allows you to create visually appealing and functional interfaces that improve user interactions with digital products.

The official website offers a variety of resources, including rules, libraries, and examples that will help you understand issues of varying complexity - from creating buttons to developing typographic tokens. These materials are intended to facilitate the learning process and increase development efficiency by offering useful tools and illustrative examples.

The main advantage of Material Design is providing detailed recommendations for choosing interface elements. This includes tips on choosing the right number of text styles and advice on avoiding common mistakes when using components in cards. This approach helps designers create more intuitive and user-friendly interfaces, making Material Design an indispensable tool in the development of modern web and mobile applications.

Design systems are becoming increasingly popular, as evidenced by the fact that the M3 Figma file has been downloaded over 500,000 times. Google's Figma page offers a wealth of resources to assist in the design process. These materials include templates, components, and tools to help you create high-quality, consistent designs. Using design systems not only speeds up the development process but also ensures consistency in the visual perception of products.

• UI kits for Android and Flutter;
• extended sets of adaptive icons;
• methodologies for visualizing dynamic colors, variable fonts, and many other tools.

IBM Design System: Carbon Design System

The Carbon Design System is a powerful open-source design system created by IBM in 2017. The eleventh version of this system will be available in 2023 and continues to evolve, offering improved tools and components for creating modern interfaces. The Carbon Design System ensures consistency and ease of development, making it an ideal choice for designers and developers striving for high-quality user experience.

Unlike other popular systems, such as HIG and Material Design, which are aimed at individual developers or small agencies, Carbon was created with an emphasis on the needs of large enterprises. On large-scale projects, the cost of an error can be critical, which is why the website has a "Contributing" section. This section contains important questions and answers for designers and developers regarding documentation, troubleshooting, and working with components. Providing high-quality support and accessible resources for Carbon users facilitates the effective implementation and use of the system in large organizations.

Carbon stands out for its specific examples of successful design system implementation in various products, including IBM Cloud and IBM Commerce Platform. The system also includes detailed sections dedicated to data visualization and interaction design, such as filters, forms, and states. These elements are especially important for products built using this design system, including SaaS, fintech, and business development. Implementing Carbon improves user experience and development efficiency, making it a relevant tool for modern IT solutions.

• accessibility;
• components;
• grids, spacing, and layouts;
• colors and depth, themes;
• icons and pictograms;
• typography;
• editorial style;
• animation.

Carbon covers the main design topics, paying special attention to the design of interfaces rich in data and actions. Unlike HIM and M3, which focus on simple design elements, Carbon provides detailed descriptions and recommendations for creating interfaces for large services. The included sections cover important aspects such as grids and their logic, making Carbon a valuable tool for developers and designers looking to create effective and functional user interfaces.

Figma files have been updated to the latest IBM version Carbon Design System. Core components and modules are now organized using the "variants" feature, allowing for the integration of different states into a parent component. This significantly speeds up the design process by eliminating the need to manually draw states for new screens. The update simplifies the work of designers and improves the efficiency of interface creation, ensuring faster and higher-quality project completion.

In Figma, in addition to the standard UI kit, users can use dark and gray themes. Extensive libraries of icons, pictograms, color palettes, and text styles are also available, providing design flexibility and enabling the creation of unique interfaces. These tools help designers easily adapt their projects to various needs and preferences, improving visual perception and interface navigation.

If you use Sketch in your work, you can find individual UI kits in the "Kits" section of the Carbon Design System website. This will help you effectively integrate design elements into your projects.

Fluent Design System from Microsoft

Fluent is a modern design system from Microsoft, created to facilitate interaction between products on different Fluent is a design system that works seamlessly across platforms, including web, iOS, and Windows. It seamlessly integrates components and simplifies the exchange of ideas, contributing to a unified and consistent user experience. Fluent helps developers and designers create interfaces that look and function consistently across devices, improving the overall accessibility and usability of apps. Understanding Fluent principles allows you to optimize development and improve the quality of the final product. The Fluent design system is aimed at ensuring simplicity and intuitiveness of the user interface. It offers developers the opportunity to use proven components that have been tested in various scenarios. This avoids unnecessary interface complexity and ensures a high-quality user experience. Implementing the Fluent design system contributes to the creation of a harmonious and convenient user experience, which is a key aspect of successful web design. Fluent stands out from other systems, such as HIG and Material Design, thanks to its clear and concise rules and guidelines for component use. Documentation for each page includes key characteristics, interaction rules, and accessibility aspects. Users can also access component code, specifications, and useful resources, including CodeSandbox and Fluent UI. This makes Fluent a convenient tool for developers looking to integrate modern interfaces into their projects.

The core elements of the Fluent design system include many components that help create a consistent and intuitive user interface. Key elements include color palettes, typography, icons, buttons, and interaction interfaces. These components ensure consistency in design and simplify the development process, allowing developers and designers to focus on functionality and user experience. Using the Fluent design system helps create responsive and accessible apps, which significantly improves user interaction with the product.

• colors and depth
• iconography
• layouts
• editorial styles
• animations
• shapes
• typography
• components
• accessibility
• design tokens

Updated Fluent 2 UI kits for web applications and iOS, including new icons and emoji, are available on the official Microsoft Figma page. In the latest versions, color styles and dark theme have been reworked into variables, which makes them much easier to use. The refactoring reduced the overall file size by 50%, which has a positive impact on performance and simplified the developer workflow. These changes make UI kits more convenient and efficient for creating modern interfaces.

Atlassian Design System Overview

The Atlassian design system, created to support well-known tools such as Jira and Trello, was launched in 2012. This move followed the introduction of Apple's Human Interface Guidelines. Since then, the design system has undergone significant evolution, becoming one of the most comprehensive in the world. Effective application of this system improves user experience and enhances the usability of interaction with the company's products.

Atlassian, like other leading technology companies such as IBM and Microsoft, is focused on developing high-load products capable of processing large volumes of data. To achieve high standards of quality and interface consistency, development teams located around the world adhere to strict rules and guidelines. This allows for the creation of reliable and effective solutions that meet modern user requirements.

Working with the design system will be more effective thanks to the clear instructions and recommendations provided by ADS (Atlassian Design System). This system covers core design principles, best practices, and interface components that will help you create a consistent and intuitive user experience. ADS offers resources to streamline the development process, including guidelines for colors, typography, and design elements, helping you create high-quality, usable products. Using ADS, you can speed up the development process and improve user interactions.

• Components;
• Branding;
• Editorial style;
• Icons, patterns, and illustrations;
• Animations;
• Typography;
• Grids, layout, and spacing;
• Accessibility;
• Colors and shadows.

Atlassian design system components enable the creation of complex user interfaces with a high degree of simplicity and usability. They make it easy to implement elements such as avatar groups, dynamic tables, and rich forms. Using these components can significantly speed up the development process and improve user interaction with the interface.

ADS design tokens are in the testing phase and are already available to users. These tokens contain important information about their purpose and usage for both designers and developers. You can explore the available files and API on the official website, allowing you to effectively integrate design tokens into your projects and improve collaboration between teams. For front-end developers, a beta section dedicated to working with primitives, flexbox, and grid systems is available. This section also includes resources on xCSS and answers to frequently asked questions. This resource will help developers deepen their knowledge and improve their skills in web development, providing access to up-to-date information and practical recommendations.

The Atlassian account on the Figma platform contains key design system files, which Provides convenient access to current styles. In spring 2023, all styles were updated with variables, significantly simplifying the development process and improving design management. Using variables allows for more flexible customization of interface elements and maintains consistency across projects, which is especially important for teams working on large products.

Subscribe to our Telegram channel to stay up-to-date on current design trends. We regularly share interesting materials that will help you get inspired and improve your skills. Don't miss the opportunity to be among the first to learn about new developments and useful tips in the world of design!

Additional study resources are an essential tool for deepening knowledge and skills in various fields. These resources may include online courses, webinars, articles, books, and videos. Using additional materials helps expand your horizons and improve your professional skills. We recommend seeking out trusted sources of information that offer up-to-date data and practical recommendations. It is important to regularly update your knowledge to stay competitive in a rapidly changing world.

• What is a landing page?
• Tilda website builder: how to create your own website from scratch.
• “A clear structure is more important than a beautiful design”: how to build a business on presentations.
• What is a brand book and how to use it?
• What are guidelines and what are they for?