Design Systems

Remember Design Guidelines, the monster pdf, outdated as soon as soon as it became available? Or what it was like trying to get it updated? Or how the guideline would translate to actual components in an evolving frontend framework?

Once a Design Guideline falls behind app development it will have lost its initial reason to exist.

Design as part of development

There are a bunch of things that have an effect on design, from the individual app level all the way up to the brand itself. But, these things move forward - they change. And that is how they should be, that's sort of the point. Design and related docs should develop along with them.

The end user always comes first. At the same time, design needs to conform to UI conventions and to what is reasonable in the frameworks and libraries in being used. Brand and positioning also need to be in the mix.

Design Systems are living documents where everyone dealing with these things are able to contribute along the way. They are a modular catalogue of patterns, components and style combined - based on actual needs.

Design Systems are not a deliverable, they are a process. It's all about simplicity and reusability.

Custom Systems

Here's some good examples of well-developed Design Systems:

• Salesforce's Lightning
• Lonely Planet
• IBM's Carbon

Now, these examples are by enterprises with big teams. How would one start from scratch, then?

To frame it in the simplest possible way, a good start would be to identify a component. That component then needs some patterns, rules, style, code snippets, stuff like that. A quick note or copy-paste if whatever exists at the time is plenty. That goes into a shared document and boom - we will have started a Design System.

Things like colour, iconography, typography and such like span across components. This is the more traditional "Brand Guideline" type material. Existing guidelines can be adapted or new ones created, it just needs to stay focused and compact.

Existing Systems

To minimise the overhead of accessing a Design System in the case of MVP's for instance, an existing generic Design System is a good starting point. This enables tapping into ready-made patterns, complete with components, code and customisable styles. Our favourite is Material Design, which has great libraries for Angular, React and Vue.