Designing mobile screens often includes positioning elements on the screen for optimal reading and human interaction. Oftentimes designers will work in an art board based program using the edges of the art board (or screen viewport) as a guide for laying out the content on the screen. But are all edges of the screen equal. The answer is NO, because of the golden ratio and the human eye.
“Adrian Bejan, professor of mechanical engineering at Duke’s Pratt School of Engineering, thinks he knows why the golden ratio pops up everywhere: the eyes scan an image the fastest when it is shaped as a golden-ratio rectangle.”
-Mystery of the Golden Ratio Explained
The Golden Ratio
The golden ratio is when the sum of 2 quantities is the same as the larger of the 2 quantities.
Artists have been creating compositions with this formula for centuries, believing it created art that was more balanced and aesthetically pleasing.
The golden ratio is also used in the Fibonacci sequence and the golden spiral. The golden spiral is often found in nature from seeds on daffodils to pinecones to seashells to weather patterns and galaxies. Everywhere you look you can find examples of the golden ratio.
Bottom Weighting Picture Frames and the Golden Ratio
A bottom-weighted picture frame is where the bottom border of the frame is wider than the top and sides. Some believe this practice started during the Victorian era where pictures were hung high on the wall at an angle, making it easier to view but visually off-balance. To correct the illusion, artists began framing their artwork with a wider bottom border.
Although it may have started during the Victorian era, it continues today, likely because the optical center of a framed area is perceived as more balanced than the geometric center. In other words, the human eye is naturally drawn to the space slightly above the actual center of a given space.
This is an effect of the of the golden ratio.
Using bottom weighting and the Golden Ratio to find the optical center of a mobile screen
The golden ratio is great for creating artwork, but does it help with balancing content in a mobile screen? The answer is: YES, you can use the ratio, and a modified picture framing technique to find the optical center of the screen.
To do this determine the appropriate frame dimensions, identify the golden ratio of the frame, adjust the bottom border and viola — you have found the optical center on a small screen.
The example below demonstrates the result. Notice the subtle difference between the physically centered screen and the optically centered (aesthetically balanced) screen using bottom weighting and the golden ratio. One looks right but the other feels right.
Leveraging the relationship between designing and engineering can add emotional depth to the product experience — something customers will feel but not notice.