Mathematics and Web Design: A Close Relationship

This entry is part 4 of 15 in the Web Design Theory Session
« PreviousNext »

Math is everywhere, even where you wouldn’t expect it. You can find mathematical ratios and constants in architecture, but also in the instruments we use to make music. You can find math in certain games we play, and therefore it should not surprise you that mathematics plays an important role in web design too. But what is this role? And how can we use these ratios, constants, and theories to make our web designs more beautiful?

Math is Everywhere

Walt Disney once made a film about Donald Duck in Mathmagicland. In this video – available on YouTube – they introduce children to mathematics and what it’s used for. It shows that a mathematical ratio is used to define the notes on our instruments, and that a mathematical rectangle can be found in both ancient and modern architecture. Also, we can find this exact same rectangle in some Renaissance art by, for example, the famous Leonardo Da Vinci.

The general lesson is simple: you can use some basic mathematical principles to design order and beauty in your own creations.

A Little History

In ancient Greece there was an elite group of mathematicians who called themselves the Pythagoreans. The Pythagoreans had the pentagram as their emblem. They chose this shape because of its mathematical perfection: The linear shape of the pentagram already contains the golden ratio three times already! Also, there are tons of golden rectangles hidden inside the shape as well, these are the same golden rectangles that are present in the Mona Lisa.

Rabbit Breeding

A while after that, in the 12th and 13th century, lived a talented Italian mathematician. His name was Leonardo Pisano Bigollo, although you might know him better as Fibonacci. For his book Liber Aci, he observed the natural breeding of rabbits. In this ideal world of him, where no rabbit would ever die and every individual rabbit would start reproducing as soon as possible, he found out this cycle contained a special sequence of numbers. This sequence later became known as the Fibonacci Numbers.

The thing that’s so special about this sequence is that if you divide a chosen number with the number prior in the sequence, you will (approximately) get the same number, every time. This number is approximately 1.618, better known as Phi. The further you go in the sequence, the closer the result of the division comes to Phi. Fibonacci also found out that this sequence is not only found in the breeding of rabbits, but also in other things in nature, such as the arrangement of seeds in a sunflower.

The Golden Ratio

As you might already know, Phi is also a very prominent constant in design; This is because a ratio of 1 to 1.618 is better known as the Golden Ratio – often referred to as the Golden Section, Golden Mean or the Divine Ratio. If you create a rectangle according to this ratio, you get a shape known as the Golden Rectangle.

The Golden Rectangle, shown here, shows how you can divide it upon itself infinitely (and perfectly).

The Golden Ratio and the Golden Rectangle is used in many forms of art and design. In the Renaissance period, many artists proportioned their artworks according to this ratio and rectangle. In ancient Greece, architects used this rectangle in the design of the buildings; the Parthenon is a good example of this. Even in modern architecture, the golden rectangle has a strong presence.

But what is it that makes this ratio so special? Because this number, Phi, finds its origins in nature, we humans automatically find ourselves comfortable with this ratio. Because we are so acquainted to this ratio, it naturally triggers a feeling of balance and harmony. For that reason, using this ratio can guarantee you a balanced composition of your elements.

Examples of The Golden Ratio in Web Design

Before we even start thinking about applying the ratio to our designs, we must first look at a few examples that use the ratio already.

One good example is this website, as its design houses multiple cases of the ratio. In the image below, you can see a screenshot of this website. As you can see, I’ve used two colours to mark the different columns. The width of the main column with the blog posts in it is more or less 1.618 times as big as the sidebar with the ads. A quick calculation on the bottom proves this.

But not only does this website use the golden ratio on its total width, it’s also applied to some of the smaller parts of the website.

Let’s take a quick look the main column, and then the content inside. As you can see below, the containing element is about 1.618 times as big as the content that’s to be read inside this element.

Another good example is the famous Smashing Magazine blog. Its main column has a total width of just over 700 pixels. When you divide this number by 1.618, about 435 is the result: The exact width of the sidebar.

How to Apply this Ratio to Your Next Design

The canvas of a painting and the width of a building all have a fixed width, the monitors that display our work vary in size. Therefore – and especially in fluid designs – there’s an extra variable that should be taken in consideration when calculating the golden ratio.

