Golden Ratio(melted.design)
melted.design
Golden Ratio
https://www.melted.design/golden-ratio/
49 comments
Disney would never lie to me: https://youtu.be/fwYfuJfIgaw?t=331
Designer here. I went all in on the Golden Ratio for a season. It was good for some things, bad for others—kind of like everything else. I never thought about it with regards to type sizing so I may try that. That said, it will utterly ruin some things.
It does show up in plants (artichokes, cactuses, sunflowers, pineapples, etc.), as the angle between successive leaves/seeds/petals. This is called spiral phyllotaxis. You can make some cool art out of this idea with a strobe light, https://www.johnedmark.com/phi/
It also shows up anywhere with pentagonal (or icosahedral) symmetry, since the golden ratio is the ratio of the diagonal to the side of a pentagon. So that includes e.g. various viruses with a shape based on icosahedral symmetry.
The stuff about shells, galaxies, etc. (and the supposed advantages of this specific aspect ratio for design / visual art) is generally bullshit.
It also shows up anywhere with pentagonal (or icosahedral) symmetry, since the golden ratio is the ratio of the diagonal to the side of a pentagon. So that includes e.g. various viruses with a shape based on icosahedral symmetry.
The stuff about shells, galaxies, etc. (and the supposed advantages of this specific aspect ratio for design / visual art) is generally bullshit.
The creator of the sinebow [1] uses this property to construct color sequences that are maximally distant from each other. You just keep rotating around the circle in steps of phi and it sorts itself out.
[1] http://basecase.org/env/on-rainbows
[1] http://basecase.org/env/on-rainbows
You might enjoy my doodling at https://observablehq.com/@jrus/categorical
Definitely not bullshit with respect to art—it is used in many aesthetically pleasing and well balanced designs.
There are many aesthetically pleasing artworks where the subjects wear hats.
But that doesn’t mean that there’s some magical feature of hats that produces transcendent art.
But that doesn’t mean that there’s some magical feature of hats that produces transcendent art.
While the Golden Ratio is really popular, there are many other ratios that are aesthetically pleasing for different scenarios. I’ve tried to visualise some of them: https://github.com/hnarayanan/orthogons/blob/master/README.m...
Cool experiment, thanks for sharing the code.
It would be great if someone took these different ratios to make an interactive designer of something (like a car) where choosing each ratio would update the dimensions of the thing (ex: the car size is the first value, hood size is the second, followed by the doors, wheels, headlight, etc)
That reminds me of the classic proportions described by Jay Hambridge in The Elements of Dynamic Symmetry (1926). He was an art historian who argued that the Greco-Roman art and architecture was based on root rectangles. https://en.wikipedia.org/wiki/Dynamic_rectangle#Jay_Hambidge I just noticed that Wersin is mentioned right after him!
Hambridge's theories were quite controversial, but the book is an enjoyable read anyway. https://archive.org/details/ElementsOfDynamicSymmetryHambidg...
Hambridge's theories were quite controversial, but the book is an enjoyable read anyway. https://archive.org/details/ElementsOfDynamicSymmetryHambidg...
Have you found any utility in this stuff with your work?
I mostly just use frameworks that think about this stuff for me while working hard to keep consistency in spacing (padding, margins, etc) which functional ones like basscss and tachyons do a good job of pushing you towards (much more than Bootcamp and others).
I mostly just use frameworks that think about this stuff for me while working hard to keep consistency in spacing (padding, margins, etc) which functional ones like basscss and tachyons do a good job of pushing you towards (much more than Bootcamp and others).
I'm not sure that system translates well on book/website layouts, because imposing that structure might get into the way of setting the optimal line length and text size for a given width. Dynamic rectangles are more suited for planning the overall composition of illustrations/photos – the "rule of third" is a simplified version of what Hambridge talks about. He also mentions how to use the diagonals to convey different emotions.
What frameworks do you use that think about this? All the “big ones” that I know of, Bootstrap, Foundation, ... have really standard 12 column grids.
I'm talking about letting frameworks handle the space ratios for padding/margins/headline size in addition to grids. Whether they use golden ratios specifically or not wasnt the point rather deferring to the library designers who most certainly are aware of the golden ratio.
To me the connection between the golden ratio and beauty is tied to iterated function systems, and fractals. I feel like it boils down to efficiency of representation of a larger system. If a complex, balanced system can be represented efficiently by a small number of values, variables, and operations, then it's favored by the universe somehow, and by our mind's eye. It "snaps into place" more easily, it aligns with itself, and therefore our conception of it is also performed with less work, more "naturally."
The golden rectangle and spiral represent this best to me. The whole is found in the parts, infinitely, the further you iterate, like looking down a well and seeing all the way to the bottom. It's gratifying to conceive of more by doing less. I wish I were better with words, but I do feel φ's beauty somehow boils down to efficiency of representation.
The golden rectangle and spiral represent this best to me. The whole is found in the parts, infinitely, the further you iterate, like looking down a well and seeing all the way to the bottom. It's gratifying to conceive of more by doing less. I wish I were better with words, but I do feel φ's beauty somehow boils down to efficiency of representation.
There's an interesting correlation to information theory and compressibility. Someone did an analysis of pop lyrics[1] where they compressed the plaintext using a lossless compression algorithm and determined that (as expected) many pop songs compress very well and are highly redundant. But taken another angle, this could also represent that we as human beings find lyrics which have high degrees of self-similarity with small amounts of variation to be pleasing to the ear, which tracks with what makes pop music (which must be singable and usually danceable to go viral) successful.
[1] https://pudding.cool/2017/05/song-repetition/
[1] https://pudding.cool/2017/05/song-repetition/
"favored by the universe somehow"
With a large enough population, you are going to end up with the same representation (structure of neurons, glial cells etc) in some subset of brains.
As a painter, I am very aware that taste is not as universal as is constantly advertised. Some people like the shades of blue I use and some don't or are indifferent. Why I chose that blue and why they liked that blue is cause we probably share, in some small corner of a trillion brain cells, a small clump of structure that's exactly alike.
With a large enough population, you are going to end up with the same representation (structure of neurons, glial cells etc) in some subset of brains.
As a painter, I am very aware that taste is not as universal as is constantly advertised. Some people like the shades of blue I use and some don't or are indifferent. Why I chose that blue and why they liked that blue is cause we probably share, in some small corner of a trillion brain cells, a small clump of structure that's exactly alike.
And the reason why systems generally default to simpler representations over more complex ones in nature is because the process of evolution is in many ways basically just a very slow random search. Simpler solutions fundamentally are more likely to occur than complex ones. Of course over many iterations of simple changes, an overarching complexity often can seemingly emerge over time.
Also, to be 100% accurate, I should say that technically evolution is a form of a genetic algorithm which is slightly different and more constrained than a pure random search, but it's not that big of a deal with respect to this conversation.
Also, to be 100% accurate, I should say that technically evolution is a form of a genetic algorithm which is slightly different and more constrained than a pure random search, but it's not that big of a deal with respect to this conversation.
Not content-related but... I dislike the inertial scrolling on this page. Something about inertial scrolling with a mousewheel feels off. Maybe it's because mousewheels have discrete ticks that I subconsciously use, that get broken by the inertial paradigm?
It's just unexpected and unnecessary. On mobile I'm pretty sure all the browsers already have it, on desktop it completely breaks expectations for what should happen.
Also it is turned up to an extreme degree here. I'm using Firefox and the scrolljacking doesn't happen in FF, but when I open it up in another browser, a scrollwheel flick that would normally scroll down 1/4rd of the page is enough to continue down all the way to the very end. Even with smaller scrolls, it goes around 1.5-2.5x the expected distance.
Scrolling is muscle memory and the consistent behaviour of it makes us have expectations for what scrolling should do, flagrantly destroying those will cause unease.
Also it is turned up to an extreme degree here. I'm using Firefox and the scrolljacking doesn't happen in FF, but when I open it up in another browser, a scrollwheel flick that would normally scroll down 1/4rd of the page is enough to continue down all the way to the very end. Even with smaller scrolls, it goes around 1.5-2.5x the expected distance.
Scrolling is muscle memory and the consistent behaviour of it makes us have expectations for what scrolling should do, flagrantly destroying those will cause unease.
Dentist here. I use it all the time, front teeth proportions, size, etc when reconstructing them.
The artistic aspect of dentistry is often underestimated
Did you know that the golden ratio defines the temporal structure of the brain?
While the main brainwave bands are harmonics (theta is roughly double delta, alpha is roughly double theta, beta is roughly double alpha and so on), the band widths have a ratio of the golden ratio. That's because the golden ratio is the most irrational number. While harmonic oscillations will overlap regularly, irrational frequency ratios will never overlap. This allows for multiplexing in the brain, EMG , where high theta and low theta don't interfere with one another.
Pletzer, B., Kerschbaum, H., & Klimesch, W. (2010). When frequencies never synchronize: the golden mean and the resting EEG. Brain research, 1335, 91-102.
While the main brainwave bands are harmonics (theta is roughly double delta, alpha is roughly double theta, beta is roughly double alpha and so on), the band widths have a ratio of the golden ratio. That's because the golden ratio is the most irrational number. While harmonic oscillations will overlap regularly, irrational frequency ratios will never overlap. This allows for multiplexing in the brain, EMG , where high theta and low theta don't interfere with one another.
Pletzer, B., Kerschbaum, H., & Klimesch, W. (2010). When frequencies never synchronize: the golden mean and the resting EEG. Brain research, 1335, 91-102.
The golden ratio is the most irrational number: https://www.youtube.com/watch?v=CaasbfdJdJg
This is why it creates some distinctive patterns when applied to circular/spiral shapes.
This is why it creates some distinctive patterns when applied to circular/spiral shapes.
It's the fraction that converges the "slowest", in a sense. (It's the continued fraction of all 1's.)
It might converge more slowly than any other simple continued fraction, but there are some super-slow to converge generalized continued fractions.
A couple of examples that are slower than phi:
https://en.wikipedia.org/wiki/Approximations_of_%CF%80#Conti...
I love this because it is both bullshit and awesome. Like many things thats either a rule-of-thumb or subjective, it has been studied thoroughly, confirmed, debunked, and applied succesfully many times.
It’s just like Pareto Principle: it only works in 80% of cases.
For travelers wanting a rough-and-ready conversion
of miles to kilometers, the ratio is useful:
3 miles ~= 5 km; 8 km~= 5 miles; etc.
Discussion at: https://www.reddit.com/r/math/comments/2zop5o/i_realised_the...
Discussion at: https://www.reddit.com/r/math/comments/2zop5o/i_realised_the...
Even easier don't think about the ratio! Think about the Fibonacci sequence: 0 1 1 2 3 5 8 13 etc. Then you are doing just addition.
This isn't too insightful. The article swimmingly explains that there is a "golden ratio" and then goes on to just repeat "you can use that in design", with no concrete examples or explanations aside a small use case for font sizing
The idea is that you can use it anywhere you need to make a decision about proportions. It's not complicated. Designers know that it's no use if you need a proportion close to 1:10 or 1:1, but there is often enough flexibility to use it (say when designing a window or a floor plan.)
All articles about the Golden Ratio mostly make me think about when Donald Duck in "Mathmagic Land"
See: https://youtu.be/fwYfuJfIgaw
See: https://youtu.be/fwYfuJfIgaw
A gigantic image that fills my screen, and then teeny tiny text that I need a microscope to make out. This is design, I guess. Thanks, golden ratio! What ever happened to "Type is to Read"?
This is a great tool I use anytime I sketch an interface:
https://goldieapp.com/
(a) + (b) = (a) + (b) / (a) = 1.618
They can't into math, can they? Or is it a special notation of some sort?
They can't into math, can they? Or is it a special notation of some sort?
It looks like they mean (a) and (b) to represent the lengths of the segments with those labels. Also, they use left-to-right operation order rather than the traditional order. Less ambiguously (and correcting an error),
(a) / (b) = ((a) + (b)) / (a)It should be
a / b = (a + b)/a = 1 + b / a = 1.618..
a / b = (a + b)/a = 1 + b / a = 1.618..
Terrible article:
> 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.
What does this even mean? What are the constraints between these two lines that leads to that ratio to be the golden ratio?!?
> 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.
What does this even mean? What are the constraints between these two lines that leads to that ratio to be the golden ratio?!?
The page forces a very bad type of smooth scrolling with js.
Both of those claims have been broadly debunked, and the so-called golden ratio is grossly oversold.