How To Design A Website That Functions

Website Structural Layout

At their core, websites consist of two simple elements – containers and content. Containers provide the structure to your site and, used correctly, also create a visual appeal that will keep your visitors scrolling.

Here are some tips on using the layout and structure of your containers for the best effect.

1. Maximise Visual Hierarchy

Visual hierarchy plays an essential role in any website and can be the difference between readers “bouncing” off your page or sticking around to learn more.
Essentially, the visual hierarchy refers to aspects of a website that your eye is drawn to and uses this to guide visitors throughout the page, prioritising key messages and important elements.

Where text and images are positioned on a page, their relative size, the use of colour and contrast, as well as graphics and video, all contribute to the look and feel of your website and should be structured with a visual hierarchy in mind.

2. Use A Descriptive Headlines And Headings

Know what you’re offering, and make sure your visitors do too. This is the key message we give to clients who ask for support with their website. The headline on your landing page is critical. Not only because it’s one of the first places search engines look when analysing your website for relevance, but because it’s a signpost for your visitors.

How does someone know they’re in the right place when they land on your website? Does your heading make it clear that you offer the service, product, or information they’re looking for? If not, it’s time to rethink it.

Some studies have shown that 80% of the time visitors spend on a website is in the area above the “fold”, the visible area when someone first lands on your site. Your headline falls within this area and should therefore be both incredibly relevant and give value. It’s also a vital area for including your target keyphrase for SEO, so make it count.

3. Encourage Your Visitors To Scroll Down Your Pages

The initial top section of a page may be crucial for signposting visitors, but it’s not where the engagement happens.

Once someone has arrived at your website and is confident they’ve found what they’re looking for, it’s time to give them direction. A surprising number of websites are free of any CTA (call to action), essentially encouraging visitors to window-shop without ever encouraging them in.

Utilising CTAs on your website is an integral part of marketing. It guides your visitors toward the outcome you’re hoping to achieve, whether that’s filling in a contact form, calling for a quote or making a purchase.

Consider the layout of your website and use CTAs sparingly but thoughtfully throughout.

4. Don’t Be Scared Of Space

Compare websites from the 1980s to websites today, and you’ll notice one immediate difference: simplicity. In a time of information overload, we want our websites to be free of visual clutter so we can find what we’re looking for at a glance.

Based on a study published by Google in 2012, people prefer websites with plenty of whitespace and low visual complexity. So, choose one or two elements to be the focus of each part of your page to prevent readers from getting overwhelmed with “noise”.

5. Use Standard Layouts

Most businesses want their website to stand out, but it’s essential to choose the right way to differentiate yourself from your competitors. The layout of your site is NOT the place to do it.

The same study by Google, which gave us insight into visitor preferences, also found that people like a website that follows a standard layout, allowing them to navigate confidently.

When clients come to my office in Sheffield and ask for advice on their website, we always recommend starting with a core layout which includes:

• Logo in the top left or centre
• Horizontal navigation along the top
• Search bar at the top
• Social icons at the bottom
• Mobile responsive design

There’s no reason to reinvent the wheel here. Stick with the tried and tested website layout and allow graphics, design and content to set you apart.

6. Avoid Tabs, Accordions & Expanding Boxes

A common trap that people fall into in the quest to keep their website simple is to put all their additional information into tabs and accordions. Yes, it keeps it out of the way, but it actually decreases the likelihood of anyone finding it.

The vast majority of people who visit a website are scanning and scrolling. Scan and scroll. Scan and scroll. If you’re relying on your visitors to click to access the information you want them to see, you’re missing a trick.

Put it this way; if putting additional information in tabs worked, Amazon would be all over it. Instead, they give you everything you need to make your decision on one page. We side with Bezos on this one.

We talked about structure, now let’s dive into style. We briefly touched on how visual hierarchy is an essential consideration in website design, but the images used are equally important to convey the right message.

7. Have People In Your Pictures

Did you know that human psychology can give us helpful insight when designing a website?

Faces help make websites more personal, which plays a role in creating a sense of confidence and trust. While we wouldn’t recommend having your grinning face as the first thing people see when they hit your landing page, having at least a few images of people on your site is a must.

Add that personal touch and show your visitors that you’re more than just a website.

8. Avoid Stock Photos Of People

It’s a controversial tip, but we stand by it. There’s no place for stock photos on your website.

Stock photos of people don’t look genuine and therefore don’t help to build trust. Even if you manage to find that holy grail of stock images that do look genuine, you’ll find there are thousands of other websites using them, and your visitors WILL recognise them.

Authenticity is more important than aesthetics when it comes to the human touch. Invest in a commercial photographer for the day, and you’ll soon have a bank of images you can use with confidence.

9. Faces Can We Used As Visual Clues

If you want your visitors to pay attention to something on your page, guide them there.

We’re getting back to psychology here but stay with me. Research has proven the “we look where they look” phenomenon; that your attention can be directed with visual cues.