However, there is an easy way to overcome this problem. When you want to calculate the width of an element according to the ratio, you just need to take the width of its parent-element, so the containing element. In our first and last example, this was the complete width of a website. In the second example, this was just the width of a smaller part: their main column.

Anyhow, when you’ve determined the width of the containing element, you should now divide this value by Phi. The result will give you the width of the main element. Now, all that’s left to do is to subtract the result from the main element from your original width, this will give you the width of the secondary column.

If you have any trouble remembering Phi, or when you’re just lazy to fill in some numbers on a calculator, I suggest using Phiculator. This little application requires you to fill in a value (the width of the containing element that is) and it automatically calculates the corresponding width. You can even ask it to calculate with integers, so you don’t have to worry about decimal numbers either.

The Rule of Thirds

Another famous mathematical division is the rule of thirds. This rule can help you create a balanced composition by dividing your canvas in nine equal parts. The rule is a little similar to the Golden Ratio, as the division by 0.62 is closely similar to 0.67 – which equals to two-thirds.

Photography

A form of art where the rule of thirds is used very often is in Photography as it’s an easy and quick guide to get you a good composition. This is why you’re likely to find a function on your digital camera that divides its LCD screen in nine parts, using the rule of thirds. Even some dSLR’s have this function, as they plant a few light dots in the viewfinder when focusing.

How Does it Work?

Using the rule of thirds, you will divide your canvas horizontally and vertically in by three. This division gives you nine equal rectangles, four lines and four intersection-points. You can create an interesting and balanced composition by using these lines and points of intersection.

The key in a good composition, obviously, lies in positioning your elements correctly. When using the rule of thirds, there are two things you can position with.

The first are the lines used to divide the canvas. In photography, things with a long and straight shape are often aligned to these lines. In design, things with this same shape – such as a sidebar – can be aligned to these lines as well.

The second things to align to are the points where your dividing lines intersect. You will need to put one or two objects on these points, because too much will still kill your composition.

A good example of this I found on Photography-website Flickr. As you can see below, the photographer aligned the row of buildings with the top line, and on the upper-right intersection point, you will find a house that stands out the most because of its colour. Because it’s a focal point by itself already, aligning it with the intersection point adds to a good composition and a balanced feel.

flickr photograph found here

We’ve seen the rule of thirds applied to photography, but how about applying it to website design, can we find examples of that?

The Rule of Thirds in Web Design

A good example of the rule being applied to web design is, again, this website. I’ve prepared an image that you can see below. It shows that, on the right, the sidebar is aligned very closely to the vertical line on the right. On the left, you can see that the articles are positioned on the intersecting points.

The two alignments you see above create a feeling of harmony in the layout of this website.

Applying the Rule of Thirds to Your Next Design

So how exactly can the rule of thirds be applied to your site’s design? Again, the varying width of our ‘canvas’ can bring some trouble. When we use the same technique as we did with the golden ratio, though, we’ll be fine.

To apply the division, you must take the full width of your containing element and divide it by three. You then have to draw a line – or a guide, whatever suits you best – two times on the value you get as a result (multiply them by two to get the position of the second line).

The second part of the division can give you some problems, though. The height of our ‘canvas’ is also variable, therefore dividing this variable by three will give us some trouble. The way I use to work around this, is to calculate the ‘height’ of the division with a 16:9 (widescreen) ratio or just use the height of the containing element. Divide the width of the containing element by 16 and multiply that number with 9 and you’ve got yourself a height. You can now divide this number by 3 again, and draw the lines/guides.

When you’ve got the guides set up, you can now position your elements according to these guides. Align your elements with the lines, and you must put some elements of interest and contrast on the points of intersection.

Grid Systems

You might not think of grids as being mathematical, but they are. You are dividing your canvas in different columns and gutters, this division by two, three – and I’ve seen up to sixteen – is really mathematical.

A lot of people argue that grid systems limit your creativity, because you’re limiting your freedom with a grid system. I don’t think this is true, as book called Vormator taught me that limitations actually boost your creativity. This is because you will think of solutions with these limits in mind, whereas these ideas would never have been thought of if you don’t have these restrictions.

