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.
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.
- 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.
- 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.
- 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.
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:
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:
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.
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:
- 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.
- 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).
- 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.
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:
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:
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
(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.
