Your digital project needs a design system

A design system is a complete digital design kit that defines the design principles that any given digital product or website should be built on. It defines design from the smallest elements (text, title, forms) to grid systems, color schemes, blocs or components, but can also be pushed further with animation, interaction, micro copy rules and key design principles.

On a technological aspect, it can be presented as a visual guideline. It can also include code snippets (HTML/CSS/JS) and define coding standards for front-end developers.

You should build your design system

Building a design system is always a good idea but if it is easy to see the benefits for design and front-end teams of products such as Uber, Google or dropbox, it is also beneficial for smaller and medium businesses and even for a personal project.

Defining a design system can take time and resources, but it empowers a better brand recognition. It unifies the user experience on multiple touch points and devices, and allows teams to build faster better products. It simplifies maintenance and debugging as the team knowledge grows.

If you work as part of a large team, it will empower you to set clear rules, to define common systems of navigation, components structures, user flows, etc. User experience will gain from consistency and the learning curve from your users will accelerate. One test will benefits multiple flows and these other flows can concentrate on learning on their specific UX problems.

If you are a small team, building your design system doesn’t need to be has detailed, but documenting your design decision will empower you to have a clear structure to build on top of, even from a single page website.

Concretely this is how a small team can start

If you still think your team is too small for that, let me give you a clear walkthrough.

First, let’s not reinvent the wheel, start by selecting an open source framework and by being consistent in their usage. The most popular are bootstrap and foundation, but any framework is a good start. You do not need to spend time coding an entire set of HTML, CSS and JS to have a technical backbone for your design. To reduce their footprint, start with the smallest set of functions and activate the ones you need when you need them.

Then let’s move to design. Start with brand guidelines: logo, fonts, colors, a set of icons. Then start designing from the bottom up: HTML elements first (titles, text, list, buttons, forms, … ), then navigation (menu, navbars, call2action, …). Try to create design elements that add sense to your design, and that convey the brand messages.

The next step depends on your digital product content, so start by making a quick inventory and define each component you need: cards, carousels, tabs, modals, alerts, etc … Grow piece by piece with the big picture in mind. Once there, you are set to start using your design system on your project(s).

You will then gather feedbacks using this design system and its components. If you need to refine and improve it, do so with small iterations. This will allow you to gain in design quality instead of reinventing your design every two years. Test and learn from your users, and grow in your design knowledge. And once in a while, whenever you start feeling limited by your design system, dive further into it, put in question your framework backbone, start defining your own set of rules, or even better, start coding your own to allow you to move forward.