It might have seemed clear cut back when you were at school: If you spent lunchtime sat in the art room, paintbrush in hand, you probably weren’t so keen on maths. Similarly, if you were a self-confessed algebra nerd who spent playtime cosied up with your calculator, chances are design wasn’t really your thing.
But when it comes to a career as a digital designer, being good at maths could be your most valuable skill. It might even mean the difference between producing creative designs, and crafting award winning user experiences.
While many designers are self-confessed math-phobes, most will employ the cornerstone principles of maths every time they use their pencil, paintbrush or ipad. In fact, some of the most fundamental techniques of design are originally rooted in mathematical concepts.
Here are some of the most common mathematic principles we see applied to web design
The Golden Ratio
Odd as it may seem to apply this theory to the digital transformation field, the golden ratio is often employed by companies to build the framework of their logo or website. This pattern can be produced consciously or unconsciously by designers, and it is always effective in producing an aesthetically pleasing layout.
This tool of design has been used for centuries in art, architecture and in design, and can simply be described as a proportion that is pleasing to the human eye.
The maths behind the ratio might sound complicated, but really it isn’t:
The golden ratio is achieved if the ratio of two quantities is the same as the ratio of their sum to the larger of the two quantities.
To break it down, we’ll explain this with some rectangles:
A “Golden Rectangle” is a rectangle with a length that is 1.6180 times its width.
If you chop off a perfect square from this golden rectangle, you’ll be left with another golden rectangle.
You can then do the same thing with your newly created rectangle, leaving you with this familiar image.
Its possible to keep using this pattern indefinitely –many of the world’s most famous pieces of art can be traced from this configuration.
Websites that have done this such as Mashable help to promote content in an effective way. Using this sequence to build layouts that draw users’ attention to certain key areas of the page, and keep it there.
Grids and the rule of 3
Three is the magic number. Why? We like to think its thanks to it’s effectiveness as a web design tool.
The rule of thirds describes the splitting a composition into nine equal parts by dividing it with two equally spaced vertical lines and two horizontal lines. This forms a grid that can be used to layout key features within a structure.
Most designers build webpage layouts from a traditional 3×3 grid without a second thought.
Nurture designer Steve Dale tells us just how helpful the grid can be:
‘configuring grids is the most common tool we use in web design. For insights pages in particular we usually look to the rule of three – this allows us to display a large amount of content in a neat and accessible way, which is incredibly important for all clients.’
This is a vital part of making the content accessible. This layout usually feels most comfortable for readers, as they are likely to subliminally understand the context of the content and the typical order they’re expected to travel across the page.
In theory, the most eye-catching points on a webpage are where the grid lines intersect. In reality then, these intersections should be where designers place important pieces of information or CTAs to guide users through the site.
The Fibonacci Sequence
The Fibonacci sequence is not often considered as a design tool. Simply put, it’s a mathematical sequence of numbers with the pattern of each number being the sum of the previous two. Starting from zero the sequence would go like this:
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144 etc
This pattern works out to be very similar to the golden ratio, and when plotted it creates shapes that are often seen in nature, on flowers, trees and vegetables. The sequence has commonly been used in art throughout history because of its strong appeal to the human eye.
The Fibonacci sequence can be used as an effective sizing and spacing system for your designs. If you look at the Sequence as possible section sizes across a page, and as a determinant of font spacing and sizing, it can form a basis to structure your entire design.
The smaller range of the sequence (8, 13, 21, 34, 55) is perfect to decide margins, line heights and font sizes. The higher range of the sequence (144, 233, 377, 610, 987) can easily decide column widths and other section dimensions.
Taking a look at web pages like Twitter, you can see the familiar Fibonacci pattern can be traced over the layout – giving it a perfectly balanced aesthetic.
So designers, there you have it! Though you might not be mathematically gifted in the traditional sense, chances are you’re using mathematical concepts to boost your designs everyday.
For a design consultation, or to hear more about our digital transformation technology, get in touch with Nurture today.
Author Steve Dale