5 elements of a successful design

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:

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.
These includes:

  • Symmetry
  • Complexity
  • Colour
  • Hue
  • Saturation
  • Brightness

Structural factors

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.

Symmetry

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.

Complexity

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

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.

Simplicity aesthetic in design by Rave View 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

Diversity reflects aspects related to dynamics, variety, visual richness, creativity, interest, and novelty.11

Colour

Hue

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.

Saturation

Turning up the saturation increases site likeability, this is reflected in the tendency to maximise the use of colour in both web and print.

color blue in web design inspiration Made Together have combined symmetry, simplicity and a high blue saturation for the landing page of their site, personally, I love it.

Brightness

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.

key aesthetic perception in web design lauren-kelly-lauren-does inspiration 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

Form for thought - A blog about design psychology and design thinking for graphic designers, web designers, ui designers, ux and illustrators. Looking into the psychology of colour, user behaviour and advertising psychology.