There are over 2 billion active websites on the internet at the time of writing this.
With this number, one would expect that website planning is a common practice in the digital space.
Sadly, it’s not, which is why many of the websites you see around have terrible and inefficient designs.
While design trends change almost all the time, a few basic components of good web design remain universal.
- Easy to navigate
- Industry-appropriate design
- Clean layout
Users shouldn’t struggle with finding a particular page within your website.
Everything must be neatly organized, with simple navigation features and menus.
Your website could also do with a clean layout. Your page shouldn’t appear as if it’s crowded with information, video, and graphics.
It should also load faster than your users can bat their eyelids.
Compatibility is also a concern. Your website has to conform to the size of your user’s screen. You have to test every single one of its elements across different devices and make sure they all load fine.
Overall, every web development project calls for serious planning. Before you even think about hiring a web developer, it helps to sit down and come up with a detailed plan.
Think of your website as the blueprint for building your website.
It’s like the specifications or architectural drawings for a new building. It contains all the information you’ll need to build the best possible website for your business.
It should contain the following information:
- Background information: your history since you started up until where you are now.
- Your Target market: what’s their demographic and psychographic details? What are their goals? You have to make sure you have your buyer personas in place.
- Instruction on the Overall Structure of Your Website: Clear instructions on what you want to create and why
- Instruction on Each Part of Your Website: Instructions on how to design each part of your website, including the structure, design, and content.
- Metrics: What metrics will you use to measure the success of your website
As you can see, a website design plan is an outline with information on how you intend your website to look like, what information to carry, and what pages to fit each information.
It lets you see all your website pieces before you make any major plan on how to put them together.
The most basic website plan is an outline of your site’s navigation menu. A detailed one will contain more information on the type of content on each page.
You have the option of keeping it simple or adding notes, texts, images, or videos to fill it out.
Example of a Simple Website Plan:
This is a simple website design plan built using a mind mapping tool called MindMeister.
Must You Always Create a Site Plan When Developing a website?
The answer is, yes.
Imagine it as having all your ingredients ready before you start cooking (mise en place in French).
Or making sure you have everything you need when going out for a trip. It’s where you prepare in advance.
So, what should come out of doing all this?
First, it will make the web building process easier and faster. It’s also how you make sure that you’re not forgetting anything important.
Note that there’s no one standard way to prepare the plan.
You can draw it, write an outline, type it, or use a mind mapping tool – whatever works best for you.
The recipe for creating a bad website is not planning for it.
So, how do you tell a bad website?
An average person might not understand the difference between a good website design and a bad one.
It bears mentioning that it’s not about the site’s visuals. Having a good-looking website doesn’t necessarily translate to a good design.
After all, visuals are subjective.
That said, here are the common web design mistakes people make, which make their website design terrible.
A Website Without a Clear Message
The worst design mistake you can ever make is not providing a clear message on your website purpose.
Users should instantly be able to figure out what your website is about upon landing. They should know what you sell and stand for within the first few seconds of landing on your website.
CyberDsignClan is the perfect example of a website with a not-so-clear message.
The first thing you see upon opening the link is the large graphic that reads, “skip the intro.” On clicking on the page, the real homepage opens up, only to create further confusion.
It’s the perfect example of all the things to avoid while creating your website.
Any information that appears on your website before the user hits the scroll button is considered “above the fold.”
Some people like to refer to it as the “hero section.”
Since you also have a split second to communicate your business message, it’s always a great idea to make sure your business name and any important message concerning your business are featured here.
It’s also where some companies include their navigation.
The last thing you want to do is make your site visitors scroll your website to learn about your business and what it is that you do.
A Cluttered Homepage
In addition to having a clear message, you should make sure your website has a clear layout.
A cluttered website will make your website hard to both read and navigate. Consequently, your site’s visitors will leave without completing the intended action.
Angren is a perfect example of a site with a cluttered homepage. The site has no structure, and it’s like everything was just thrown around without any proper organization.
The site has no categories. Nor do they even have a navigation menu. Everything just looks jumbled up, which makes it the perfect example of the things to avoid when designing your website.
You can tell, nothing was planned. The developer just dived into coding without paying any special attention to the site’s design.
Angren has a lot to learn from a site such as Amazon or Alibaba. These two sites display hundreds of thousands of product pages, but still, it’s well-organized. Users don’t struggle to locate an item they want, and it’s all because the site owners took their time to plan for everything before embarking on the development process.
Not Optimizing Your Website for Mobile
Much of the traffic you’ll get will be from mobile. Meaning, one of the greatest website design mistakes you can make today is building your website for desktop first.
By not optimizing your website for mobile devices, that means most of your visitors will not be getting a good user experience.
Many sites boast responsive design, which allows them to adjust their elements to the size of any device screen.
With responsive design, you can design your website to change fonts, hide elements, and remove a background upon detecting a smaller screen.
Here’s an example of a website that wasn’t optimized for mobile (dequeuniversity.com):
Even adjusting your browser renders their site unreadable. It goes to show that they only designed the site with a desktop in mind, without minding those who visit their site on mobile devices.
A site with Poor Navigation
When users land on your site, they expect to find simple navigation.
They do not expect any form of complication while browsing your menu and finding the information they want.
Here’s an example of a website with a navigation system that doesn’t inspire you at all (uat.edu):
This website belongs to an educational facility. You bet it contains a lot of information. The problem sets in when you’re trying to locate their navigation menu.
Worse, their menu is almost unclickable. The floating graphics make it hard for you to click on it.
Unless you’re determined to find it, it’s easy to give up, leave alone be tempted to hop to the next site.
This is a common problem when a website is not optimized for mobile. When your website elements fail to adjust on smaller screens, sometimes they may become too small or overlap, and, as such, hard to read.
You can easily avoid this problem by completing a detailed test of your website before launching it.
Make good use of software and tools that emulate how your website appears on different mobile devices.
What’s the Difference Between Website Requirements, Brief, Scope, and Plan?
People use these terms interchangeably, even when it’s clear they don’t mean the same thing.
When someone asks for website requirements, what they’re simply asking for is a more technical guide rather than a complete scope of work.
The term requirement has also been evolving over the years to become more aligned with organisational needs.
Typically, your marketing team or department will be using the term scope or brief.
When talking to a web design agency, you’re likely to hear them use the term website scope or brief.
A website brief is like a business plan for your website. It details the design process, requirements, and timelines. The goal is to provide all the parties involved with a clear picture of what’s expected in terms of project deliverables, workflow, and post-launch services.
A website brief is also meant to provide clients with an accurate estimate of timescales and monetary expenses.
Who’s Supposed to Create a Website Brief?
Mostly, a website brief is created by a business after signing a website design contract with a design agency.
It’s key to identifying the key pieces of information that will help you stay on track and within your budget limits.
A website brief can also be written by the web professional building the site for you. The difference is that instead of referring to it as a website design brief, they’ll call it a website design proposal.
All the relevant stakeholders are allowed to participate in the creation of a website brief. However, much of the work will be done by the client or website owner.
A content brief also helps to manage expectations. Moreover, it can be used to prevent scope creep (unintentional expansion of your project scope or goal beyond what you had originally agreed upon).
Website Planning 4 Easy Steps
A website plan will save you many hours of headache and frustrations.
The planning process doesn’t have to be complicated and time-intensive. It’s just a matter of slicing off a few minutes off your business schedule to answer some really important business questions.
The goal is to ensure the designing process sets off on the right foot.
Think about what you want to accomplish. From there, it’s a matter of making the right choices. At some point, you may be required to tear down everything you designed and start over from scratch.
In a way, website design planning is just as much about deciding what you don’t need, as it’s about figuring out what you do need. The principle of “less is more” still applies here.
Step 1: Determine the Content You’ll Need
You can begin by determining the kind of content you’ll need for your website. It’s quite unrealistic to write your website content before you have even created the website.
You don’t need to prepare a full list of all the content you’ll need. Just 1 or 2 content ideas for each type of content that you’re planning to produce for the website.
The content you come up with will guide you through the process of developing your website. It will also help you determine what theme to use.
Here are a few examples of content types:
It bears repeating that you should use a content mapping tool such as MindMeister to drive this process.
When it’s all said and done, your website will wind up with thousands of pages. While you should have that in mind while planning your website design, the design you choose only needs to handle what’s in your mind map. That’s because the other pages will only replicate the design you already have.
Consider all the Other Assets You’ll Need
There are other assets outside your content needs that you’ll have to consider before you embark on the web creation process.
They include things like:
- Your website logo
- Brand fonts
- Brand colour
- Brand summary
- Social media accounts
- Podcast feed
- And so on…
The biggest of these items are your brand assets.
Your brand assets don’t include something in particular. It’s about your brand identity.
Here’s a list of all the things you’ll need for your brand identity.
Note that you don’t need every single one of the items on the list, just the one you deem necessary.
- Your company logo
- Your brand colours
- Your brand fonts
- Customer reviews
- Customer testimonials
- About us
Nail Down Your Must-have Website Features
Create a list of all the features you’ll need for your website. Nail this list.
That demands that you carefully think through the type of website that you’re looking to create.
With WordPress, premium themes come already integrated with these features. Where you can’t find a theme with the features you need, then check to see if there’s a WordPress plugin for it.
However, this is a line you want to tread carefully. First, you want to make sure you’re using as few WordPress plugins as possible. That’s because too many plugins will affect your website’s performance. They’ll slow it down and even make it more susceptible to security risks.
Again, you don’t want to choose a theme with too many of the features you’ll need. The last thing you want is to heavily rely on a particular theme to a point that it will be hard for you to move to a new theme.
The goal is to try and find the perfect balance between theme and plugin features.
But before you get to that, you need to determine all the features that your website will need, and make a point to write them down.
Here are a few examples of features that your website might need:
Look Outside for Inspiration
By now, you know almost everything your website will need. You even have an idea of what WordPress theme to buy and which plugins to use.
What remains is for you to think about how you want the website to look and feel.
There’s no sin in looking around for some little bit of inspiration. You can start by looking at a few similar websites in your niche and see if there’s something you can borrow from them.
What to Include in Your Website Plan?
Your website plan should try to cover the following:
- Your website goals and objectives
- Your audience or target market
- Your business requirements
- A sitemap
- Research-based on your existing customers
- Content planning
- Functional requirements
- The site’s information architecture
1# Your Website Goals and Objectives
You have to start by setting up a clear destination.
Where do you want your website to take you?
Without a clear destination, then your business will be carried by any wind that blows.
The reason for setting up a goal for your website is the same as setting up a goal for any other thing. It essentially helps you focus your attention on what’s important while ignoring the rest.
It allows you to see if you’re succeeding or making any progress towards your dream.
It helps you to stay on track.
In web design, you’ll not just need a goal, but a set of goals that can help you communicate how to measure your website’s success.
Examples of goals you can come up with:
- Your number of leads and sales
- Number of requests coming in
- Search engine rank and the improvements made (this shouldn’t be your main goal, but a sub to another goal you have).
- Any other goal that’s relevant to your business or company
2# Your Audience or Target Market
Your target audience is arguably the single most important part of planning a new website. After all, you’re designing the website for them.
Understanding your website goes beyond writing buyer personas.
It involves doing a lot of research, intrinsically to figure out how to best communicate to your target audience.
Here’s how you research your target audience:
- Look at your existing customers
- Document your ideal customer, as well as how and why you want to serve them
- Understand the existing gap between where you are in the present and the future you see for yourself
- Create a string of personas, where each persona represents a particular audience you’re targeting
Understand how each audience group would like to be served.
If a particular audience is heavy on using social media or search engines, then be sure to communicate to them in a way that best appeals to them and their needs.
Developing a buyer persona will help you direct your information architecture, content requirements, and your overall website look.
3# Your Business Requirements
A common mistake people do when planning their website design is focusing too much on their customers or too much on their business needs.
You have to find a perfect balance between the two.
An inside out marketing strategy is where you only focus on what your business needs without paying much consideration to what your prospects or customers need.
Your website planning brief should include must-have business items. For example, an ecommerce website must have a credit card payment gateway.
Failure to include it in the documentation means they may be left out in the development process or until it’s too late.
While this is a simple item to remedy, there are other even more critical components of your website that you want to outline earlier on in your website design brief.
The goal is to try and outline everything each section of your website will need to create a complete and well-defined set of requirements to submit to the web developer.
It’s common for website owners to make decisions based on a hunch, intuition, and anecdotes.
This is not the way to go if you’re serious about your business or setting up a formidable online presence.
Doing this is only bound to hurt your business in the long run.
We’re not trying to dispute what you already understand about your customers and competition. But as humans, we’re victims of our own biases.
There’s nothing wrong with having assumptions. What you want to do is make sure every assumption is backed up by hard or well-researched facts. Where you can’t find information about some of your assumptions, it helps to reach out to your target customers and ask relevant questions.
Types of researches to conduct/perform:
- Review of the best and worst sales, not just in your organization or business but the entire industry
- Review of some of the best-performing products and services, again not just in your organization but in the industry as a whole
- Review of your web analytics or any other similar metrics. Find out where your audience is coming from, what they do when they visit your website, and if there is any hole in your current website performance
- Run research experiments, including polls, surveys, and a series of tests on your existing users
- Install a site tracking tool to find out how users interact with your site
Go slow on assumptions and focus more on working with research-based data.
You’d be surprised to find out that much of the narrative people spread aren’t always fact-checked.
The more you research the more comfortable you’ll get with numbers. You’ll soon be able to make bolder statements to counter your previous assumptions.
Information Architecture (IA) is the practice of organizing your website content in the most effective way.
It’s a lot more than content management. But how you ensure your website content can be accessed by a user. It’s all in your website’s design.
IA Influences your site’s navigation, storage systems, use of the content, and ultimately the CMS you use.
The term sitemap has multiple meanings.
But basically, it’s a file with information on your website’s pages, videos, and other files and the relationship they have with each other.
A sitemap is mostly used to provide information about a specific type of content on your website or page, including your video and image content.
The Different Types of Sitemaps
- An XML sitemap is a technical page meant to help search engine bots crawl a site.
- A sitemap page is a page that’s been specifically designed on a site to help users find deep pages
- A visual sitemap, on the other hand, is a visual diagram portraying your site structure. This is what you should be focusing on in your website planning process.
Your website design scope must include a visual sitemap.
A visual site map shows your key content structures, and the relationships they have with each other.
It also helps to develop important guides to your website, including:
- Navigation guides
- Use journey maps and workflows
- Technical workflows
A visual sitemap will also help the designers and developers working on your project understand the size and scope of your project.
An ecommerce store might work with a few page templates that need to be designed, but a sitemap will present the extensiveness of the categories that make up the site.
You have a long list of tools to help you out with creating your site’s visual sitemap. Here are a few of them:
Wireframing is a critical part of the design process.
It allows you to break down each page’s interface and make sure it’s fulfilling its role or helping you achieve your website goals.
A wireframe is a two-dimension diagram detailing the structure of a web page.
Typically, a wireframe is used to make the priority of content, available functionality, space allocation, and the intended behaviour for any given page.
Wireframe, or wires as they’re sometimes referred to, don’t go into details. They’re all about positions. They don’t include styling, graphics, and colours.
Wireframes are usually prepared by UX or UI designers. Their simplicity means they can be used by absolutely anyone to communicate their requirements.
When used by a website planner, they’re basically to raise issues that require answers before the web designing process begins or before content is created.
Good website planning entails drawing up wireframes for both mobile and desktop versions of your website.
8# Content Planning
It’s hard to imagine a website without content.
And by content, we’re not just talking text, but images, videos, audio, illustrations, and more.
If anything, your website design planning document wouldn’t be complete without you providing a detailed guide on how content should be used on each page.
You want to begin by outlining the different types of content that you want to see on each page. You’re doing this to inform both the design, development and production team of the structure that you have in mind.
Content production is the most tiring and drawn-out part of the web creation process. Because of this, web owners usually leave it out until the very end of the web designing process.
This often leads to unnecessary delays or loss of momentum in their projects.
9# Website Specification and Functional Requirements
You’re not just scoping your website as a whole, but each page.
Outline the requirements for each page.
Look around at the different types of websites in the digital space. One thing you’ll notice is that most of their pages fit within one or two of their templates.
It goes to show most of them weren’t planned at all. The owner didn’t take time to visualize each page and list down its requirements.
Don’t expect your designer to do everything for you. After all, they cannot read your mind to figure out what you need.
If you’re looking to produce long-lasting results and create a website that will grow and evolve as time goes, you want to start by providing as many details as you possibly can on each page.
Every page must have a goal. After that, you want to narrow down to specific details about the page, including metadata, titles, and the functionality required.