golden-ratio:-everything-you-need-to-know

Designers love to know as many tips as possible. A great tip would be to accomplish great design with the least amount of personal interpretation. Am I right?

Using the golden ratio in design allows just that: the pleasant feeling of something being just right, regardless of who’s watching.

What is the Golden Ratio

Golden Ratio is a natural ratio found everywhere. From flowers to shells, from our fingers to the galaxy, this mathematical ratio makes all forms look visually balanced and gratifying.

It’s also referred to as the Golden Section, Golden Mean, Divine Proportion, and the Greek letter Phi.

As a number, the golden ratio is approximately 1.618, and not surprisingly, it’s tied to the Fibonacci sequence.

This sequence is the sum of two numbers before it, and it starts as 0, 1,1, 2, 3, 5, 8, 13, 21, up to infinity.

The higher the Fibonacci numbers are, the more their ratio becomes closer to the golden ratio. For instance, 377 and 610. Dividing the later by the first, we get the actual golden ratio number: 1.618.

As a visual representation, these numbers can be used to create a sequence of rectangles, which also allow producing the Golden spiral.

This image shows how to construct the golden rectangles, circles and spiral.

The golden ratio in design: how to use it

When used in design, the golden ratio creates a balanced and organic composition.

Let’s imagine that you need to start your design by creating a line. Next, you copy it and divide it into two parts, getting two shapes a) the first line, and b) the second one.

Now if you take a) and divide it by b) you will see that it equals to 1.618, and it’s also equal to a) b) divided by a).

This image shows how to design lines maintaining the golden ratio proportion.

I know it can be a bit confusing at first, but once you get it, you can take advantage of this ratio, and use it for everything. From shapes, type, logos, layout, you name it.

Typography, and layouts

If you’re anything like me, you’re always a bit unsure on how to balance type. But guess what? The answer is also in the Golden Ratio.

Start with one size of copy that feels right to you. Let’s say you have a body with a 10px size. Multiply that number by 1.618, and you’ll have the perfect balanced header text size (in this case would be 16px).

The opposite is also applicable. You can start by the header size and divide it by the golden ratio number to obtain the body copy size.

As for layouts, consider using rectangles or circles that respect the golden ratio proportion. I can guarantee that it will help you to hierarchize the information as well as to make it more balanced.

Icons, shapes, and logos

Like we’ve seen before with lines, you can use this rule to construct different shapes. It will help with icons and logos when you want them to feel more geometric, and even.

National Geographic, Toyota, and Pepsi follow the Golden ratio proportion. So it’s time you experiment with it as well!

5 Tools to use the Golden ratio in design

Now you already know what is it for and how to use it. But you cringe at the time that it will take you to do all the calculations. You want to do it quickly and easily instead.

I know you would probably think that, so I did some research to help you out.

1. Golden Ratio Calculator

This calculator does the math for you. You insert one of the values: the shorter, longer or the full length of the line, and let it do the rest of the calculations for you.

2. Golden Ratio Generator for Images

When you want to crop an image but still make it balanced, you can use the golden ration. Luckily, this image generator will help you ensure that you keep the right proportions.

3. Vector Template for Illustrator

It’s not an online tool, but it will be very useful when designing in Illustrator. Instead of constructing your golden ratio template, consider using this one first.

4. Typography Calculator

You already know how to have the right proportion between fonts. However, in some cases, you also need to adjust it to the content width (especially in web design).

This calculator will allow you to choose your font and width to get the best results.

5. Golden Rectangle calculator

If you plan on building a layout and you need to use rectangles, this tool is going to save a lot of time.

Input the size of the bigger shape and let it do the rest of the calculations for you.

Make your design process simpler

Now you have all the knowledge and tools to take advantage of this ratio, and there’s no reason why you shouldn’t try it.

Create some awesome design and let me know how it turned out.

