Techniques like responsive design and the fracturing of websites into different versions targeted at different devices has made the workload for designers grow. By having a design system built for your website you can increase the consistency of the design, deliver content more effectively, and reduce the future costs of expanding a site.
The old approach of design pages
For the majority of web designers and web agencies, the usual approach has been to tackle a website page by page. For each page, a mock-up is created and approved by the client. This approach was never really great, but it is now becoming very clear that a better way is needed to keep up with what is happening on the web. Here are some of the areas where designing page by page is starting to fall short:
- For responsive design, it would seem logical to produce mock-ups for each screen size, but that could mean producing two or three mock-ups per page which makes the process more expensive.
- When each page is concentrated on in isolation, it can be hard to maintain consistency across the whole website. It’s almost impossible to keep things like spacing between elements consistent between different design files and if mock-ups are handed over to a separate developer, these inconsistencies can be built into the final website.
- Future work on the website can become inconsistent, because there is no central place to reference for rules about the design. Once again, if previous design files are used as reference, inconsistencies can be carried over.
- There is often the expectation that each page needs to be something special and unique.
A better approach using a design system
While some of the issues mentioned above can be mitigated by a well documented style guide, most style guides are too general and don’t provide strict enough rules. If the style guide is very detailed and provides rules for implementation and future additions, it’s a design system.
Instead of focusing on each page in isolation, a design system breaks up the content and identifies different, reusable modules and elements. When the focus is on the content it’s easier not to get carried away with designing for the page, which leads to more effective design. Here are some of the benefits of a design system:
- A design system forces everyone to think more about the content, instead of judging just how a page looks. By considering each module of content or element on its own as well, the design for that element will be more effective.
- By designing and building modularly, the designs for each module of content or page element can be combined into a style guide. It’s easier to maintain consistency when lots of modules can be viewed together, instead of spread across different pages. This makes adding new elements to the site easier to keep consistent as well.
- Focusing on elements or modules of content makes them more reusable and flexible. This is particularly important for a responsive site, where different screen sizes might benefit from different orders of content.
So if you have experienced any of the issues that can come from designing page by page, a design system could by the right way to go for you.