Author: Evangelos Pappas – evalon.gr
Golden ratio is a mathematic constant that is often used to describe the perfect symmetry. This value is being implemented in a various ways and sciences. It is inspired by nature and so it creates the illusion of the beauty. Though it is scientific improved computer scientist has barely implement this ratio, and when its done it doesn’t follows exactly the symmetry as it should. As it follows this theory will be barely described as an implementation in a web application. At this point it should be mentioned that the pages that follows are not a tutorial rather than an article.
Introduction
As a Scientist fetish I love mathematics. Maybe I'm not a Mathematician or a Physicist, though mathematics has found numerous applications in Computer Science. As mathematics are all around us as computer algorithms are also. Problems in every day life can be described in an algorithmic way resulting a more optimized way of achieving them.
Now what is the golden ratio and what does it have to do with all this science? The answer is simple. This number, which is represented by the Greek letter Phi (Φ), has inspire nature in many ways such as biology, mechanics and architecture. It basically represents the perfect symmetry in many ways. That symmetry results the beauty or as I like to call it “beauty Simplicity”, it achieves its beauty by simple generating symmetric descendants.
I have seen this number’s value applications variant from 1.61 to 1.63 though its accepted form is at ~1.618. Moreover, Golden ratio is usually messed with Fibonacci’s sequence. This sequence should be already known to most of you, though if you haven’t heard of this ( then you must be at the first year of B.Sc. of CS or a non-related-computer-scientist at all J ) then go to Wikipedia article which cover it pretty well.
Figure 1 This equation explains how the golden ratio is resulted by the generation of the new element which depends from its previous (from Wikipedia)
Matters, Web
Web designing & developing maybe is one of the most fancy arcitectuall designing applications of Computer Science. Such applications that affect the most User’s Interaction and browsing. So the most critical part of these applications is the best architectuall design in order to be eye friendly and fast browsing.
I have been thinking and found that the best way to achieve somthing like that (a user & eye friendly enviroment) should mimic the nature. As nature is the most human friendly enviroment so computer applications should be.
Now, enough with the much talk! How this could be implemented. The answer is still simple. It is already implemented. Many web-site aproach this implementation at its most of its percentance without knowing it. Though there were no theory explaining it why does this happen. Watch this layout:
Figure 2 a simple example of web page layout that follows the described theory
By viewing this schema, its obvious the size’s expansion of each element comparing it with their near elements. By assuming that the “title” element is being divided in two, the next element, the “logo” has expand its both width & height size by the Golden ration.
A great schema that describes my theory is being publish at Wikipedia :
Figure 3 a Shape representation of Fibonacci sequence. Shows aligned rectangles expanding their size according to the golden ratio
Matters, edges
There is a trend in recent web developments that has expanded and inspires the web development community. I am referring to the edge rounding. A great example of what I am referring to is being described here: http://www.css3.info/preview/rounded-border/
As we, humans are used to like rounded things so in a Graphic environment in our computer we would like too. Imagining in the schema above ( figure 3 ) a string line that is drew from the corners of each rectangle then a snail shell like schema will be figured.
This new figure will follow the principles of the golden spiral or as most known as Logarithmic spiral.
Figure 4 The golden Spiral
In web developing, in order to implement this in a block element we have to set its style. In order to keep the symmetry of our layout the “em” scalable unit will be used. “Em” unit generates the size of the described element according to the already set size of the inherited elements. So if we have set in our div a font size to 12px the 1em sets the size to the character to 12px.
The code that implements this rule to a block element follows:
webkit-border-radius: 0.81em 1.61em 2.59em 4.17em;
-moz-border-radius: 0.81em 1.61em 2.59em 4.17em;
border-radius: 0.81em 1.61em 2.59em 4.17em;
Conclusion
This theory should not be mentioned as radical rather than a notice to Computer Scientists. It does not prove something new or not even developed something really innovated. It just proposes a better statured layout that follows principles and theories of mathematics.
Thank you very much for your interest and reading :) .
No comments:
Post a Comment