Beauty in Web Design
Use examples to explain what “Beauty” means and how it applies to the design and criticism of websites.
- What is “Beauty”?
- Beauty in Art
- Beauty in Human Faces
- Beauty in Web Design
- The Golden Ratio
- Natural Imagery and Colour Schemes
- Where has Beauty Gone?
The Oxford English Dictionary describes beauty as being “a combination of qualities, such as shape, colour, or form, that pleases the aesthetic senses, especially the sight” and also as “the pleasing or attractive features of something”. Wikipedia adds that beauty may be “a characteristic of a person, animal, place, object, or idea that provides a perceptual experience of pleasure, meaning, or satisfaction.”
More simply, something which possesses beauty or is “beautiful” is often something that is aesthetically pleasing, or something which possesses certain qualities that are particularly attractive to us.
The Birth of Venus by Sandro Botticelli depicts Venus, the goddess of love who was considered to be a vision of beauty.
Although beauty can be described in many ways, our individual perceptions of beauty can differ greatly. In the western world, it is widely believed that beauty is entirely subjective; a belief that is exemplified by the well known proverb “beauty is in the eye of the beholder”. This proverb essentially means: “that which one person finds beautiful or admirable, may not appeal to another” (Oxford English Dictionary).
However, discovering whether or not beauty is subjective or objective is a somewhat complex matter. American theologian Jonathan Edwards did not consider beauty to be located in emotions, but rather in mathematical relations and beautiful proportions which exist in nature (Buhler, 2007). Similarly, Greek philosopher Plato believed in beauty as an idea; something abstract that is revealed in the order of the natural world.
Why should we focus on beauty, and why is it important to us? Cennydd Bowles in his article ‘Beauty in web design’ states that “beauty affects us in profound ways, however we may try to resist.” Beauty has the potential to affect us each and every day and in order to understand our perception of it, it is useful to observe the evolution of beauty in art.
In Greek and Roman times, art was mostly mimetic, meaning that its purpose was to replicate or imitate beauty as it existed in nature. This was largely consistent with the philosophy of the time. Plato’s Theory of Forms proposed that there exists one perfect, ideal example of everything in the world; the perfect circle or straight line, the perfect grape or the perfect cow. The creation of art and sculpture at the time was a means to study the inherent beauty of these ideal forms. (Bowles, 2010).
During the Renaissance, artists were heavily influenced by the works of the ancient Greeks and Romans. Artists rarely painted with the intention of perfectly imitating reality, but instead created physically perfect images according to what was perceived as beautiful at the time (Haughton, 2004). Religious influence in art was prevalent throughout the Renaissance, reiterating the idea that beauty exists on a heavenly plane (Bowles, 2010).
The Mystic Marriage of St. Catherine by Antonio da Correggio depicts religious imagery and the beauty of human experience.
During the late 20th century, traditional notions of beauty were rejected altogether by Marcel Duchamp, who famously displayed a urinal as modern art. This was an incredibly controversial move and as a result, many artists followed in his footsteps, displaying found objects as conceptual art. Wikipedia describes conceptual art as “art in which the concept(s) or idea(s) involved in the work take precedence over traditional aesthetic and material concerns.” Some critics claim that art is no longer concerned with beauty; that is now seeks to be challenging rather than delightful and sublime. However, Roger Scruton in his article ‘What has art got to do with beauty these days?’ believes that in a cynical world where people may have given up on art, the need for beauty still remains.
My Bed was exhibited at the Tate Gallery in 1998 as one of the shortlisted works for the Turner Prize. This piece attracted a host of media attention and fueled considerable debate over whether or not it is in fact “art”. The bedsheets were stained with bodily secretions and the floor had items from the artist’s room (such as condoms, a pair of knickers and functional everyday objects including a pair of slippers) (Wikipedia, 2010).
With this type of conceptual modern art, subjective beauty dominates. Some people may see beauty and others may find it thought provoking and challenging, but not beautiful.
Recognising traditional notions of beauty in controversial modern art may be incredibly difficult, but in contrast, we find the recognition of beauty in human faces relatively easy.
Face Research have carried out numerous experiments which test our responses to certain facial features, in an attempt to discover which faces we find universally attractive.
An example of a perfectly symmetrical and “beautiful” face created by Face Research.
The most attractive (or beautiful) faces, appear to be the most symmetrical. It is well accepted that symmetry and certain mathematical equations (such as the golden ratio) create a certain harmony which we find aesthetically pleasing.
The unquestionably beautiful Audrey Hepburn; an example of facial symmetry.
Although important, facial symmetry is not the only trait which governs how a particular culture perceives facial beauty. An aesthetic theory that competes with the theory of facial symmetry is wabi sabi (Wikipedia, 2010).
According to Wikipedia, “characteristics of the wabi-sabi aesthetic include asymmetry, asperity, simplicity, modesty, intimacy, and suggest a natural process. Both symmetry and asymmetry may have aesthetic appeal that also play a role in art.”
As we have seen, the definitions of beauty are wide ranging and our individual and cultural perceptions of beauty are equally so. However, through all the confusion and debate, universally accepted principles of beauty have emerged, and these should be considered when striving for beauty in design. Cennydd Bowles states in his article, ‘Beauty in web design’, “[d]esigning for universal beauty [should involve] careful consideration of the fundamental aesthetic principles of design, such as symmetry, harmony, the rule of thirds and the golden ratio.”
Symmetrical design is all about balance. Symmetrical balance occurs when the weight of a composition is distributed evenly around a central vertical or horizontal axis (McClurg-Genevese, 2005). In its purest form, symmetrical design will assume identical forms on both sides of the axis – this is known as reflective symmetry (or formal balance).
Apple have used reflective symmetry here to advertise the iPhone 4. The main heading and strap line are both centre justified and the two phones are mirror images of each other sitting either side of the central axis. This use of formal symmetry is incredibly striking and arguably – beautiful.
When symmetry occurs with similar but not identical forms, it is known as approximate symmetry (McClurg-Genevese, 2005).
In this example, BootB uses approximate symmetry to great effect. The elements are reflected on either side of a central vertical axis, but the elements are not identical. The large tower block on the left is balanced by the smaller house with chimney smoke and green trees on the right. The BootB logo located top left is also balanced by the language selector located top right. This design is a wonderful example of how approximate symmetry can be used to create beautiful web design.
Symmetrical design, when used creatively, can be aesthetically pleasing and helps to create a sense of visual harmony (Bradley, 2010), but when used incorrectly, it has the potential to look static, rigid, or as Penny McIntire (2008) states, “mind numbingly boring”. A website created with a centered heading, a centered image and a centered text block is unlikely to create visual interest and although balanced, is unlikely to be particularly ‘beautiful’. Designers often favour the use of asymmetry when striving to create beautiful graphics and web pages.
According to the aesthetic theory of wabi sabi, asymmetrical design can also be beautiful. Wabi sabi is often described as “flawed beauty”, reflecting an imperfect reality where imperfect and asymmetrical forms are equally as (or more) beautiful than their perfect counterparts.
31 Three features an asymmetrically balanced design. The large image of the glass jar on the right balances the text and three smaller spherical images on the left. The three images on the left are symmetrical forms through translational symmetry; they lead the eye to or from the larger image (Bradley, 2010).
As these examples show, web design can be asymmetric whilst remaining balanced and harmonious. Asymmetrical designs are sometimes deemed to be more interesting and sometimes being interesting is what makes something beautiful.
Tomas Pojeta’s portfolio site is another excellent example of asymmetrical balance in design. The left justified heading, text box and island graphic are balanced by the brown paper scroll image on the right. Even though the image on the right is narrower, the deep brown creates depth, making it look heavy. This creates a perfect balance with the lighter coloured, semi-translucent graphics on the left.
Creative Web Design is heavily asymmetrical and cleverly balanced. The site title, strap line and rotating box graphic are all left justified and these are balanced by the heavy green and white stripes on the right of the central axis. The five links in the main menu are also right justified, helping to create visual balance and harmony. A design like this certainly has the potential to be more exciting and dynamic than a design based purely on formal symmetry.
Another form of asymmetry that is often used to create beautiful web design is the golden ratio. Since the Renaissance, many artists and architects have proportioned their works to approximate the golden ratio, which is approximately 1:1.168 (and otherwise known as phi Φ). In web design the golden rectangle is often used, in which the ratio of the longer side to the shorter is the golden ratio. It is believed that this proportion is organic, universal, harmonic and aesthetically pleasing (Friedman, 2008).
Wikipedia describes the golden ratio as an “irrational mathematical constant” which appears in nature. The artists of the Renaissance used divine proportion to design their paintings, sculpture and architecture, just as designers today employ the ratio to create beautiful graphics and layouts (Beaird, 2007).
This image shows how two column grids in web design can be divided according to the golden ratio.
The most recent design of Twitter uses the golden ratio to divide the main and sub columns.
On the subject of the golden ratio, Jason Beaird states that “[r]ather than relying on artistic notion, divine proportion gives us logical guidelines for producing appealing layouts.”
Although the application of the golden ratio may help to create an aesthetically appealing design, the use of mathematics alone is unlikely to produce a truly beautiful result. Web designers must also focus on other important design elements, such as colour and image.
As Cennydd Bowles discusses in his article ‘Beauty in web design’, it is incredibly important for web designers to “notice everyday beauty”. In order to be able to see beauty in web design (or indeed produce it), it is essential to see beauty in everyday things; art, architecture, music or even products. Perhaps the easiest way to discover everyday beauty is by observing nature.
Artists have studied and painted animals and landscapes for centuries. Nature’s inherent beauty is apparent for all to see and perhaps that is why it translates so well to web design.
Ryan Scherf’s portfolio website is based on a mountainous landscape and incorporates a number of natural textures. The main illustration uses a natural, complimentary colour palette of blues and greens and the background for the rest of the site is a deep brown with earthy and wooden textures. This use of natural imagery, colour and texture creates a truly beautiful result.
This design by Fairhead Creative also uses natural colours and imagery. This design has more of a cartoon feel than the previous but it is still an interesting and striking design, utilising an earthy mixture of blues, greens and browns.
This design for Lonely Tweets uses a haunting black and white photographic image of an isolated tree in a snow covered field as the page background. This design is captivating and although simplistic, it is truly beautiful. By viewing the site you feel as though you are standing there, looking at the striking scenery.
This design for Viget Inspire incorporates both natural imagery and the beauty of a watercolour painting. The graphics are wonderfully ethereal and perfectly capture the beauty of an early morning sunrise over a wild, mountainous landscape. The colours of the text and background have been derived from (and therefore compliment) the graphics, resulting in a harmonious feel throughout the design.
As we have seen, it is possible for designers to create beautiful websites by taking in to account a number of things: firstly, by using symmetrical or asymmetrical balance, by applying mathematical standards such as the golden ratio, and by drawing inspiration from art and from the beauty around us. However, in recent times, there has been a period of intense focus on usability in web design, leading many to believe that beauty has been forgotten.
Many influential web designers, such as Cennydd Bowles and Mark Boulton, have argued that beauty is now missing from modern web design; that the focus has shifted too heavily onto usability at the expense of beauty. In his article ‘Beauty in web design’, Bowles states that “…understanding the user’s tasks and crafting a site around them isn’t sufficient to bring us genuine beauty.”
The recent focus on usability has been incredibly important for the evolution of web design, but is it now time to focus on creating truly inspirational websites – ensuring that beauty is no longer overlooked?
A topic often discussed in relation to beautiful design is the Aesthetic-Usability Effect. The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs. Boulton believes that by focusing on beautiful design, you will make the product more usable by default.
In general, it is thought that beauty makes things easier to use. According to Bowles, “our brains literally work in a different way, becoming more flexible when using a thing of beauty” – and Apple know the value of the aesthetic-usability effect more than most (Bowles, 2010). For many years PCs were the most popular computers and Apple users were in the minority, but with the introduction of the colour iMac ( hardware that was combined with beautiful design), they gradually gained popularity with consumers (Howard, 2009). Windows operating systems have long had a reputation for being a little less than aesthetically pleasing. Apple concentrated on making their operating systems beautiful and simplistic, utilising simple menus with beautifully designed pictures and icons. Apple’s popular design aesthetic now extends throughout their vast product range.
Due to Apple’s beautiful and simplistic design, its operating system got the reputation for being more reliable and easier to use than Windows’ (Howard, 2009). Apple’s huge rise in popularity was largely due to the beauty of the product design.
In this essay I have looked at how it is possible to incorporate beauty into web design. It is possible by considering the use of symmetrical or asymmetrical balance, by applying mathematical standards such as the golden ratio and by drawing inspiration from art and from the beauty around us.
In terms of whether the idea of beauty has been lost in favour of usability, it is clear that the focus should shift away from usability, and instead focus on the user experience. It is now a given that websites should be ‘easy to use’. With the advancement in screen resolutions, web design tools, CSS and HTML, designers should be free to experiment with beautiful design.
In conclusion, web design should capture the user’s attention and delight them. It is not enough to rely on mathematical standards and a grid system – creativity should be actively encouraged, so that web design can move into a new era – one which strongly advocates usability, functionality and beauty.
Beaird, J., 2007. The Principles of Beautiful Web Design [online] Available at: <http://articles.sitepoint.com/article/principles-beautiful-web-design> [Accessed 12 January 2011]
Boulton, M., 2005. Aesthetic-Usability Effect [online] Available at: <http://www.markboulton.co.uk/journal/comments/aesthetic-usability-effect> [Accessed 13 January 2011]
Bowles, C., 2010. Beauty in web design [online] Available at: <http://www.cennydd.co.uk/2010/beauty-in-web-design-part-1/> [Accessed 10 January 2011]
Bradley, S., 2010. Symmetry and Asymmetry in Web Design [online] Available at: <http://www.vanseodesign.com/web-design/symmetry-asymmetry/> [Accessed 10 January 2011]
Buhler, K., 2007. Is Beauty Objective? [online] Available at: <http://mereorthodoxy.com/?p=1177> [Accessed 10 January 2011]
Friedman, V., 2008. Applying Divine Proportion To Your Web Designs [online] Available at: <http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/> [Accessed 12 January 2011]
Haughton, N., 2004. Perceptions of beauty in Renaissance art [online] Available at: <http://sirl.stanford.edu/~bob/teaching/pdf/arth202/Haughton_Renaissance_beauty_JCosmeticDermatology04.pdf> [Accessed 11 January 2011]
Howard, N., 2009. aesthetic-usability effect [online] Available at: <http://nathanhowarddesign.co.uk/blog5.html> [Accessed 13 January 2011]
McClurg-Genevese, J., 2005. The Principles of Design [online] Available at: <http://www.digital-web.com/articles/principles_of_design/> [Accessed 11 January 2011]
McIntire, P., 2008. Visual Design for the Modern Web. Berkeley, CA: Pearson.
Scruton, R., 2009. What has art got to do with beauty these days? [online] Available at: <http://www.timesonline.co.uk/tol/comment/columnists/guest_contributors/article5913530.ece> [Accessed 11 January 2011]
Wikipedia, 2010. Beauty [online] Available at: <http://en.wikipedia.org/wiki/Beauty> [Accessed 11 January 2011].
Wikipedia, 2010. Facial symmetry [online] Available at: <http://en.wikipedia.org/wiki/Facial_symmetry> [Accessed 10 January 2011]
Wikipedia, 2011. Golden ratio [online] Available at: <http://en.wikipedia.org/wiki/Golden_ratio> [Accessed 12 January 2011]
Wikipedia, 2011. Jonathan Edwards (theologian) [online] Available at: <http://en.wikipedia.org/wiki/Jonathan_Edwards_(theologian)> [Accessed 10 January 2011]
Wikipedia, 2011. Plato [online] Available at: <http://en.wikipedia.org/wiki/Plato> [Accessed 10 January 2011]