15 step guide to building a remarkable website in 2020

The process of creating a website is very daunting if you have no experience. In this process we break down the complexity into 15 actionable steps.
Aug 3, 2020 • 13 minute read
Edward Kost @EdwardKost
Technical Co-pilot
Cover photo for 15 step guide to building a remarkable website in 2020

Залишайтеся в курсі оновлень

Підпишіться на нашу розсилку, щоб бути в курсі важливих тем.
Дякуємо, що підписалися! Слідкуйте за вхідними повідомленнями, щоб не пропустити новини.

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?

If you have trouble identifying the main objectives of your website, an internet marketing expert can assist you.

Read this post to learn how to write a spec for your website project

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?

 A talented graphic designer can help create a logo for your website.

Read this post to learn more about designing a professional logo for your business

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.

Read this post to learn how to choose the right CMS

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.

Read this post to learn how to create a mood board

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:

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
  • Home page

  • Landing pages (for sales campaigns)

  • Product pages

  • Collection pages

  • Blog pages

  • Contact page

  • Privacy policy

  • Terms of use

  • Sitemap 

Service website
  • Home page

  • About page

  • Services page

  • Products page (if applicable)

  • FAQ

  • Testimonials

  • Contact us

  • Press/latest news

  • Blogs

  • Privacy policy

  • Terms of use

  • Sitemap

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?

Both web developers and website designers can create a sitemap for you. 

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:

Low fidelity vs high fidelity design

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?

Web designers are usually trained in wireframing. 

Wireframing software

Here's a list of the top 5 wireframe software tools you can use:

Read this post to learn more about creating wireframes for your website

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:

Web prototype design
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?

Web designers and trained in creating web prototypes.

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.

Read this post to learn how to write effective website copy  

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?

Web developers can code your website. If you have highly complex requirements, programmers can also assist you.

Read this post to learn how hire a web developer to 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? 

A web designer can set up your analytics software for you. 

Read this post to learn more about web analytics 

Step 14: Website launch 

What is a website launch?

A website launch is not just the action of switching your website over to a live status. It involves  strategic planning and list building to ensure your website is launched in front of a live audeince. 

This doesn't mean you have to host a website launch party, but rather that you cultivate a specific list of recipients to build up their anticipation for seeing your new website. Then, once it's live, you send them all a link to your live site.

Why is a website launch important?

If your website goes live without a dedicated launch, nobody will see it. If you launch your website properly and send it to a list of expecting recipients, you will instantly initiate your first stream of traffic. If your website is designed beautifully, and visitors have the best possible experience, this could result in instant referrals which could initiate a chain reaction of repeat business. 

Who can perform a website launch?

A marketing expert can help you strategize the launch of your website. They can even help you effectively build your recipient list so that you launch your website in front of as large an audience as possible. 

Read this post to learn how to successful plan and execute website launch.

Step 15: Build your customer list 

Why build your customer list?

To secure the future of your online business, you need to be continuously strengthening your customer acquisition channel, this involves active marketing rather reactive marketing.

There are different methods for growing your customer list, here are some example:

  • Search engine marketing 

  • Email marketing 

  • Social media marketing

  • Trade shows

And much more.

To be successful online, your customer acquisition efforts should integrate as many different methods that align with your branding personality as possible. 

Who can build your customer list?

An internet marketing specialist can help strategies and build up your customer list. 

Read this post to learn more about building your customer list 

Залишайтеся в курсі оновлень

Підпишіться на нашу розсилку, щоб бути в курсі важливих тем.
Дякуємо, що підписалися! Слідкуйте за вхідними повідомленнями, щоб не пропустити новини.

Talk to one of our Technical Co-Pilots to help with your project

Get Help Now
Рекомендовані для вас статті
Scaling your startup is a delicate balancing act. Scale too quickly and your funding is depleted. Scale too late you've missed your opportunity.
23 MIN READ
The solution to climate change action is much simpler than you think. Switching to a remote workforce may be the key.
7 MIN READ
Great graphic design will solidify your brand identity and drive revenue. Find out how to hire a great designer and what you should expect to pay.
9 MIN READ
Got a great idea for an app? Need a new way to grow your business? We tell you everything you need to know about building a mobile app in 2020.
16 MIN READ