Finding Balance in Design implementation using the Fibonacci Sequence

Kingsley Ukeje
5 min readJun 28, 2021

Math! Most of us in our college days hated math, was just a lot going on at the same thing, so many things to process, in search of an already predestinated result. All the formulas, structures, series, deductions etc. One would always say “hope we get to use these things when we are out of college” well said! This article helps to clear your doubts and puts things in perspective for math in our everyday life. Let’s meet the Fibonacci sequence!

nature’s secret code,” and “nature’s universal rule

The Fibonacci Sequence

The Fibonacci sequence was invented by the Italian Leonardo Pisano Bigollo (1180–1250), who is known in mathematical history by several names: Leonardo of Pisa (Pisano means “from Pisa”) and Fibonacci (which means “son of Bonacci”).

Going by the history books, Leos father was a trader, the sequence was born out in an attempt to solve a real-life problem. A rabbit farmer wanted to know how many rabbits he can grow in a year from one pair. The problem is quite an interesting one. A pair of rabbits bear another new pair in a single month. This newborn pairs can bear another pair after the first month till the end of a year, so the sequences try to pre-calculate how many rabbits will be born by a year.

The Fibonacci sequence simply states that “Each number in the sequence is the sum of the two numbers that precede it. So, the sequence goes: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, and so on. The mathematical equation describing it is Xn+2= Xn+1 + Xn”

It was all first a mathematical deduction before proofs of it started to appear all-round life existence, flowers, old buildings, animals, even the human body.

Let’s look at some life applications of the Fibonacci principle to help us understand better how it affected the design world

  1. Plants

Plants with these type of pattern contain an element of the Fibonacci principle, the spiral nature of the plant confirms that and also according to the diagram above. Research shows the numbers and arrangement of every single part of these plants match the Fibonacci principle

2. The Human Body

Apparently, almost every part of the human body is built with this principle, its the foundation of belief for people that say the Fibonacci principle us a God-given principle to the human, its detects the beauty in nature, finding the existence o the Fibonacci principle in humans changed the game, it perfected assumption about the principles thereby strengthening its claims. The reflection of the Fibonacci principle is too deep to be put in a few lines, read more about Fibonacci in Humans.

3. Art and Architecture

A lot of these old structures were built with a representation of the Fibonacci sequence in them, the architects might not have know when making the architectural diagrams of the building but it goes to tell how much the fibonacci sequence effects existence and human representation of things

Fibonacci in Design

The fibonacci sequence has so many applications when it come to design, its affect almost all aspect of designs, video, photography, graphics, products and user interface design, it basically affect general design principles, principles like font hierarchy, images, web gridlines, sectioning and alignment and many more.

Font hierarchy — for the human eye to experience balance reading a long text material, a lot goes into play in terms of font hierarchy and the fibonacci sequence help a long way in find that balance, in UI design, the font hierarchy is divided quite a number of part, head 1(H1), head 2(H2), head 3(H3), body1, text etc, the all have their different font sizes irrespective of the font family or group in use, in deciding the font size is exactly where the fibonacci sequence comes into play, For example, let’s say that you’re using 10pt font for the body text. Using the golden ratio, you can determine the best size for the headings by multiplying the body text number by 1.618. So, in our case it will be 10*1.618 = 16.18, which you can round down to 16pt font. The combination of 10 and 16 looks really nice and at the same time it is good for UX design as you can clearly see the headline, sometimes math does some work for you!

Web alignments and Grid system — one of the major principles of a well done UI is the proper use of grids to section elements and assets on a web page, because of mobile view for webpages, making responsive web design has become very important, designing website with fixed dimensional properties are old, building websites with the fibonacci sequence gives it the capacity to be fluid on any screen. Using the fibonacci sequence, simply divide the total width of the site by 1.618, that automatically determines how you would section you web properties and assets.

Appropriate White spacing — The concept behind whitespace is very simple. It is simply the space between text, graphics, images, and blocks. Whitespace is also known as negative space or blank space.Despite its name, white space does not need to be white. The name white spacing doesn’t necessarily mean the space should be white, it could absolutely be any colour, texture, pattern or a background image. Its important to make effective use of white spacing when making designs, its gives the design or page an elegant and rich UX experience, with the golden ratio, you could easily arrange your content and assets to fit the squares, as you arranged your content, notice the spaces that are left empty, those space join together to form your whitespaces

Following these few tips would help to give you a well balanced website when designing for both desktop and mobile experience.

--

--