The time-old adage, older than the universe itself.

Probably not, but still it begs the question “Which should I focus on more?”

Aesthetics? Function?

Aesthetics, a branch of philosophy dealing with beauty and art and its appreciation. The physical attractiveness of a form.

Function, an operation designed to do a specific task, usually efficiently, practical and useful.

Both are important. Aesthetics immediately grabs the attention of the beholder. It is a firm handshake, looking you in the eye, wearing a nice suit and tie. Yet function is having that hand to shake, an eye to look into and a suit to begin with. With over 3 billion people browsing the internet, you better damn well have a firm handshake and an impeccable suit.

But when I say function, I don’t mean “if I click a button, does it do something?” it extends past that. Function also means if the site is easy to read. Is it easy to navigate? Will visitors feel overwhelmed or lost in the website? Is the layout intuitive? Is the purpose of the website clearly communicated? And more importantly, does the website load quickly?

Answering these questions may require you to sacrifice some aesthetics, but at the same time, if the site is not interesting enough, not pleasing enough to the eye, visitors will simply go elsewhere. Aesthetics go a long way to making first impressions. In fact, first impressions are literally all about aesthetics.

But despite their differences, there’s no reason to completely have one over the other. Function and Aesthetics are friends you see, and while they can’t be the same person, they can definitely hold hands and work together.

Simple functions

Never forgo simple functions. Basic things many would overlook but is the core of a website. Things to keep in mind

  • Homepage link on the logo. This simple accessibility is present in most websites and I find myself annoyed when I wish to return to the homepage, and the logo is not a link.
  • A back button which returns you to where you were previously (typically in shopping lists or a catalogue). Having a back button that remembers where in the page you clicked the link is priceless. I’ve been frustrated so many times having to scroll through a long list of items to find where I was previously. If not, at least make the link open a new tab.
  • Minimise the number of menu options and drop downs if possible. Organising links is great and all, but having to search through endless dropdown and burger menus to get to where you want to be can be incredibly annoying.

Never underestimate the power of colour

Simple aesthetics to keep in mind, never underestimate the power of colour coordination. Individual colours can look great, but put next to each other, they can turn out to be less than pleasant. Choose colours that complement each other, making themselves and others look better. Each colour also has a meaning and psychological impact when we perceive it. Red often symbolises energy and urgency, used in conjunction with big “On Sale” signs to instil a sense of urgency which results in an impulse buy from a passing customer, while blue represents security and trust, peace and calmness.
Did you know? 85% of shoppers place colour as a primary reason for why they buy a particular product.
Source: Kissmetrics.

  • First choose a main/dominant colour. It should be used in the logo, the titles and headlines, and highlights important information.
  • Next select the accent colours. Choose only one or two, use them in highlighting less important information such as subtitles, still making it stand out from the last colour, the background colour.
  • The background depends on what your website focuses on, the background colour depends on which part of the website you want views to focus on. Are you promoting products? Then the background should be simple and draw more focus onto the products. Or perhaps a service or brand? What kind of service? Professional and elegant? The background colour should reflect that. But regardless, the number 1 rule: the background colour should never ever make the text hard to read.

Final thoughts

In the end, I can’t really tell you which one to prioritise. Just ask yourself, if you were visiting your own website without any prior knowledge about it, do you know what it’s for? And if you wanted to go somewhere, would you know exactly which links to follow? And does it look good enough that it will keep your attention?