Website Design Principles

The one mantra you should always remember is that the design of your website needs to work for your visitors.

We spoke to Saleh Kayyali, a Senior UX Architect at marketing company MVF Global.

Kayyali says that before you start building your website, you need to work out two things:

• What the purpose of your site is
• Who the users of your site are

These should inform every decision you make on your website, from its name, to the homepage design, to the content. If you’re not certain who is going to be looking at your site, or what the purpose of your site will be, then it’s likely to become unhelpful to any users and unsuccessful for you.

Kayyali points to Snapchat as a service that had a great understanding of its users and purpose – prior to its redesign in November 2017. It’s purpose was to facilitate fun, irreverent visual communications between 15-20 year-olds. In fact, Snapchat targeted this demographic so much that many older people simply couldn’t fathom its usefulness, or even how to work it.

Snapchat’s redesign at the end of 2017 showed that it had fundamentally misread its users and the purpose of the app. As it became more popular, Snapchat’s user base naturally diversified, and this newer user base was more receptive to sponsored and featured content, whether it be from Vice or the Washington Post.

However, its core user base wasn’t receptive. Snapchat also lost sight of its purpose – fun communication – and became obsessed with monetizing its platform. Its core user base reacted badly and it lost over $1bn in valuation. All because of a redesign.

Snapchat before and after its redesign (Credit: XDA Developers)

So it pays to understand your users and your site’s purpose. But how do you go about understanding either of these in the first place?

Know Your Purpose

Understanding your site’s purpose sounds obvious, but Snapchat shows just how wrong you can get it. For example, let’s say you’re building a website for a company selling artisanal soap. Your site’s purpose is selling soap.

Of course, it may have other facets, such as talking about the sustainability of your soap versus traditional competitors. But, if you’re not selling soap, then your site isn’t successful.

Know Your Users

Kayyali explained that once you’ve established the purpose of your site, you need to look at the type of people you want to attract.

It’s likely, for example, that if you are selling artisan soap, then your target audience isn’t going to be 15-20 year-olds, like Snapchat’s was. Instead, your users might be 30-50 year-olds with more disposable income to spend on soap.

One useful tip is to breakdown your target users into different groups by creating what is known as a persona. These are “generalised, fictional people who represent a group of users” as Kayyali calls them.

The best way to create these personas is by researching your market. Look at other sites similar to yours: Is there another soap company you’d like to emulate – Burts Bees, for example? If you’ve already built your site, can you survey the existing users to find out who they are and what they like? Or talk to family and friends about your site and the image your site gives off.

By building up this knowledge, you’ll be able to find out the needs of your users. Do they want to buy fancy soap quickly and move on? Do they only buy from brands they have an affinity with? Might they even want to have a repeat soap order?

Whatever you find, you need to put these needs first.

Website Structure

But what does this all mean when it comes to designing the structure of your site? We’re going to stick with our imaginary soap store here, as an example.

We recommend using website builders here at Tech.Co. These modern tools provide simple, cheap and easy ways to build websites yourself.

Sites such as Wix offer great templates, which will give you the core architecture of your site. Despite this, it’s still worth literally sketching out your ideal website, considering how users are going to get from the homepage, to choosing a product, to buying it.

You should be thinking about making this journey as easy as possible, whilst keeping in mind that people might want to add a product at the last minute, or come back to their order later.

Of course, this will vary for each website. As we’re only selling soap, we want to allow users flexibility to amend their orders, or jump back-and-forth between selecting and buying a product. But, if we were an airline, we’d need a much more regimented system that helps our users book their tickets correctly.

Kayyali says the best websites “remove cognitive effort”. This means that while users are fully aware of the decisions and actions they’re taking on your site, these should never feel like hard work.

Website Aesthetics

You’ll likely be bored of us saying this, but think about your users.

