The Golden Ratio is a proportion found in nature and used along the history in architecture, art, music and design among other things. The perception of beauty seems to have relation to this number.
phiRatio is a tool that help designers to calculate the golden proportion, I found it very useful when working on layouts, defining canvas sizes and typographic proportions. There are 3 versions of the app:
- phiRatio e76 is the full feature iOS version. Not only calculates golden proportions, it also calculates 4:3, 16:9 and 3:2 ratios.
- phiRatio e76W is the WebApp version, it's free and only works with the golden ratio, can be used on any desktop or mobile device and it has offline support. It's in beta version, so please let me know if you find any bug or have any suggestion.
- phiRatio e76Wgt is the Dashboard Widget for Mac OS X, it's a free version and only calculate the golden ratio. It's in beta version, so please let me know if you find any bug or have any suggestion.
How it works? you input one of the sides of your rectangle and you can calculate the width Wth – short side – or length Lth – long side – getting the right proportion for your design. Use the integer function INT to round the calculation if required.
At the bottom of the calculator are the mode switchers where you can select the proportion you want to calculate (only available on phiRatio E76):
- 1:1.618 Golden ratio, phi, divine proportion.
- 4:3 Video and photography standard. Musical perfect fourth.
- 16:9 HD and widescreen standard.
- 3:2 Photography standard. Musical perfect fifth.
How can be used? As a graphic designer I like to have some kind of logic or numeric coherence in the structures that I'm working on, where the elements in the layout have relation between each other sharing a common proportion, I think this helps to create coherence, harmony and order in any design foundations.
This practice can be used in many levels, like in typographic proportions, if you input a base font-size like 18pt, with Wth you can get decrements and with Lth you can get increments sizes. This will create proportional scales in your type settings. I like to play with the base font-size to have more options, for example if my base is 18pt I also calculate for 9pt that is half of the initial value and I get a richer scale to play with. A List Apart.com have a very interesting article about how to apply this to typography written by Tim Brown.
Which ratio should I use in my designs? personally I like to use the golden proportion in most cases, but I also think that is important to consider the context where the design will live. Let say that if you are designing an iPhone app that will be displayed just in that device you could consider to use the screen proportion and use a 3:2 ratio for your measures, in that way the design elements will share proportion with the device screen.
Please note that this isn't a formula for a great design by any means, and the examples I talk about are not rules written on a stone, are just my personal thoughts and experiences. I invite you to experiment, play and find the right approach that works for you.
I hope you like it and find it as useful as I do.