There are several factors that go into building a website – knowing the type of website you want (you may want your website to have a blog or an online store), planning how the website will look and feel to the end user, choosing the hosting provider (who will store the website’s files and database) and many more. Following these steps will help you know what you have to do when it comes to building a website.
Step 1: Planning
Before you even begin building or designing your own website the most important start point is your planning. It is important to have a good idea on what you want your website to do and what you want it to achieve. Building a plan outlining the design inspiration and the functionality will make the designing and building the solution much quicker and easier along the line.
When it comes to writing your plan there are a few key points you should lock down. Firstly you should identify and list your website’s goals. These goals will influence how you design the user experience and the features you will be developing. The next important point to consider in the planning of your website is to define your target audience. This will help you make the design and the experience relevant to the audience you are targeting.
The final part of the initial planning you should do to start your own website is to define what the product or service which you are offering is, and what makes it stand out to your possible future customers or clients.
Step 2: Deciding
After planning the website, you need to decide how the website will be built. There are three main ways of building a website that range from very cheap to expensive.
The cheap way is to use a website builder such as Squarespace, Weebly and Wix. These website builders use templates that you can customise to help you build a website and they have a smooth learning curve since you do not need any technical knowledge to use it. It is also the most convenient option as security and hosting comes built in so you do not have to worry about finding the right hosting provider for your website.
The second and more expensive way is to use WordPress. WordPress is a content management system that uses themes as a way for users to build their websites from scratch. Because of this, complex websites can be built with WordPress. WordPress is also open source and because of this, a variety of plugins can be installed to fit the purpose of your website e.g. if you wanted to build a website selling concert tickets, a ticketing booking plugin can be installed to manage the ticketing system on the website. However, because of its open source nature, this means you have to manage everything yourself from the security to the hosting provider and this can be very time consuming if you’re a beginner.
The final and the most expensive way of building a website is to hire a web designer that can build any type of website you want. You will need to give the web designer information such as the brief (how you want the website to look and interact, what features you want on the website), the contract and the deadline (when you want the website to be finished and go live). This option should mainly be used if you are willing to spend a lot of money on a website with advanced features as you won’t be able to run the website yourself and if you need any content changed, added or removed, you may need the web designer’s assistance and this may cost extra.
Step 3: Wireframing
When it comes to planning the design you are going to use, the easiest first step is wireframing. This is where you do a rough outline of what each page would look like and the position of elements while also outlining the interactions between elements on the page. This start point of designing is either done by hand on paper for people more comfortable with being artistic by hand or by doing this on a computer using one of the various software or online services which can help with this.
When doing your wireframe the individual elements do not need to be designed at this point, for images and graphics you plan to design later you can represent this with a box and a label to explain what will be there. As the full design of the user experience comes later, this wireframing will help you build up from it as you start to build your website and also helps you visualise the positioning and structure of your website to get it to match your goals outlined in your plan.
If you are building a website for a client, having the wireframe allows you to explain visually to the client what your plan for the outline of the website is as it is a lot quicker to edit and change elements on the wireframe early, then making these changes with the more developed elements down the line.
You can decide to sketch out the wireframe by using a pen and paper or you could use dedicated wireframing software that makes the process a little easier like Balsamiq Wireframes.
Step 4: Designing
After sketching out the wireframing, you need to think about the design of the website in more detail, such as the colours and fonts of the website. You also need to think about how the end user will interact with the website. The way this is done is by creating website mockups using softwares like Adobe XD and Figma.
These softwares use artboards (or as Figma calls them, frames) as a canvas to create your design that you sketched out in your wireframe. You can also use these softwares to prototype the different user interactions on your website e.g. prototyping how a dropdown menu will be animated when the user hovers over it with their mouse or prototyping clicking on different links.
Creating these mockups is essential as they determine what the end result of the website will look like and as a result, will be much easier to build.
Step 5: Create Content
Depending on the requirements of the websites the types of content will vary, at its core however it can be broken down into text, images, videos and animations. By having these all created and ready before you start building your website will lead to a much smoother experience. The text content that will need to be created for the website is usually the content of the webpages. This would involve prewriting and planning all the different paragraphs and descriptions you might use in your use case. For an E-commerce website for example this type of content would include all of the product names and descriptions. This would allow for a mostly copy and paste exercise when the development of the website gets to that point.
In regard to images, this content includes not only the images on the website but any icons or dividers or shapes in which you want to be able to implement your designs which you have done in the previous section into reality. Whilst many royalty free image sites exist online like Unsplash or Pexels, sometimes these images can get over used so to really give your site some originality it may be worth purchasing the right to use other images from an independent artist or a stock photo website.
Videos are becoming of greater importance when it comes to web design due to how well it can get information across to the user and helps reinforce the house style of the website.
Step 6: Domain
Of course, you can’t forget about the most recognisable part of a website – the domain name. When it comes to choosing a domain name, you have to make sure that it is available for you to use and that it hasn’t been taken by someone else.
Another part of choosing your domain name is making sure you choose the right top level domain for your website. A top level domain is the last part of a domain name e.g. .com, .co.uk. If your website has international users then it is best to use the .com top level domain, however, if the website is for the people of your country then it is best to use the domain for that country e.g. if you are building a website for a UK festival then it is best to use the .co.uk top level domain.
The process of choosing a domain name depends on the way you choose to build your website. If you decide to build the website with WordPress or have a web designer build the website, they will get a domain name through a hosting provider. If you decide to build the website with a website builder such as Squarespace or Wix, by default, they will use their brands as part of the domain name e.g. a Squarespace website’s domain might end with .squarespace.com and a Wix website domain might end with .wix.com. However, you can change the settings in each website builder to allow you to use a custom domain.
Step 7: Hosting
Another important part of your website is choosing a hosting provider. If you decide to build your website with a website builder then you do not need to worry about this step, however if you decide to build a website with WordPress or decide to hire a web designer, you should continue reading this step.
The job of a hosting provider is to provide services that enable you to post a website on the Internet. Websites are hosted on servers and the purpose of these servers is to connect to a user’s computer when they type a website’s domain and click on it, which brings up the website in their browser. These services usually include email accounts, File Manager, database access and WordPress support. Because of these services, there are a variety of hosting providers to choose from.
These hosting providers are also responsible for providing security for the website as you need to make sure the SSL for your website is purchased through the provider so your website can be secure and users won’t have to worry about accessing an insecure website.
WordPress officially recommends three hosting providers – Bluehost, DreamHost and SiteGround because they offer the most customer support and optimisation with WordPress. However, because they are so highly rated, these hosting providers are not cheap but you can opt for cheaper providers that offer adequate WordPress support like Hostinger.
Step 8: Build
Your website is now planned out, the website and hosting has been sorted out. It’s now time to start building it. Depending on what service or software you have used the exact process will be different but the key areas are consistent.
If you are using a type of drag and drop website builder you will begin by replicating the designs you made earlier, inserting and positioning your media content on the website. If you have a web developer who is coding this instead the process is very much the same with the key difference being in the extra steps to visualise the work being done. The header, footer and navigation bar would also be created according to the designs.
Once you have the pages looking how you want it’s time to start implementing the different interactions on the website. This can include inserting the links on the website, including the navigation bar, or implementing the functionality of a form like a contact form.
If your website is an E-commerce site then you would now go about adding the products which you are selling onto the website using the text and images you created earlier and add them to the website. Moreover, if your website implements a type of user system then you will also need to set that up and configure the different level of permissions which each type of user can have. Most methods of building websites usually have extensive free documentation on how to implement all of these standard features
Step 9: SEO
You want to make sure that your website is getting traffic right? Well, the best way to do this is by making sure the website is ranked highly when it is searched for in Google. This is called Search Engine Optimisation, otherwise known as SEO.
When a website is ranked highly on the first page of a search engine like Google or Bing, this means that it has been optimised for search engines. The way these websites are optimised is by making sure the website has a title and a description so they can be shown in the search engine. Another way to ensure the website has a high ranking on search engines is by shortening the URL slug of some pages on your website because the longer the URL slug, the less optimised it is to the search engine. Usually, you don’t have to do anything in order for a search engine to index your website, however, sometimes your website may not be indexed by a search engine, which means it can’t be found by people. A good way of making sure your website is indexed is by verifying it with search engine webmaster tools like Google Search Console and Bing Webmaster Tools. You also need to request that Google index your website in Google Search Console so that it shows up in Google’s search results.
If you want to make sure your website is consistent high rank on search engines, you need to make sure your pages have focus keywords that are used in the page title and description that will match the search terms people will use to find your website e.g. if you are building a recipe website and one of the pages is for making pepperoni pizza from scratch and it was titled, ‘Making Homemade Pepperoni Pizza from Scratch’, the search term “homemade pepperoni pizza” would help bring up the website from the search engine. With WordPress, there are multiple SEO plugins you can use that makes this process easier for you, such as Yoast and RankMath.
Step 10: Testing
One of the biggest foils of many amateur web developers is bugs or errors arising on launch day. The biggest cause of a lot of these issues is down to a lack of testing, but this has more generally been caused by the lack of focus on testing when it comes to web development education on YouTube, which is becoming one of the defacto places many people who want to learn these skills go to.
For larger companies or institutions, they usually hire testers to do these tasks for them or utilise the use of automated testing software. For smaller companies or personal projects a lot of this testing needs to be done by the developer and the users before launch. When it comes to testing the websites there are a few main categories of tests which you will need to do to be sure your website is ready for launch. It’s common practice when running these tests is to log and note each test within a document to easily organise the process.
The first main area of testing is Functionality Testing, as the name suggests this type of testing goes over every part of functionality on the website making sure it is working as intended. This includes: testing every link on the website; testing every form that can be filled out and test that the cookies are working correctly.
The next area you should test is Usability Testing. This area consists of making sure the content on the website is displaying correctly and there are no spelling or grammatical errors. The other main section of this type of testing is making sure the navigation and menus throughout the site are consistent, clear, and user friendly for your target audience.
A large majority of all websites currently on the web right now all use databases, this means its a good idea to do some Database Testing. This involves running queries and looking out for any errors which could be outputted, moreover, this type of testing also includes making sure test data on the database displays correctly on the website. This type of testing can also include making sure that the data integrity is preserved when creating, moving or deleting data.
Another key part of a website these days is the performance and compatibility. As the use of the web has grown the importance of these types of testing. In Performance Testing you focus on testing and optimising how quick the webpage loads and how well the entire website handles and performs and standard and high use. Compatibility Testing consists of making sure that your website works on various devices and screen sizes. The website StatCounter gives a good estimation of breakdown of common devices and screen sizes, but this consideration should also take into account the devices most used by your target audience.
The final part of testing is Security Testing. As the name suggests this type of testing is focusing on the security of the website. Testing this will include making sure that any secure pages cannot be accessed without the correct permissions (Logged in for example). It is recommended to use an SSL certificate on your website for its benefits in security and in SEO. If you use one it’s important to make sure the SSL is working on all parts of the website.
Conclusion:
The detail given throughout this plan should equip you with the correct tools and knowledge to dive straight into starting up your own website, it’s always good to remember that failing to plan is planning to fail, and the more work spent beforehand building this website with best practices in mind will lead to a quicker and better end product.
Whilst the process of starting your own website can seem confusing at first, hopefully this 10 step plan has demystified some of the concepts and given some structure for you to go out and create your own. Accessibility is being able to get started in creating your own website has allowed for a wider display of diversity in the online space, allowing the presentation and discussion of many ideas from a global audience, and as the growth of the web expands even further it will be interesting to see what comes from it.
Toyin is a web designer and game designer who creates story-based games in his spare time and loves all things tech!
Nathaniel is a Web Design Executive who also writes content on technology and loves spending his days researching and building new projects, and generally complaining about new trends.
