Research published last year by Seckler, Opwis and Tuch1 shows that there are only 5 elements to creating a successful print, web and interface layout.
They found in order to be both beautiful and effective, a designer should make their design:
- the colour blue
- of medium brightness
- with high saturation
- simple in aesthetic
- vertically symmetrical
Granted, the study doesn't link this with an analysis of a client, industry sectors, the purpose of the design etc. But it is an important study in terms of pure aesthetics.
Keep reading to find out a more about the in-depth science behind their findings.
Why are design aesthetics important?
Whether you are an established designer or new to the field, the insights gained through new research give an important direction for future design. We live in the age where beauty isn’t the most important design quality; today a design is judged more on its effectiveness.
Designs that are well thought out and well executed not only lead to beautiful work but most importantly - effective work that engages with the viewer.
Strong visual aesthetics have been shown to increase:
- Usability and ease of use.
Making both the design and whatever it is promoting perceivably easier to use.2 3 Read more how aesthetics affect perceived ease of use.
- Trust and credibility4
Read more about how this impacts a design's persuasiveness
- Short term engagement through enjoyment, surprise and fun5
- Long term engagement, by increasing the intention to revisit and reuse both the brand and a product6
This is not just restricted to web design, the same effect was recorded in print media as well. So next time you are designing a poster or redesigning a brand keep the below in mind.
Posters left by Carmen Haessner and right by industry giant Jessica Walsh. Both show how the principles can be applied successfully to print.
What are the aesthetic factors every designer should know?
There are many principles that affect the aesthetic factors, and rather than reciting a design theory book, I’ll instead concentrate on the factors proven to work in a recent psychology study7.
Structural design choices came out top in the study, being the most effective in terms of aesthetic perception and site likeability. Colour (discussed below) came a very close second.
Listed as one of the laws of design in the Gestalt Theory, in terms of the linear nature of app and web interaction, vertical symmetry is the most successful in layout design.
It helps to create a rhythm and flow to a page, increasing the ease of use. It does this through predictability of layout and patterns of use. All in all, this leads to a more enjoyable experience8.
Molamil's website is a great example of vertical symmetry in design, not to mention their kick ass use of patterns.
Appropriately, the definition and industry conclusions on complexity are, well, complex.
A number of definitions are used throughout scientific study and in web theory, but the general consensus agrees that:
- On a larger scale, complexity is defined as the amount of variety in a visual array.9
- On a smaller scale, complexity is specific to each element used in the design. The nature of complexity develops from the specific characteristics of each object used – based on, for example, a variety of colours, shapes, use of white space or cluttering of elements.10
Specifically, factors that influence complexity include:
Simplicity is recognised as a central design factor – from the law of simplicity in the Gestalt Theory to the modernist design dictum ‘less is more’.
In a study by Choi & Lee, they found that simplicity was the most important factor in influencing the perception of a visual design.
Rare view's website and branding are all about stripped back simplicity, reducing the information to the minimum and even restricting their colour palette.
Diversity reflects aspects related to dynamics, variety, visual richness, creativity, interest, and novelty.11
There is a global tendency to like blues and blue-greys over other colours.12
Yellows and yellow-green hues ranked the lowest in other studies.13
Culture also has a slight effect on preference and effectiveness of colour. See this infographic on the meaning of colour for more insight.
Turning up the saturation increases site likeability, this is reflected in the tendency to maximise the use of colour in both web and print.
Made Together have combined symmetry, simplicity and a high blue saturation for the landing page of their site, personally, I love it.
Having a bright dominant colour increased layout likeability14, particularly if that colour was the background of the site or app15.
That said, caution should be taken not to make everything too bright, as sites with medium brightness ranked the best, with the brightest at the bottom of the likeability pile1.
Taking science a step further
After reading this study, I thought it would be interesting to design my own portfolio site based on its findings. See if you think it is effective.
See website at Lauren Does Design
What are your thoughts? Do you have any website examples that match the 5 key criteria above? If so, drop them below and I’ll add them in.
To keep up to date with new articles and free graphics subscribe to our newsletter.
1 Seckler, M. Opwis, K. Tuch, A. Linking objective design factors with subjective aesthetics: An experimental study on how structure and color of websites affect the facets of users’ visual aesthetic perception (2015)
2 Phillips & Chaparro, 2009;
3 Sonderegger & Sauer, 2010
4 Robins & Holmes, 2008
5 Mathwick, Malhotra, & Rigdon, 2001
6 Mahlke, 2002
7 Seckler, M. Opwis, K. Tuch, A. Linking objective design factors with subjective aesthetics: An experimental study on how structure and color of websites affect the facets of users’ visual aesthetic perception (2015)
8 Bauerly, M. Liu, Y. Effects of symmetry and number of compositional
elements on interface and design aesthetics. 2008
9 Berlyne, D. Novelty, uncertainty, conflict, complexity. In Conflict, arousal, and curiosity.1960
10 Michailidou, E. Harper, S. Bechhofer, S. Visual complexity and aesthetic perception of web pages. In Proceedings of the 26th annual ACM international conference on Design of communication. 2008
11 Moshagen, M., & Thielsch, M. T. A short version of the visual aesthetics of websites inventory. 2013
12 Cyr, D. Head, M. Larios, H. Colour appeal in website design within
and across cultures: A multi-method evaluation. 2010
13 Palmer, S. Schloss, K. Human preference for individual colors. 2010
14 Papachristos, E. Tselios, N. Avouris, N. Modeling perceived value of color in web sites. 2006
15 Lindgaard, G. Dudek, C. Sen, D. Sumegi, L. Noonan, P. An exploration of relations between visual appeal, trustworthiness and perceived usability of homepage