71 comments

  1. Do you have a spam issue on this blog; I also am a blogger, and I
    was wanting to know your situation; many of us have developed some nice
    methods and we are looking to swap solutions with other folks, be sure to
    shoot me an e-mail if interested.

  2. I’m extremely impressed with your writing skills as well as
    with the layout on your weblog. Is this a paid theme or did you customize it
    yourself? Either way keep up the nice quality writing, it is rare
    to see a nice blog like this one today.

  3. Great blog here! Also your web site loads up fast!

    What host are you using? Can I get your affiliate link to your host?
    I wish my site loaded up as quickly as yours
    lol

  4. Hey There. I discovered your blog the usage of msn. That is a very neatly written article.
    I will be sure to bookmark it and return to learn extra of your helpful info.

    Thanks for the post. I will definitely comeback.

  5. May I just say what a relief to find a person that really understands what they’re talking about over the internet.
    You definitely know how to bring an issue to light and make it important.
    A lot more people have to read this and understand this side of the story.
    It’s surprising you’re not more popular given that you certainly possess the gift.

  6. Hi! I realize this is kind of off-topic however I needed to ask.
    Does running a well-established blog such as yours require a lot of work?
    I am completely new to writing a blog however I do write in my journal
    every day. I’d like to start a blog so I can easily share my experience and views online.

    Please let me know if you have any ideas or tips for new aspiring blog owners.
    Appreciate it!

  7. Normally I do not read article on blogs, but I wish to say that this write-up
    very compelled me to take a look at and do so! Your writing style has been surprised me.
    Thank you, very nice article.

  8. It’s appropriate time to make some plans for the longer term
    and it’s time to be happy. I have learn this publish and if I may just I wish to suggest you few fascinating things or advice.
    Maybe you can write subsequent articles regarding this article.
    I want to read even more issues approximately it!

  9. Hello there! I know this is kinda off topic but I was wondering which
    blog platform are you using for this website?

    I’m getting sick and tired of WordPress because I’ve had problems with hackers and
    I’m looking at alternatives for another platform. I would be awesome if you could point me in the direction of a good platform.

  10. Excellent post. I used to be checking constantly this weblog and I
    am impressed! Extremely useful information specially the closing section 🙂 I handle such information much.
    I used to be seeking this certain info for a long time. Thanks and best of luck.

  11. Greetings! Very useful advice within this article! It’s the little changes that produce the
    largest changes. Thanks a lot for sharing!

  12. Hello! Someone in my Myspace group shared this site with us so I came to take a
    look. I’m definitely enjoying the information.
    I’m book-marking and will be tweeting this to my followers!
    Outstanding blog and fantastic design.

  13. Hello there, You have done an excellent job. I will definitely digg it and personally recommend to my friends.
    I’m confident they’ll be benefited from this website.

  14. Thanks for another magnificent article. The place
    else could anybody get that kind of information in such
    an ideal method of writing? I’ve a presentation subsequent
    week, and I’m on the search for such info.

  15. You’re so awesome! I don’t suppose I’ve read through
    anything like this before. So great to discover someone with
    a few unique thoughts on this subject. Really..
    thanks for starting this up. This site is something that is needed on the web, someone with some originality!

  16. We stumbled over here coming from a different web address and thought I might as well check things out.
    I like what I see so now i’m following you. Look forward to going over your web page for a second time.

  17. This is the right website for anyone who really wants to understand this topic.
    You know so much its almost tough to argue with you (not that I actually will need to…HaHa).
    You certainly put a fresh spin on a subject that has been discussed for decades.
    Great stuff, just excellent!

  18. I know this if off topic but I’m looking into starting my own weblog and was wondering what all is required to get setup?
    I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very internet savvy so I’m not 100% positive. Any recommendations or advice would be
    greatly appreciated. Cheers

  19. hello there and thank you for your info – I’ve definitely picked up anything
    new from right here. I did however expertise several technical issues using this web site, as I experienced to reload the site many
    times previous to I could get it to load properly.

    I had been wondering if your hosting is OK? Not that I am complaining, but sluggish loading
    instances times will sometimes affect your placement in google and could damage your high-quality score if ads and marketing with Adwords.
    Anyway I am adding this RSS to my email and could look out for a lot more of your respective fascinating content.

    Make sure you update this again soon.

  20. Someone essentially lend a hand to make critically articles I would state.
    That is the first time I frequented your web page and
    to this point? I surprised with the analysis you made to create this
    particular submit incredible. Magnificent process!

  21. Hi my loved one! I wish to say that this post is awesome, great written and include almost all vital infos.
    I would like to see more posts like this .

  22. Pretty element of content. I simply stumbled upon your blog and in accession capital to assert that
    I get actually enjoyed account your weblog posts.
    Any way I will be subscribing in your feeds or even I success you get
    admission to consistently quickly.

  23. Attractive section of content. I simply stumbled upon your weblog and in accession capital to say that
    I acquire actually enjoyed account your weblog posts.
    Any way I will be subscribing to your augment or even I success you get
    right of entry to consistently quickly.

  24. Excellent post. I was checking continuously this blog and I am impressed!
    Extremely helpful information particularly the remaining part 🙂
    I care for such info much. I was looking for this certain information for a very long time.
    Thank you and good luck.

  25. When someone writes an post he/she keeps the image
    of a user in his/her mind that how a user can know it. Therefore that’s why this post is amazing.
    Thanks!

  26. You are so awesome! I do not suppose I’ve read anything like this before.

    So good to discover somebody with unique thoughts
    on this topic. Really.. thank you for starting this up.

    This web site is something that is required on the internet, someone with some
    originality!

  27. Link exchange is nothing else however it is just placing the other person’s website link on your page at suitable place and other person will
    also do same in support of you.

  28. I’m curious to find out what blog platform you have been utilizing?
    I’m having some small security problems with my latest blog and I’d like to
    find something more safeguarded. Do you have any recommendations?

  29. Fantastic goods from you, man. I’ve take note your stuff prior to and you’re
    simply too excellent. I actually like what
    you’ve got right here, really like what you’re saying and the best
    way through which you say it. You’re making it entertaining and you continue to care for
    to stay it sensible. I can’t wait to learn far
    more from you. This is actually a great web site.

  30. My developer is trying to convince me to move to .net from PHP.
    I have always disliked the idea because of the costs.
    But he’s tryiong none the less. I’ve been using Movable-type on several websites for about
    a year and am nervous about switching to another platform.

    I have heard excellent things about blogengine.net.
    Is there a way I can transfer all my wordpress content into it?

    Any help would be greatly appreciated!

  31. Very nice post. I just stumbled upon your blog and wished to say that I
    have really enjoyed surfing around your blog posts.
    After all I’ll be subscribing to your rss feed and I hope
    you write again soon!

  32. Great blog you have here but I was wondering if you knew of any discussion boards that
    cover the same topics talked about in this article? I’d really
    like to be a part of online community where I can get opinions from other knowledgeable
    individuals that share the same interest. If you have any recommendations, please let me know.
    Appreciate it!

  33. Hey there are using WordPress for your blog platform?
    I’m new to the blog world but I’m trying to get started and create my own. Do you require
    any html coding expertise to make your own blog? Any help
    would be really appreciated!

  34. Undeniably believe that that you stated. Your favourite justification appeared to be on the web the
    easiest thing to take into account of. I say to you, I certainly get irked
    at the same time as other people think about issues that they plainly do not realize
    about. You managed to hit the nail upon the top
    as well as defined out the entire thing with no need side effect , other folks can take
    a signal. Will probably be again to get more.
    Thank you

  35. I know this if off topic but I’m looking into starting my
    own weblog and was wondering what all is needed to get setup?

    I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very internet smart so I’m not 100% sure.

    Any suggestions or advice would be greatly appreciated.
    Thanks

  36. Hey just wanted to give you a brief heads up and let you
    know a few of the pictures aren’t loading properly.
    I’m not sure why but I think its a linking issue.
    I’ve tried it in two different web browsers and both show the
    same outcome.

Leave a Reply

Your email address will not be published.