15 April 2019

Creating Better Experiences With Design Systems

Design
Frontend

Design systems may sound like a trendy word but foundations for this kind of thinking has been around for as long as people have been creating things. Egyptians had clear rules on how things should look painted, ancient civilisations can be identified by their tools and ornaments, and different architectural styles all have their characteristic elements. In 1977 a famous book called "Pattern Language" introduced an illustrated architectural pattern library that can be considered the first ever documented design system.

Nowadays we build online services and the idea of design systems is as important as ever. Just like a building consists of hundreds of parts, a website consists of hundreds of components that each have their own purpose. You may have noticed that on some sites the components work well together and their purpose is clear. On some sites - not so much… Design systems help us build sites where all parts serve their purpose and create a fluent, meaningful experience.

Design system enabling effective development

The idea of a design system is to document all parts that form the site’s or service’s interface. Just like any development work, building a design system is an iterative process. Some parts will be removed, some need to be added and existing ones need to evolve. But having your system documented makes this work easier and reduces the risk of creating duplicates or losing something valuable.

There are different ways of building, categorising and documenting a design system, and the main thing is to find a way that works for your team. Whichever approach you choose, the system usually covers all functional and perceptual patterns that form the interface. Their attributes are described in a way that is directly usable for developers. This saves valuable time and resources in the development phase.

But a good system is also much more than a catalogue of patterns. It increases the team’s understanding of the service they are building and creates a shared language that enforces the project’s goals and principles throughout the development.

Functional patterns – the building blocks

Some call them modules, some call them elements - functional patterns are the site’s building blocks like buttons, lift-ups and progress bars. They make the interface tangible and help the user accomplish a certain goal. These patterns can be split into smaller parts, eg. a lift-up could be split to image, header and link. A link consists of colour, font and animation. This is a good example of the atomic design principle where smaller building block, atoms, are combined to bigger particles and so on.

Much like buildings, websites consist of elements that can be reused and combined in different ways. Use of these elements must be consistent in order for the user to navigate the site effectively.

Perceptual patterns – the look and feel

Perceptual patterns are patterns that form the site’s look and feel. They include the use of colour, space, animation, typography and iconography. They play a big part in creating a quality experience where visual attributes guide users towards their goals. In other words, your site will have colour, typography, etc. anyway. Whether they are what you intended and help achieve the goals you’ve set, depends on how well they were designed and implemented.

Two buildings can be made out of similar materials but look very different. Same goes for websites, and design (or the lack of it) determines how well the look & feel supports the site’s purpose.

Start building your design system early

Together functional and perceptual patterns form the experience of a website. On bigger sites, there could be dozens of patterns but design systems help us keep the experience consistent and manageable. A design system also makes it easier to expand an existing site and share knowledge when the project team grows. With all the benefits in mind, it makes sense to start building a design system as early on in the project as possible.

Ota yhteyttä