Nature has Fibonacci, we have Design System
By: Praveen Kumar V
Tags: Fibonacci, Design, Web Designer Developer, Learnfromnature, Design Systems

Fibonacci -what a wonderful concept! Fibonacci is a sequence where we get the next number by adding the last with its previous one. The sequence goes like 0,1,1,2,3,5,8,13,21 …

We can observe this sequence in almost all natural formations. See this beautiful formation from nature in the image below. You can read here about how you can find this sequence in those petals.

Photo by Christian Lambert on Unsplash

I want to draw your attention to the first two digits in the sequence, zero and one. They need to exist first to make this sequence. The smallest petal - the basic one - should be perfect for a beautiful flower.

When we build large and more complex systems, we make the smallest components first. Combining many of those components, we make a little more complex ones, and so on. A classic example is atoms, molecules, cells, and organisms. If you observe the flower, each petal is like the smallest one.

The advantage of this method is that we do not have to reinvent the basic building block when we are building more complex parts of the system. We can pick and choose the ones we already made and assemble them to make the next part.

A design system is your “zero and one” in design as well as development.

A design system consists of typography (font) and colors. We combine the colors and typography to make our headings and paragraphs (<h1>, <p>). Then we combine those headings and paragraphs to make our landing page and contact us. I hope you can see the evolution. For simplicity, let us consider only headings and paragraphs to analyze the concept further.

When we follow this method, we can think in more abstract terms. When we design a page, we can drag and drop those headings and paragraphs to make our ‘testimonials’ and ‘contact us’. We do not have to think about how many pixels should be a title and how many pixels my body text.

For a developer, these rules can go into a basic style sheet. He can concentrate on building the page than adjusting the pixel size of an h1 tag.

A Global style-sheet can boost up developer productivity

This method can seem boring to many. If we are only combining what is already there, where can I show my creativity?

Now think about the opposite scenario. Out of creativity, when you design a page you adjust the heading size matching that page, use the colors perfect for that page, and at the end, you have created the best page. Now you move to the next page and continue the same process. In this process, even though the outcome can be adequate on an individual page, you are more likely to receive comments like

There is no consistency in the application.

You take a lot of time to design each page because you are reinventing the wheel every time.

It is hard to develop because the developer has to hand code each page separately.

The overall result will be a confused user.

On the contrary, you may not receive many comments when you follow the Fibonacci design system. As they say, “good design is invisible.” But you will feel the following while you work in a Fibonacci way,

The speed with which you progress through the project.

The clarity in thinking, because you can concentrate on the big picture of solving a customer problem.

Consistency in the application.

Let’s learn from nature. Practice doing it incrementally.