Choosing the perfect colour scheme for your brand is essential in making sure that it communicates the correct message that you intend to put across to visitors and clients.

When it comes to choosing colours for your website there’s a lot to consider. This includes making sure there’s no clashing colours and that the ones you select communicate the message of your business properly. There’s so much psychology behind colours that you might not have even realised before. In fact, recent research has shown that almost 85% of consumers say that colour is the main reason that they will decide to buy a specific item.

Here are a few tips to ensure that you’ve chosen the right colours for your brand’s website.

Know your audience

When it comes to choosing the correct colours, it’s important to think about your audience and their personalities. For instance, this virtual and serviced office space in Gateshead appeals to professionals who are looking for a serviced office or meeting room. It uses black, white and grey as its main colours to maintain a business-like persona, which will therefore be likely to attract this type of individual. It also uses a light orange to emphasise certain areas of the site. Hence, thinking about the right person to attract is a good starting point.

Think about emotions

An important aspect of colour psychology is emotions; how do you want visitors to feel when they come across a particular colour? Once you’ve established who your audience are it makes it easier to select colours. For instance, if you’re a wellness brand then you’ll want people to feel calm when they visit your website. This means that it would be best to go for pastel greens, blues, pinks or even a nude colour to promote the tranquillity aesthetic. It’s also important to be consistent with the brand colours chosen, which will help people to remember them. One study found that colours increased brand recognition by around 80%. Each colour also has its own meaning which you can read about in more detail here.

Understand the colour wheel

The colours you will need to get to grips with are primary, secondary and tertiary. You don’t need to mix any colours together to create primary colours, which are red, yellow and blue. However, the secondary colours (orange, green and purple) are made by mixing two primary colours together. For instance, to make purple, you’ll need to mix red and blue together. Finally, there’s tertiary colours, which are made by mixing a primary and a secondary colour. So, by mixing yellow and green you’ll be creating a yellowy-green shade.

Know colour temperatures and neutrals

You’ll also need to understand the warm colours, which include different reds, oranges and yellows. Then, there’s cool colours (various purples, blues and greens). Lastly, neutral colours are worth mentioning, too, which are probably the most popular among brands today and are seen a lot on social media. These include black, white, grey, tans and browns.

Understand how to apply colours

Now you know the basics, it’s time to move on to how you can apply this theory to your brand. First, you’ll need to understand complimentary colours, which are opposite each other on the colour wheel. For instance, orange and blue. It’s important to know that one of these will be a warm colour and the other will be a cool one. There will be a strong contrast between these as well, which means if you’re looking to convey a fun, outgoing message then they are perfect. Next, there’s analogous colours, which are next to each other on the colour wheel, such as red and orange. One of these colours will stand out more than the other, so it’s best to use that for the text and the other for the background. Lastly, triadic colours are evenly spaced on the wheel and tend to be vibrant, such as red, blue and yellow.

The Takeaway

We hope this post has helped you decide on the perfect colour scheme for your brand and website in order to attract more visitors, which may then help to draw in your ideal clients!

What is Intuitive Design?

The concept of Intuitive Design is one that can be applied to anything and everything that we interact with in our daily lives, from the cars we drive to the coffee machine that helps to motivate us out of bed in the morning.

It is invisible by its very nature, as it refers to the level to which an item or a space is built with ease of usability in mind, allowing users to focus on the task at hand. It functions in the hope that users will hardly even notice it. However, as soon as a design becomes non-intuitive, a user will notice.

For example, imagine that you have just rolled out of bed in the morning. It’s 6:15am and it’s too early to think about anything other than a steaming cup of coffee. You wander into the kitchen and appreciate the sleek and minimal appearance of your new coffee machine (which you just bought in advance of this months pay check, whoops).

However, as you rub the sleep out of your eyes and reach to find the “on” button, you realise that it’s… not there.

It takes thirteen whole minutes out of your one free hour in the morning to finally discover that the button you’re looking for is on the underside and it isn’t even marked. All you wanted was a relaxing cup of coffee before work, but instead you’re an exasperated, sweaty mess wondering why you couldn’t simply have stuck to your Nesquick.

Now, if the “on” button had been located in a spot which immediately caught your eye, this would never have happened. That would have constituted an intuitive design. It was the non-intuitive design which lead you to where you are now, which, frankly, is a place nobody wants to be in the early hours of the morning.

Making sense so far? Cool. Now let’s move from coffee machines to something more pressing: the smooth runnings of your website.

What constitutes intuitive web design?

It isn’t only physical products which can be measured against the concept of intuitive design, however, but online and digital spaces too.

Intuitive Design here refers to the ease of usability which will draw potential customers into your website and keep them there long enough for you to make a successful case for why they ought to choose your services over those of another company.

For example, if a band manager is researching luxury van hire for an upcoming tour, their job is made a great deal easier if the website their search engine directs them to is mapped out in a simple and intuitive manner. Hopefully seamlessly leading them immediately to the most important information they require in order to understand the options on offer and then to book their touring van with them. If the website is clunky and difficult to navigate, sacrificing usability for the sake of aesthetics, you’ve lost them within moments.

