Share:

How to design a website that works: combining aesthetics and usability

The renowned graphic designer Milton Glaser said, “There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for”.

Most people, whether they realise it or not, are hoping for a ‘WOW’ when presented with a new web design. But this may not always be the best design for your website.

Website design

Find out how to combine aesthetics and usability for a website design that works

It is true that aesthetics can positively affect your visitor’s or user’s perception of your company, brand or product. And therefore if a website appeals visually to its users it may be more successful in its aims. But there are two main problems with overly focusing on the aesthetics of a website design:

  • What you think of as WOW may not correspond with your target audience’s tastes. A successful website isn’t going to be designed for you – it is going to be designed for your users.
  • If you focus too heavily on aesthetics you may produce a website that is ineffectual at meeting your target audiences’ needs.

Your website must be designed to meet your user’s wants and expectations and therefore be outwardly customer focused and not inwardly company focused. To make sure you strike the right balance between visual design/branding and usability you should go through the following simple questions for each of the main webpages – before even thinking about the design:

  • What is the primary purpose of the web page and how will this be achieved
  • What will visitors want to see and do
  • How often will visitors access this page
  • How will visitors access this page- via mobile, tablet or desktop
  • How easy is it for visitors to get what they want from the current webpage
  • How does the purpose of the webpage fit in with the purpose of the website
  • How will the visual design meet with the expectations and values of your audience

You will then have a pretty good idea of what your page needs to do and what it should have on it. Give this to your design team when you brief them, along with the demographics of your audience, and you should end up with a page design that focuses on purpose as well as look.

We started this blog with a quote so would like to finish with one too. You may have heard this one before:

“Design is not just what it looks like and feels like.  Design is how it works too.”
And this is from Steve Jobs, Chief Executive and Co-Founder of Apple – a company that built its success on aesthetics and artistic values.

Apple Case Study

Let’s take a look at the main category page for iPhones on the UK Apple website to see how they have successfully combined aesthetics and usability in their webpage design.

Apple is a consumer company making profit by selling hardware such as mobile phones to individuals. Their consumers are just as likely to buy the products from high street Apple stores and third party mobile phone/computer providers as from the Apple website. Their consumers’ primary reason to purchase is not price but product related, with an instantly recognisable brand and product design. Therefore, the primary purpose of this webpage is to advertise and sell their new phones.

The page design works well from both an aesthetic and usability point of view for Apple customers. The page is dominated by a striking image advertisement for their latest product that fits in with the minimalist yet high quality design they are known for. The only calls to action are to ‘Learn more’, ‘Buy’ and ‘Apple Stores’ which are the best outcomes for page visitors looking for a new iPhone.

Otherwise they have kept the design uncluttered, attractive and striking – as befits the overall Apple brand. There is a lack of content and the user is not distracted by other items on the page or extra navigational items. The product is targeted at the high-end category of mobile phones therefore there are no detailed specifications, price details or promotional messages on view. There are no contact numbers or technical support details as the primary purpose of this page is not interaction. Overall the page gives the impression that Apple knows its customers well and the design meets their needs and expectations successfully.

If you’re looking for more advice on how to start a web design project then please get in contact with the team at Varn. We are always happy to run through best practise processes on the phone.