Website design trends for small business

Like the phrase ‘beauty is in the eye of the beholder’, effective website design is judged by the users of the website and not the website owners. There are many factors that affect the usability of a website, and it is not just about form (how good it looks), but also function (how easy it is to use).

Websites that are not well designed tend to perform poorly and have sub-optimal Google Analytics metrics (e.g. high bounce rates, low time on site, low pages per visit and low conversions). So what makes good web design?

So much has been written about good website design that it’s almost impossible to distill it down to a few simple facts. If you Google “website trends for small business” you’ll get over 150 million results – so you can see what I mean!!

Below we explore the top website design trends that all small business owners should be aware of, that will make your website aesthetically pleasing, easy to use, engaging, and effective.

1.     Responsive Design

Responsive website design (RWD) is an approach to web design aimed at building sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones) with multiple screen sizes.

Responsive design is no longer just a trend – it is the standard for website design. A site designed with RWD adapts the layout to the viewing environment. For example, it should not be necessary to pinch or expand the Tabs or text to see them clearly on small smartphone screens. These items should be clearly legible and easily tapped, no matter what size device you are using.

Responsive web design is becoming more important as more and more users use their mobile device rather than a laptop or desktop computer – surveys have shown that over 60% of customers use their smartphone to go shopping. This trend is so prevalent that Google has begun to boost the results ratings of websites that are ‘responsive’ (ie. mobile-friendly), if the search was made from a mobile device. This has the effect of penalizing sites that are not mobile-friendly, thereby placing those websites further down the list of results.

It’s safe to say responsive design is here to stay, as it represents a relatively simple and cheap way for businesses to build a fully-functional, mobile-friendly website. But responsive web design does come with some issues if it’s not carried out properly, the most important being performance.

There’s no doubt that responsive design is highly useful and versatile, but it must also be lightning fast in order to deliver a great user experience.

1.      

2.     Content

Content needs to cater to the needs of customers that you want to attract; are they looking for information, where to purchase a product or service, some type of interaction, or to transact with your business? Each page of your website needs to cater for your website users in the most effective way possible.

1. Communication: People on the web tend to want information quickly, so it is important to communicate clearly, and make your information easy to read and digest. Some effective tactics to include in your web design include: organising information using headlines and sub headlines, using bullet points instead of long windy sentences, and cutting the waffle.
2. Colours: A well thought out colour palette goes a long way to enhance the user experience. Complementary colours create balance and harmony. Using contrasting colours for the text and background will make reading easier on the eye. Vibrant colours create emotion and impact (e.g. for buttons and Call-to-Actions). Lastly, white space is very effective at giving your website a modern and uncluttered look.
3. Images: A picture can speak a thousand words, and choosing the right images for your website can help with brand positioning and connecting with your target audience. Photos should be of high-quality and be engaging.

 

2.      

3.     Static headers and Long scrolls

Static headers: These remain on screen as the user scrolls down a website, providing continuous navigation and access to the main Tabs, and retaining your branding/logo in clear sight at all times. The navigation bar actually stays fixed at the top of your window.

Fixed headers are also interesting because they provide an exceptional user experience without needing to look far to navigate the website.

Long scrolls: Sometimes referred to as ‘single-page’ websites. Almost everyone is accustomed to long scrolls thanks to mobile devices. The technique works especially well for sites that want to lure users through storytelling, and you can still mimic a multi-page site by breaking the scroll into clear sections.

This approach to website navigation rejects the notion of separate pages for different bits of content, preferring to stack them vertically, and consequently avoiding the need for a page load or refresh to access content from a separate Tab.

It’s a really nice way of telling a story, showing off a product, or simply presenting all a company’s key information within a single page.

Have a look at this website as an excellent example of Static headers and Long scrolls:

http://melbournebarbershop.com/

3.      

4.     ‘Hero’ images

Since vision or sight is one of the strongest human senses, high definition ‘hero’ images on your Home page are one of the fastest ways to grab a user’s attention.

A ‘hero’ image is a large banner image, prominently placed on the Home page. The hero image is often the first visual a customer encounters on the website and its purpose is to present an overview of the site's most important content.

Thanks to advances in bandwidth and data compression, slow load times and poor performance will not be an issue.

Have a look at this website as an example:

http://www.fusiononhigh.com/

1.      

2.      

3.      

4.      

5.     Typography and fonts

There is a surge in typography-led design on the web at the moment.

For example, the sample website page above uses Saldina, a script font that combines brush lettering with traditional hand writing.  The resulting design has a lot of impact.

These designs, typically feature a prominent headline rendered in a web font, followed by careful grid-aligned areas of exploratory text that often feature minimal imagery and beautiful typographical treatments.

In general, Sans Serif fonts such as Arial and Verdana are easier to read online (Sans Serif fonts are contemporary looking fonts without decorative finishes). The ideal font size for reading easily online is 12 or 13px Arial, and 11 or 12px Verdana and stick to a maximum of 3 typefaces in a maximum of 3 point sizes to keep your design streamlined.

