My work methodology

 

A design system is a strategy for web design and development, in particular for large and complex digital products or products that will rapidly scale.

A design system is more than a body of knowledge. It’s a way of thinking that allows designers and developers to work better together, while at the same time improves communication between teams and organizes components for easier use in complex interfaces.

As the digital landscape rapidly evolves, we can rely on design systems to future-proof our digital products, increasing collaboration and exchange in the design-development workflow.

 

 

 
layers_1_labels.jpg

Decision-Making Knowledge

At it's core, a design system shares decision-making knowledge, improving the ability of individual team members to make consistent informed decisions throughout the digital experience. 

Some of that decision-making knowledge might include:

  • Background information that provides transparency and context about past design decisions.
  • The agreed upon basis for the project's user interface design: color palettes, space variables, and established patterns among others.
  • Known limitations that will affect future design decisions, for example the performance budget allocated for fonts and visual assets.
 

Artboard_2_labels.jpg

Living style guide

Another point of reference within the design system is a living style guide, which is a well-documented user interface library in which all existing components can be seen at a glance (both in isolation and in varied configurations). As the digital experience changes, so should the living style guide also adapt. 

Being a single source of truth, it helps avoid inconsistencies with common styles (e.g. forms, buttons), UX patterns, and animations to name a few.

Components are organized and categorized using Brad Frost's Atomic Design model, which borrows Chemistry concepts: simple components are atoms, those come together to form molecules–more complex components, and so on.

 

layers_3_labels.jpg

scalable design

As the components in the existing user interface are categorized, they are also refined to scale: the user interface is re-created in an abstract and flexible manner, so that it can be reused with different kinds of content, and arranged with other components in countless configurations. 

When user interfaces are designed to scale, there is more focus on detailing each of the components throughout time, increasing the long-term quality of the interface, and helping businesses release new features more quickly.

 

There are a few key things that help
with the design of a successful system:

 
 

Speaking the same language

Naming components can be difficult. However, using a nomenclature that the whole company embraces and actively uses (design, technical specifications, content creation, customer service etc.) can save time and money by increasing clarity in internal communication.

Effective nomenclature is influenced by the popular CSS naming convention BEM, semantic HTML and established design systems such as Google’s Material Design.

 

Modern technique

Staying up-to-date with software and technique is as important as establishing clear communication within a team. Using modern component-based design software (e.g. Sketch) allows for design teams to work efficiently and consistently. Communication and handover tools that allow for a single source of truth (e.g. InVision) help keep everyone on the same page.

Variables for everything

Using a specific set of variables for color is relatively common, but the concept can really take off when used for other things such as space between elements. The use of a limited set of variables for space also improves consistency throughout the experience. 

I'm a big fan of Nathan Curtis's system, read about it in his article: Space in Design Systems.

Looks good, from the inside out

 

My experience as a frontend developer helps me understand how to create design files that are truly useful during the handover. Organization of layers, naming conventions, and performant asset handling matters greatly to me.

 

 

Performant design

A fast and performant website is one of the cornerstones of for a good user experience and that concern can start to be handled in the design stage. I work with my team to create a performance budget, aiming to keep my assets' weight low.

Making products that everyone can use

When products are made with accessibility in mind from the start, a higher percentage of people can become users. Accessibility also has usability and SEO benefits, and is increasingly becoming the law (and already is in some countries).

Read about accessibilty

Component-based

I understand HTML, CSS, & Presentational JavaScript. This experience gives me a solid background for designing component-based user interfaces.