pt tap talk teknologi blog

10 Steps to Build Your Own Design System

By Ardian
18 / 11 / 2020

Design is not easy to expand. Design is a system that requires driving elements. It will be just an “empty entity” that must be filled by “something” so its existence is recognized. It has become a huge part of companies to make them stronger and successful in this competitive digital market.

Improving design through work, without setting standards, is a myth. With each new promise, new ideas for color palettes, typography, and patterns emerge in the product, increasing diversity and increasing maintenance costs. Each new employee increases design entropy. There is only one way to stop the growth of this chaos. A commitment to run a design system

A design system can help by scaling. Design can scale, but it can only scale with design system.

The design system is now very popular. Why? Because it is effective like everyone says it will be. Applying a design system to your business will bring a lot of benefits:

  • Faster time to market. By dividing design elements into homogeneous components, you will gain more efficiency with the design system. Planning, design, testing, and coding have been simplified to reduce wasted time.
  • Improved user experience and customer satisfaction. They make it easy to keep track of what the user likes and dislikes while keeping the former and ignoring the latter. This ensures that all of your products use only the UX elements your customers love.
  • Better intercom. As a standard document, the design system reduces the number of miscommunications. They keep everyone on the same page to avoid confusion.
  • Consistency across all products. The design system offers consistent quality and familiar uses on every product using identical ingredients.
  • Fewer issues with version control. Updating the same error on a different product can be annoying, not to mention a waste of time. With the design system, you update once and fill in all duplicates.

10 Steps to build design system

1. Evaluates current UI inventory and note differences

To start a good design system, it is best if you evaluate what you already have. In this aspect, consider which element will be the best, and which part do you want to replace? Try to find differences and inconsistencies between your products or pages.

A few elements that you need to pay attention are color schemes, how every color is used, Stylistic text choices, photo libraries, icon libraries, UI patterns, page templates, and other graphics.

2. Prepare your team to be onboard

You need a team to implement and manage a design system throughout the product design cycle. For most design systems, teams need front-end designers and developers. Start by identifying the skills you need and then identifying the people who have them.

3. Establish principles and rules for the design system

The design system is a system of values shared throughout the design system. This includes the techniques - CSS in Javascript or something else - that you will use to write your design scheme; How will you distribute the design system; And if you're going to use one of your digital products as a starting point for the system.

4. Color palletes

Color is an important aspect because it can impact all of your work. Decide on the hue and color for each of the colors you use most often, and write down final instructions on how to use them. Of course, this includes your primary brand colors, but also pay attention to your secondary colors. For example, what color is your text? Your link? Special keys? Background?

Be as detailed as possible when writing your code. Check out your own design style to fix any problems you might encounter while testing the color palette in the product UI.

5. Typographic elements

Now, you would want to review and finalize your typographic choices. Design systems can be more technical than static pattern guides, so take advantage of that. Note your preferred text size, spacing, font, etc., as well as any rules about where and when to use it. For example, how big is the section title in your blog post? What fonts do you use for an on-site call-to-action?

Don't ignore subtle details, like line height, font weight, or custom kerning rules.

6. Graphic design assets

The well-designed design system allows you to directly drag and drop visual components into your new prototype. The more graphic design assets you collect in your design system, the faster you can progress your work for future projects.

Don't forget to include any appropriate code snippets or documentation that the developer might need. These small aspects will be useful during the development stage.

Within all your graphic design assets, you will need libraries to implement: icons libraries, photography libraries, illustrations, and branding images.

7. Standardize Other Style Properties

Design decisions also include complementing grid patterns and other characteristics not covered in the previous section, such as spacing. As with the other components of your design system, here, standardization also aims to remove inconsistencies.

8. Build the First Design System Pattern

Don’t focus on building all the patterns in one go, because building design system pattern can be an iterative process. Build it one by one by identifying the best architecture for your pattern library.

9. Run a Sprint Retrospective

Sprints can be a great way to ensure fast learning across teams. All product teams should set up regular retrospective sprints to analyze progress and make necessary improvements. 

10. Conclusion

All of the steps mentioned here will provide you with a set of design guidelines that promote a consistent design language. Don't think of a design system as a project. Instead, treat it as an ongoing process that requires rapid iteration.

Trial Akun Demo TapTalk
Share this article

Related Posts

By Ardian

25 / 08 / 2020

Customer merupakan sebuah aset berharga yang harus dijaga dan diprioritaskan kebutuhannya bagi sebuah perusahaan. Fakta yang harus dihadapi adalah, sebuah perusahaan tidak akan bisa berdiri tanpa customer sebagai sumber revenue-nya. Disinilah, peran kita sebagai sebuah perusahaan bekerja untuk selalu memberikan pelayanan terbaik bagi customer. Tentu, menjaga pelayanan agar tetap baik adalah hal yang sulit untuk […]

Read More

By Ardian

17 / 07 / 2020

Increasing your business growth might take a considerable amount of effort. First, you have to spend some time to get your marketing sales up. Moreover, you need to study your financial statement as well as other corporate compliance. When you have just started your business, you might find difficulties in managing your company. However, by […]

Read More

By Jessica Jacob

26 / 05 / 2023

Action plan yang dirancang dengan baik dapat memudahkan Anda melacak dan mewujudkan tujuan Anda.  Baik untuk karier, bisnis, atau tujuan pribadi, Anda dapat menggunakan action plan untuk membuat jalur yang jelas menuju kesuksesan. Tingkatan detail dalam action plan Anda dapat bervariasi berdasarkan sumber daya yang Anda miliki dan kompleksitas proyek atau tujuan Anda. Mari kita […]

Read More
1 2 3 54

Reach us by phone at (021) 27939266

Business Park Kebon Jeruk blok C2-3, Jl. Meruya Ilir Raya no.88, Kebon Jeruk, Jakarta Barat, 11620

© 2020 - 2023 (PT Tap Talk Teknologi)

tap talk logo for footer