What is beauty?We all know beauty is in the eye of the beholder but is our perception of beauty ingrained into our DNA or is it taught to us? The answer is most likely both. What is taught is transient and changes over time like the latest fashion trend. Things that are ingrained are harder to quantify and qualify as it is subconscious. You just know when you see something is beautiful but lack the vocabulary to articulate it. I’ll try to lay out the means in which you can critique your instincts.
ProportionsOne of the key factors in aesthetics, the study sensori-emotional values that reflects art, culture, and nature, is proportions: proportion of forms, spaces, values, colors, textures etc... What we consistently find beautiful or harmonious has set proportions, in the western culture at least. We find beauty in the human figure, a flower, a tree, and a mountain. Why is this? It’s not a coincidence that we find beautiful things in nature or that we equate harmony with nature. I can imagine in the beginning of our evolutionary development, our ancestors would stare into the distance at a setting sun in between mountain peaks and wonder at the majesty of nature and god. Our predilection to beauty may also serve something more mundane like choosing a compatible mate or selecting a healthy food source.
This is the Salamis Stone where different measurements and proportions were etched in stone as a standard for builders of ancient Greece to follow. Notice that the human form was used and this is perhaps a record of our sense of beautiful proportions.
The Golden Section
In math and art:
The Golden Section is also known as the Golden Mean, Golden Ratio and Divine Proportion; names given during the middle ages. It is a ratio or proportion defined by the number ( = 1.618033988749895... )
the ratio of the whole line (A) to the large segment (B)
is the same as
the ratio of the large segment (B) to the small segment (C).
A+b/a = a/b = 1.6180339887…
Or in algebraic terms.
1+sqr(5)/2 = 1.6180339887…
So what does this all mean?
Man from the beginning of recorded history figured out this magical ratio thus incorporated it into their art and architecture. It is a human construct for determining beauty.
The Fibonacci Sequence
The golden ratio and Fibonacci sequence are intertwined and sometimes interchangeable. The Fibonacci sequence is easier to calculate unlike the irrational number (√5) and is an approximation of the golden mean. These approximations are alternately lower and higher than φ, and converge on φ as the Fibonacci numbers increase. In mathematics, the Fibonacci numbers are the following sequence of numbers:
0,1,1,2,3,5,8,13,21,34,….
The sequence is obtained by taking the sum of the first two numbers to obtain the third number. In mathematical terms:
Fn = Fn-1 + Fn-2
Given: F0 = 0, F1 = 1
A tiling with squares whose sides are successive Fibonacci numbers in length
A Fibonacci spiral created by drawing arcs connecting the opposite corners of squares in the Fibonacci tiling; this one uses squares of sizes 1, 1, 2, 3, 5, 8, 13, 21, and 34
Page proportion of a medieval manuscript. According to Jan Tschichold: "Page proportion 2:3. Margin proportions 1:1:2:3. Text area proportioned in the Golden Section."
Contrast
Look at the texture below.
Where does your attention move? The line that is different! Out of all the lines in this pattern, your eyes move toward the thing that is different. Why is this?
It’s probably because of our ancestors. A skill like this would had made hunting easier by quickly spotting an animal out from the environment or making it easy to find fruits among the canopy. The lines that are the same literally become invisible and are ignored.
Symmetry vs Asymmetry
symmetry
asymmetry
Symmetry by nature is one contrasting the other. This is partly why we find asymmetry more interesting and dynamic. The differences in form in an asymmetrical system interact and play within the mind and grab our attention. This is not to say that symmetry should be avoided or is inherently inferior. It can be used as a tool to group elements. In nature, things are rarely symmetrical so symmetry is inherently man-made or other worldly. It becomes a pinnacle for perfection. However, if improperly used, it can be static and quite boring.
Size
<img style="border: 5px solid #ffffff;" src="images/stories/asymmetrical.jpg" width="148" />
fig. a
<img style="border: 5px solid #ffffff;" width="250" src="images/stories/minor_diff.jpg" />
fig. b
The two figures above create an uneasy tension. The difference in size in figure A is too great. The difference in figure B is too minor and seems like a mistake in production. Your mind’s eye is excellent at seeing even minor differences. In figure B, the smaller square should might as well be the same as the bigger or should be a lot smaller, but how much smaller? And in figure A, how much bigger should the smaller square for it to feel like a comfortable contrast. To resize the smaller square to something interesting or beautiful, we use the golden section of course.
<img src="images/stories/golden_scale.jpg" height="130" style="border: 5px solid #ffffff;" />
Or alternatively, we add a transition square in figure A.
<img src="images/stories/transition_scale.jpg" height="160" style="border: 5px solid #ffffff;" />
Square B acts as a link between A and C so the size differences in A and C don’t seem too great. Now, how is square B derived?
The size of square A is to B as B is to C. The ratio concept of the golden section is used to size square B. A natural progression is created.
Value & color
<img src="images/stories/strong_value.jpg" height="130" style="border: 5px solid #ffffff;" />
The contrast in value is too great and feels uncomfortable.
<img src="images/stories/golden_value.jpg" height="130" style="border: 5px solid #ffffff;" />
The value of one or both can be changed to proportions of black and white that approximate to the proportion of the golden section.
<img src="images/stories/transition_value.jpg" height="130" style="border: 5px solid #ffffff;" />
Or alternatively like the scale example, a transition value is added to bridge the two.
The value of A is to B as B is to C.
<img height="130" src="images/stories/strong_color.jpg" style="border: 5px solid #ffffff;" />
The contrast in the complimentary colors is too great and does not make a good combination.
<img height="130" src="images/stories/golden_color.jpg" style="border: 5px solid #ffffff;" />
The hues of the two squares are adjusted where the blue gets a little orange in it and the orange gets a little blue in it thus lowering the hue contrast. Notice the saturations and values of the two are changed as well.
Note: Hue is a quality of the color where a specific light wavelength is perceived. Color is the combination of hue, saturation and value. When dealing with color, these three attributes have to be accounted for. A trick to determining a value of a color is to squint your eyes. This limits the hue and saturation input into your eyes so the value of a color is more apparent.
<img height="130" src="images/stories/transition_color.jpg" style="border: 5px solid #ffffff;" />
A transition color bridges the two colors. The color of A is to B as B is to C. Notice when two complimentary colors are mixed it becomes a gray hue.
CompositionIn brief, the goal of art and design is to partly keep the mind interested visually as long as possible while at the same time communicate. It’s a type of narrative that is called composition. The following are tools in creating this narrative.
Grid
A grid is an underlying structure for a composition. It is used to give elements in a composition coherence.
<img width="250" src="images/stories/medium_grid.jpg" style="border: 5px solid #ffffff;" />
The number and size of the units in the grid is a balancing act.
<img width="250" src="images/stories/chaos_grid.jpg" style="border: 5px solid #ffffff;" />
With small grid units, the variety of positions and sizes of elements become too great. The mind promptly recognizes it as a texture and quickly ignores it.
<img width="250" src="images/stories/order_grid.jpg" style="border: 5px solid #ffffff;" />
Bigger grid units allow for smaller variety and ordered elements. But of course, there is always a risk of being too ordered.
<img width="250" src="images/stories/golden_grid.jpg" style="border: 5px solid #ffffff;" />
Does the grid have to be regular units? The answer is no. The grid above uses the golden section as a template.
<img width="300" src="images/stories/3d_grid.jpg" style="border: 5px solid #ffffff;" />
A grid doesn’t even have to be two-dimensional.
So it is the role of a designer to walk the line between order and chaos while using the grid as a skeleton to create coherence and dynamism.
Form & Formlessness
The elements in your composition are important in telling a story but so are the spaces around them. The terms commonly used are figure-ground: figure being the elements and ground being the background. Another term is positive & negative space: positive space being the elements and negative space is the space around the elements. They both are equal in terms of importance. Space is needed to define form and form is needed to define space.
Hierarchy
Hierarchy is important for communication and to entice the mind. Unlike a pattern where every elements have equal importance, a weighted system has a clear order of importance. The forms and spaces will engage the mind whether intellectually or emotionally.
<img width="150" src="images/stories/interval2.jpg" />
fig. a
<img width="150" src="images/stories/interval1.jpg" />
fig. b
The proportion of black to white in this interval is roughly the same in figure a. The ambiguousness of figure ground has no distinction. This creates a rather static and uninteresting composition where as in figure b, the forms have definite contrast in proportions to each other and to the negative space.
Spice
The spice concept is very much like the one element that is different in a sea of uniformity in the contrast example. It helps attract attention in a composition. However constraint must be used much like in cooking. Too much spice and the dish is overpowered. Instead of being a spice, it becomes a dominant form which breaks the harmony of a clear ordered structure. It has to be appropriate in proportion in its context.
<img src="images/stories/interval3.jpg" width="150" />
The red stripe is appropriately proportioned in this composition. If it was a less saturated color, the size of it can be bigger.
And so the divine proportion, a construct for harmony, beauty, and dynamism can be used in every aspect of the visual narrative that is a composition. Every form and space have attributes like size, color, value, and position. Each one of the attributes have quantity of things or proportions that makes them distinct.
Reference:
<a href="http://en.wikipedia.org/wiki/Aesthetics">http://en.wikipedia.org/wiki/Aesthetics</a>
<a href="http://en.wikipedia.org/wiki/Golden_ratio">http://en.wikipedia.org/wiki/Golden_ratio</a>
<a href="http://goldennumber.net/goldsect.htm">http://goldennumber.net/goldsect.htm</a>
<a href="http://en.wikipedia.org/wiki/Fibonacci_number">http://en.wikipedia.org/wiki/Fibonacci_number</a>
<a href="http://en.wikipedia.org/wiki/Fibonacci_number"></a>Ibid. Tschichold, pp.43 Fig 4. "Framework of ideal proportions in a medieval manuscript without multiple columns. Determined by Jan Tschichold 1953. Page proportion 2:3. margin proportions 1:1:2:3, Text area proportioned in the Golden Section. The lower outer corner of the text area is fixed by a diagonal as well."
Colin Ware, Information Visualization: Perception for Design, Academic Press 2000.
Login
Register
FAQ
Search
