Beautiful, Functional or Both?

Written by Momena Ibrahim on May 16, 2017

stickee’s web design team often gives this one piece of advice to clients: a website should always be functional, first and foremost, but while also having an appealing and well thought-out design. No matter how beautiful and artistic you want your website to look like, you should never sacrifice functionality to design.

Users visit a website to perform an action, like purchase an item, or to gather information – not to ponder on how good it looks. However, this shouldn’t mean that a website cannot be beautiful and retain good functionality and user experience.

 

Why you need to prioritise functionality

Okay, so ‘functionality’ isn’t the sexiest word. It sounds dull, and it sounds like a functional website will look dull. Take Wikipedia, for example – it’s hardly the most beautiful or visually exciting platform, but it does its job well. You only need to fall down a Wikipedia click hole once to know the site’s internal links are on point. (Fun fact: if you click on the first link in the main text of a Wikipedia article, then the first link of the next one, and so on, you’ll eventually end up on the article on philosophy.)

Having a functional website will ensure your visitors convert into customers – from a clear user journey and seamless navigation to prominent calls to action and page loading speed, everything should be making it easy for the visitor to make their way through your site. Not only does a good user experience help you rank higher in Google’s search results, your website is also often all a potential customer has to judge your company on. They’ll make a quick, snap judgment, and if they can’t easily find what they’re looking for or if your calls to action aren’t attention-grabbing enough, that judgement won’t be positive.

Aesthetics also play a part in the way a potential customer will perceive your website and company. Two thirds of consumers would rather go through a website that is beautifully designed rather than too simple – and while there isn’t a one size fits all approach in terms of what your website should look like, some best practices are always good to keep in mind.

 

Our expert tips

How can your website be visually appealing while also retaining necessary functional elements? Here are some of the tips and practices we always follow when building a new website or during a redesign, and which have been shown to improve conversion rates.

Responsive design

With mobile devices becoming more and more popular (mobile web usage overtook desktop back in November last year), it’s essential that your website is optimised for viewing on a smartphone or tablet. Responsive design allows your site to automatically resize depending on what device it’s being viewed on.

Google’s algorithm looks out for mobile-friendly websites, and you won’t rank as well in the search results if your site isn’t responsive. But it’s not just about Google – consumers expect a website to look good on mobile, and might leave your page if they’re not satisfied with it. Don’t miss out on customers because your website isn’t optimised! Make responsive design a priority.

Loading speed

These days, everyone has the attention span of a hyperactive squirrel. No one wants to wait around for a page or image to load, like we all did back in the 90s, and site loading speeds have become increasingly important over the past five years.

You need to make sure your site doesn’t take more than a few seconds to load, or you’ll risk losing as many as 53% of your visitors (especially on mobile, which we already know is super-important.) If you have an image-heavy website, techniques such as Lazy Loading can be used to load content on your website whenever it’s needed instead of loading it all at once. Another helpful technique would be configuring page and text file compression using a tool like this one.

Calls to action

Having a clear main call to action is essential when building a website. After all, you create a website to achieve one or multiple goals – to capture the contact details of a potential customer, for example, or to sell a product. Without a call to action, your website isn’t going to magically achieve its goal.

A good CTA would include a main heading, a small amount of copy, and a clear action to perform, such as clicking a button or filling out a simple form. The place we often recommend our clients to implement one of their CTAs is at the top of a website, where the user will see it straight away.

Navigation

Your website should be easy to navigate: it’s vital that a user is able to see what pages are available as soon as they land on your website, in order to encourage them to start a journey or complete an action. A navigation bar is commonplace, and users will expect to find one at the top or in the top-right corner of the main page. By not having one, you’ll only end up confusing the user and leading them away from your site…

Good navigation should be clear, easily viewable, and well ordered. If your site has a lot of different pages and/or categories, and if you need a lot of links in the navigation bar, consider using a mega-menu. Mega-menus are a type of expandable menu which display links in a multi-level menu, so that it’s smaller, less cluttered, and the relevant sub-menus grouped accordingly.

Once the basics of functionality have been implemented, it’s time to look at the aesthetic side of your website design. Make it beautiful, make it unique, and make sure it sets you apart from your competitors.

 

Case study: Leavetown

We recently conducted a website redesign for the Canadian-based holiday rental company Leavetown, where we applied some of our top tips:

  • We placed the navigation bar at the top, where it should always be – clear and visible.
  • The main call to action is also at the top, just below the navigation bar, and the red button with bold white font makes it stand out.
  • We made sure that the website was able to adapt to different screen sizes by using Foundation’s responsive framework.
  • To help make the website aesthetically pleasing, we used beautiful imagery showing the gorgeous destinations and landscapes of Canada available to book through the site. Pictures speak a thousand words!

 

A fully functional website coupled with a beautiful design will allow you to attract more users and convert them into customers – so get on it. Need more advice on mixing aesthetics with functionality? Get in touch with our creative team today!