The reason grid systems ‘work’ is that they can guide you in sizing, positioning and aligning your website design. They can help you in organizing and removing clutter from content. But most importantly, they’re easy to use.

Another good reason to use grids is that rules are meant to be broken, aren’t they? If you ‘break’ your grid once in a while, it’s not bad. On the contrary! ‘Breaking’ your grid can create special interest for a specific element on the page, because it’s in contrast with the rest. This can help you achieve certain goals, like a call to action that stands out more because of this.

How to Create a Good Grid

There is no real set way to construct a good grid system, as they revolve around content and no content is really the same. But for the sake of it, I’ll demonstrate a simple process in how to construct a 6-column grid in a 960-pixel wide environment.

First, we will divide our total canvas width by 6 so we have the total width of each column. The result of this division is 160 pixels, as you can see below in the image.

Secondly, we’ll create an image of one column, we’ll duplicate this later. This way it’s easier to create our complete grid afterwards, as we don’t have to repeat this step for each column.

We’ll decide on the size of our gutter, I think 20 pixels will suffice. The gutter should be added to both sides of the column, so we must divide it by two. If we don’t do this, our gutter will be 40 pixels wide. As you can see in the image below, we’ve added a 10-pixel gutter on each side.

Now we can duplicate this image until we reach the total of 960 pixels again, and we’ve created ourselves a (basic) grid.

I’m Lazy!

Don’t worry; even if you’re lazy you won’t have to live without grids. There are lots of nice – and free – grid systems up for grabs on the internet. My favourite, and I’m sure you’ve heard about it before, is the famous 960.gs grid system, which has a CSS-framework and a PSD-file with all the guides installed.

Conclusion

I hope I’ve shown you that mathematics can be beautiful when applied to design, and that I’ve given you enough techniques to use in your next design. Be warned though, lots of other things are required to make a design a success, and therefore using these tricks is no guarantee for a good design, but they can sure help you and guide you in the process of making one.

Daan Weijers is Daan on Codecanyon
Tags: Basix
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
• http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

Great article Daan! There are a ton of “math and design” articles out there, but you did a great job to reduce the information down to some great tips for web designers and keep it focused, interesting, and informative :)

• http://www.daanweijers.com Daan

Thank you Brandon!

• http://inallure.com geraldine

What an interesting article, I’m definitely taking this into consideration for my website!

• http://www.itontheweb.co.nz David

Awesome article. I particularly like the golden ratio and will use this for my next project.

• http://smallbitsofcode.com Boba

Ohhh :( Why are you doing this to me, i hated math even before i was born, i even miscalculated and got out a month early.

Just kidding :) Awesome article, but i’ll need to read it few more times to understand it.

P.S. Isn’t Phi 3.14… :)

• http://daanweijers.com Daan

It’s a common disorder to hate math, believe me.

Anyways, Pi = 3.14, and Phi – notice the extra ‘h’- equals 1.618. Thanks for the compliment ;)

• http://smallbitsofcode.com Boba

Haha :) Hated school in general, but math especially.

Yeah i know, i just like to act dumb, trying to be funny, usually it doesn’t work :)

You’re welcome.

• http://duritajam.web.id rochsid

Pi not phi, not 3.14. Pi is the ratio of circumference of a circle with a diameter

Great article Daan, I was always too lazy to dig deeper into Golden ratio and how it is related to Fibonacci, but now it’s totally clear to me. Good point about using the rule of thirds in web design, not only in photography. Very interesting read, indeed.

• http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

Thanks for the comment Sergei! Glad to hear this was useful information for ya :)

• http://smallbitsofcode.com Boba

At the start of the article you said “Also, we can find this exact same triangle in some Renaissance art by, for example, the famous Leonardo Da Vinci.” and on the picture bellow it’s a rectangle :)

• http://www.daanweijers.com Daan

Well spotted sir! It has to say rectangle, but in fact it doesn’t really matter, as the golden triangle is derived from the golden rectangle. I’ll send this to Brandon anyways, thanks!

• http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

Thanks Boba – I fixed the typo :)

• Josh

I think its funny the way you’ve ‘jammed’ the Golden Ratio and Rule of thirds on top of your own website. In fairness it might fall roughly on the lines but it’s hardly a great example. On the other hand Smashing Magazine falls exactly on the lines.