Carefully position your image’s line of sight toward a CTA or other key feature you want to draw attention to.

10. Use Colour And Contrast To Draw Attention

In the 1930s, a rather clever chap named Hedwig von Restorff found that memory could be influenced by colour. When asked to remember a list of items, test subjects were better able to recall the items that were a different colour. This is due to our inbuilt sensitivity to visual differences.

Fast forward 90 years, and we now know that colour doesn’t just help us remember more; it leads to more clicks too! Links given in bold colours are clicked a whopping 60% more than if they are plain, so choose a bright colour for your buttons, links and rollovers and see the difference for yourself.

You’ve created the layout for your website and chosen the right visuals to guide your visitors. Next, it’s time to think about how they’ll navigate your site through buttons, menus and links.

11. Be Descriptive

If you’ve followed the advice listed in #6 of this list, your navigation bar will be along the top of your screen, making it immediately accessible to anyone landing on your website.

Your menu is often one of the first things that visitors will scan, and so, like your heading, the menu is a great place to get your message across. Instead of opting for generic labels, such as “Products”, “Services”, etc, get specific to help your visitors and search engines better understand what you offer.
Don’t overcomplicate it, but use these visually prominent areas of your website to push you ahead of your competition.

12. Home Links Should Be On The Left But Menu Order Isn’t That Important

It’s not often I get to tell our clients that there’s something on the website that doesn’t require much thought, but this is one of those rarities. While the words you use on your menu matter, the order they appear in doesn’t.

If you’re using a “Home” link, we’d recommend keeping it on the far left, as this is where visitors will expect to find it, but other than that, the order doesn’t come into it.

13. Try Not To Link Services To Blog Posts

Picture a visitor on your service pages the same as if they were speaking to one of your staff members. The visitor is finding out what you can offer them, and hopefully, that skilful salesperson/service page will convert the interest into a sale. What you do not want at this stage is to direct your potential lead off to browse your magazine rack.

Your blog is a valuable resource for gaining credibility, authority and helping with SEO, but its role is not to close sales; it’s to inform, educate and entertain.

If visitors are on your service page, keep them moving forward toward a conversion, not sideways toward a distraction.

14. Avoid Social Media Icons In Your Website Header

After everything we’ve covered about visual hierarchy, navigation and moving visitors toward an end result, this next tip will come as no surprise.

Links to those delightfully addictive social media platforms have no place in the prime real estate of your website. After all, we all know how easy it is to get lost in a social media spiral and forget what brought us there in the first place.

Instead, keep links to your social accounts at the footer of your website, so they can be found if someone is looking, but you’re not enticing anyone away from your site.

Words are so much more than just a tool we use to communicate, especially in the digital world. The words you use online dictate how visitors see you, but also how search engines see you. SEO is a complex and ever-changing topic, but these tips on writing headers, sub-headers and body text can help.

15. Use Meaningful Sub-Headings

Relevance.

The internet is full of vague headings and informative body text, but SEO is helping to change all that. When you’re writing your subheadings, make sure they’re descriptive and helpful. If it’s neither, it probably doesn’t need to be there.
Not only does this make it easier for people and algorithms to scan your website, but it also makes your website more accessible, particularly for visitors with visual impairments.

Save those clickbait headings for marketing campaigns and keep your website on point.

16. Avoid Long Paragraphs

Studies have shown that people skim or even completely skip over long paragraphs when they’re online. Rightly or wrongly, we’re used to small chunks of easily digestible content that don’t slow down our flow.

Keep your paragraphs to three or four sentences and your sentences concise.

“When a sentence is made stronger, it usually becomes shorter. Thus, brevity is a by-product of vigor.”

William Strunk, The Elements of Style

17. Don’t Use Jargon

Responsive design. Semantic markup. UX. UI. CSS.

As a web designer, these terms are vital to us, but there’s no need for our clients to learn them.

Just like large paragraphs, long words and busy sentences make readers skim over your content and miss key messages. Keep your writing tailored to your audience, and don’t litter your website with jargon.

18. Answer Questions

The “they ask you answer” method of writing website content is one of the best ways to build trust and convert leads.

Visitors arrive at your site with questions. Do they leave with answers? If not, they’re going to find a similar business that does.

Interview your customers, analyse their answers and then put what you find out into practice. Here are a few great questions to get you going:

• What brought you to our site?
• What have you already tried, and what didn’t you like about it?
• What almost kept you from buying from us?
• What made you confident enough to give us a try?

The best way of finding out what your customers want? Ask them.

Not Just A Pretty Site

Ultimately, everyone wants a beautiful, functional website. But a website has to do more than look good. For customers, it has to provide the information they’re looking for. For business owners, it has to deliver results.

As a team of web designers, we make beautiful websites all day, every day. But your customers aren’t just here for the container; they’re here for the content.

By understanding your business, customers, and purpose, you can be much more than just a pretty face in your industry.