Webwide is the inclusive discussion community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. Creating an account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

🧮 The Golden Ratio

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
622
Reaction score
581
Points
665
Location
United Kingdom
Local Time
Today, 13:36
Pronouns
he/him
Do you ever use 'The Golden Ratio' in your designs? It is something I have been aware of for a while but never really thought to implement. I came across this article today and found it interesting but some of the examples a bit strange...
Am I missing something, or does the Twitter logo not really connect at all? I understand it's made of circles but not how it connects to the golden ratio next to it.



Have you ever used this ratio in your designs? What are your thoughts? 😄
 
Last edited:
  • Like
Reactions: avena

avena

Member
Joined
Oct 19, 2019
Messages
32
Reaction score
25
Points
20
Using the golden ratio as a proportional rule for composition if often misinterpreted and overused. Sometimes people became obsessed and try to use it to explain many good visual icons or imaginary without any proof.

In the case of twitter, the image of the article is not official, the original redesign didn't use golden ratio for the circles, but they did use a lot of circles. This is the official one.


Official Twitter brand resources here.

Even if you are not in the design "world" you probably already used or consumed golden ratio without noticing because that's the ratio for the standard DIN paper format "A" and "B" series (like A4, A3, A2, etc), which are very common in small posters or books and documents.

Proportional rules are often used in typography, and there are wonderful books, like The Elements of Typographic Style of Robert Bringhurst in which you can learn a lot about typography, including tricks on proportional rules. But a common mistake is trying to apply the ratio to everything just to justify a design decision.

Good design-related site: Brand New
 
Last edited:
  • Like
Reactions: Gummibeer

kilian

Member
Gold Member
Joined
Oct 7, 2019
Messages
29
Reaction score
22
Points
60
Location
Zoetermeer, Netherlands
Local Time
Today, 14:36
Website
kilianvalkhof.com
Pronouns
he/him
The thing about golden ratio in design is that you don't need to use it perfectly, it's just a very nice way to make sure things are sized distinctly enough.

A slightly different, IMO more interesting system to look at is "Tschichold’s Golden Canon", which is focused on (book) page layout but is really elegant with lots of application for web design too (see the examples at the end of that link)
 
  • Love
  • Wow
Reactions: Adam and Gummibeer

Gummibeer

Well-known member
Joined
Oct 5, 2019
Messages
664
Reaction score
517
Points
635
Age
26
Location
Hamburg, Germany
Local Time
Today, 14:36
Website
gummibeer.de
The thing about golden ratio in design is that you don't need to use it perfectly, it's just a very nice way to make sure things are sized distinctly enough.

A slightly different, IMO more interesting system to look at is "Tschichold’s Golden Canon", which is focused on (book) page layout but is really elegant with lots of application for web design too (see the examples at the end of that link)
Mind-blowing how many got, independently, to the same result over multiple decades. 😱🤯
 
  • Like
Reactions: Adam