Design Systems

Design Systems

What are the interface components of your new web application/website? How does the visual brand apply on them? How do they fit together? How do they adjust in different screen sizes? Are there any restrictions? How do you introduce new elements?

These questions are vital to any project that involves getting users to perform actions through a digital (web or mobile) interface. They are vital for 2 main reasons:

  1. Your users need to easily make sense of the interface they use while interacting with the product.
  2. Your developers need to have easy access to (and make sense of) all the UI components available.

Digital interfaces are made of layout (page) templates. These templates are populated with content areas (text, media) and interactive elements (action buttons, UI controls). Different page templates have different purposes so they may use different  components. For example, “contact” pages need different UI components than “user profile” pages. This type of information is provided by the Design System applied on your application.

 

Design Systems - Content Interaction

Design Systems – Content and Interaction

 

Digital interfaces are also functional, so they need to work while looking good. Or look good while working. All pages and components of a digital product need to maintain visual consistency and provide the expected functionality in a meaningful way. So a Design System needs to be more than a “library”of components: it is also how we can use them as building blocks to create interfaces that are clearly articulated (user-side) and easy to maintain (developer-side). We need to carefully “orchestrate” and fine-tune all the participants of the visual composition presented to the user and make their role visible: this is an important notification, this is an action button, this is text content etc.

Need to know more about Design Systems? Ask me.