The high complexity of website creation broken down into 15 actionable steps
Building a website is one of the most important investments you'll make for your business, so it needs to be done correctly.
In this post we list the 15 steps to creating a sensational, lead converting website.
Check off all the steps as you go to make sure you don't miss out on anything important.
Step 1: Choose the objective of your website
What is a website objective?
The objective of your website is its primary purpose. Not all websites are created equal. Some websites are designed to achieve different outcomes than others. Before you even start sketching your web design you need to have a clear definition of the reason why your website will exist.
Here are some questions to ask yourself:
Will your website be solely used as a medium for your blog posts?
Will it be an ecommerce website?
Will you be selling a service or a physical product?
Will you be creating a single landing page to capture emails?
Why is a website objective important?
The objective of your website will determine both its structure and design. It'll also determine how long it takes to build, what functionality it needs, what platform you use and who to involve in the process.
Who can help you create your website objective?
Step 2: Logo design
What is a logo?
A logo is a succinct graphical summary of your business. It represents your business''s unique character and personality. With a logo you can brand business cards, stationery and even clothing to increase your brand awareness.
Why is a logo important?
Your logo can set a reference point for your entire website design. It helps you maintain design consistency so that your future customer can easily identify any content pertaining to your business when they see it.
You may already have a logo for your business. Put some thought into whether or not you're happy with your current logo. Does it properly reflect your brand? Are you happy with it serving as jumping off point for your entire website design? If not, it might be time for a refresh.
Who can create a logo for you?
Step 3: Select a content management system (CMS)
What is a CMS?
A CMS is the building environment used to create a website. Some CMS platforms are drag and drop designers, which are easy to use, but often don't offer a lot of customization. Others are more robust and capable of building wonderfully complex websites.
Why is choosing the right CMS important?
The CMS you choose depends on how complex your web design requirements are. If you're building a very simple website without any customization requirements and you have no intention of upgrading its complexity in the future, a drag and drop builder may be best for you.
But if you want a completely customized web design with specific function requirements, and want to always have the option of scaling its complexity as your business evolves, you need to choose a CMS that can scale with your needs.
Who can help you build a website on your selected CMS?
If you choose to use a drag and drop builder, and you don't have the time to learn how to navigate it, an
expert web designer can help you.
If you require a more complex and customized website built, a
web developer can code your website for you from the ground up.
Step 4: Create a mood board
What is a mood board?
A mood board is a collection of all of the different design elements you want to implement in your website (such as color palette, graphics, typography, video styles, etc).
Why is a mood board important?
A mood board helps you design a website that you personally resonate with rather than just settling for a generic (and boring) template.
Who can help you design your moodboard?
A
graphic designer can collaborate with you to help you design a stunning moodboard that will excite and inspire your website creation journey.
Step 5: Create a sitemap
What is a sitemap?
A sitemap lists all of the pages on your website and identifies how visitors will navigate to each page from the home page. There are two primary types of sitemaps:
Visual sitemap:
This is a graphical representation of all your web pages in hierarchical order. Here's an example from Google:
XML sitemap:
An XML sitemap is a textual representation of all your webpages and their relationships. It's designed to be read by search engines such as Google and Bing.
Why are sitemaps important?
Visual sitemaps help you strategize all of the web pages you'll need. They also allow you to design how users will navigate to each page.
XML sitemaps help search engines understand how your website is structured. This helps them crawl and index all your pages, and understand how they relate to each other.
Before designing a sitemap
Before you design your sitemap you need to decide on the types of pages you'll need on your website. This will depend on the objective of your website.
Here are some examples of common pages found on both ecommerce and service websites:
Ecommerce website
Landing pages (for sales campaigns)
Service website
Products page (if applicable)
Sitemap generation software
You can use software to help you generate visual sitemaps and also XML sitemaps. Here are some of the best options for each sitemap type.
Visual sitemap software:
XML sitemap software:
Who can create a sitemap?
Step 6: Create a wireframe
What is wireframing?
With your sitemap complete, you'll have an idea of how many pages you need to create for your website and how users will navigate to each of them. The next step is to zoom in closer onto each page and start mapping out all the features. This is called wireframing.
A website wireframe is the most basic representation of an entire website. It consists of simple diagrams that outline the relative positions of all the elements on each web page (pictures, text videos, etc.) kinda like the blueprint of a house.
These elements are usually black and white to avoid any aesthetic distractions, and allow observers to solely focus on finalizing the architecture of a website before moving onto more detailed design work.
Why is wireframing important?
Wireframing is important because it saves both time and money. Modifying and repositioning website elements is much quicker and cheaper when they're in sketch mode than when they're fully designed and coded.
Wireframing details
There are two stages of wireframing: low-fidelity and high-fidelity. The former is a simple sketch and the latter is a more detailed representation.
Here's an example:
Source: mentormate.com
Low fidelity wireframes are the most simplistic representations of a web page design. These are great to use when you want to share a quick summary of your intended web structure with others.
Once a low-fidelity wireframe design is approved, designers move onto a high fidelity design where all of the structural elements are refined and represented in greater detail and with color.
A high-fidelity mockup should be pixel perfect and look exactly like your final website.
Who can design a wireframe?
Wireframing software
Here's a list of the top 5 wireframe software tools you can use:
Step 7: Create a website prototype
What is a website prototype?
A high-fidelity wireframe represents the static aesthetics of each web element, but not their functions. To create a functioning model you can navigate through, you'll need a prototype.
Why are prototypes important?
Prototypes allow you to focus on designing the workflow of your website to ensure users have the most enjoyable experience (UX design). A logical user journey will incentivize conversions and prevent visitors from bouncing off your website.
It will also give you extra SEO points and help you rank in Google (more on that shortly).
Here's an example of a website prototype in action:
Source: mentormate.com As you can see, it's just like navigating a live website. Your prototype's functions should exactly mirror that of your final website.
Website prototyping software
Below is a list of the top 5 prototyping software tools you can use:
Who can create a website prototype?
Step 8: Write website copy
What is web copy
Your web copy is all the written content on your website. This isn't just blogs. It's every word on your site, from the headline on your homepage to the small print in your privacy policy.
Why is web copy important?
Your web copy is important because it determines the likelihood of your visitors converting to your offering.
Every website is selling something, whether it's a simple newsletter sign up or a physical product. Your website copy should resonate with the emotions of your visitors to convince them that they'll benefit from accepting your offer.
But web copy isn't just associated with sales, by consistently writing blogs and structuring them to be search engine friendly (SEO optimized), you will steadily push your website up the Google ranks and receive a steady stream of free customers!
When you understand the SEO process you can strategically target specific keywords in your content you want to rank for.
There are two primary objectives of an SEO optimization process:
i) The strategic placement of keywords.
You should place your target keywords in the following sections of your webpage:
The title tag (the title that is displayed in google).
Your H2 tag (the title on your web page).
In 2 or 3 of your H3 tags (the sub headings in the body of your text).
Naturally throughout the body of your content
ii) Creating content that meets specific user intent.
The Google algorithm has evolved dramatically over the last few years. Now content that best meets searcher intent is favoured over content that's just stuffed with keywords.
So be intentional with your content and always aim to provide searchers with the best possible answer to their search queries. Use your primary keywords and related keywords as a framework for your content creation.
Who can write web copy?
Copywriters are skilled in the art of both sales copy and SEO optimized blog writing. If you need custom graphics created to compliment either your webpage copy or blogs, a
graphic designer can help.
Ghostwriters can write articles for you and attribute your name as the author. This is a great way to build your brand identity, simply hire a ghostwriter to write for you and post the articles on different websites as guest posts and on public blogging platforms like medium.
Step 9: Get your website coded
What is website code?
Think of web code as the DNA of a website. When a website is coded, all of the elements are individually created and their functions are specified.
The most basic websites are coded in HTML and CSS. More complex websites are coded in Java and even Python.
Why is web coding important?
Most entrepreneurs have very unique website design requirements, but the functionality of conventional drag and drop web design platforms is too limited to accomplish these designs.
The only way to create a completely customized website that looks and functions just the way you like it, is to have its code manually typed up by a web developer.
The other benefit of starting with a custom code base is that you have the option of easily adding to it and upgrading the complexity of your website as your business evolves.
Who can code your website?
Step 10: Get your website QA'd
What is website quality assurance?
Once your website is coded, you will need to put it through some rigorous testing to ensure all of its functionality performs as expected without breaking.
A quality assurance technician tests all of the links, forms and payment gateways on your website. They also ensure that both the design and functionality of your website is consistent across all platforms (mobile, ipad etc) and exactly mirrors the web prototype you created in step 7.
Why is website QA important?
If you launch your website with bugs the initial visitor experience will be a frustrating one, which will immediately taint your business's reputation. Having your website QA'd before launching it will avoid any embarrassing crashes and give your visitors the best experience from day one.
Who can QA your website?
A
web designer can QA your website for you. This can either be the same web designer that coded your website or (ideally) a different one with a fresh pair of eyes.
Read this post to learn how to get your website QA'd correctly
Step 11: SEO review
What is an SEO review?
An SEO review is similar to a web design QA except it is solely concerned with all the factors affecting your Google rank. A comprehensive SEO review examines all of the technical aspects that affect your Google rank as well as your content structure.
A technical SEO review involves processes like, ensuring your website is loading at optimal speed, your sitemap is efficiently structured for search engines, your backlink profile is healthy etc.
The expert performing your SEO review can also provide you with a roadmap to help strengthen your search engine position overtime.
Why is an SEO review important?
SEO is a highly complicated process and there are billions of websites competing for the number one page position. To give your website the best chances of success, you have to make sure all of factors affecting your google rank are properly in place and working together like a well oiled clock.
The technical aspects of SEO are very easy to overlook, and if they are, it will prevent your website from ranking in Google, no matter how SEO optimized your written content is.
You should, therefore, have an expert skilled in both the technical and functional aspects of SEO conduct an audit of your website to secure its Google ranking success over time.
Who can perform a security review?
An
SEO expert can perform a security review for you.
Read this post to learn more about performing an SEO review
Step 12: Security review
What is a security review?
A security review ensures your website has all of the necessary safeguards in place to protect it from cyber attacks. It also ensures all of the data your visitors provide (form submissions and payment details) are kept secure which could prevent an expensive lawsuit.
If your website is an ecommerce website, a security review will help you minimise chargebacks which, if left unattended, could significantly impact your profit margins.
Why is a security review important?
A single security breach could neutralize all of the time and money you invested into making your website, so it's well worth devoting the time to a thorough security review.
Read this post to learn how to perform a security review of your website
Step 13: Setup analytics
What are analytics important?
Web analytics allow you to track the performance of your website, An analytics dashboard will show you useful information such as:
How many people are visiting your website
Which pages are visited more than others
The time visitors spend on each page
How far down the page they scroll
And much much more!
Why are web analytics important?
To run your website successfully, all of your decisions should be data driven. Web analytics allow you to track the performance of your content and the behavior of your visitors so that you can maximize engagement and conversion
Without analytics in place you simply won't know whether your efforts are profitable or not.
Who can set up web analytics?
Read this post to learn more about web analytics
Step 14: Website launch