Mathematics and Web Design_ A Close Relationship _ Webdesigntuts+.pdf

8/10/2019 Mathematics and Web Design_ A Close Relationship _ Webdesigntuts+.pdf

1/12

Advertise Here

basix

Daan Weijers on Nov 16th 2010 with 53 CommentsThis entry is part 4 of 15 in the Web Design Theory Session - Show All PreviousNext

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

Math is EverywhereWalt Disney once made a film about Donald Duck in Mathmagicland . In this video available on YouTube they introduce children to mathematics and what its used for. It shows that a mathematical ratio is used to definethe notes on our instruments, and that a mathematical rectangle can be found in both ancient and modernarchitecture. Also, we can find this exact same rectangle in some Renaissance art by, for example, the famous

Leonardo Da Vinci .

matics and Web Design: A Close Relationship | Webdesigntuts+ http://webdesign.tutsplus.com/articles/design-theory/mathematics-and-we...

2 10/28/2013 1


2/12

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

A Little HistoryIn ancient Greece there was an elite group of mathematicians who called themselves the Pythagoreans . ThePythagoreans 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 theMona Lisa.

Rabbit BreedingA while after that, in the 12 th and 13 th 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 thenatural breeding of rabbits. In this ideal world of him, where no rabbit would ever die and every individual rabbitwould 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 .


2 10/28/2013 1


3/12

The thing thats so special about this sequence is that if you divide a chosen number with the number prior in thesequence, 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. Fibonaccialso 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 RatioAs you might already know, Phi is also a very prominent constant in design; This is because a ratio of 1 to 1.618is 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 usedthis rectangle in the design of the buildings; the Parthenon is a good example of this. Even in modern


2 10/28/2013 1


4/12

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 humansautomatically find ourselves comfortable with this ratio. Because we are so acquainted to this ratio, it naturallytriggers a feeling of balance and harmony. For that reason, using this ratio can guarantee you a balancedcomposition of your elements.

Examples of The Golden Ratio in Web DesignBefore we even start thinking about applying the ratio to our designs, we must first look at a few examples thatuse the ratio already.

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

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

Lets take a quick look the main column, and then the content inside. As you can see below, the containingelement is about 1.618 times as big as the content thats to be read inside this element.


2 10/28/2013 1


5/12

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


2 10/28/2013 1


6/12

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 theres an extra variable that should be taken inconsideration when calculating the golden ratio.

However, there is an easy way to overcome this problem. When you want to calculate the width of an elementaccording 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 youve 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 thats left to do is to subtract the result from themain element from your original width, this will give you the width of the secondary column.

If you have any trouble remembering Phi, or when youre just lazy to fill in some numbers on a calculator, Isuggest using Phiculator . This little application requires you to fill in a value (the width of the containing elementthat is) and it automatically calculates the corresponding width. You can even ask it to calculate with integers, soyou dont have to worry about decimal numbers either.

The Rule of ThirdsAnother 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.62is closely similar to 0.67 which equals to two-thirds.

PhotographyA form of art where the rule of thirds is used very often is in Photography as its an easy and quick guide to getyou a good composition. This is why youre likely to find a function on your digital camera that divides its LCDscreen in nine parts, using the rule of thirds. Even some dSLRs have this function, as they plant a few light dotsin the viewfinder when focusing.

How Does it Work?


2 10/28/2013 1


7/12

Using the rule of thirds, you will divide your canvas horizontally and vertically in by three. This division givesyou nine equal rectangles, four lines and four intersection-points. You can create an interesting and balancedcomposition 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 aswell.

The second things to align to are the points where your dividing lines intersect. You will need to put one or twoobjects 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 alignedthe row of buildings with the top line, and on the upper-right intersection point, you will find a house that standsout the most because of its colour. Because its a focal point by itself already, aligning it with the intersection

point adds to a good composition and a balanced feel.

flickr photographfound here

Weve seen the rule of thirds applied to photography, but how about applying it to website design, can we findexamples of that?

The Rule of Thirds in Web DesignA good example of the rule being applied to web design is, again, this website. Ive prepared an image that youcan see below. It shows that, on the right, the sidebar is aligned very closely to the vertical line on the right. Onthe left, you can see that the articles are positioned on the intersecting points.


2 10/28/2013 1


8/12

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 DesignSo how exactly can the rule of thirds be applied to your sites design? Again, the varying width of our canvascan bring some trouble. When we use the same technique as we did with the golden ratio, though, well be fine.

To apply the division, you must take the full width of your containing element and divide it by three. You thenhave to draw a line or a guide, whatever suits you best two times on the value you get as a result (multiplythem 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 tocalculate the height of the division with a 16:9 (widescreen) ratio or just use the height of the containingelement. Divide the width of the containing element by 16 and multiply that number with 9 and youve gotyourself a height. You can now divide this number by 3 again, and draw the lines/guides.

When youve 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


2 10/28/2013 1


9/12

You might not think of grids as being mathematical, but they are. You are dividing your canvas in differentcolumns and gutters, this division by two, three and Ive seen up to sixteen is really mathematical.

A lot of people argue that grid systems limit your creativity, because youre limiting your freedom with a gridsystem. I dont 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 dont 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, theyre easy to use.

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

How to Create a Good GridThere is no real set way to construct a good grid system, as they revolve around content and no content is reallythe same. But for the sake of it, Ill demonstrate a simple process in how to construct a 6-column grid in a960-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 thisdivision is 160 pixels, as you can see below in the image.

Secondly, well create an image of one column, well duplicate this later. This way its easier to create our complete grid afterwards, as we dont have to repeat this step for each column.

Well 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 dont do this, our gutter will be 40 pixels wide. As you can see inthe image below, weve added a 10-pixel gutter on each side.


2 10/28/2013 1


10/12

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

Im Lazy!Dont worry; even if youre lazy you wont have to live without grids. There are lots of nice and free gridsystems up for grabs on the internet. My favourite, and Im sure youve heard about it before, is the famous960.gs grid system , which has a CSS-framework and a PSD-file with all the guides installed.

ConclusionI hope Ive shown you that mathematics can be beautiful when applied to design, and that Ive given you enoughtechniques to use in your next design. Be warned though, lots of other things are required to make a design asuccess, and therefore using these tricks is no guarantee for a good design, but they can sure help you and guide


12 10/28/2013 1


11/12

you in the process of making one.

Thanks for reading!

advertise hereadvertise here

Daan Weijers is Daan on Codecanyon


12 10/28/2013 1


12/12

Tags: Basix

By Daan WeijersMy name is Daan Weijers. I am a design enthusiast, born and raised in the Netherlands. For a small business, Icreate and sell stock-items. These are cheap items that are sold for an unlimited amount of times. The items Icreate at the moment are only small code-snippets . Although, in the future, I aim to release complete websitetemplates as well.

Note: Want to add some source code? Type before it and after it. Find out more


Documents

Mathematics and Web Design_ A Close Relationship _ Webdesigntuts+.pdf