MATHEMATICS & SCIENCE MEET ART.
So what on earth is the Fibonacci Sequence? You may or may not have encountered this seemingly daunting subject in your former years of mathematics instruction, and you’re probably wondering why we chose to write about this elusive, and often perplexing, topic. However, before we dive right in, let’s go over some basic terms first. By definition, the Fibonacci Sequence is a series of numbers with the pattern of each number being the sum of the previous two.
Applying this rule, depending of the chosen starting point of 1 and 1, or 0 and 1, the mathematical sequence is as follows:
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…
Rooted in mathematics, the Fibonacci Sequence is intimately connected with the Golden Ratio. What is the Golden Ratio, you might ask? In mathematics, two quantities are in the golden ratio if their ratio is the same as the ratio of their sum to the larger of the two quantities. Fibonacci numbers, like many elements found in nature, follow a 1:1.61 ratio – this is what we refer to as the Golden Ratio, and as it forms such a common sight in nature, it feels pleasing to the eye when we use this same ratio in our design work. For our purposes we need not worry about the mathematical formulas – just understand that throughout history, the Golden Ratio is a design concept that has been widely used to create visually (and sonically) appealing proportions in art, music, design, and architecture. These patterns are commonly observed in nature, and the proportions can even be found in the human body. These seemingly random patterns are considered to have a strong aesthetic appeal to humans.
Fibonacci numbers, like many elements found in nature, follow a 1:1.61 ratio – this is what we refer to as the Golden Ratio, and as it forms such a common sight in nature, it feels pleasing to the eye when we use this same ratio in our design work.
Now let’s incorporate what we’ve learned and apply it to web design. While typography, photography and color palettes are important aspects to consider during the designing of a website – an even more crucial element to consider is rational spacing. The implementation of space management is an integral part of the design process. Although using the exact ratio of numbers as seen in the Fibonacci Sequence to design the header, body and footer of a site may appear to be creatively limiting – applying the rudimentary concepts to our design could be of great aesthetic benefit in the long run.
Example: Generally, 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. For instance, let’s divide a page into three columns. Each column corresponds to a Fibonacci number. For this hypothetical design, we use 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 finally, the content is 21px.
See how easy that was? Although many designers may simply ‘eyeball’ the ratios they use in their design process, somehow the human eye can pick up even the most minor of discrepancies; thus making the difference between a superior design and just an okay one. Even Salvador Dali was said to have consciously used the Golden Ratio in many of his paintings. Although we may not always have our calculators out during the designing of your website – we do take into consideration the major concepts we’ve learned from Mr. Fibonacci himself, and when it comes time to design your project you can be sure that we will take both an analytical and creative approach to delivering you a well thought-out product.
Lastly, here is one of our favorite quotes that sums up the interconnectedness of science and art:
“To Develop a Complete Mind: Study the Science of Art; Study the Art of Science. Realize that Everything Connects to Everything Else.”
– Leonard Da Vinci
