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:
Twitter site design
Mashable reports that even Twitter used the golden spiral in the layout of its site:
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.
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.
“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.