Product design is a field that relies heavily on creativity, but your creative flow needs practical support. The truth is, it’s a rather complex combination of several fields, including the scientific ones. It might surprise you, but math is one of them, albeit it’s often forgotten. However, math is needed in many jobs, even when it’s not obvious.

And when it comes to product design? Starting with the simplest concepts, math will surround you from day one. Visualization is incredibly important to succeed as a designer, and you will need basic math skills to create credible visual explanations using computer programs (and don’t forget that computer programs themselves are based on math). You will need to understand measurements and perspective, as well as get yourself familiar with the golden mean and color theory. Yes, math is present in color theory, as it is based on light frequencies — I bet you didn’t know that. And of course, you’ll need math to run your business as a digital designer. Your percentage of potential profits, how much you’re going to charge your clients, the resources you might need — there’s a lot of accounting, and accounting means a lot of math.

But don’t worry, there’s no need to revise your high school math program. You can focus on the most crucial topics instead — and yes, you’re still going to become a better product designer. Now that we’ve established that indeed, you need math in the product design field, let me introduce you to some basic concepts that you might want to get yourselves familiar with. No advanced math knowledge is needed to understand them — they’re all pretty simple, and they can set you up for further studies.

Base Unit

Base Unit is something you’ll be using all the time in your design process. When you just start a new project, it will be set up to keep the spacing and sizing consistent, usually with a value of either 4px, 5px, or 8px. The sizing of all elements you’re going to use should be multiple of the said base unit, i.e. if your base unit value is set at 4px, your components’ height could be set at 12px, 16px, 28px, 52px, and so on. The same goes for the spacing between the various components — the key to making it all work is to use the consistent spaces between the components of the same category as well as between the screens of the interface. Of course, you should always keep in mind the multiple rules. It’s not that difficult at this stage, but you’ll probably want to refresh your multiplication, division, and proportion skills to make the process run smoothly and efficiently.

Grid System

Speaking of efficiency, to achieve an organized design and assure your components’ behavior, you’ll probably want to use the grid system. You might be surprised, but the grid system has been in use long before the concept of digital design was born — it was first used in print layouts [1], and today we’re successfully applying it to product design. The grid system will allow you to align all the various elements using the sequences of the three components of a grid: columns, margins, and gutters (space between the columns). Both margins and gutters are multiples of base units, sometimes even matching it in width — so as in any other case involving math, it’s important to learn the concepts gradually.

The next thing to remember is the percentages because columns aren’t defined by fixed values. Using the percentage system allows the columns to adapt easily to any screen size. Your content is then placed in the columns, so that each element has its place and will be reproduced in the exact same spot on other screens, too. Here you have to keep the breakpoint range in mind, as you’ll probably have to work with different screen sizes, each of which has a specific layout, typography, and spacing. By establishing a breakpoint range, the interface will adjust to suit the screen size and orientation.

And if you still think that you can create a design without a grid and then replicate it elsewhere, try drawing the same figures on two separate sheets of paper. Even if you have a very sharp eye, you won’t be able to replicate the exact positions of your figures without having a grid. Not only does it create clarity and order in your design but also enhances the comprehension of your design and makes it easier to collaborate with others.

Subtraction, Union, Insertion, Exclusion

These operations are vital if you want to create more complex geometrical shapes and not limit yourself only to the basic ones. Using these four concepts, you can create all sorts of shapes to suit your needs and be on point with your work.

Subtraction is a basic arithmetic operation we use to remove elements from a collection. In the case of product design, we’re talking about removing components from our design to make it simpler or modify the way our final product looks.

Union, as you probably can guess from the name, allows you to unite different sets of elements. This operation is fundamental when you want to combine various groups of shapes, or if you need those groups to relate to each other.

Similar to subtraction and union, insertion and exclusion are mutually connected. Both these principles will give you more information about the overlapping elements, which, in its turn, will translate into more freedom for you to create. After all, it’s difficult to succeed as a digital designer without knowing the basic geometric concepts.

Probability and Statistics

User research is an important part of building digital products. You’ll be using primitive probability and statistical skills when interpreting the results, although being able to find the cause and effect relationship is eye-opening for a digital designer. Imagine knowing a little bit more math, so that you can use these concepts to your advantage.

Statistical modelling is a more advanced technique you may want to learn as you improve your product design skills. You may be able to get some guidance from simple mathematical statistics, but statistical modelling allows you to have a more comprehensive assessment of your design, giving you access to evaluate its efficiency, validity and more [3].

Still not convinced that you need math as a product designer?

An important thing to point out here is that you need to learn constantly to become better at whatever you’re doing. If you bring in your skills, experience, and passion it might help you kick-start your product design path, but as in every tech-related industry, you’ll need to learn and grow to keep going. If you’re just starting, you should consider boosting your math skills beforehand; and if you’re a seasoned designer, you might want to upgrade to the next level.

Even today the majority of designers believe that their work is purely artistic, and thus has no relation to actual mathematical skills. What they miss though, is that art, math, and even engineering come together in product design, to create something that will be efficient and aesthetically pleasing at the same time. These people fail to realize that even the most basic concepts such as patterns, symmetry, or arrangement are the math’s concepts. We are surrounded by math, from what we see in nature (think the geometrically-perfect snowflakes) to the human cells. We unconsciously use math concepts and operations all the time, but boosting your math skills will open up a whole new world of possibilities when it comes to product design. Becoming a product designer might sound easy, but becoming the best at what you’re doing requires hard work — and math is just a part of it.

[1] https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout

[2] Lang, M. A Quick Guide to Statistical Modeling Design Defects, Product Liability and the Protective Properties of Suboptimal Nonparametric and Robust Statistics. Preprints 2017, 2017090054 (doi: 10.20944/preprints201709.0054.v2)