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. More than a body of knowledge, a design system is a way of thinking that allows designers and developers to work better together, improves communication between teams, and helps organize components 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 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 avoiding costly mistakes.

I present a semantic naming convention for all components at the design phase. My nomenclature is influenced by BEM in CSS, semantic HTML, and 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' 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 cornerstone for a good user experience, and that concern should be handled in the design stage. I work with my team to create a performance budget and seek 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.