6.     Create Effortless, Predictable Navigation

When you create your website’s navigation, you should make it predictable and easy-to-use because people want to browse your website effortlessly.

How can you keep your navigation predictable? Place it where people expect to find it, which is at the top of the page or in the left sidebar. This keeps the line of sight consistent with the ‘F’ pattern which analysis has shown is how we digest information at a glance with our eyes.

Also, when you create the navigation, use the words people are accustomed to seeing. For example, if people want to reach you, they’ll look for “Contact” or “Contact Us.” If you use something clever like “Holla at me” you may lose potential customers.

5.      

6.      

7.     Promote your Phone and Email everywhere

If you want to convert search queries into sales, you must make it easy for customers to contact your business by placing your phone number and email address in your header, footer, or sidebar – wherever it is visible no matter where the customer is on your site.

Side note: Make sure all of your contact information is on the Contact page. It's on every page already, but visitors will still expect to see an address and phone number in the content area alongside the contact form.

8.     Include Calls-to-Action (CTA’s)

A Call-to-Action (abbreviated to CTA) is normally a clickable button that prompts your customers to take some action. It is quite literally, a "call" to take an "action."

The action you want people to take could be anything: download a document pdf, sign up for an event, receive a free offer, book an appointment, etc. but essentially you expect the customer to give you some information to achieve the required action – for example, their email address or billing information.

If you want to entice people to actually take an action from your content, the essential elements of a good CTA are:

1. Eye-catching design: For someone to click on your CTA, they have to first notice its existence. This is pretty much the one time you can veer off course from your branding guidelines: Your CTAs’ colours should contrast with your website design, and be large enough to be noticed.
2. Copy that makes people want to act: It's not enough to say "Submit" as your CTA's text -- you need a concise, jargon-free phrase that uses actionable verbs to catch people's attention. The golden rules are: start with a verb, state clearly what will happen when they click on a CTA and keep it short (for example “Sign up for Newsletter” or “Click to Buy Tickets).
3. Opens in a new window to collect required information: A CTA is most effective if people are taken to a dedicated landing page after clicking it, rather than a random page on your website where the required information to be entered is mixed with other information that isn’t specific to the CTA. For example, a CTA is still a CTA if it points to a “Contact us” page, but it won’t be as effective driving leads and customers as a specific, focused landing page because if you want to prompt your customer to take a specific action, then your “Contact us” page includes other information about your business (eg. Hours of operation, Phone Number, Map etc) which will distract them from the action you want them to perform.

 9.     Supersized Buttons

When I say supersized, I don’t mean 'too big', simply larger than the traditional button you might find on a web page. This is a really useful way of drawing attention to a particular Call-to-Action.

Whether it’s highlighting a product promotion, encouraging your customer to shell out cash, or requesting their email address, the supersized button can be very effective marketing.

1.  

2.  

3.  

4.  

5.  

6.  

7.  

8.  

9.  

10.  Flat Design

With responsive design pretty much taken over the Web, expect flat design to become a dominant design aesthetic in the near future.

Flat design is a style of design emphasizing minimum use of stylistic elements that give the illusion of three dimensions (such as excessive use of drop shadows, gradients or textures) and is focused on a minimalist use of simple elements, typography and flat colours.

There is a good example of flat design above. Note the use of pastel colours, supersized buttons in the lower half, clean layout and simple focus.

A prime example is also Google’s logo. The company changed its logo to make it more flat (losing the bevels) and changed the font. It found that a cleaner sans-serif font for its logo helped cut the size of the logo file used on sites by more than half (to get websites to load faster and snappier). Google also found that it was easier to read on smaller devices.

Why is simple attractive? That’s because it simply works. Simplicity has always been associated with convenience in interactions between a customer and a website. Flatness has been around for quite a while, but the design trend became popular once Apple introduced iOS 7, which retreated from its earlier stand against flat design.

If you want to read more about Apple flat design with iOS7, see the following article:

https://www.bignerdranch.com/blog/apple-design-goes-flat-with-ios-7/

In conclusion

There’s plenty of useful information above to help you design an awesome website.

I currently provide small businesses with a rebate of 20% off the cost of website development. There is a national website development company located right here in Melbourne that will come out and discuss your requirements, all free of charge. They will also host your website and provide you with a ‘Content Management System’ for easy updates and free 24/7 support by phone and email.

They develop websites for as little as $495 and I can get you 20% off their prices. Even the most basic website can have integrated links to your Facebook, Instagram and Google+ accounts. To get a 20% rebate off these prices (excluding hosting), all you need to do is contact me.


For further information, contact me below:

David Haigh

(e)   da_haigh@bigpond.net.au
(w)  http://google.com/+DavidHaighAssociatesAshburton
(t) +61 (0)3 9885 7688
(m) +61 (0)412 550 020

About me

I have recently retired after 30 years consulting for corporate clients such as NAB, AXA, IOOF and AustralianSuper. My experience covers website design, social media and business strategies. I am now focussed on providing consulting services to small business.

My services are provided on a voluntary basis, free of charge, and with no obligation.