“Mathematics is amazing.” This might seem absurd to people who wince in equations and numbers. But some of the most gorgeous things in our universe exhibit mathematical properties, in the smallest seashell to the greatest whirlpool galaxies. Actually, one of the greatest ancient philosophers, Aristotle said: “The mathematical sciences particularly exhibit order, symmetry and restriction; and these are the greatest forms of the beautiful.” [Links assessed & mended March/03/2017]
Because of its beautiful nature, math is component of art and architectural layout for most ages. But it has not been exploited much for site design. This is probably because a lot of us regard mathematics as being antithetical to ingenuity. To the contrary, math could be a instrument to create innovative designs. Nevertheless, you don’t need to rely on mathematics for every layout. The purpose is you ought to regard it as your friend, not a foe. For illustrative purposes, we created a few web designs which present mathematical principles talked about within this report. We’re also giving out a couple of PSDs which you could use straight away on your next layout.
Further Reading on SmashingMag:
Layouts featured within this post were created specifically for the point of this report. Throughout the design process we ensure that each one of the designs displayed within this informative article are basically mathematical in nature; that is they exhibit order, symmetry and restriction. We also have adopted the Internet layout algorithm within this procedure — the layouts have different topics, styles and elements. To keep things simple and clear, we tried to adhere to minimalist designs as well as favored single-page layouts. Clearly, examples in this article are supposed to function as a simple foundation for your layouts rather than as the completed layouts.
Golden Ratio and Golden Rectangle
The golden ratio, also known as the divine ratio, is an irrational mathematical constant with a value of approximately 1.618033987. If the proportion of the sum of the amounts to the bigger quantity is equivalent to the proportion of the bigger quantity to the smaller one, then the numbers are believed to have a golden ratio.
We already published a very comprehensive article “Applying Divine Proportion To Web Design” that clarifies how to utilize the golden ratio in Internet design. In the present article, we’ll take a look at how to use golden rectangles in Internet design. A golden rectangle is one whose side lengths possess the golden ratio 1:(one-to-phi); that will be, 1:1.618.
The construction of a golden rectangle is very uncomplicated and simple. Assemble a simple square. Then draw a line from the midpoint of one side of this square to another corner and use that line as the radius to draw an arc which defines the height of this rectangle. Last, complete the golden rectangle and you’re finished.
A way to construct a golden rectangle. The square is summarized in red. The resulting dimensions are in the ratio 1:Phi, the golden ratio.
As an example, think about the minimalist layout beneath. It has six golden rectangles in it, three rectangles per line. The rectangles have the dimensions of 299 x 185 pixels. So the sides of these rectangles adhere about to the golden ratio; that will be, 299⁄185 = 1.616. Notice how the great deal of white space surrounding Golden rectangles produces a calm and easy atmosphere in which the navigation choices can breathe and serve their purpose. Even though the design uses just few colors and blocks are positioned very similarly, the navigation choices are obvious.
However, it can be quite difficult to put in a new Golden block while keeping the consistency of the design. Possibly the only sensible design solution here would be to add the cube on the third line and use the remainder of the horizontal space for other, less or more conspicuous features (if necessary). It is possible to click on the picture below to view the enlarged version.
The golden rectangle layout is ideal for picture galleries, portfolios and product-oriented websites. The golden rectangles may also be arranged in other mathematically solid approaches to generate amazing layouts. In particular, you might choose to utilize them for cubes that show images or advertisements on your sidebar. Needless to say, the pure collection of golden rectangles does not make for a professional, nice-looking layout. In addition, you need to work in tandem with grids, orientation, proximity and emphasis to get the key aims of your style. For instance, an intriguing design solution would be a CSS/jQuery-based fluid grid layout based on golden rectangles, however we don’t pay this procedure in this report.
Download the PSD-layout
We prepared a sample PSD design that is designed in accordance with the Golden Ratio and Golden Rectangle. Please feel free to utilize it at all and send the link to this report to your colleagues if you want to spread the word.
Smashing Membership. Just sayin’.
As the name says, Fibonacci layouts are designs based on the Fibonacci sequence of figures. By definition, the first two Fibonacci numbers are 0 and 1, and every remaining number is the sum of the preceding two. Some sources omit the initial 0, rather starting the sequence using two 1s. So the very first two Fibonacci numbers are given, and every remaining number is the sum of the preceding two. The greater the Fibonacci sequence gets, the closer its numbers connect to each other based on the Golden Ratio. A Fibonacci sequence resembles this:
1, 0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...
In audio, Fibonacci numbers are occasionally utilized to ascertain tunings, and in visual artwork to find out the length or size of material and formal elements. Jürgen Schmidhuber his methodology for Fibonacci-based layouts on his blog. However, if you inspect the style he created, you’re likely to find it stiff and a little difficult to read and navigate. Indeed, you will need to get a little creative with mathematics as opposed to following the rules blindly — maths provides us a manual which we can use, however it is rather about implementing websites with maths than implementing maths using our layouts.
_Approximate and true golden spirals. The green spiral is made from quarter-circles tangent to the interior of every square, although the red spiral is still really a Golden Spiral, a distinctive kind of logarithmic spiral. Overlapping parts seem yellowish. The amount of the side of one square divided by this following smaller square is the Golden ratio. Source_
The main idea behind such designs would be to use Fibonacci when determining about the dimensions for content sidebar or area. The two Golden ratio and Fibonacci enable designers rely on sound, shared ratios for webpage containers or cubes inside page containers.
Generally speaking, layouts are quite easy to construct together with the Fibonacci sequence. You choose a certain base diameter — for instance, 90px. Then, when determining the size of your containers, then you multiply the foundation width with the figures from the Fibonacci string. Based on the calculations you receive, you will need to use them on your page cubes. Let’s take a look at an example. Below is a minimalist typography blog according to Fibonacci Internet design.
It is possible to see that the webpage is broken up into three columns. Each column corresponds to a Fibonacci number. For this design, we utilized a base diameter of 90 pixels. This base thickness is then multiplied by a Fibonacci number to find the complete width for a particular column. For example, the first column has a diameter of 180 pixels (90 x two); the next column has a diameter 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 your Fibonacci number. The site heading has a size of 55px; this article’s heading is 34px; along with the material is 21px.
The downside of layouts based on the Fibonacci sequence is the fact that it is difficult to use it in case you’re given certain fixed width design dimensions (e.g. 1000px). In this scenario it is easier to utilize the Golden ratio, as you would only multiply 1000px using 0.618 and receive 618px which would be the ideal width for your content block. However, if you attempt to reach exactly the same result using the Fibonacci sequence itself, then you first need to figure out the sequence to the 1000 range.
According to the Fibonacci sequence calculator, the sequence would be
...,610, 987, 1597.... Indeed, 987 is really a fantastic fit and you’re able to begin picking the widths for smaller cubes using the previous numbers in the order. But in case your fixed width design is much smaller or lager, then you would need to utilize some approximate values which would again result in pure guessing. The issue can also occur in flexible or liquid layouts to a point, but you need a great deal more design freedom there.
A Fibonacci layout is best suited to blogs and magazine layouts. You may arrange the design in various manners based on Fibonacci numbers. The content “Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le layout web” (in French) explains in more depth the application of Fibonacci numbers to Internet design. Again, note that you need to be imaginative when using Fibonacci sequence on your layouts, otherwise your layouts will turn out to be too rigid and hence tough to use and navigate.
Download the PSD-layout
We prepared a sample PSD design that is designed in accordance with the Fibonacci sequence. Please feel free to utilize it at all and send the link to this report to your colleagues if you want to spread the word.
Five Components, Or Kundli Design
Another intriguing layout technique comes in the Indian horoscopes which are also referred to as Kundli. Fundamentally a Kundli is a very straightforward figure can be reached in only 3 steps. Draw a square, and cross both diagonals. Join the mid-points on each side of the square to get the Kundli figure. You’ll notice four right-angle rhomboids in this figure. These will be the basis for our internet design.
The layout below, then, is based on the Kundli design layout. You’ll discover that the chakras in the layout also have mathematical properties.
This really is a single-page design. Clicking on a component reveals more info on it, as shown in the figure below. You can also incorporate some easy jQuery cartoons or even jQuery tooltips that could reveal more info on need. A additional step would be a sliding web page where animation is used to show different content cubes; you might also wish to modify the background images of the single content areas to make them a little more distinctive.
In the next figure, it is possible to see our design is only a simple three-column design: a header, three columns and a footer. Not complex in any way.
Download the PSD-layout
We prepared a sample PSD design that is designed in accordance with the Kundli layout. Please feel free to utilize it at all and send the link to this report to your colleagues if you want to spread the word.
Sine Wave Design
If it comes to mathmatics, you don’t need to abide by well-known Golden Ratio or even Fibonacci sequence. You can also experiment with formulas from physics, chemistry and other sciences using more general formulations and values on your layouts.
For instance, let’s think about the sine wave, or even sinusoid, a mathematical function which refers to a smooth insistent oscillation. We used a simple sine wave design as the basis for a simple and authentic Internet design and create a single-page design. Needless to say, you may use the same approach for other layouts such as images or infographics.
The design is again very easy, composed of a header, five columns and a footer. You may use a jQuery tooltip to make the design more interactive.
This wave pattern occurs often in nature, including ocean waves, sound waves, and waves. Also, a demanding sinusoidal pattern could be found in plotting average daily temperatures for every day of this calendar year, although the graph may resemble an inverted cosine wave. You can also use it to show a timeline of events. It may even be designed to include horizontal navigation. You may make it even more interactive using the jQuery highlighter plugin, which highlights every element (i.e. DIV) so the user can concentrate on the content.
Download the PSD-layout
We prepared a sample PSD design that is designed in accordance with this Sine Wave layout. Please feel free to utilize it at all and send the link to this report to your colleagues if you want to spread the word.
Rule of Thirds This principle says that an image should be imagined to be split into two equal parts by two equally spaced horizontal lines and two equally spaced vertical lines, and that significant compositional elements ought to be placed across these lines or their intersections. Additionally, it may be expressed as a simplified mathematical approach that divides any design into thirds, left to right and top to bottom.
Musical Logic The rhythmic or thematic structure of musical compositions could be applied to distances between elements in a design, such as ABA, ABAC, etc.. Find out more about music and math in this Wikipedia post.
Useful Links and Resources
We hope you have enjoyed this article about math and Internet design. Hopefully you see math not as a hindrance to creativity, but as a friend. Embrace it!