Web design and SEO trends, tips, techniques and best practices.
Appealing to the emotions of your website users is nothing new and certainly something that marketers and branding experts will have plenty of experience and specialist knowledge of. But because the online world is becoming so saturated with content, and because first impressions count, making people feel instantly at home on your site has never been more important.
With SEO copywriters working hard on telling that all-important brand story and stunning images that inspire and uplift your visitors, you might think you’ve got everything covered. But if you haven’t looked at your use of colours in a while, you might be missing a trick.
The simple fact is that colour is the first thing that visitors assimilate when they arrive on your site. It comes before images, typefaces, body copy or other online content, and without people even realising it, can change the way they think and act. Humans are programmed to equate colours to emotions, so whether you aim to soothe, energise, excite or promote trust, it’s essential to choose your colours wisely.
Which colours should you use?
Your choice and combination of colours will of course depend upon your website design, your corporate branding identity and especially your audience. What kind of impression do you want to give? A company looking to portray a feeling of security, intelligence and dependability, would very likely choose different colours to one wanting to show passion, power and the excitement of living life on the edge.
Basic colour meanings include:
Passionate love, violence, danger, anger, strength, youth, fire, blood, magic, religion, heroism, stop, good luck (in Asia). Red is also worn by brides in India and Nepal and in Japan, a red kimono symbolises happiness and good luck, and red is such a popular colour that it is included in 77% of all world flags. Being such a visible colour (second only to yellow for human sight), you don’t need to use much red to create a web design with impact. It is a colour often used to capture immediate attention and works well as an accent colour.
NOTE: 8% of the male population has red-green vision deficiency and cannot see red.
Although yellow is the colour of happiness, optimism, warmth, enlightenment, clarity, sunshine, and spring, it also has a few negative connotations too, in the form of cowardice, betrayal, madness and illness.
Yellow is the most visible colour to the human eye, so is great for use in areas that you want to draw attention to. It is also highly reflective so can irritate the eyes if used excessively.
Blue has been shown again and again to be most people’s favourite colour. It is found in nature in water and sky, and therefore often gives a sense of serenity, peace and infinity. It is also seen as the colour of intelligence, loyalty and authority but can – depending on the shade of blue used – be cold, sad or utilitarian.
Although blue is the most common colour in corporate identity design, there are plenty of contradictions when using the colour in a global sense. For example, in Korea, dark blue is the colour of mourning.
Design-wise, blue is used so often that it can be seen as rather clichéd, but teamed with other colours, can work well across many spectrums and industries.
Other concepts and emotions typically connected with certain colours include:
- Green – peace, nature, growth, healing, compassion, vitality, freshness, life, relaxation, eco-friendly, organic
- Orange – friendliness, creativity, warmth, cheerfulness, positivity, enthusiasm, adventure, fun, activity
- Purple – wealth, extravagance, sophistication, creativity, fantasy, dreams, spirituality, immaturity
- Pink – hopeful, non-threatening, feminine, romantic love, compassion, nurturing, innocence, inexperience, intuition, girlish
- Grey – balance, neutrality, reliability, intelligence, security, maturity, professional, contemporary, lonely, dull
Colours and culture
Of course, colour meanings can differ widely according to culture and so when choosing colours, it’s important to take these differences into account, particularly if you know that a large proportion of your international visitors are located in a particular part of the world or come from a certain culture.
Although there has been a narrowing of colour meanings between countries in recent years (due in large part to the internet), it would be wise to check that you haven’t made a cultural colour blunder before you finalise your website palette.
Colours and gender
Because colour psychology seems to play such a large part in people’s emotional states and subsequent purchasing decisions, it’s no surprise that there has been plenty of research into which colours are the ‘right’ ones to use.
Research by Kissmetrics, for example, looked at colour preferences according to gender. In a survey of 232 people from 22 countries around the world, they found that blue, purple and green were the top three favourite colours used in web design for women, compared to blue, green and black in web design for men. Least favourite colours for both men and women were orange and brown.
Perhaps the most important thing to do, once you’ve looked at your purpose, your audience and your website marketing strategy, and once you’ve gone through the colour theory side of things, is to carry out website split testing on a few colour variations of your website to a sample audience.
By asking tailored questions, you will soon gauge an understanding of how your users feel when they land on your site and navigate through. Can they give two or three words to describe how they feel? Are there any areas where the contrast between colours isn’t clear enough? Are some colours jarring to the eyes? Let them tell you and take on board their answers.
Hopefully this blog post will have started you thinking about the use of colour in emotional website design. As always, the central focus should be on your user. How do you want them to feel when they visit your site? By concentrating on what your visitors want and need, you will be able to tailor the colours of your site so that, without your audience even realising it, you can influence emotional response, brand loyalty and online behaviour.
Whether you’re a web developer or a website owner, being able to quickly and easily view, edit and debug your website is essential. One way to do this is with a tool built right into your browser - Chrome’s own Developer Tools. In this blog post, we will take an introductory look at what these tools do and how you can use them to monitor and improve your site.
If you haven’t made much use of Chrome’s Developer Tools yet, simply open up your website in Chrome, right-click on any element and choose "Inspect Element". You’ll find that a new window opens are the bottom of the page and that there are several tabs across the top: elements, network, sources, timeline, profiles, resources, audits and console. Let’s take a look at each of these in turn.
This is the area in which you can see your main HTML coding. Because it is syntax-highlighted and an indented hierarchically, it is easier to read than some sources and will show you exactly how each page looks to the browser itself. You can edit and save any changes directly to this window if you like (and also go back and undo any unwanted changes you just made!).
On the right-hand side within the elements window, you’ll notice the CSS style panel, which will show you the styling that’s been applied to any given element. Particularly useful here is the ability to quickly change font sizes, colours, margin and padding, and a whole array of other effects directly on the screen.
Useful for providing information on load speed time, the ‘network’ area itemises and shows on a timeline each element that has been loaded on the current page, including the size and type of file. A useful shortcut here is to click on any heading to order the information. For example, clicking on ‘time’ will allow you to see at a glance which elements have taken the longest to download.
The timeline shows the length of time it takes for each element on a particular page to load, script and render. You can start and stop recording, before analysing the results using the profile tab.
This area helps to optimise site performance, decreasing page load time and therefore scoring more brownie points from the main search engines. Here you can see which resources are required by the browser to load the page, the time it takes to receive these requests, the order in which they fire-off and how much bandwidth is being taken up.
Device emulation mode
Google Developer Tools is not only useful for desktop sites but for mobile and responsive websites too. By clicking the button between the magnifying glass and the ‘Elements’ tab, you will be able to open up “device emulation mode” to view the site as it would be seen on Apple, Samsung, Google, Nokia and Kindle devices. Simply select the device required from the dropdown list. You can also select various network options and view in portrait or landscape mode.
Google Developer Tools are a really useful, free method of giving an overview of your site’s performance. Since they’re already built-in to Chrome, the tools an be used to make quick, temporary changes to your site when necessary or play about with layout, colour or font choices without even leaving the browser. With the ability to analyse site performance, eliminate errors, view on multiple devices and make live edits, it’s a powerful toolbox and is easy for both developers and site owners to use. If you haven’t tried it, go ahead. Before you know it you’ll wonder how you managed without it.
If you sell items on your website, there are things you should always be aware of, whether you run a fully fledged global site offering hundreds of products or are just setting up a small boutique store. In this blog post, we look at the essential elements that lead to ecommerce website success.
Let’s start with the most obvious but most important point – if you want people to buy from you, your products need to be great. But whereas in a bricks and mortar store where people can quickly ascertain the quality of your merchandise, online it’s a little more difficult. It’s therefore essential that you show your products in their best light. Self-taken, amateur shots won’t do. Make sure you have professional photographs taken of all your products and display these images with options to view from different angles and zoom in.
Once your customers have ‘clicked into’ an item to find out more, include as much information as you can – sizes, colours, dimensions, materials, availability, price and so on, as well as customer reviews and ratings if you have them.
Your brand needs to portray an image of quality and reliability, helping potential customers to understand what your company is about and encourage them to revisit. You’re expecting users to part with their hard-earned cash.
Branding and design can play a big part in making the user put trust in your products over a competitor, so you need to ensure that the various elements of your site are consistent, from layout, colours and typography to image use and tone of voice. Above all, your brand and your message needs to shine through, so make sure this is clear on every page.
The more products you are selling, the more complex your navigation system might become and it’s easy to end up with too many layers, dropdowns and multiple paths. Organising your products into a catalogue where users can browse by category or search for items is important, and including thumbnail images will help visitors to quickly find what they’re looking for.
An ecommerce site will only be successful if your customers trust you and know that their money and personal details are safe. You can raise your credibility with customer reviews and ratings, especially those from external sources, and ensure that you include FAQs, details about shipping charges, return policies and so on. If you are seen to be taking your business seriously, your customers will too.
Accepting safe payments is essential and so you need to have the ability to cope with encrypted transactions. Using a service such as PayPal is an easy way to do this and is a globally recognised company that already has a level of trust built in.
Well before you open your online doors for business, you will need to make sure you have all your backend systems fully functioning and ready to go. Your customers could potentially come from all around the globe and so you’ll require a robust hosting provider to make the most of this.
Supply and distribution needs to be smooth and fast to meet consumer demand and everything must be fully tested and working before it goes live. It’s essential to deliver what you promise. You will also need to have systems in place to deal with anything that goes wrong. Customers have plenty of power in the form of social media and if your service isn’t up to standard, it only takes a tweet or Facebook update to do a lot of damage to your business.
Making sure that your policies and procedures cover what to do in the event of returns, complaints, social media comments and so on can help you to turn what might seem like a crisis into an opportunity.
New content, deals and promotions
People like to see that your site is evolving and that new items are appearing on the ‘shelves’ of your shop. So when you add new merchandise, make a song and a dance about it with additional page real estate, glossy new pictures or extra pages for ‘Hot New Products’ or ‘Fresh off the Press’.
Similarly, everyone loves a bargain. You might choose to feature particular items, offer seasonal discounts, give promotional codes for subscribers of your newsletter, offer free postage and packaging when customers spend over a certain amount or even link your offers to Twitter contests or Facebook competitions.
However you choose to promote items on your site, make sure that visitors know about the deals that are currently available – don’t hide your best offers away at the back of the shop!
The personal touch
Finally, just like in a regular bricks and mortar shop, what people really want is the personal touch. Online, this means everything from including contact details (not just an email addresses, but real people on the end of a phone too), customer help options, live web chats and information pages on your site telling your customers who you are, what you believe in and what your story is. Remember, people buy from people.
Running an ecommerce site can seem a little daunting, but with an eye to the details and a sense of product, people, placement and promotion, it can be not only a lucrative opportunity but also a very rewarding business. Good luck!
In December 2012, a story by journalist John Branch was posted on the front page of the NYTimes.com website, entitled ‘Snow Fall: The Avalanche at Tunnel Creek’. An elegant, long-form, multimedia piece that captivated millions of readers worldwide, it went on to win a Pulitzer prize in feature writing and led to a change in the way many web designers view content.
The story itself was special, but it was the presentation of the story that made ‘Snow Fall’ such a phenomenon. (About 3 million readers visited the article in its first week online, a great number of them people who didn’t usually read the New York Times.) Including everything from video, parallax scrolling, animation and slide shows, the article delivered the story in a way that was forward-looking, stylish and utterly compelling.
In this blog post, we’ll be taking a look at some of the elements of the Snow Fall effect and some pros and cons of using this is a design strategy on your website.
What does Snow Fall content include?
The story itself
No matter how many bells and whistles you add to make your Snow Fall page engaging, the story must always come first and foremost.
The Snow Fall effect is all about quality and refinement, so high-quality, often edge-to-edge photographic images are essential. Snow Fall content is usually best viewed on large screens, so it’s worth thinking about this when you’re planning out whether Snow Fall is the best strategy for your story.
These automatically play, are often full-screen and can provide anything from a graphical backdrop to a more informative learning point. The absence of sound can be more powerful than audio, and is often used to set the mood for a piece.
Animations, explanatory videos and slide shows
“Snow Fall” articles work well for non-fiction texts where these elements can really come into their own. Remember the story you’re trying to get across to the reader and choose the best tools with which to do this.
A jquery.inview scrolling mechanism
As the user scrolls down the page, actions are triggered – videos start to play, animations begin, backgrounds are faded in or out. This is an essential part of the Snow Fall effect and the thing that makes it so exciting to read. Just be careful that it’s not too distracting.
A curtain effect
This style allows layers to be pulled up or pushed down to cover or uncover areas of text, images or video. Used well, it can draw a reader into the story effectively, but remember to use it selectively where it really adds something to the story and isn’t just a gimmick.
With this technique, different layers (or images or videos) of your website move at different speeds as the user scrolls up and down the page.
Are there disadvantages to the Snow Fall effect?
As with any type of web design, there are pros and cons. Using the Snow Fall effect takes a lot of expertise and is therefore time-consuming and costly. And adding too many images, videos or animations can distract the reader away from the story and focus elsewhere.
But when well executed, the effect can be magical. This is because the main strength of the Snow Fall effect lies in its ability to connect emotionally to the reader. By engaging so many senses and flowing seamlessly from one element to the next, it draws readers in and dovetails with natural storytelling forms. If you’re looking for a way in which to showcase your long-form content whilst inspiring and delighting your readers, Snow Fall is it.
If you have made a decision to have a mobile app developed for your small business, you probably don’t plan on engineering it yourself. Instead, you will be turning to a professional software development service provider to get the job done.
But even if you are not taking care of the technical side of things directly, the functionality and ultimate success will be down to you.
Your software developer should be able to provide solutions and suggest ideas to enhance what you are trying to achieve, but nobody knows your business or your target audience better than you do.
So with this in mind, here is a quick introduction to a few of the most important rules to follow when it comes to putting your first small business mobile app into development:
1. Have A Clear goal
First and foremost, you cannot expect your mobile app to perform to it’s maximum potential without first establishing what it is you wanted to do. In some instances, small businesses create mobile apps simply to entertain and engage their customers.
In other cases, mobile apps exist exclusively for the purpose of maximising sales. A mobile app can provide a wide variety of functions and any number of things combined, but you need to know exactly what you expect to get out of it before even thinking about putting a plan into action.
2. Know Your app’s audience
You’ll also need a comprehensive understanding of your target audience, in order to ensure that the mobile app created is as effective as it can be. This means carrying out as much research and analysis as necessary to find out how your audience interact with their mobile devices and what types of device they show preference to. This isn’t an easy or a quick job but it is of the utmost importance.
3. Keep your development simple
Simplicity is important for two reasons – the first of which being that mobile devices do not always have a great deal of power to work with. The more complicated your app, the more memory and battery life are required to power the processes. This is especially significant with lower-end devices. In addition, the average consumer is all about speed and efficiency when it comes to their mobile devices. As such, whatever it is your app is created to do, it should do it as quickly and simply as possible without unnecessary fuss.
4. Developing for iOS and android platforms
You will need to decide exactly which devices and platforms your mobile app will target specifically as there are enormous differences from one to the next. For example, it’s all well and good creating an app that delivers an outstanding user experience for iOS users with large-screen iPads, but what about the tens of millions of consumers with Android devices? The simple fact of the matter is the more devices and platforms your application supports, the better.
5. Unique app elements
Assuming your business already operates to an extent online, you need to give your target audience members some kind of reason or motivation to use your mobile app. After all, if the app doesn’t do anything different to your standard website, chances are they won’t bother. You could do something different with the user experience, perhaps introduce an exclusive special offer or really anything else that brings something unique to the table. To put it another way, your mobile app has to exist for a reason, not just for the sake of it.
6. Extensive app testing
It is of critical importance not to release a mobile app before testing it extensively and ensuring that 100% of bugs and faults are ironed out. This is particularly important if this happens to be your first mobile app. First impressions need to be excellent, and bugs and errors can reflect badly on your business. This also ties in with point 3 above, as simpler development processes can keep testing time to a minimum.
7. Monitor your app interactions
Last but not least, a mobile app launch is much like a website in that it represents only the first step in an on-going process.
From the very first day, it is of crucial importance to carefully monitor and analyse everything in terms of audience interactions, conversions and user behaviour. By doing so, you will discover exactly where to make improvements and refinements to make sure that every bit of your mobile app is as effective as it can possibly be. Even if this requires the help of a conversion expert, it is a good investment and one that must be considered in your app’s on-going improvement.
Or if you prefer use one of our linkware images? Click here