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.

Useful Links and Resources

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)

↑ Back to topShare on Twitter

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.

  1. 1

    That was an interesting read. I love math :) and design.

    0
  2. 2

    Also to be highly considered is the root 2 rectangle system which is a sure fire way of designing spot on asymmetrical/symmetrical balanced designs. As it is based on the DIN paper sizes it would be worth getting some standard print sizes and converting them into px or em to conceive a modular structure which will work every time. If you get the base maths right every proportion you make will be balanced.

    0
  3. 3

    Design for your right brain, and math for your left brain. Make it balance :D

    1
  4. 4

    Brilliant post.

    1
  5. 5

    Very interesting. I have used the Golden Ratio before, and one of my design teachers in college explained the rule of thirds, and had us examine classical pieces of art to understand how it can be broken down, and how to lead the eye.

    It is very important to make the eye flow on the page correctly, and math and these ancient rules that have been used in art and architecture for a long time do just that.

    0
  6. 6

    Good Stuff! I have the last few days been reading other sources on the subject – Did you read my mind?!

    0
  7. 7

    Beautiful.
    I love the golden ratio for ages. The idea with a sine wave is also interesting. Maths and design and other arts enrich each other.

    0
  8. 8

    Excellent post !!!
    write more like this articles, friend.
    Congratulations :)

    0
  9. 9

    I love articles like that! Thank you!

    (and suddenly, i feel i’m not so alone)
    :D

    0
  10. 10

    An excellent posting! So many designer don’t make the effort to understand the concepts behind “beauty” and “harmony”.

    There are so many great examples in classic art and architecture out there that explore the maths / concepts behind proportions and sensible layouts.

    Thanks!

    0
  11. 11

    Great, good stuff, love it. Consider it embraced.

    0
  12. 12

    Amazing. This is incredible.

    0
  13. 13

    This was exactly what I always was searching for. – Thanx a lot.

    0
  14. 14

    My brain now hurts, thanks a lot. I went into design because I couldn’t do math and now you are trying to scare me. To you sir, I say poo

    -2
    • 15

      So you should consider not being a good designer if you’re not able to understand the math behind design, they need to be together in order to create balance and harmony, is not just about “making things pretty”.

      1
    • 17

      @jeremiah
      Designers work with grids and grids is geometry and geometry is math. So, we are always using Math. :) I have stated in the article that it’s not necessary to always use other mathematical techniques in your web design. It should be used as a tool rather than as a compulsion. :)

      0
  15. 18

    Very cool! Math is such an interesting thing. I have been learning all this in my art history and design classes, the examples were spot on. Thanks.

    0
  16. 19

    I’m just wondering if there is any direct benefit of using, say for example, a Fibonacci-based design versus a layout that doesn’t. Will it achieve better landing page conversions? Does it make a web page more readable? Or scannable? Will it make designing a web page faster? Will it make page response times quicker?

    Yes, the Fibonacci number, the Golden Ratio, and all of these mathematical principles have been applied in other fields before, but does that automatically mean it has its applications to designing a website?

    Saying that the Golden Ratio has been applied to architectural design but not much in Web design is like saying, “Airplanes have wings and they travel fast–maybe we should put wings on cars too!”

    Design should be purposeful; it’s a tool to get your objectives done. Don’t make it fit, if it doesn’t. If a Sine Wave layout gives you direct and tangible benefits (maybe test via A/B study?) versus one that doesn’t, then it should be applied in the field of web design. But just based on my opinion, the Sine Wave layout is kind of difficult to read. The eye flow is unnatural (at least to LTR readers such as myself).

    My two cents and I’d be interested what you folks think.

    0
    • 20

      Hello Jacob! I really appreciate your comment. I would like to touch upon a few things regarding this article:
      1. The article is primarily concerned with simple application of mathematics in Design. We all know that designing is all about arranging elements with an aesthetic sense keeping functionality in mind. I can say that Fibonacci design is certainly readable not only because of typographic rhythm offered by Fibonacci numbers but also because it has an intuitive navigation. There is no need for buttons as the navigation flow is quite natural. Hence, the design has also achieved functionality. Things like making web page faster or
      making page response time quicker will take us more into development side. However, that also could be achieved.

      2. As said in the article, it’s not necessary to always use mathematics in your web design. Rather it can be used as a tool to come up with creative designs. I mostly come across two column designs on the web. Honestly speaking, they have become the Helvetica of page layouts. Even though it looks good, it has become boring. We see them nearly everywhere, even I designed my blog like that!!! Hence, I decided to come up with a different approach using mathematics as a tool.

      3. The sine wave design is different in the sense that it does not follow the normal two or three column layouts. You can see that the content in the design is not linked to each other. They are all independent. The purpose of the design was to give this independence to the reader. The reader can look at any content and still get the intended message, that is a simple brief about the books. However, elements cannot be arranged randomly and hence a rhtymic pattern was followed to take care of the design aesthetic sense.

      Again, Mathematics gives you an option to explore more in design. Also, mathematics gives a discipline to a design. One of the greatest designers, Massimo Vignelli has said- “There is no design without discipline.” :)

      And yes, cars are going to have wings pretty soon. A project is already at going on at MIT and we will soon have flying cars too!! :)

      0
      • 21

        You presented the concepts accurately and made no claims that “this is automatically better versus this because it uses cool awesome equations” so don’t feel obligated to defend your work because it’s great. I was merely asking a question in general to the community about the fact that, “Yes, you can use them in web design, but should you? And if so, why?”

        If the argument is: “To be different from other common layouts” – then why use mathematical equations at all? Go freestyle!

        The point I’m driving at is this: “Do they really translate well on the web? And why do it? What benefits are there to be had?”

        My point about the airplanes and car analogy was: “Why would you put wings on a car when its purpose is not to fly, but to use roads?” Just because it works well for a similar thing (architecture/web design are similar because they both involve design just like a plane/car are similar because they’re both transportation), doesn’t automatically mean that it works or fits another.

        Putting wings on a car means you’re making an airplane (or a hybrid car and airplane).

        Web design is tricky in that we have many different goals, mostly having to deal with readability, findability, content presentation, and landing page conversion.

        What I’m afraid of seeing is designers spending ludicrous amounts of hours trying to make their layout embody some sort of Fibonacci ratio or make sacrifices to their designs because some equation tells them that it’s got to be a certain width or position when there is no (at least, not yet) study that proves that it makes your site design more effective in achieving its purpose or that does it makes it any more aesthetically-pleasing.

        I write this solely from personal experience, and nothing more. I recently gave up on 960gs because I found that I was spending way too much time constraining myself to self-imposed limits that the layout affords me, rescaling and making sacrifices to make design elements fit, when there is no tangible proof that a grid-based system versus a layout with no system at all, is more readable, more usable, or, overall, provides a better experience to your viewers. It was supposed to speed up web design – but because of the self-imposed limits – it actually slowed it down.

        In short: yes you can use Golden Ratio, Fibonacci Numbers, etc. (and I even covered it in the chapter I wrote in the Smashing Book) – but to what end? Beauty is subjective, and most people wouldn’t know or see the difference between a site that uses the Divine Proportion versus one that doesn’t.

        And finally, “Again, Mathematics gives you an option to explore more in design.”

        I think the opposite is true. It gives you self-imposed constraints, such as the Golden Ratio. There is no experimentation or exploration in a Golden Ratio layout; you plug in a total width, and it will tell you what your column sizes should be.

        0
        • 22

          @Jacob Thanks again for your reply. :)

          I have nothing against freestyle design. Also, I am not asking to always use mathematics for designing their websites. I believe that we should all just try to get creative with our designs without making any compromises on functionality. Now, an individual can get creative by either opting for freestyle design or by using math as a tool in web design. I also do freestyle designs and forthcoming articles on my blog would also touch upon that. However, a very important thing is that the freestyle design should also be able convey the purpose. Otherwise it will become fine art and not design. Nevertheless, the purpose is to get creative in different possible ways. :)

          Math exists everywhere around us. Even when designing, we are talking about pixels, width, height, etc – All this is Math. :) So, if we can make a design beautiful and functional with some mathematical principles, then the designer should be quite happy with it. :)

          I believe that design and art are two separate things. I have covered a topic on my blog wherein I have demonstrated how some artistic styles can be used in design. But still, the design should remain functional and balanced or else it will end up being a chaos. The principles of balance and harmony separates a designer from an artist. An artist can use his brush on the canvas with all the freedom to convey his thought because he is not essentially painting for the user. He is expressing himself with his art. However, a designer has to keep the user in his mind because he is not just expressing his thoughts here but also his purpose is to convey some form of information. For conveying information, we need a medium which is balanced so that the user is not overwhelmed by overflow of information. It is here where mathematical principles can come handy. Things like Golden Rectangle and Fibonacci numbers give you an option to make your designs in a balanced way. However, I must say again that they are just tools and should never be taken as compulsive rules in web design.

          0
        • 24

          I’ve always wondered about the 960 thing.

          I mean one of the big things about css was to allow us more freedom in our designs which was great. Then along comes someone espousing the benefits of a grid system and suddenly we’re can’t design a site without the rigidity of a grid.

          Yes the rule of thirds, Fibonacci and all that gives some sort of order and balance which is good, but sometimes you have to step away from that and just do what works.

          0
  17. 25

    Very interesting. Golden section proportioning and such theory are taught on my Graphic Design course at university and it’s useful to see how it can tie in to web design too.

    0
  18. 26

    More about the rule of thirds briefly mentioned above:
    http://arstechnica.com/wankerdesk/01q3/photo/photoart-1.html

    It’s old, but offers great examples.

    0
  19. 27

    Really interesting stuff, it’s a shame I’m so numerically illiterate, because the principles look sound, but might as well be written in Greek (I guess they kind of are lol). I’m now looking at some websites and trying to figure out which mathematical principle they are following. I’m fairly sure that DubLi an approximation of the Fibonacci one?

    -1
  20. 28

    i love this post
    thanks

    1
  21. 29

    Great article! So true, we just posted a blog about designing to an information architecture: http://bit.ly/aAxITN

    0
  22. 30

    Uh this is great

    -1
  23. 31

    Terrific post. Thanks for sharing that with us!

    -1
  24. 32

    @Jacob Gube: You have a good point, Jacob, that using the Golden Ratio or Fibonacci numbers won’t automatically make your webpage more readable or produce more conversions.

    In my opinion, these tools are just a possible foundation on which to build a beautiful website. Lots of awesome websites are designed by people who never think about Fibonacci, but incorporating these principles can definitely contribute to a site’s beauty and readability.

    You’re right–we shouldn’t force a design to fit these principles. Some of them are very pleasing to the eye though. Why not incorporate them when it works? If they help your website accomplish its goals, use them! If not, use ‘em somewhere where they’ll work.

    Thanks Adit Gupta for the fascinating post! And thanks for the PSD templates.

    -1
    • 33

      @Leighton

      I am really glad that you liked the article. It’s true that these mathematical principles should not be forced in a design. A design should not only look beautiful but it should also be functional. This is the reason why I have included a possible applications section in each design.
      Beauty + Functionality = Design :)

      -1
  25. 34

    This article hurts me. I fear of math :-(

    1
  26. 35

    What a geek! Very nice post.

    1
  27. 37

    Yay, we’re getting technical! I was a little disappointed that the recent articles haven’t been very in-depth, but this one is great! Real thoughtful content. Great post! Thanks to everybody involved!

    0
  28. 38

    Thanks for this incredible article, I do believe Design schools (in Mexico) should require mathematic learning to become a true designer, not just an “artistic designer” without concepts of proportion and functionality.

    0
  29. 39

    Well – this is very interesting – who would of thought that math and websites would fit together…huh..
    I guess you already know that art and math are very important together also – such as using Pythagorean Theorem – you know – a(2) + b(2) = c(2)
    bari

    0
  30. 40

    Very interesting article. Thanks for posting!

    0
  31. 41

    I think the interesting thing about this article is that many designers, while believe they are just designing, are really performing math subconsciously. Perhaps not to perfection, as in this article, but to some degree. Very interesting read.

    0
  32. 42

    Best article evah! Mathematics rules!!! ;)

    0
  33. 43
  34. 46

    Should there be an ‘or’ here somewhere?
    “Depending on the calculations you get, you need to use them either for your page blocks.”

    great article, otherwise.

    0
  35. 47

    Three additions to your article:

    I. The is no real difference between the Fibonacci-series and the golden ratio. The ratio of two successive numbers from the F-series converges to the golden ratio, no matter which two starters had been used for the F-series (them not both equaling zero). E.g. the two last numbers from the example in the text are 89 and 144. Then 144/89 = 1.618, which is the golden ration in four decimals already.

    II. I like grids and grids based on these number systems, but what is the particular relevance? Are they better looking than any other ratio in the range 1.4 … 1.7? Do they convert better?

    III. Missing are two ratios that do have interesting visual properties that are unique to them and are not provided by any other ratio:

    * the square root of 2 can be divided in two halves that again have the same ratio. This is the basis of the DIN-series, notably the DIN-A series.

    * the other special series is square and its multiples: 1:1, 1:2, 1:3, 1:4, 1:5, etc. When split at the appropriate positions, the resulting parts fit in the same system.

    0
    • 48

      I was just about to say this, too. It’s actually how I learned about the Divine Ratio, and it’s also the easisest way to remember the ratio: just divide any fibonacci number through the next smaller, no need to try and remember that weird figure in the first place.

      The most important factor here is that the ratio is aesthetically pleasing, simple as that. The site *feels right*. It’s very easy to implement, so no reason to keep worrying about how to structure your page. Just build it using the golden ratio and you’re set in that regard, leaving you to worry about all the other stuff with more time and a ready-made frame.

      0
  36. 49

    Simply Beautiful!!

    0
  37. 50

    I thought I’d never need to know much math for design, but I’ve already found the Golden Ratio and Fibonacci numbers to be useful. I haven’t tried them for web design yet but in print. The other ones are new to me.

    0
  38. 51

    @Jacob and @Adit The mathematics applied are in no way to make the webpage have “wings” as rhetorically claimed by Jacob. :)
    I remember downloading a theme Basic Maths the other day from iA website and it was very well designed in terms of UX. It used the Golden Ratio for creating the flow of content and horizontal and vertical motion.
    So if a question is “does use of Maths equation make for a better design?”, my best reply would be “YES, in most cases it does”. I believe Adit went ahead without talking of the most basic use of maths in our design: THE GRID. Grid design is nothing but application of mathematical principle of equality and division applied to web. So there is no way the above mentioned methods do not apply. In face it is a great shift from the same designs that we see each day.
    As far as @Jacob points out about the readability issue of the Sine Wave design, I agree totally. It fails to focus the attention and disrupts our vision. But I would like to point out, the disruptive nature is when we skim through the page (as we skim through a glossy magazine). When we actually sit and read the web page, the disruption is not that pronounced.

    0
  39. 52

    Nice article, thank you :)

    0
  40. 53

    I hate Maths.. eventually this article is in the list too now.. yaikees!! :D

    0
  41. 54

    Nice article, thank you :)

    0
  42. 55

    I made some time ago a FibonacciTree in Ai.
    Are you interested to see it?

    Edward

    0
  43. 56

    yO! Really original post. It’s amazing when it all comes together, mathematically.

    0
  44. 57

    very, very cool post. Cheers!

    0
  45. 58

    Christopher Michael

    February 9, 2010 2:32 pm

    The car with wings represents a extremely weak, apple vs. oranges analogy. Saying that a design principle, such as the Golden Ratio, that’s been successfully applied to architecture, painting, and print design -might- work in online design too isn’t the same as incorrectly using a functional structure on a car.

    In fact, I’d say sticking wings on a car would more likely be done by someone trying to be creative without any grounding in basic design principles. If you want to use the travel analogy, then it would be more apt to ask whether the same design principles regarding wind resistance might apply for cars and planes.

    BTB I’m all for getting wild and experimental with design. But, in any artistic endeavor, it helps if you knows the rules, before you breaks the rules. :)

    0
  46. 59

    This is a great article but to me these things seem like more of a novelty than something I would use in my designs.

    Also it seems more like someone designed a layout and then said “hey, that looks like a sine wave!” rather than the other way around.

    0
  47. 60

    This is really brilliant, Thanks

    0
  48. 61

    Love math, and this article is very neat. But, let’s be honest, most designers just use photoshop grids and common sense to make layouts. The vast majority of them aren’t going to consciously go into mathematics for a basic page layout, even the ones who say they do and talk about “harmony” like they’re in a cult. Would be nice if they did, but it’s not really essential. Face it, people, you’re not all Leonardo da Vinci. And most people will just say this stuff is awesome to show off their self-ascribed “geekiness.” Lotta people commenting here sound like they read this and are just regurgitating what they read. There is a difference between busting out a white board and doing a differential equation and just mimicking the common sense grid patterns you’re force fed in art school.

    0
    • 62

      @ JerkaholicJuice

      It’s really not essential to apply mathematical principles every time to web designs. I don’t do it either. But sometimes we can have some fun with mathematics too ;)

      There are other equations and geometrical layouts which can be used to make designs with creative and balanced modification of positive and negative space. However, I had to reject them because they all were getting way too mathematical.

      As I said above that maths gives us a guide that we can apply, however it’s rather about implementing sites with maths than implementing maths with our designs. :)

      0
  49. 63

    great examples, thank you for sharing that. I have already began to apply these rules to my concept

    0
  50. 64

    I once applied Physics quantam theroy to my website design. The result was iShit.

    0
  51. 65

    Thanks for the great post.
    I also always use Fibonacci designs, golden ratio and golden rectangle when creating anything 2D and 3D.

    0
  52. 66

    different and nice article. keep it up :)

    0
  53. 67

    Fun example of the Fibonacci design: http://www.boatechnology.com/

    Great article.

    0
  54. 68

    Petros Dimitriadis

    February 9, 2010 10:01 pm

    Two of my favorite subjects, design and maths.

    Us web designers should be categorized in the field of science as well!

    One of the best articles i read quite a while!

    0
  55. 69

    This is brilliant post, very informative.
    Thanks a lot for sharing.

    0
  56. 70

    Interesting read. Have never thought of relating maths and designs.

    0
  57. 71

    Very interesting approach to the web design and it could be for sure used in some areas. Personally I have always focused in the publications design like the books or magazine and look at the web design which incorporate similar method of designing. In this way this article is nice to read and find something new.

    And yes- mathematics is all around… :)

    Cheers :)

    0
  58. 72

    useful

    0
  59. 73

    Awesome,,,,,
    No more words to appreciate.
    Thanks

    0
  60. 74

    Thank you for the article.

    Matching your design with content should be number one and there are many variations of these ratios to choose from. If you look hard enough you will find them in any website whether they were intended in use or not.

    For my future projects the sin function (wave) and kundli will not be used but they are interesting concepts. Maybe I can use them in some Illustrator pieces in my free time for graphics, but definitely not as a layout.

    Fibonnaci layout is ok…I still wouldn’t use it.

    Even the golden ratio should not be looked at as some kind of standard. I really only use the rule of thirds in my photography and filmmaking not my website layout. I do tend to use some form of the golden ratio though, it may not be exact but it is similiar in relation.

    0
    • 75

      Hello Michael,

      Thanks for leaving a comment. These layouts are not intended to set any sort of standards. The only aim was to come up with something different that can be also useful for specific purposes. Thus, I have also included a possible applications section with each design. Moreover, each design can also be enhanced to improve user experience by including certain jQuery plugins. :)

      1
  61. 76

    Good article a bit short I wanted more examples of websites using math in their design.

    0
  62. 77

    This is a nice article!

    In mathematics there is what we called infinity and “Design=Infinity”.
    Design is simply without end nor limitations.

    Also some are very much concerned about balance and order but please don’t forget that in chaos there is harmony!

    :D I like this article!

    0
  63. 78

    interesting yet i think looking for math in every aspect in life is a bit schizophrenic :)

    0
  64. 79

    In one word – Excellent tutorial dude ! as always….mathematics is used everywhere, be it in graphic design or web designing purposes. Mathematics, as we say was invented, by the famous “Aryans” – The Vedic Mathematics – which is the main core of maths [i.e where the current maths we study is emanated] . I’ve appreciated the Kundli Design one, which is totally awesome ! thanks for the the PSD files ! I like it, Mixx it

    1
  65. 80

    @adit gupta:
    Nice article, but i think you should mention that the fibonacci series respect (or define) the golden ratio. Every a[n] in the fibonacci series is approximately his predecessor (a[n-1]) multiplied by 1.618…. so its based on the same proportion.

    0
  66. 81

    I never use it. :D

    1
  67. 82

    Great article – I’ve long been fascinated by the golden ratio and have tried to incorporate it into my designs in the past with varying degrees of success.

    FYI, there’s a WordPress theme based on Phi if anyone’s interested (#2 on the list): http://informationarchitects.jp/downloads/

    And a useful read: http://www.arraystudio.com/as-workshop/golden-ratio-wordpress-theme.html

    And another smashing mag article here: http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

    Cheers

    /Doug

    0
  68. 83

    Its good for Knowledge but not good for implementation :D

    0
  69. 84

    @adit Gupta – Interesting Read, Never thought that We use the kinematics of Maths into Web Design, though I still flinch away from my university engineering maths. :)

    As a Web developer, I would like to know the name of the most popular jquery plugins that you use and would suggest? jquery highlighter was awesome.

    0
  70. 85

    All I know about maths in web design is addition and subtraction of heights and widths. :D

    0
  71. 86

    loved the article.

    0
  72. 87

    @Pradeep me too. This guy is trying to scare those of us who got C’s in college algebra

    0
  73. 88

    excellent – i shall use this more than once.

    0
  74. 89

    Cool post.

    Funny that you keep saying we can use math as a “tool”, because I was thinking of the band Tool throughout the article.

    In their song Lateralus, they use the Fibonacci sequence and Sine pattern to guide the singing. The lead singer Maynard James Keenan delivers the lyrics making sure that the syllables of each line match an oscillating Fibonacci pattern.

    black (1)
    and (1)
    white are (2)
    all I see (3)
    in my infancy (5)
    red and yellow then came to be (8)
    reaching out to me (5)
    lets me see (3)
    there is (2)
    so (1)
    much (1)
    more that (2)
    beckons me (3)
    to look though to these (5)
    infinite possibilities (8)

    To top it off, the lyrics start at the 1:37 mark of the song, ie. 97 seconds… which is approximately the golden ratio of one minute (97 / 60 = 1.616)

    0
  75. 90

    Very good article.
    In fact this article reminds me of the book which I bought
    “Geometry of Design” by Kimberly Elam.
    Studies in proportion and composition.
    On the back of this book it says “natural proportioning systems that provide the foundation for the work of many – some would say all – artists and designers.”

    I use Golden section, rule of thirds in my poster design, web design and in photography. It does make a difference.

    There is on e tool available on the net called phiculator.

    0
    • 91

      Thanks Kisan!
      There is also a golden section plug-in available for photoshop on the web. However, I’ve not tried it yet. The golden ratio tool is also available in Corel Painter 11 to aid in visual arrangement of the composition. :)

      0
  76. 92

    Very cool! I’d be interested to see someone design a site using Marko Rodin’s Vortex Based Math ( http://www.markorodin.com ).

    0
  77. 93

    Great information in this article. Never thought of it like this but it makes a lot of sense.

    0
  78. 94

    I used to like your site but now it is getting boring :(:(:(:(:((((((( but i still visit your site like everyday. I don’t know why. Everything are so advance now :S:S:S:S

    0
  79. 95

    It is impossible to separate a cube into two cubes, or a fourth power into two fourth powers, or in general, any power higher than the second into two like powers. I have discovered a truly marvellous proof of this, which this website is too narrow to contain!

    1
  80. 96

    no no no maths! i’m still scared abt it

    0
  81. 97

    really great !Interesting

    0
  82. 98

    Pierre siad:
    “It is impossible to separate a cube into two cubes, or a fourth power into two fourth powers, or in general, any power higher than the second into two like powers. I have discovered a truly marvellous proof of this,… ”

    I hope you are not the same Pierre de Fermat whose theorem was first conjectured in 1637, but was not proven until 1995 despite the efforts of many mathematicians.

    0
    • 99

      Haha! What more can I ask for than Fermat’s soul sending a comment on this article from heaven!! I would love to have discussions on Fermat’s theorem or even Poincare Conjecture for that sake, but I don’t think we are concerned with that much complex mathematics in this article. :)

      The only purpose of this article is to have some fun with simple mathematics and make a judicial use of it in our web designs. :)

      You can still drop me a mail if you want to have some discussions on the above mentioned topics. ;)

      0
  83. 100

    Thanks Adit.
    After reading Simon Singh’s Fermat’s Last Theorem, I realized how tough it was for mathematicians to solve it who took more than 300 years.

    I found it it very hard to understand.

    0
  84. 101

    If i liked the math……… then y the heck i become a designer. I Hate math and i am good designer i think :P

    0
  85. 102

    I think you’ve described how a lot of website designs end up, possibly without the designer thinking about the maths in such detail before hand. Interesting read though, will probably be at the back of my mind when I design my next site :)

    0
  86. 103

    Hey Adit

    Lovely article.
    To be honest i am a developer not a designer. I ve done loads of free lance work on and off the web in a number of different industries and using a variety of tools.
    To be true to all present here, I have always hated design. I felt that it is counter productive to functionality (and here i refer to the functionality of a software/software like application).
    Off late i have learned the importance of design and what it can offer in terms of “user interface”.
    The golden ratio, divine proportion, fibbonaci, etc i have known of for ages.
    It perhaps interests you to know that the golden ratio exists in the major and minor lengths (of the ellipse) of the path that planets move in. Or that the distance between two consecutive branches on a tree are in this same ratio.
    I ask now a simple yet boggling question :
    How can we use maths to determine User Interface’s? I refer not to layouts now, but to the locations/styles of each control on a web page.

    I ask only because if it has/can be done, then there is great utility in standardizing it for a plethora of sites. The Logo on top, Copyright on the bottom is just a convention made up years ago and now people all across the web look in the respective places for these elements.
    If there is some math that can be done to achieve this for a generic set of UI components then I for one would love that.

    Anyhow, fantastic job. Science and art are inextricably woven together, of that I have no doubt.

    0
  87. 104

    I love logic, and this hits the spot, well done.

    0
  88. 105

    brilliant stuff… really love such kind of articles ! :)

    0
  89. 106

    Check out the book “Geometry of Design” by Kimberly Elam

    0
  90. 107

    So good to see someone talking about this! Personally, I’ve found mathematics-based design extremely helpful, particularly when designing liquid layout. It’s also helpful when designing graphics (print or otherwise).

    My private “cheat sheet” for geometric inspiration over the past decade has been this volume, a small book chock-full of lovely geometries and proportions: http://www.amazon.com/Sacred-Geometry-Wooden-Books-Miranda/dp/0802713823 I strongly recommend it for any visual artist.

    0
  91. 108

    I’m so glad to see this. I’ve been applying–if not very methodically–simple “golden” proportional relationships to designs for years. Sad, though, how few understand and appreciate such stuff, even many art directors and design managers.

    I think it is worth acknowledging that the results of these kinds of design approaches don’t really register consciously for the average person. But designers and especially those with more of a UX focus or responsibility need to design for all levels of consciousness. As many top ad designers do. (If in doubt you too can read the APA’s consumer and marketing psychology division’s trade pub’s)

    0
  92. 109

    Thanks a ton Alex.
    I went and bought ‘Sacred Geometry’ and added two more books related to it.

    0
  93. 110

    Gran articulo, es muy importante lograr un equilibrio en el diseño y sin duda las matemáticas nos ayudaran mucho

    0
  94. 111

    Cool I’m designing my startup’s website and I’m no designer but this will help me to come up with a balanced and attractive desing for sure, thanks for the share :)

    0
  95. 112

    This article expanded my horizons. Very thanks for share.

    0
  96. 113

    Niiiiice!

    Q. Will such design result in some advantage(page hits, usability, etc)?
    My A. That is a later thought. I give you peace and I hope people who tripped on this thought of yours will further the thought and maybe get it themselves(includes me).

    Q. Is discipline the murderer of creativity?
    My A. Creativity is exploring higher forms of discipline. Mathematics is a discipline. When you start from a table you can’t go beyond much. CSS lets you go beyond a lot. 960 can let you discipline your boxes and then go beyond it. It’s just that. Kudos for introducing us to this. Now we’ll get it, now we can go beyond more easily.

    I’m just learning. I must say, I learn better with stuff like this. Thanks a lot.

    0
  97. 114

    Awesome awesome awesome! I knew there was some sort of math in web design but I never realized it was this broad. Thanks for the post. I’ll definitely be using it for my future designs.

    0
  98. 115

    I’m just wondering if there is any direct benefit of using, say for example, a Fibonacci-based design versus a layout that doesn’t. Will it achieve better landing page conversions? Does it make a web page more readable? Or scannable? Will it make designing a web page faster? Will it make page response times quicker?

    Yes, the Fibonacci number, the Golden Ratio, and all of these mathematical principles have been applied in other fields before, but does that automatically mean it has its applications to designing a website?

    Saying that the Golden Ratio has been applied to architectural design but not much in Web design is like saying, “Airplanes have wings and they travel fast–maybe we should put wings on cars too!”

    Design should be purposeful; it’s a tool to get your objectives done. Don’t make it fit, if it doesn’t. If a Sine Wave layout gives you direct and tangible benefits (maybe test via A/B study?) versus one that doesn’t, then it should be applied in the field of web design. But just based on my opinion, the Sine Wave layout is kind of difficult to read. The eye flow is unnatural (at least to LTR readers such as myself).

    My two cents and I’d be interested what you folks think.

    0
  99. 116

    Brilliant thought! Simple but complex post :)

    0
  100. 117

    Very interesting article. Do you have any kind of literature about the theme that you recomend?

    0
  101. 118

    great post ……use full

    -2
  102. 119

    great stuff
    want learn more , see more.

    0
  103. 120

    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
  104. 121

    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
  105. 122

    Cool, Like numbers series only mathematics used in web development

    -1
  106. 123

    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
  107. 124

    Scraping the barrel here a bit I think

    0
  108. 125

    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?

    -1
  109. 126

    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
  110. 127

    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
  111. 128

    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
  112. 129

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

    -4
  113. 130

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

    0
  114. 131

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

    0
  115. 132

    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
  116. 133

    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.

    0

↑ Back to top