I don’t mean to sound like a hater but its not always appropriate to blow your own trumpet.

• http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

Heya Josh, Good comments – Daan actually isn’t an employee of Envato or anything, and I didn’t ask him to use our site as an example… so there’s no real ulterior motive in using this site (beyond that it was a convenient and familiar example I suppose). As to whether or not it’s the perfect example, I’d have to take our my pixel ruler to sort that out and I wouldn’t be surprised if this site’s design is off the mark by a couple percentage points. I think for the purposes of an educational example, it conveys the concept clearly enough. That said, I appreciate and encourage the criticism and analysis of the articles here :)

• http://daanweijers.com Daan

You’re right, it’s not _perfect_ when you really calculate it, although it’s roughly the right size. Hence the words ‘more or less’

And no, I’m not in any way affiliated with Envato so it’s no real ‘promotion’.

• w1sh

According to the “Pixel Perfect” design article, we should be applying these rules perfectly, so I see his point, but at the same time, they are good/familiar references.

• http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

Fair points :) thanks for the comment w1sh!

• http://www.bazz-dezign.nl BaZz

Great article, nice to see the golden ratio explained in web-design / pixels!

• ExtremRaym

omg i see Golden Ratio everywhere ^^

Well, i agree with the restriction bring creativity and rules are good to break

and i think that there is good webdesign without any golden or third ratio anywhere.

Anyway, golden ratio or rule of third are safe starting points for any kind of design.

Nice article :P

• http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

Good comments ExtremRaym – it’s true that there can be good design without a dogmatic application of these principles, but it certainly doesn’t hurt to use them as a starting point in any design :)

• http://www.eclipsedesign.eu Kartlos Tchavelachvili

wow, very interesting! thanks

• http://abdusfauzi.com abdusfauzi

nice article. the theory of ratios are greatly important in designs and content management.

• http://www.jacksonlo.com Jackson Lo

Great article! Never made aware of these mathematical aspects, but they make great sense in a site’s design! Thanks for sharing!

• http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

Thanks for the comment Jackson – glad to hear this was new material for you :)

• josh

Why is my previous comment still awaiting moderation? do you block any comment that isn’t overly positive?

• http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

Hi Josh, I wish I could tell you all about our evil moderation system that blocks critical comments and drops Acme Anvils on those that post them, but alas, I just hadn’t cleared the “new commenters” queue yet :)

All brand new commenters on the site receive temporary holds, which I release 2-3 times a day – I just hadn’t gotten to it yet this morning. Criticism is 100% welcome and even encouraged as long as it’s polite to the author.

Oh – and now that you’re no longer a “new commenter”, your comments will be approved automatically like everyone else who has already posted at least one comment :)

• http://www.ecustom.ca/ Damon Bridges

I mean, I had known all about how phi is found through nature, and I had heard it related to design, but I was too lazy before to go find a tutorial which explained it.

This one does it very well! Amazing job!

PS: I’ve also heard that people find the faces of people more attractive if, for example, their forehead is x inches long, where x is a number which falls in the Fibonacci Sequence.

• http://jurbank.com John

This has really got me thinking. Thanks!

• http://daanweijers.com Daan

Thanks for the positive feedback everyone!

• http://www.gameservers.com Andrew Miesner

I love this site! So many informative design theory tuts.

• http://www.mrblonde.ca Mr.Blonde

Yeah math and calculus payed off! Math has been used to shape visual proportions for thousands of years. It’s kind of amazing knowing that a thousands year old technique can still be useful to something as modern as webdesign. Some other proportions to consider:

Square (1:1 or 1:√1)
Diagon (1:√2)
Hecton or sixton (1:√3)
Hemiolion (2:3)
Auron (the golden rectangle, 1:φ)
Hemidiagon (1:½√5)
Penton (1:√φ)
Trion (1:⅔√3)
Biauron (1:2φ)
Bipenton

These are the 12 Orthagons. I know the square seems kinda lame, but all of those proportions start with a square, and when all 12 of those proportions are assembled together, they create a square. Yes I’m a nerd.

• Pingback: Dagens länkar erikgmpantzar