If your users are looking for a soap company that produces sustainable, natural soaps, then they’re expecting to see that in your site. Think images of nature, wholesome-looking people, and references to your eco-friendly creds. However, if your soap company sells rigorously tested clinical soaps, you might want a more minimalist aesthetic, suggesting a scientific cleanliness.

It’s also worth studying design trends. For example, skeuomorphic styles used to be incredibly popular as computer-shy users could immediately understand the function of different elements. Skeuomorphism in websites is where on-screen items are explicitly designed to mimic real-world counterparts – the calendar and notepad on this page for example.

This was replaced with flat design, which emphasizes usability with clean, clearly delineated elements with obvious purposes – like the website below. Flat design sites tend to work better on mobile devices, as well.

More recently still, we’re seeing a lot of designs utilizing shadows and scrolling textures instead of simple flat elements. These can be incredibly useful for maintaing user engagement on websites. After all, scrolling is easier than clicking – particularly on mobile. However, it’s worth ensuring that the purpose of the scrolling remains obvious.

Website Color Schemes

Once you’ve established the general aesthetics of your site, you can pick a color scheme. This doesn’t necessarily need to be consistent – but it does need to reflect your brand.

In fact, changing the color scheme can be helpful in differentiating the products you sell. For example, take a look at the way Apple changes the color theme for each of its iPhones.

Again, picking a color scheme depends heavily on the culture of your users. Snapchat, despite its relative fall-from-grace, has stuck with the bold primary colors that made it so popular with its youthful audience.

Google’s sites tend to be minimalist in color highlighting the bold primary colours of its brand logos. This gives a consistency and makes it clear which of its myriad products does what.

Asus’ Republic of Gamers sub-brand leans heavily on black and red colors, making its products and website seem serious and even macho – exactly what its users are after.

Choosing a Font For Your Website

Should you want to, you can send yourself down a never-ending rabbit hole when it comes to fonts and typefaces.

Serif fonts, for example, feature little lines on the end of each letter. Sans-serif fonts, like the Arial we use on Tech.Co, don’t have these small lines.

Monospace fonts have all the letters taking up the same horizontal space on the page – this means the “l” is as wide as the “m”, for example. There are many subfamilies of script typefaces (basically the ones that mimic handwriting).

Blackletter typefaces feature wide, heavy letters and there are decorative fonts, like bauhaus, designed specifically for posters and signs.

Like we said, there’s a real rabbit hole when it comes to choosing a font.

However, as long as you base your font choice on the culture of your users and the type of brand you want to create, you’ll be onto a winner. It doesn’t have to be consistent across your site, but have a clear reason for choosing why a different section would have a different font – it needs to reflect the purpose of that aspect of the site.

Back with our imaginary soap company – we would avoid serif fonts such as Times New Roman for logos and headings, because they can be old-fashioned (unless that’s the experience you want). Display fonts such as Cooper Black might suit the logos and navigation buttons. But, for lengthy pieces of text, like product descriptions or terms and conditions, you’d want an easy-to-read font like Arial.

Website Builder Templates

If this all sounds very complicated to you, don’t worry. You’ll likely know more about your website’s innate purpose and your potential user base than you think.

And, if you’re struggling to work out where you’d even begin designing your dream website’s layout, font, navigation and so on, there’s no reason to feel intimidated.

We’d recommend using a website builder such as Wix or Squarespace to construct the shell of your website.

These companies offer fantastic-looking website templates. They can instantly give your site a professional look and feel, meaning that you won’t have to design an entire site from scratch. You’ll still have enough flexibility to implement your own brand’s style and identity.

Want to know more? Check out our Best Website Builders for Beginners page

Using a website builder means that you’ll be able to create a site that’s easy for your users to navigate – whether it’s for a soap company, a blog or a building company. It can also help you fulfil your site’s purpose by giving you access to features and plugins for everything from contact forms to stock inventory apps.

Even if you’re using a website builder, it’s still worth following the above rules – it’ll help you visualize the site you want and make it a reality. But remember, as Kayyali says: “experience matters more than looks”.