Intentional or Not: Mathematical Theory in Design

Some of the principles may be hundreds of years old, but they are still powering good design today. Time-tested mathematical theories have long-shaped our collective definition of what looks good.

You may plan to use some mathematical theories as part of your design project from the early stages, others can be unintended. Either way, mathematical rules still apply to almost every project, from print to web design. It is important to understand the role of math in design and account for how it can affect the look and feel of your projects.

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Explore Digital Assets

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Golden Ratio

screenshot

screenshot

The golden ratio, also referred to as the golden rectangle or golden mean, is a shape with a proportion of 1 to 1.618. (This number, 1.618 … is often referred to as Phi.) The exact origins of the theory are unknown, but there are mentions of the golden ratio are everywhere – from the Great Pyramids in Eqypt to the shape of the Parthenon in Greece.

But the shape is not limited to architecture. It can be found in famous artwork (Leonardo Da Vinci’s “Vitruvian Man”) and even current web design (the more recent Twitter site design).

The applications for print and web design projects are a little less precise than that 1 to 1.618 ratio but still fall in line with the theory. (Many designers will round numbers when working with the golden ration to create numbers or grids that are easier to work with.)

You can use the golden ratio in a few different ways – as the outline for your overall site or for different parts of your design. One of the best parts of the golden ratio? When you group parts using the ratio, your end shape will reflect the ratio as well, because the shape can divide infinitely (and perfectly) into itself.

But what does the golden ratio do? Simply, it is mimics the look of nature while creating a sense of balance and harmony.

Fibonacci Sequence

screenshot

screenshot

The Fibonacci sequence is a series of numbers where each number in the list is derived from adding the previous two numbers.

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, 17711, 28657, 46368, 75025, 121393, 196418, 317811 …

The mathematic theory dates more than 750 years and was developed by Leonardo Pisano Bogollo in Italy. His nickname was “Fibonacci” and he also helped spread the use of our current number system through Europe during his lifetime (1170-1250).

To result of this number sequence is a spiral shape in which each ring relates to the previous in the manner of this ratio. The most prevalent example of it in nature is the nautilus.

For design applications, when blocks from the sequence are put together it creates a spiral of squares. Further this theory connects to the golden ratio – if you put together any two successive numbers in the Fibonacci sequence, the ratio very closely relates to 1 to 1.1618. The larger the numbers get, the closer they relate to Phi.

Again, this theory is great to create balance and harmony in design and it can be pretty easy to create. It is often used to help designers determine widths and sizing for the body and sidebars on their websites and most commonly used when working with blogs and magazine-style layouts. In a three column layout using the Fibonacci sequence, for example, in a 1,170 pixel-wide layout the columns would be 180, 270 and 720 pixels wide.

Rule of Thirds

screenshot
screenshot

The rule of thirds is one of those mathematical theories that you can’t avoid. It will show up in every printed or digitally published bit of work.

Simply, the rule of thirds is an imaginary 3 by 3 grid that fits on top of any image (or design) of any shape or size, where each of the nine rectangles are the exact same size. The theory helps designers (and photographers) determine how the eye follows a single image or group of images (such as a website).

Use the rule of thirds to help determine crops for photos and placement of images in groups. According to the theory, the eye first stops at the upper left intersection, then moves downward, then back up to the right top intersection and then down again. (This is why most designs feature logos and contact information at the top left.)

The rule of thirds is another tool that helps you create a sense of balance in design. What you may find surprising along the way is that this balance is often asymmetrical. Because the eye falls along intersections in this nine-block grid, there is no center reference point.

Read more about using thirds and groups of three in this Design Shack article.

Kundli

screenshot

screenshot

The astrological theory of Kundli, which describes the position of the planets when a person is born in Indian culture, sets up a five-element design scheme.

Using the outline of Kundli, create a design starting inside a square that contains four smaller squares. Design elements are placed in line with the caddy-corned shape of these squares to create a less obvious style of harmony.

You can also think of Kundli as an extension of the rule of thirds, where images and text are absent from the four corner thirds.

The principle of Kundli is often used when working with multiple images of the same shape and size. It gives designers a way to create groupings without lining each image up on a single plane.

Grids

screenshot

screenshot

Using grids to create a design outline is one of the most common mathematical tools for designers. By setting up invisible columns or rows in a document to help determine object placement, you help create a distinct sense of order.

The best grids are created using a sequence of columns (or rows) and gutters of equal increments. Different projects require different grid structures. Newspapers, for example, often base their print design on a six-column grid structure; website grids tend to vary more widely and can range from as few as three columns to as many as 16.

Using a column grid requires quite a bit of math ensure that all elements fall within the grid. But don’t be intimidated, the numbers are usually easy to manage as you measure copy blocks and images to fit within these lines.

Fun Mathematical Design Tools

Have a little fun with the math but don’t get bogged down in the numbers as you design. Here are a few tools that can help you figure dimensions and specs based on a specified framework.

Golden Ratio Calculator

Phi Calculator

Golden Ratio Typography Calculator

Fibonacci Sequence Calculator

Grid Calculator

Conclusion

Using mathematical principles in design can help create a sense of organization, balance and overall easy-on-the-eye feel. Most of these theories, though backed up with numbers, are based in nature, contributing to the harmonious feeling they imply.

Don’t get bogged down in the numbers though when working on projects. Start by knowing the theories and understanding if one relates to your project. Allow your creativity to drive design and use the science to perfect details therein.

Image Sources: GeometerArtist, theilr, Hitchster and brklynn.