Using pizza to explain design systems
The relation between basil and buttons
My best friend loves pizza. He loves it so much that he uses it as an analogy for everything. If you talk to him about life, he would probably say something like, “life is like pizza, even when it’s bad, it’s good, because you will learn something”; Or if you ask about opinions, you would probably hear, “well, opinions are like pizza flavors preference. You have yours.” And so on.
And since it works for him, I thought I should try.
Invision has a straightforward way to describe what a design system is:
“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.”
Now, take a look at Wikipedia description for pizza:
“Pizza is a savory dish of Italian origin consisting of a usually round, flattened base of leavened wheat-based dough topped with tomatoes, cheese, and often various other ingredients (such as anchovies, mushrooms, onions, olives, pineapple, meat, etc.)”
Every design system has its own rules and components. It has to adapt to the product they are designed for. And pizzas will also vary accordingly to the place they are made and for whom. But in the same way, all design systems have things in common such as styles and standards with their characteristics; all pizzas will have a dough, tomato sauce, and cheese that can vary in the amount, type of tomato, or composition of the base.
Let’s use a card component as an example.
A card can have multiple variations. Again, it will depend not only on the product but also on what you want to show or communicate. But the basis is almost always the same: A shape usually with a text and an action. Pizzas are typically composed of dough, tomato sauce, and cheese. In the same way, cards are usually square; pizzas are usually round. But you can find round cards and square pizzas. It’s not typical, but it can happen.
Pizzas can have toppings that you can combine in different ways. You can add one, two, even ten ingredients. Just let your imagination (and hunger) decide. And the cards’ content can also vary depending on the goal. It can have just an explanation text, but also images, icons, titles, prices, tags… The sky, good sense, and best behaviors are the limits.
If you go deeper on this, you can find even more similarities. As you can have different pizza sizes, you can also have various sizes of cards. As you can have a pizza with thin or thick dough, you can have more, less, or no elevation in your card. As you can have green, red, or yellow bell pepper on your pizza, you can have different colors for your buttons, icons, or text.
Well, I think you got it.
Some pizza analogy maker virus probably contaminated me, and I’m not sad about it (just hungry). I hope it made sense for you and helped you understand. Or at least that you had fun as I did. Please, let me know if I forgot some correlation between pizzas and design systems. I would love to hear from you.
And, as my best friend would say: “pizzas are charts in real-time” 🤯
(no analogy here. just think about it)
