Booklet

author

Elias Serrano

Design

How To Build A Design System

design

Design

|

How to Build a Design System?

No 01
Why building a system?
Designing can be challenging & time consuming as projects grow & extend into different new ideas. A design system will help an organisation stay pro-efficient on design tasks by building patterns. components & processes that highlight the main brand's identity. This is what we're going to cover:
- The blueprint book
- Content standards
- Design Elements
- Components
- Patterns

No 02
The blueprint book
A blueprint book is just another word to say branding guideline. This resource book serves as a guide to keep consistency & clarity into most design decisions. A great example of a design system blueprint is Polaris from Shopify. Their system is divided into 4 main categories:
- Content standards for a design language
- Design elements showing colors, font, icons, etc.
- Components presented into lines Of html/css codes
- Patterns for layout examples

No 03
Content standards
The content standards are general design rules implemented to help you understand the language and the thinking strategy behind your app or product. This guideline will also give you a clear. tactical suggestions on how to build better experiences with a consistant design language. This process will help your organisation deleguate design work to new hires.

No 04
Design elements Design elements are the core rules Of a branding identity. They serve as key assets to almost every design created under the same design system by letting the design reuse the same elements for consistency. Design elements include:
- Logo
- Colors
- Typography
- Illustrations
- Icons
- Sounds. etc.

No 05
Components & Patterns
Components
Components are interface elements that are repeated across every visual system. Creating a components library can help the developer & designer quickly create better experiences.
Patterns.
Layout patterns provide a comprehensive way to arrange content in a screen. They mostly are the compilation of Components in action. For example: a contact form is a layout pattern that show how to organize elements to build a form.

No 06
Where to star?
The true intention behind a design system is to facilitate & accelerate your job.
An easy way to create a design system is to organize every design elements & components in a UI/UX platform like Adobe XD. You can then save your project and share it for development. This way you can have access to all your design assets in one place.
You can also add more screens to further explain your content standards & build a blueprint book in one place.

More booklets by Elias Serrano

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets