Applying Mathematics To Web Design

Advertisement

“Mathematics is beautiful.” This may sound absurd to people who wince at numbers and equations. But some of the most beautiful things in nature and our universe exhibit mathematical properties, from the smallest seashell to the biggest whirlpool galaxies. In fact, one of the greatest ancient philosophers, Aristotle, said: “The mathematical sciences particularly exhibit order, symmetry and limitation; and these are the greatest forms of the beautiful.”

Because of its beautiful nature, mathematics has been a part of art and architectural design for ages. But it has not been exploited much for website design. This is probably because many of us regard mathematics as being antithetical to creativity. On the contrary, mathematics can be a tool to produce creative designs. That said, you don’t have to rely on math for every design. The point is that you should regard it as your friend, not a foe. For illustrative purposes, we created a couple of web designs that present mathematical principles discussed in this article. We are also giving away a couple of PSDs that you can use right away in your next design.

Layouts featured in this post were created specifically for the purpose of this article. During the design process we made sure that all of the designs shown in this article are essentially mathematical in nature; that is, they exhibit order, symmetry and limitation. We also have followed the Web design algorithm1 in this process — the designs have distinct themes, styles and elements. To keep things simple and clear, we tried to stick to minimalist designs and also preferred single-page layouts. Obviously, examples in this article are supposed to serve as a simple foundation for your designs and not as the finished designs.

Golden Ratio and Golden Rectangle

The golden ratio, also known as the divine proportion, is an irrational mathematical constant with a value of approximately 1.618033987. If the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one, then the quantities are said to have a golden ratio.

Screenshot

Screenshot

We already published a very detailed article “Applying Divine Proportion To Web Design”2 that explains how to use the golden ratio in Web design. In today’s article, we’ll look at how to use golden rectangles in Web design. A golden rectangle is one whose side lengths have the golden ratio 1:(one-to-phi); that is, 1:1.618.

The construction of a golden rectangle is very easy and straightforward. First, construct a simple square. Then draw a line from the midpoint of one side of the square to an opposite corner and use that line as the radius to draw an arc that defines the height of the rectangle. Finally, complete the golden rectangle and you are done.

A method to construct a golden rectangle. The square is outlined in red. The resulting dimensions are in the ratio 1:Phi, the golden ratio.
A method to construct a golden rectangle. The square is outlined in red. The resulting dimensions are in the ratio 1:Phi, the golden ratio.

As an example, consider the minimalist design below. It has six golden rectangles in it, three rectangles per line. The rectangles have the dimensions of 299 x 185 pixels. Thus, the sides of these rectangles adhere approximately to the golden ratio; that is, 299/185 = 1.616. Notice how the large amount of white space surrounding Golden rectangles creates a calm and simple atmosphere in which the navigation options can breathe and serve their purpose. Although the layout uses only few colors and all blocks are positioned very similarly, the navigation options are obvious.

Screenshot3
Large view4

However, it may be quite difficult to add a new Golden block while keeping the consistency of the design. Probably the only reasonable design solution here would be to add the block on the third line and use the rest of the horizontal space for other, more or less prominent features (if necessary). You can click on the image below to see the enlarged version.

Screenshot5
Large view6

Possible Applications

The golden rectangle design is well suited for photo galleries, portfolios and product-oriented websites. The golden rectangles can also be arranged in other mathematically sound ways to generate beautiful designs. In particular, you may want to use them for blocks that display images or ads in your sidebar. Of course, the pure collection of golden rectangles doesn’t make for a professional, nice-looking design. You also need to work closely with grids, alignment, proximity and emphasis to achieve the main goals of your design. For instance, an interesting design solution would be a CSS/jQuery-based fluid grid design based on golden rectangles, however we do not cover this technique in this article.

Download the PSD-layout

We prepared a sample PSD layout7 that is designed according to the Golden Ratio and Golden Rectangle. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Fibonacci Design

As the name says, Fibonacci designs are designs based on the Fibonacci sequence of numbers. By definition, the first two Fibonacci numbers are 0 and 1, and each remaining number is the sum of the previous two. Some sources omit the initial 0, instead beginning the sequence with two 1s. So the first two Fibonacci numbers are given, and each remaining number is the sum of the previous two. The higher the Fibonacci sequence gets, the closer its numbers relate to each other according to the Golden Ratio. A Fibonacci sequence goes like this:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...

In music, Fibonacci numbers are sometimes used to determine tunings, and in visual art to determine the length or size of content and formal elements. Jürgen Schmidhuber his methodology for Fibonacci-based designs8 on his blog. However, if you examine the design he created, you are likely to find it rigid and a bit difficult to read and navigate. Indeed, you need to get a bit creative with math rather than following the rules blindly — maths gives us a guide that we can apply, however it’s rather about implementing sites with maths than implementing maths with our designs.

Fibonacci sequence9
Approximate and true golden spirals. The green spiral is made from quarter-circles tangent to the interior of each square, while the red spiral is a Golden Spiral, a special type of logarithmic spiral. Overlapping portions appear yellow. The length of the side of one square divided by that of the next smaller square is the Golden ratio. Source10

The main idea behind such designs is to use Fibonacci when deciding on the dimensions for content area or sidebar. Both Golden ratio and Fibonacci let designers rely on sound, common ratios for page containers or blocks within page containers.

In general, layouts are quite easy to build using the Fibonacci sequence. You pick a certain base width first — for instance, 90px. Then, when determining the size of your containers, you multiply the base width with the numbers from the Fibonacci series. Depending on the calculations you get, you need to use them for your page blocks. Let’s take a look at an example. Below is a minimalist typography blog based on Fibonacci Web design.

Screenshot11
Large view12

You can see that the page is divided into three columns. Each column corresponds to a Fibonacci number. For this design, we used a base width of 90 pixels. This base width is then multiplied by a Fibonacci number to get the total width for a particular column. For example, the first column has a width of 180 pixels (90 x 2); the second column has a width of 270 pixels (90 x 3); and the third column has a width of 720 pixels (90 x 8). The font size also corresponds to a Fibonacci number. The blog heading has a size of 55px; the article’s heading is 34px; and the content is 21px.

Screenshot

The downside of layouts based on the Fibonacci sequence is that it’s difficult to use it if you are given certain fixed width layout dimensions (e.g. 1000px). In this situation it’s easier to use the Golden ratio, as you would simply multiply 1000px with 0.618 and get 618px which would be the ideal width for your content block. However, if you try to achieve the same result with the Fibonacci sequence itself, you first need to figure out the sequence to the 1000 range.

According to the Fibonacci sequence calculator13, the sequence would be ...,610, 987, 1597.... Indeed, 987 is a good fit and you can start picking the widths for smaller blocks using the previous numbers in the sequence. But if your fixed width layout is smaller or lager, you would need to use some approximate values which would again result in pure guessing. The problem may also occur in liquid or elastic designs to some extent, but you have much more design freedom there.

Possible Applications

A Fibonacci design is best suited to blogs and magazine layouts. You can arrange the layout in different ways according to Fibonacci numbers. The article “Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web”14 (in French) explains in more depth the application of Fibonacci numbers to Web design. Again, notice that you need to be creative when using Fibonacci sequence in your designs, otherwise your designs will turn out to be too rigid and hence difficult to use and navigate.

Download the PSD-layout

We prepared a sample PSD layout15 that is designed according to the Fibonacci sequence. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Five Elements, Or Kundli Design

Another interesting layout technique comes from the Indian horoscopes which are also called Kundli. Basically, a Kundli is a very simple figure can be made in just three steps. Draw a square, and then cross the two diagonals. Join the mid-points on each side of the square to get the Kundli figure. You’ll notice four right-angle rhomboids in the figure. These are the basis for our Web design.

Screenshot

Screenshot

The design below, then, is based on the Kundli geometric layout. You’ll notice that the chakras16 in the design also have mathematical properties.

Screenshot17
Large view18

This is a single-page layout. Clicking on an element reveals more information about it, as shown in the figure below. You could also include some simple jQuery animations or jQuery tooltips that would reveal more information on demand. A further step would be a sliding web page where animation is used to display different content blocks; you may also want to change the background images of the single content areas to make them a bit more distinctive.

Screenshot

In the following figure, you can see that our design is just a simple three-column layout: a header, three columns and a footer. Not complex at all.

Screenshot

Possible Applications

This design is best for displaying product information and portfolios. You can spice it up with JavaScript animation frameworks. For example, you can apply color transformations to the chakras by using Raphael library19, or you can add freestyle animations using  jsAnim20 library. You can have a tree sprout when the user clicks on the Earth element, or you can show sea creatures swimming in the water element. The sky is the limit when it comes to animation using these JavaScript libraries.

Download the PSD-layout

We prepared a sample PSD layout21 that is designed according to the Kundli design. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Sine Wave Design

When it comes to mathmatics, you do not need to stick to well-known Golden Ratio or Fibonacci sequence. You can also experiment with formulas from physics, chemistry and other sciences by using more general formulas and values in your designs.

Screenshot

For instance, let’s consider the sine wave, or sinusoid, a mathematical function that describes a smooth repetitive oscillation. We used a simple sine wave pattern as the basis for a simple and original Web design and create a single-page layout. Of course, you can use the same approach for other designs such as graphics or infographics.

Screenshot22
Large view23

The layout is again very simple, consisting of a header, five columns and a footer. You can use a jQuery tooltip to make the design more interactive.

Screenshot

Possible Applications

This wave pattern occurs often in nature, including ocean waves, sound waves, and light waves. Also, a rough sinusoidal pattern can be seen in plotting average daily temperatures for each day of the year, although the graph may resemble an inverted cosine wave. You can also use it to display a timeline of events. It could even be developed to include horizontal navigation. You can make it more interactive with the jQuery highlighter24 plug-in, which highlights each element (i.e. DIV) so that the user can focus on the content.

Download the PSD-layout

We prepared a sample PSD layout25 that is designed according to the Sine Wave design. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Other Techniques

Rule of Thirds
This rule states that an image should be imagined to be divided into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections. It can also be expressed as a simplified mathematical approach that divides any layout into thirds, left to right and top to bottom.

Musical Logic
The rhythmic or thematic structure of musical compositions can be applied to distances between elements in a layout, like ABA, ABAC, etc. Learn more about music and mathematics in this Wikipedia article26.

Wikipedia articles

Articles

Books

We hope you’ve enjoyed this article on mathematics and Web design. Hopefully you now see mathematics not as a hindrance to creativity, but as a friend. Embrace it!

(al)

Footnotes

  1. 1 http://designinformer.com/web-design-iterations-algorithms/
  2. 2 http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2010/02/spacegeeklayout-final.jpg
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2010/02/spacegeek-layout-full.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2010/02/space-layout.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2010/02/space-layout.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/images/mathematics/golden_rectangle_layout.psd
  8. 8 http://www.idsia.ch/~juergen/fibonacciwebdesign.html
  9. 9 http://en.wikipedia.org/wiki/Fibonacci_number
  10. 10 http://en.wikipedia.org/wiki/Fibonacci_number
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2010/01/fibonaccilayout.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2010/01/fibonaccilayout.jpg
  13. 13 http://www.math.rutgers.edu/~erowland/fibonacci.html
  14. 14 http://css4design.com/nombre-dor-suite-de-fibonacci-et-autres-grilles-de-mise-en-page-pour-le-design-web
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/images/mathematics/fibonacci_layout.psd
  16. 16 http://en.wikipedia.org/wiki/Chakras
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2010/01/fourelementslayout2.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2010/01/fourelementslayout2.jpg
  19. 19 http://raphaeljs.com/
  20. 20 http://jsanim.com/
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/images/mathematics/kundli_layout.psd
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2010/02/sinewavelayout01.jpg
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2010/02/sinewavelayout01.jpg
  24. 24 http://www.dailymarkup.com/highlighter/demo1/demo.html#
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/images/mathematics/sinewave_layout.psd
  26. 26 http://en.wikipedia.org/wiki/Music_and_mathematics
  27. 27 http://en.wikipedia.org/wiki/Sacred_geometry
  28. 28 http://en.wikipedia.org/wiki/Proportion_(architecture)
  29. 29 http://en.wikipedia.org/wiki/Canons_of_page_construction#cite_note-5
  30. 30 http://www.math.nus.edu.sg/aslaksen/teaching/math-art-arch.shtml
  31. 31 http://www.markboulton.co.uk/journal/comments/design-and-the-divine-proportion
  32. 32 http://www.myoats.com/create.aspx
  33. 33 http://www.wired.com/magazine/2010/01/pl_arts_found/
  34. 34 http://lamb.cc/typograph/
  35. 35 http://www.flickr.com/photos/michaelpaukner/
  36. 36 http://books.google.co.in/books?id=1KI0JVuWYGkC&printsec=frontcover&dq=geometry+of+design&source=bl&ots=8_La32PfXM&sig=oqYAItvbGXuF3qNqTTBRZydtmvo&hl=en&ei=qfZXS9rZEs6GkAXq7rDpBA&sa=X&oi=book_result&ct=result&resnum=1&ved=0CAcQ6AEwAA#v=onepage&q=&f=false
  37. 37 http://books.google.com/books?id=QSzjUIxs0GwC&printsec=frontcover&dq=euclids'elements&num=4&client=internal-uds&cd=4&source=uds#v=onepage&q=&f=false
  38. 38 http://books.google.com/books?id=2gO2sBp4ipQC&printsec=frontcover&dq=patterns+in+nature&num=4&client=internal-uds&cd=4&source=uds#v=onepage&q=&f=false

↑ Back to top Tweet itShare on Facebook

I am a web designer and developer from India. I have deep interests in computer science, art, math and astrophysics in-spite of the fact that I graduated as a Petroleum Engineer. I am a devoted fan of Salvador Dali and have spent a considerable amount of time in studying various art movements. I spend most of my time in web design and in coming up with new ideas to enhance productivity. Oh, and this is an additional but somewhat useless fact - I have four international research papers in the field of petroleum engineering.

Advertisement
  1. 1

    great post ……use full

    -2
  2. 102

    great stuff
    want learn more , see more.

    0
  3. 203

    Great Article. Thanks for that! :) Probably one of the coolest things you can do with Fibonacci Series or The Rule Of Thirds is using it to determine font sizes. In my oppinion those ‘ancient techniques’ are the most basic tools one can use when designing. Leading discussions about the usefulness of them is just obsolete.

    3
  4. 304

    This is a great article. I have been interested in the golden ratio for some time now but needed clarification on implementing it in web design. This article helps tremendously.

    A bit offtopic, but where is the Space Geek website? Is that just a mockup or an actual site? I couldn’t find it in Google and it looks very interesting.

    -1
  5. 405

    Cool, Like numbers series only mathematics used in web development

    -1
  6. 506

    This article is great, very informative and innovative. I’m excited to implement some of these new techniques when creating websites. Check out some of the sites that we have done: LeapfrogWebMarketing.com.

    -1
  7. 607

    Scraping the barrel here a bit I think

    0
  8. 708

    It’d be great if you guys at smashing could provide a link to a print-friendly version of articles like this.

    I’d love to have copies in my bag be able to read them when I’m on the bus or whenever.

    Pretty please?

    0
  9. 809

    Thank you sooo much for this article. I have to explain the fibonacci sequence as applied to design for my design class and I was having a hard time understanding it, and the internet wasn’t helping at all. Very concise and understandable, thank you!

    0
  10. 910

    fun fact, the fibonacci sequence is very related to the golden ratio. if you take a fibonacci digit, and divide it by its preceding fibonacci digit, you get something very near to the golden ratio. it becomes more exact with larger digits (i.e 987/610 is a far better approximation than 21/13)

    2
  11. 1011

    Fantastic article! My only complaint is the 30 Thoughts blog doesn’t appear to be a real blog and I really wanted to read it. =)

    2
  12. 1112

    haha funny jokes but get lost
    it made me feel stupid u big fat meanies

    -4
  13. 1213

    Interesting concept. I have referred to this URL in online studies at University of Phoenix. Thank you for some great info, graphics, and article.

    -1
  14. 1314

    I would like read more information about this, it’s very interesting! Thanks for the information.

    -1
  15. 1415

    Michael Greenwood

    March 25, 2014 4:34 pm

    Well yes maths does come into play a lot in web design and web development. Symmetry, screen sizes, responsive design – these are just a few aspects of designing and developing for the web that require these types of skills. Of course one doesn’t need to be a mathematical genius and there is, of course, no requirement to be able to produce proofs in a maths sense but a certain level of mathematical ability can be a real asset.

    0
  16. 1516

    Wow!! Never heard of that band. But, I think I must listen to them now!
    I have also included a link to Michael Paunker’s Flickr photostream in the article. You will be amazed to see how the golden ratio/ Fibonacci numbers have been used in great paintings like Mona Lisa and Vitruvian Man.

    1

↑ Back to top