This is all well and good, however, the issue with intuitive web design is that every user is different. The reality is that many websites are designed only with the perspective and experience of the designer in mind. As a result, these websites fail to consider the experience of the most critical audience, the user.

As opposed to the web developer, the user arrives to the website in possession of pre existing knowledge (or, “current knowledge”). This is in addition to their “target knowledge”, which is how much the user needs to know to seamlessly use your site.

The gap between the current and target knowledge is what is known as the “knowledge gap”. In considering the design of your website, your job is to minimise this gap between what users know prior to coming to your site and what they must know in order to use it successfully.

So, what can you do?

It’s therefore important to take the necessary steps to anticipate what pre-existing knowledge your potential customers are arriving to your website with. The number one rule according to Peep Laja is to know your user and this can be done one of two ways:

1. Through field studies. This would involve you going to your customers directly and observing them using the web in their natural habitat in order to better understand their current knowledge.

Or

2. Over the shoulder usability tests. This would involve getting people to use your site and observing them as they did so. You would ask them to perform a variety of tasks and request they voice their thoughts on their user experience out loud as they do so.

What’s the goal?

In taking the necessary steps to anticipate the current knowledge of your users, you can create a website so seamless that it collapses the knowledge gap.

This means that when a potential customer uses your website, they either know everything they need to in order to navigate it successfully, or they are provided with prompts that help them learn how to navigate the website in a way that is so easy it’s almost imperceptible.

So, all things considered, maybe it’s time to take a step back from your website and consider how your prospective customers experience it. After all, in our digital age, our web presence is often our most customer facing one, making it our most important.

The importance of visuals for relaying information is paramount. Studies suggest that the human brain processes images 60,000 times faster than text, and 90 percent of information transmitted to the brain is visual.

Visuals are key to attracting attention and allowing information to be quickly digested, especially in fleeting adverts on social media platforms or for retaining a reader’s interest on a webpage. Even on the roads, many branded cars turn to commercial vehicle graphics, using key tools such as a recognisable colour schemes and eye-catching visuals, to allow passers-by to quickly absorb information of a brand, even when only viewed for a few seconds.

More specifically, this article will focus on the importance of infographics, as a successful way to draw in readers and easily relay information or statistics.

Infographics can be visually appealing charts, images and minimal text, to help make boring or complex information easy to understand. They tend to introduce a new topic to a reader or focus in on a specific aspect of a topic.

Why Should I Use Infographics On My Website?

1. Grabs The Reader’s Attention

With readers’ attention spans decreasing, websites need to look eye catching and appealing, to retain a reader’s interest. A bright and colourful infographic, with added imagery and cartoons, engages a reader’s interest rather than a sea of text.

2. Makes Information More Understandable

Infographics can highlight the key points of a subject matter. Cartoons can help readers make sense of information, by viewing it in a story format or relating to an emotive aspect of a story. Graphs can easily showcase the scale of statistics and allow reader’s to quickly make comparisons between data or observe how something has changed over time.

3. Demonstrates a Company’s Proficient Knowledge

Infographics provide a level of legitimacy to a company and showcase their knowledge over key subjects. Being able to dissect information and transform it into a visual, shows that a company really understands their subject matter, rather than copying and pasting text from elsewhere.

4. Makes Brands and Their Content More Shareable

Eye-catching images with key text can be redistributed on a brand’s social media channels, or be reshared by others, to increase the number of engagements with the information. This allows for the potential for brands or key subject matters to go viral.

5. Creates a Stronger Brand Presence

Featuring a similar feed of infographics on your website, with the same stylistic options, cartoons and colour schemes, provides a sense to the reader of what your brand is about and transforms their first impressions. Key colours and stylistic options can be linked to a brand and increase brand recognition and legitimacy.

Show Me An Example!

Artist Ivan Cash, has created an excellent infographic, to showcase the importance of infographics themselves!

Here, we can observe graphs, colour, text and images, working to showcase the key aspects of infographics from common fonts to base colours used.

What better infographic to learn from!

Summary

In an increasingly visual world, with the proliferation of social media and a decrease in attention spans, it is vital to invest in infographics when showcasing information. Images can capture the reader’s attention and minimal, but punchy text, allows readers to quickly absorb key information.

Navigation is so important with web design because it allows the user to know how to use your website. Good navigation would allow the user to instantly see where they need to go to access information. For example, if you were looking for a way to get in touch with a company through their website, there should be very little/no hunting around in order to get that information.

Three clicks

Good navigation can be measured through clicks. Within three clicks, a user should be able to land on any page and find what they need. A great example of this is Abbey Masterbatch as all of the links are displayed in the navigation and you can easily click through the pages to find the relevant information.

Website navigation should be high up on the list of priorities when designing a website. If visitors can’t find your web form, then your site is useless and users will leave. Breadcrumbs, navigation elements and other ways to explore your site should be at the forefront of your mind when designing a website.

Headers

Most websites feature a header as a form of navigation, such as Jesmond Dene House. These are effective because you can clearly see the pages and call-to-actions (CTA’s) as soon as you get onto the page, meaning other pages and links are only a click away. Make sure your logo links back to the homepage as this is a convention that is best followed as it is so widely implemented.

