Scroll to top

Let’s talk

Design Systems.

How Design Systems Benefit Branding, Business & Design.

From a business perspective, we want low cost, time efficiency, and scalability. From a design perspective, we want unity, flexibility, and usability. From a branding perspective, we want a solid brand that is represented as intended.

What if I told you that all those goals can fit together into one design solution? It sounds like a big challenge, and it is. But in the end, all goals can be met. Let’s continue to what a design system actually is or can be.

What is a design system?

A design system can have different shapes or sizes depending on the application. Overal you could characterize a design system as:

a collection of brand materials, facts, and declarations. Linked to ensure a unified design language or brand communication“.

What a design system is, depends on the size and use. It can start small with a collection of the style guide, design elements, and views that are used to create a unified design style over multiple devices. But it can also scale to a system unifying different products, brand values, brand communication, app, and websites. From design only to development, research, communication, and marketing included.

graphical display of design systems

How is it structured?

The power of a design system is in its structure. It goes from small to big and by that links all parts of the design to the core business values. These are possible components of a design system for an app.

Materials.

These are the base materials that are usually defined in styleguides of a brand. For example brand colors, typography, icons, tone of voice, etc.

  • Colors
  • Fonts
  • Logo’s
  • Icons

Elements.

These are small elements of design that use materials. For example different kind of buttons, avatar blocks, breadcrumb buttons, etc.

  • Buttons
  • Avatars
  • Message Blocks
  • Navigation Elements

Objects.

These use different elements to create objects that can be implemented in a section. For example a full breadcrumbs navigation, slider navigation, filter options, etc.

  • Filter Blocks
  • Sidebar Items
  • Widgets
  • Breadcrumbs

Sections.

These are full sections that are used on several views/pages. For example different headers, a login form, a sidebar, a navigation menu, the footer, etc.

  • Header
  • Footer
  • Sidebar
  • Navigation Menu

Views.

These are views that are built up from different sections and objects. Think about the homepage, about page, blog index, shop detail page, the login page, etc.

  • Home Page
  • Blog Page
  • Blog Detail Page
  • Checkout

start a project

Let’s talk.