• w1sh

Brandon, I was going to add a “Suggestion” via the footer link, but it’s not set up yet (points to webdesign.tutsplus.com).

Figured I’d let you know.

Also, my suggestion was going to be a tutorial on how to design a beautiful color palette.

• http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

Great idea W1sh! I’ll add it to the list of articles that need to be written :) We do have a couple color theory articles on their way, but this specific idea sounds like it’d be great.

• http://connorcrosby.me Connor Crosby

I love that idea! I second that.

• http://connorcrosby.me Connor Crosby

Excellent article! I never thought of applying those techniques into web design. Will definitely think about it for my next design.

• BichVu

Thanks so much

Great article. I came across this neat software called “phi matrix” that allows you to choose any type of PHI grid you want and over lay it on your design (Photoshop, illustrator, etc) Makes it real easy to lay out your designs! Hope that helps.

• http://technologiesreview.com/ technology review

Quite intresting and educative article on web design relation with mathematics

• Ari

While promoting stuff like 960 grid system all the time, you guys could also check out alternative CSS “frameworks” like LESS Framework 3 at http://www.lessframework.com

Personally I think it’s a lot better than 960gs. It takes the approach of responsive webdesign and uses golden ratio as well.

• Ari

… and while on a subject of mathematics: Besides using golden ratio in it’s layouts, the column layoyt on Less Framework is based on Fibonacci sequence (http://en.wikipedia.org/wiki/Fibonacci_number) as well. Also the typography presets on the “framework” is based on golden ratio.

So this I think proves, it would be a lot more better example of CSS “frameworks” or templates in this article of mathematics in webdesign than 960gs =)

• ded

I’ll say this is an interesting article. But, you are not doing your fact checking, while many people repeat the idea that the ancient Greeks used the golden ratio in architecture, it is not supported by any facts we know of the time. Likewise while designers love the golden ratio, in studies done with people picking rectangles that seemed appealing, golden rectangles were NOT chosen more than any other rectangles. What this actually means is that people like patterns and the golden ratio creates a recognizable pattern so it is appealing but not special. I’m not trying to belittle your work here but if we want to really tie design and math together we need to get it right.

See this site for a detailed explanation of my points:
http://www.maa.org/devlin/devlin_05_07.html

You wrote an interesting article but you are still propagating misinformation.
DED

• http://www.redchillimedia.com Web Design Company USA

Excellent Tutorial for creating website design using Mathematics. Beginners can learn lot’s of the things from this tutorial. Know more about website design visit http://www.redchillimedia.com/services

@Web Design Company USA

I visited your website and learned absolutely nothing more about web design. Were you just trying to spam your business by lying to us or do you have legitimate design tutorials somewhere on that site other than the link you provided us with? Just curious. It’s one thing to try to market your company, but most of the people that visit this site are either web professionals or aspiring ones so by providing misleading information, you’re only making yourself and your company look bad.

• http://webbeetle.com.au webbeetle

I’m lazy, too…
But by now I have moved away from the 960Grid, mentioned here, and started to use the http://thesquaregrid.com/ instead. I find it faster and easier to use, I like the look of the resulting pages, and the CSS is much shorter and easier to trim.

• Sarunas Savickas

Yeah, greate tips :)

Another great article… Love the series!!!

I’m a frequent (everyday) user of tuts+ network and i absolutely love it. I do read other blogs as there’s a lot of good blogs about Web, but this one is far more educational, informative, clear, understandable than others… Could probably think of more positive words here to describe it but since english is not my first language i’ll stop at this point.

You may want to know that the link to – Great Design Hurts: Striving for Pixel Perfection – is not working and it points to – Understanding the Z-Layout in Web Design…

Great Job

Thanks

• John

Agreed, Great article!

• Danielius

That’s brilliant! I’ll definitely apply this for my next design :)

• http://www.stormcode.net jacksteve

Great article!!! I found it very interesting. There is a close relationship between maths and web design. You have shared very good content. Thanks.

• Lance

This is really a great article! I learned i lot from it! Thanks a lot!

• http://www.designspot.ch/ Thierry

“As you can see below, the containing element is about 1.618 times as big as the content that’s to be read inside this element.”