As technology continues to improve our daily lives, the advantage that is provided for using it is created around systems. There is literally a structured list of life hacks in order to gain the upper hand in one way or another. This is not industry nor discipline specific as there are many approaches to arrive at any single end goal. Whether it is for feature improvements to a mobile application or a resume, using frameworks to deliver high-end results is the name of the game. This is precisely where the right design system can lead you into the right direction.

 

What A Design System Is Not

If you were to take a poll, people may have a different perspective on what they think a design system is for a mobile application. Some have associated it with the colors of a project while others relate it to the tools used to make a digital asset. I can write an entire book on the responses and connections of thought that people have with it but that is for another day. As we discuss more about what a design system is, here are some things to take note of that illustrates what a design system is not: 

  • A design system is not a set of tools that you’ll use to create your designs
  • Design systems are not a directory of design assets
  • It is not any layout or web view that is a design system

Understanding what a design system is not, helps outline the structure and purpose of why having and/or creating one is important.

What Is A Design System

A design system for a mobile application is a collection of reusable design elements and standards that guide the aesthetic and product feel. It includes elements such as typography, colors, iconography, grid definition and more. Several advanced items related to navigation, interactions and data visualization may be found there to ensure consistency across the various views of the application.. 

In doing this, the coherence of patterns will improve the overall user experience making it easier for users to move through the product. Providing a visual language that adheres to the principles of the system can save time and effort. Resources can be reduced as the pre-defined elements can be reused and scaled. This can greatly increase the speed of the design and development process, moving the product closer toward public deployment. 

Additionally, a design system helps with collaboration between designers, developers, and other stakeholders. By having a shared set of design elements and principles in a single location, everyone involved in the project can be on the same page and work together more effectively.

Now that we understand what a design system is, lets identify a few design system examples to help you get started in developing your own.

 

 

Google’s Material Design 

Since its widely acclaimed position in the internet search space as well as Gmail and other products, Google is one of the larger tech giants to make note of. Within its Material 3 Design Systems website, one would find a wealth of information on styles, interactions and more. Find everything from Android kits, code snippets and everything else to really analyze a world class system which keeps the Google name running strong.

 

 

Apple Human Interface Guideline (HIG) System

While Apple continues to deliver successful products, year over year with innovative technology, they’ve put together documentation to help design for these devices with ease. The Developer Human Interface Guideline, is a hub that grants anyone looking to design for iOS products, the direction to get started. From Apple’s design philosophy to its iOS design templates, studying these will give you a leg up on the intricate things that go into creating a successful system for your product team.

Atlassian Design System

Being a heavily developer focused organization, it was a pleasant surprise to see the amount of usable elements included in the Atlassian Design System. With accessibility considerations, brand and items for tokenize design scaling, one could appreciate the content shared on this internal website. Although some sections are still in beta state, the organized display of these components would make any development pod proud. 

Implementing a design system for a mobile app requires careful planning and attention to detail. It is important to involve stakeholders from all areas of the project to ensure that the design system meets the needs of the product team. To start developing a design system, it’s best to make a list of all the common elements of the app, aligning with the company’s brand guidelines, product components and experience and pair them with development. In doing this, it will become a vital tool for establishing the consistency that any results driven team needs.

Check out the following video for a look into some of the design system examples and what to look for when you begin creating your own. 

What Is A Design System

Your life has color, so design it that way. AD

Anticio Duke

Anticio Duke is a serial entrepreneur, inventor and product designer based in Chicago, IL. Known as Duke, he transitioned from a successful product engineering background to digital product software design. Bringing a wealth of knowledge to the digital space, he serves as a product design strategist for agencies and Fortune 100/500 companies; bridging the gap between consumer hardware and digital products. Currently, he leads as Chief Product Strategist at WDI Studios, an innovative creative agency focused on product delivery and education for mobile application design, gamification and voice user interfaces.