Front End Design Tips: Working with a Golden Ratio Grid

* The Golden Ratio is a system of proportion found in nature that is believed to have universal aesthetic appeal. It is used in fields such as architecture and design as a way to divide space in a visually-appealing way.

One challenge many designers face when beginning a new project is the question of where to place elements on an empty canvas. Since the task can seem daunting with so many available possibilities, designers often solve this issue by using a grid system to provide structure for their layouts.

Recently, while updating the look and feel of our email marketing templates, I found it beneficial to use a grid system based on the Golden Ratio as a starting point for the design process. Using the grid helped to narrow my layout choices and allowed me to find effective locations for essential page elements. Below is an outline of how I designed the banner for a recent email.

The Process


1. Creating the Grid

Starting in a Photoshop with a 470X280 canvas, I drag out grid lines. Next, I use a screen ruler such as XgoldenSection or Atrise Golden Section to divide the space according to the Golden Ratio. After I’ve located the initial focal points on the canvas, I divide each section one time further with the screen ruler. Once I have the grid prepared, I’m ready to add the essential design elements.


2. Placing Essential Elements

To start, I place the main content along the grid lines and use a placeholder for the main graphic element. To add some flexibility, I avoid placing the elements directly on each guideline and position them just a bit off the mark. After the essential elements are added, I have a nice foundation to work with and can now begin adding some impact to the design.


3. Designing Look and Feel

For the final stage, I choose a color scheme, create a background and add the main graphic element. I also include some basic text treatment for emphasis. The goal of each design choice at this stage is to strengthen the meaning of the main message, convey a distinct emotional tone and to reflect brand identity. When finished, the result is a visually-appealing layout that draws the eye toward the central message.


Using the Golden Ratio as a starting point for the design process helps to limit layout options and can provide a solid foundation for creating balanced and appealing layouts.

This entry was posted in Technical Talk. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *