10 of the Best Business Website Design Tips

Your business website needs to fit in with your business image, brand and ethos. If you follow these top website design tips, you will be able to achieve just that.

A lot of posts on this topic don’t split up tips. We are going to split our top tips into two sections. Web design and web development. This will make each tip super clear.

Doing this will not only list out top design-related tips for your business website but also show you a snippet of our web design process. This is because we will see both the designer’s side of things as well as the developer’s side.

The pros of having this structure will mean you’ll see what it takes to make a well-designed business website that’s also well “designed” development-wise.

We say this because, during development, the structure of your site files needs to be set up correctly and follow the hierarchy that the designer designed. But, all will become clear soon enough.

Let’s jump in.

Resources

The Complete Website Checklist

The Complete Website Checklist

download now download now

Design

Requirements

There are different types of websites for businesses. You need the correct one.

These are:

• Brochure Websites
• Ecommerce Websites
• Landing Page Websites
• Sign Up Websites
• Resource Websites
• Contact Websites

Brochure websites work to show your customers exactly what your business is about. Brochure websites are a simple website solution that pushes your business online, without any added complication.

Ecommerce websites allow your customers to buy from your business whenever it’s convenient. It’s important your Ecommerce website sells without creating friction or complications for your visitors.

Landing page websites allows you to grab your customers/potential customers attention and let them know what your new business or new product/service is about. These are single page websites that have brochure-style messaging.

Sign up websites allow your customers/potential customers to sign up to a service that your business provides. This could be as simple as a weekly newsletter

Resource Websites allow your customers to find information about something they need, not necessarily what your business is about. This could be a road safety organisation providing important information to its audience.

Contact Websites allow your customers to immediately get in touch with you in a fast and efficient way, whether it be direct by phone, email, contact form or instant messaging service. The primary focus should be on these. These are great if your primary service is providing support (could be IT Support) where you want to be able to solve people’s problems as fast and efficiently as possible.

These different types of websites have different design and functionality requirements.

Let’s create a couple of examples to put this into perspective.

Ecommerce Site

• Sales driven
  • Featured product hero with clear and concise call to actions
  • Option to skip single product page (add to cart then view cart) – missing out additional information

Brochure Website

• Information driven
  • Hero featuring the key product with a clear and concise call to action
  • Link to the single product page explaining more about a specific product

As you can see the hero sections may sound similar, but the key difference is the ability to skip out on a key component. The single page.

This is fine for an ecommerce site, but you wouldn’t want users to easily miss out on the single product page for a brochure website.

This is because, on an ecommerce site, you want to reduce the steps it takes for a customer to purchase something (each step is a chance for the customer to decide they don’t want to purchase the product anymore).

With a brochure website, you are not worried about making the sale immediately, you want to provide the user with vital information about your product/service.

This is where the design of a website differs, with an ecommerce site, the design will be influenced by the option to skip out on a page. Whereas with a brochure website the design will be influenced by the need to present more information about a product/service.

This means key information and call to actions are displayed differently and in different locations.

With the ecommerce site, you will just want to provide enough information on the featured product listing for the user to be able to make the decision and purchase it straight away or entice the user to go to the single product page if they don’t know about the product or haven’t made their mind up.

With the brochure website, you will want to entice the user to visit the single page where more information about the product/service can be found (just like viewing the contents page of a physical brochure then turning to the specific page you want to see more information).

Once you know the type of website you need you can gear the design towards that specific type (Ecommerce for example) – it’s all well and good having a good design, but it needs to work with the type of website.

You as a business need to figure out which one you need. If you need help starting, check out our web design services.

Trends

The next step after determining the type of website you need is to look at trends.

It’s important to get the first step out of the way first, as you’ll be looking at web design trends for specific types of websites such as brochure or ecommerce sites.

If we take the brochure website example and use a photographer as an example. They’ll want to show off their imagery on the site and have minimal visual clutter.

You’ll want to find good photography website trends as these will have a unique design direction over an ecommerce site (as an example).

When looking at web design trends it’s good to think outside the box and look into the future.

When you’re looking to create new design work designers tend to look for inspiration.

This means popular and trending design work will more than likely be added to a Pinterest board.

From here new ideas are grown for a new design that are inspired by the reviewed work. This is what makes current web design work fit into the current trend. You want to try to break away from this.

To do this you should look into the past, current and future of design to get a good perspective of what’s next.

This can be as simple as Googling past current and future web design trends. It doesn’t have to be complicated at all.

The inspiration that looks and feels the same (try to break out of the current trend).

Think about the future instead of the now. You want to do this as having an “ahead of its time” design will get you noticed. It’s always nice to see something different and unexpected.

Also, when your chosen web design direction is no longer a “future” design trend, it will be the current trend. This means you won’t have to undergo any rebrands, unlike the other businesses out there who decided to stick with the trend (now an outdated trend).

This also means your chosen web design direction will stay current for much longer.

One top tip when looking into trends is to research your competitors. You want to do this so you can see what they are doing, from here you’ll see what trends they are following (what direction of styling they have applied to their site) and you can try to get ahead of them from there.

As you are carrying out research into your competitors, you want to research who you want to be like and develop your own identity from there.

One thing you will come across is web designs that you simply do not like. The answer is simple here, stay away from them and note down the bad design choices they have so you don’t make the same mistakes.

Research who you want to be like – need to have your own identity.

Once you’ve done your research on trends and competitors you can start to piece together how you want to look.

Pick out your favourite elements from both steps and try to come up with your unique direction.

Here are some top tips that’ll help you with your branding design. This will point you in the right direction when coming up with your own unique identity.

Media

Media on your website can literally make your break your website. It has a dramatic effect on how your website looks even if you have a super cool design.

Just think stock photos. Yuck.

You probably have a good image in your head now just seeing the words “stock photos”.

Stock photos do not work, they are someone else’s vision (created for general purpose use). They are not designed to work for a very specific need.

What we mean by this is that there are general categories ranging from construction (outdoor work) to dentistry (indoor work).

But they won’t be specifically catered for your needs, this means they won’t give off the right image for your brand. They’ll simply just represent what one sees.

You need to put good thought into the photography of your site and you should have professional photos taken.

With stock photos out of the way, you need to consider what type of media you actually need on your website. This will come down to the type of website you need, what your brand direction is and what it is you actually do.

The types of media include photos, videos, illustrations and graphics.

Let’s look at a photography website for a nice example of how choosing the correct media for your site can make such a big impact.

This website is designed in a way to show off Centre Stage’s photos, this means a simple clean design is used throughout. It simply prioritises their work and targets relevant customers.

Now, flip this around. Imagine that photos were not used on this website design, but mostly text along with a few graphics. There wouldn’t be much to look at but black text and white background.

What we are saying here, it is absolutely vital that you have the design nailed down to a T for your business needs.

We often hear people say “I picked a good looking website, but no matter what I do to it I can’t get it to look good.”. This comes down to themes.

You want to stay away from these and stick to professional web design services.

One last point is it’s pointless choosing media just for the looks, this will lead you down to the negative points made above. If you do see something you like, it’s best to use it as inspiration and take it from there.

Content

Just like media, content is exceptionally important to the success of your website.

Looking at this from a web design perspective, content influences the design of your website.

This is because the different elements on your website will have a specific layout, the content (text) needs to flow perfectly with the visual elements.

The best tip here to make sure your website design and content work together is to have content ready before the design process. This means you can design your website around the content (the stuff that really matters) instead of trying to force the content into the design.

The disadvantage of having no content ready before the design process means your designer and developer will work with filler text when designing and developing your site. This filler content will be different from your content, the end result sometimes means a design and or a development rework.

With that said content on your website isn’t just there to describe or sell what you have. It’s used to drive traffic to your website, link back to other pages and to be shared on social media platforms.

You want to link back to other pages to keep users interested and get them to the pages that you want them to visit, these will generally be the pages where they can take an action (your services pages).

For example:
“Looking to get your web design right?”, “your website is always working for you. We work with businesses from around the world to help them get their web design right.”, start your project.

Content drives traffic to your site because Google will list your page on its list of results when a user makes a search if it is relevant to the search term. So, the quality of content needs to be spot on. It needs to be relevant to the user. If it’s not, users will leave and Google will pick this up.

It also drives traffic through social media. This is because all content along with links to your website can be shared on these platforms.

These are super effective ways of driving traffic to your site.

When users visit your website through search engine results (pages being shown to them based on their search term) is known as organic SEO.

If you are struggling with getting content at an early stage you can always look at old work and look at the type of content you have there, if you are a new business the best thing to do is look at examples of other sites (could be your competition).

If you are really stuck, check out our digital marketing services.

Structure

It is absolutely critical that you get the structure of your website just right. To get it right it requires a well thought out design and development process, you need to make sure to have the following

Design Process

• An evaluation of the goals of the website
• Discuss the user journey
• Highlight key call to actions
• Create a site map/hierarchy
• Create website wireframes
• Create a hi-res visual of the design

Development Process

• Website handover
• Website hierarchy
• Semantic HTML
• Meta Tags
• SEO (development)
• The most optimal site structure
• Navigation
• Contextual internal linking
• Landing pages

This is quite an extensive list and talking about each point would go into a blog post itself. So, here’s a blog post on how to get your website structure just right that covers all the above points.

To summarise getting your website structure just right means improved SEO, decreased bounce rates, increased conversions and improved user experience.

One thing we can touch on though are UX and UI. UX is the experience your website provides users and UI is how people interact with your site.

To make sure the optimal UX and UI are applied at all times your website needs to be fully responsive so that it works on all devices and screen sizes.

This may seem obvious, but we (even you) always seem to see sites that simply do not work or look really bad on mobile devices.

Having a website that does not work on all devices has a dramatic effect on the UX and UI so you want to be thinking about responsive design from the get-go.

Development

Web design tips don’t just apply to the design process, they apply to the development side of your project.

What we mean by this is that when your website is being developed the developer must know how the design is intended to work (which links go where, how the blog listing is meant to work). If they don’t understand this fully it can cause the design of the website to fail.

There are other areas to this, so let’s dive in.

Handover

This is a crucial step in the web design process. The designer walks through the website design with the developer.

Each page design has different elements that make up the webpage.

A general page would consist of the following:

• Header
• Hero
• Services
• Portfolio
• Testimonials
• Any call to actions
• Footer

The developer will understand what each part is, but from looking at the design they do not know what elements are animated, if any elements follow the user as they scroll the page, what sections are meant to be hidden and be replaced with another section if no content is available for that section.

The list can go on and on.

The handover meeting lets the designer walk through their design with the developer and it gives the developer a chance to ask any questions.

They can also discuss what elements may not fully work as intended in code and what may need to be reworded.

The handover meeting is also where the designer can hand over all of the web-ready assets. These assets include:

• Images
• Graphics
• Illustrations
• Video
• Content (text/filler text)
• Fonts
• Colours
• Web design templates from Illustrator or Experience Design

Without these, the developer has nothing to work with.

Also, one thing that can impact development time is time spent modifying the code if all the assets haven’t been handed over.

For example, if the designer has not handed over the correct sized images, the developer may have to constrain the size of the image to make it the same size as in the design.

There are different ways to resize images in code, but this is a topic in itself.

What we are saying is that all the assets must be properly prepared and none must not be forgotten about.

Project front end setup (template file naming, structure – optimise)

Once the handover meeting is complete the very first step is preparing these assets in code.

This is a vital step into starting the web build (exciting times). Fonts must be properly loaded, the correct colours must be added and any images and text must be added and ready to use.

This will save the developer from having to look for and add images throughout the web build, it also means the fonts and colours are ready to be used as they build out the website.

The next step is making sure the correct structure (HTML) has been set up. This makes sure the elements of the webpage sit, behave and load efficiently as the webpage is loaded and viewed.

If the structure is not properly optimised, this can have a dramatic effect on the webpage from bugs to slow loading times.

It is these two elements that can make a good design seem bad (not very well polished off).

Some examples you may have seen include:

• Elements not fitting on screen properly for mobile (huge oversized images)
• Horizontal scrolling on mobile (unless intended)

Images are the ones that need to be generally looked out for.

A top tip. Always make sure your images are properly optimised for the web. They can really make your website super slow increasing the bounce rate.

As the web build progresses more and more files are created.

To keep things nice and tidy these files must be named properly and be put into the correct partials.

Partials separate large files into smaller one making the web project more manageable.

This contributes towards clean and tidy code which in turn improves the performance and quality of the website (optimised code, fewer bugs).

Bugs come out of the woodwork in code just like in real life. Properly structuring project files can help keep the bugs at bay.

The reason partials can help with the quality of code is that code that does one job is separated from code that does another.

This means the developer is not looking at code that does something else whilst focusing on another bit of code. Long files are distracting and are a nightmare to navigate.

Just imagine having a book on a single long page with no chapters (where were you last put the book down?).

Project back end setup (flexibility)

To you, this would be an admin panel where you add, edit, update and delete the content of your website.

The translation of data from the back end (your admin panel) to the front end (what you see when you visit a webpage) can be quite intricate.

For the design of the website to perform as it should, the way it’s set up on the back end and how it’s retrieved and set up to be displayed must be well thought out.

If not, your website can end up being slow, be complicated to manage and update and cause the webpage to break.

Let’s look at a super simple example to make this clear.

Let’s say your developer is fetching four pieces of information from your backend for your hero section

• Heading text
• Subheading text
• Description
• Image

The optimal way to display this information would be by outputting this information straight away once it has been retrieved.

The wrong way would be storing this information into a list (like your shopping list) and extracting each individual bit of information (checking each item off your shopping list one by one) one by one then displaying it on the front end.

This is purely for example and to make it clear as to how using the wrong methods of doing something can slowly impact your website.

Also, different parts of your website will be designed to either be updated (by you) or to remain the same.

If the developer has not fully understood the design of the website they may make an element of your webpage editable.

An issue we have come across is button text. Adding long strings of text into a button (if it has been made editable) which is what tends to happen can break the design and disrupt the flow of elements.

A drawback to having a long string of text in a button is when the screen size reduces it can cause the text to break onto a new line making the button look, well, ugly.

So the design and backend of your website must be fully understood by not only the developer but by you also.

This point goes back to content, remember when we said to try to get content ready for the design process? This means when you come to edit your website (updating the content you have) it will work with the design of the website instead of fighting to get the content to fit.

Plugins (WordPress functionality)

Throughout the development of your website, sometimes there will be a specific element that has been designed that requires a plugin.

One prime example is for a filtering system to dynamically update whatever is being filtered (could be products on an ecommerce site) without the need to refresh the whole page.

We actually use WooCommerce for our ecommerce sites, here’s why.

Looking at the ecommerce example. For the products to be filterable without the need of a page refresh, this requires additional functionality that’s available from WooCommerce.

Without understanding how the website works, your website may end up functioning differently to how it should function (page refresh on filter update, for example).

So the point here, again, is that the developer must have a complete understanding of the website at hand in order to make it function as it should from the design.

Functionality

Once your website has been fully designed and developed it doesn’t stop there.

You may think that once your website is launched that’s it, but it’s really not.

There’s always work to be done and this includes:

• Updating content
• Making sure the updated content works
• Tracking how users use your website
  • Google Analytics
  • Hotjar
• Email updates from web forms
  • WPForms, Mailchimp, Active campaign
• Updating the website as updates are released (WordPress and any plugins, even updates from your developer)
  • Bug fixes
  • Optimisation
• Arefs
  • Rank checker and site audit

A website is a living and breathing project, you must work with it in order for it to work for you.

One reason to track how people use your website is so that it can be continuously improved, making it work best for the type of people that use your website.

You not only want to see how people use your website, but you want to audit it using software such as Arefs.

Arefs will scan your website and check for any errors. It will detect if you have missing headings, wrong links and any other HTML issues that can arise from your content.

It will help you maintain your website and keep it bug-free and fast.

Accessibility
Web accessibility is a crucial step to cover in the design of your website and is too important to miss out.

Accessibility means the ability of everyone regardless of their condition to have access to something and refers to the design of products (your website) and more.

There are various techniques that must be implemented into the design of your website in order to make it accessible.

Here is what must be done:

Alt tags

Alt tags are used on images to describe an image, it can be read by screen readers. Make sure to provide a good and proper description for each. Do not provide generic descriptions as these mean nothing. To make this easy, provide a description of how you’d imagine seeing the image if it was being described to you.

Keyboard navigation

The navigation of your website should be able to be carried out using only a keyboard. The elements of your website should not be obscured and be too nested (sub-menu after sub-menu). We at Canny try not to go above two levels at any time.

This makes navigation easy and works as expected.

Use default HTML Tags

HTML should be used properly on your website. This may seem like it applies to just the developer, but it applies to you.

You will be provided with an editor that either lets you put your HTML around the content of your website or it puts the HTML around the content for you.

Some things to look out for is the proper use of heading elements, links and buttons.

Your website design will have dictated how content should be laid out and displayed. To keep the design consistent the correct HTML must be used, always.

HTML you need to make sure is used properly and is consistent throughout includes:

• H1
• H2
• H3
• H4
• H5
• H6
• Links
• Buttons
• Highlights (bold and strong)

Headings should be used in the correct order for different sections of your website. For example, one H1, followed by H2 which is then followed by a H3.

When you are formatting text with the H elements, these will generally change how the text looks. Do not use heading tags just to change how the text looks (such as, if you want to make the text bolder).

If you want bold text use bold, not strong. Strong is used to highlight the importance of a word or sentence.

In the end, you must have an understanding of how HTML is used to make up a webpage if you are adding content to a website.

If not, your website will fall short of accessibility and may end up looking wrong (different than from the design).

Conclusion: 10 of the Best Business Website Design Tips

Getting a website designed, developed and launched are very exciting times indeed.

It can be very frustrating if your developed website does not look like the intended design.

Following these tips will make sure your website:

• Has the correct requirements (the type of website)
• Is trending
• Has the correct media
• Has the correct content
• Has the correct structure
• Is developed properly
• Is easily usable and updatable
• Works as intended
• Accessible by everyone

If you are thinking about a new website, check out our web design services.