Headers are usually contrasting to the rest of the design on-screen so that the eye is instantly drawn to them.

Hamburger Menus

Headers may also feature a hamburger menu as well as the links / CTA’s or maybe in place of this. Background Sounds is a great example of a hamburger menu that also takes elements from the logo. More links can be found through this at the expense of an extra click.

Hamburger menus are a great navigational device because they are subtle and don’t take up too much room. They can also be used to reflect the branding and can be nicely designed to fit in with the rest of the website. It was originally implemented for easier navigation on mobile devices but is also now used a lot on desktop too.

Footers

Footers are also great navigational tools as they feature all of the links within a website. They can also include popular resources, relevant links and social media content and are great for user experience. Fat footers are really good for this because they can contain a lot of information and all website links.

Sticky navigation

Sticky or fixed navigation is a menu that locked in place as you navigate throughout the page. This means that you don’t have to scroll back up to the top to get to another page on the website. ING do this quite well as the navigation menu comes down the page as you scroll.

Final thoughts

Good navigation is essential to UX because users want to know where they are, where they have been and where they are going easily and without clicking around too much.

Visual hierarchy describes the order in which the user processes the information throughout a website/ design. It is very important to use visual hierarchy in web design because it is the main strategy of communicating with the user about the purpose and importance of the design. During UX design, you should be asking yourself these questions:

• What is the purpose of this? (Usefulness)
• How would I use it? (Usability)
• Why should I care about using it? (Desirability)

This way, you will be designing with the user in mind and create something that is easily comprehensible as well as appealing.

How to use hierarchy

There is no one way to build a concrete hierarchy in design, however, understanding what you are designing and who for is crucial.

For example, if you are designing something with a lot of text, you should try and section this with headings, bullet points and imagery. This will break up the layout and make the page easier to read as well as nicer to use.

The ‘Z’ pattern

On a homepage layout, the user will most likely read the page in a ‘Z’ formation, going from the top left to right, and then down to the bottom left of the screen, then across to the right. An example of this is the Zero Banking website.

The Z pattern is applicable to a lot of web interfaces as it addresses hierarchy, branding and calls-to-actions. If we can predict where the user’s eye is going, we can place elements in certain positions, to navigate the user to the most relevant points.

Size and scale

Size and scale are obvious tools for hierarchy but not always effective. The most important elements should be standing out the most but this can also be counteractive if used in excess as the design becomes overwhelming or too much effort to understand.

For example, if the design isn’t balanced or has too many elements of different sizes, the user’s eye won’t be directed to the relevant points. This is important for calls-to-action(CTA’s) because if your buttons are too small or unbalanced, they are more likely to be ignored.

The user should never be overpowered by a large focal point, nor compromise usability with content that is too small. Simply Chocolate is a good example of size and scale being used as a hierarchy tool as the user’s attention is drawn the product and the information is scaled according to importance around this.

Colour

Colour is another great tool for building a hierarchy in web design because you can highlight information or imagery with it. Human brains are attracted to contrasting colours, so we will look for the colours that stand out. When designing, colour can be used to pair elements, for example, CTA’s could all be one contrasting colour so the brain sees the relevance between them and their purpose.

Connect Insolvency is a good example of colour hierarchy because the colours not only reinforces the brand but draws the users attention to CTA’s and important elements.

Layout

Layout is one of the easiest way to direct the user’s eye and control your website’s hierarchy. Humans like order and structure, especially when looking for information. Organising your website into columns and rows can be very useful for creating clear and concise design. However, this does not mean your designs can’t be fluid with interesting interface elements.

As long as there is a balance and layout in place, hierarchy should be still understood and clear. Using too many visual elements and not enough structure/layout will flatten your hierarchy and there will be nothing standing out to the user. Calexo achieves hierarchy through layout very well by creating a very visual and fluid design that also has a lot of layout and structure behind it, meaning the information doesn’t get lost.

Spacing

Spacing is incredibly useful for not overwhelming site visitors. There may be an urge when designing to fit a lot of information into one space which will create confusion and therefore distrust for the user.

Allowing white space throughout your design can really help when separating elements and sections within your designs. Through spacing, you can create order and logic which will help create a clear hierarchy for the user.

Wealthsimple are a good example of using spacing as a tool for hierarchy in their website Balance is created through the use of white space, creating a concise and fresh design with great visual hierarchy.

Fonts

Fonts can be used to differentiate information. For example, headings and body text will likely be different fonts / weights/ sizes to highlight the purpose of the information. Headings are often a lot bigger than body text as well as often having heavier weights or being a different font altogether.

This draws the users eye and captions the body text, so the user knows what information they are reading and the purpose of that information. It also means that the main points of the text can be summarised without having to read the body text, which is great for users as they will probably only read text that is relevant to them.

Hotel Capolagala uses a serif font for the headings and a sans-serif font for the body text to create visual hierarchy through fonts. The fonts also balance each other whilst reflecting the brand.

Using these points when designing your website will help you build a visual hierarchy and increase usefulness, usability, and desirability.