Web site design

Twitter, Apple and others on the leading edge of the web are applying the golden ratio in their digital presence.  As explained in more detail on the “Design and Composition” post, this ratio can be applied to achieve a sense of natural balance and proportion that applies to any kind of design, and web sites are no exception.

The Stavridis Group uses the golden ratio in all aspects of every design project they do, including the design of their home page used until 2013:

Stavridis Group web site showing golden ratios

Twitter site design

Mashable reports that even Twitter used the golden spiral in the layout of its site:

Twitter web site showing golden spiral

Apple iOS 7 icon template design specifications

Apple’s new template for iOS 7 icons also embraces the natural design aesthetics of the golden ratio, shown with a PhiMatrix rectangle and circular golden proportion overlay grids in red and yellow, respectively.

Apple iOS 7 template showing golden spiral

Other applications in typography

Chris Pearson, developer of the Thesis framework for WordPress, advocates golden ratio proportions as the secret to readable typography in websites.  See his typography article and online typography tool.

Pearson states:

“The golden ratio provides us with a guide—a formula—for proper typesetting. Because of this, we can now set our type with absolute certainty in any situation! Better still, we can use this information about typography to make more informed decisions about all the spatial aspects of our designs, such as:

  • The amount of whitespace that appears after each paragraph
  • Padding, margins, and other units of whitespace throughout the design
  • Headline line-heights in a given width
  • Any and all spatial properties that you wish to relate mathematically

The power of golden ratio typography cannot be understated. By choosing the line-height of your primary text as your new “baseline unit”, you are effectively tying all the dimensions of your layout together with the golden ratio.”

Unlimited unique applications

PhiMatrix gives you dozens of templates to apply these same design concepts.  It can be as unique as you are and keep you in the company of the web’s best designers.

Leave a Reply

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

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>