Design a Website in 2024 for Beginners

1. Plan your Website

Before you start designing your website you need to know its purpose. Websites should be orientated to fulfilling the goals of your business, this will maximize the revenue generated by your site. There are 4 main points to consider when planning a website:

Purpose: What are you trying to achieve with your website? Is it to showcase your products, get people to book a consultation, build a community, etc. Once you have determined your purpose you can look at similar sites in the same industry to get inspiration on design and layout.
Selling Point: The next step is to figure out what the selling point of your business is. Good websites captivate visitors the second they visit your site. If you display an irresistible aspect of your business on the front page, it hooks your visitors in, keeping them on your site longer and increasing engagement.
Target Audience: Your website should make your target audience feel at home, through catering the design towards your typical customer it makes your website stand out against other generic, characterless sites.
Action: What action do you want your visitors to take? Do you want them to purchase a product, fill out a form, book a consultation, etc, once you know where you want your visitors to go you can direct them there with strategic UI.

Only once you know these things can you begin to plan out your website effectively, structuring your website optimally is crucial to a successful online presence.

2. Plan your Content

Before you begin your layout, you need to know what your website will consist of, this is where you plan what you are going to put on your site. You’ll need to write your content, find images, etc. It is important to consider SEO when planning your content.

Tools like Google Keyword Planner and Semrush can assist you in finding keywords for your niche, through including common keywords in your content you increase the likelihood of your site ranking for these search terms.

Here is an example for the leather boots niche in Google Keyword Planner:

It is important to consider your target audience when writing your content, a website can be thought of as marketing, and it is essential you identify the customers’ problems you are fixing and create an undeniable offer.

A great place for inspiration is to look at your competitor’s sites, especially the top-ranking ones. This will give you an example of a successful website, take note of specific techniques or layouts used that make their website advantageous.

3. Build a Brand Identity

It is crucial to your website’s success that you develop a consistent brand identity across your pages. This helps your brand become recognizable and ensures the pages on your site are uniform. Brand identity includes the colour, typeface and logo design of your website.

Logo Design is the center of your brand Identity. If you already have a logo then the colour palette and typeface should be influenced by this logo so it doesn’t look out of place, this will also make your website more recognizable to people who are already familiar with your logo. If you don’t already have a logo there are numerous free online tools such as Canva. When creating your logo, it is important to consider your target audience as well as the emotions associated with different colours.

The next step is finding a colour palette to use throughout your website, it is crucial to consider the psychological effect colours have on your brand and how you can leverage these to strengthen your brand identity. Below is a diagram displaying the emotions associated with various colours, consider your target audience and what emotion you want your visitors to associate with your brand.

You can browse premade colour palettes on sites like Canva, or you can create your own from scratch, it’s important you note down the hex colour codes of your palette, so you can keep consistent colouring throughout your site.

Typeface can be tweaked during the creation step, but as with colour it is integral your typeface is consistent, a good place to start would be defining the typeface for titles, main headings, subheadings and content. Having an inconsistent typeface conveys unprofessionalism which is detrimental to the positive brand Identity you are trying to establish.

4. Choose your Website Builder

There are a multitude of website builders out there, which can be overwhelming if you are new to web design. The first step is deciding what type of website builder you want, these can be separated into three categories.

Template Builders: Intuitive drag-and-drop editors that provide you with ready-to-go templates where you simply need to paste in your content and images. These builders are helpful if you want to quickly put together a site without much technical knowledge. The major drawback of these builders is they allow very little customizability and only provide you with a common layout, this can make your website bland and increase the difficulty of standing out, especially if your competitors are using the same builders.

Hosting offered by template builders is also often much more expensive then hosting a WordPress or custom website, and they have limited SEO functionality. The most common template builders are Wix, Squarespace or Shopify for an e-commerce solution.
Open Source CMS: The most popular open-source builder is WordPress, with over 40% of the internet being powered by WordPress. WordPress is similar to other template builders like Wix and Squarespace, however it allows users to make and upload their own custom plugins, this allows you to include forms, site menus, chat boxes and much more from a large library of user-made plugins.

This gives you much more control over the website itself, allowing your creativity to roam free and create a unique website. There are also plugins available to write your own code within the website, giving you precise control over the aesthetics.
Limitless Design: If you take pride in your website and you want it to be a mirror image of how you dreamed, you will have to forego the ease of template builders and opt for a more custom solution. Limitless solutions include coding the website from the ground up, tailored to your specific needs.

For most people this will include hiring a developer, however a custom website gives you full control over your website, allowing it to perform to the pinnacle of its potential. Custom websites can be made through a WordPress theme, giving the owner an interface to interact with their site, in fact this is exactly what we offer as a Web Design Company. This can be viewed as an investment in a website that will generate you much more income in the future.

5. Plan Pages and Create Wireframes

The next step is deciding what pages you want on your website. Most websites have a home page, product/service page, contact page and an about page, which is a good starting point. For additional pages consider what the purpose of your website is and browse similar sites. Using this information, you can then create a sitemap detailing what pages will be included on your website.

A sitemap is a diagram that details what pages will be included on your site and how they will be linked to each other. This is integral to ensuring your site is easy to navigate as well as keeping a neat link tree which increases SEO. An example of a wireframe is shown below.

Figure: Website Structure – Author: Seobility – License: CC BY-SA 4.0

Now you have determined the individual components of your site it’s time to put them together into a layout. If you are using a template builder, it is best to browse the already available templates as you will not be able to design your own.

Otherwise, how you format your content is completely up to you. Once again it is best to get inspiration from your competitors to create an aesthetic and effective layout. Once you have an idea of how you want to format your content, you can begin designing your wireframe, wireframes are simple sketches that outline the layout of your site, you can think of them as the blueprints for your website, an example of wireframes are seen below.

One thing that is often overlooked by new website builders is the variety of screens that your website will be displayed on, generally you will need a design for computers, tablets and phones. Although you may employ even more designs for the variation in screen sizes within these devices.

Besides aesthetics it is also important to focus on strategic UI when designing your wireframe. If you want to direct your visitors to a certain page ensure it stands out and is easy to find, for example if you want your clients to book a consultation, including a flashing ‘book a call’ button in the header will direct your viewers’ attention towards this button, increasing the likelihood of them clicking it. It can also include linking directly to the page in your hero or making certain buttons more vibrant, all these techniques work to increase engagement and direct your visitors exactly where you want them.

It is important to construct a wireframe before focusing on more specific details such as styling, effects and animations as this ensures your website will fit together nicely instead of looking like a disjointed collection of unrelated elements. It will also ensure you have enough room for each component, speeding up the design process as you don’t have to consider designing your layout while creating individual elements.

6. Start Building Pages

Now you have planned out your website you are ready to start designing. Using your wireframes as a guide you can begin designing your main pages. If you are new to your selected website builder become familiar with your tools through guides and tutorials, this prevents you from learning the basics and only using those. The more advanced features will help you stand out and make your website more interesting to browse.

As you design your pages remember your brand identity, colour palette and your selling point. This will allow you to create a clear professional website that fulfils its purpose.

Home Page: This is the heart of your website; the first thing people see should engage and interest them. You should then give more information on what you do, allowing their curiosity to be fulfilled through scrolling through your website. It should also include clear navigation to the other pages of your website, especially to the pages you want to direct traffic towards.
Services/Product Page: This page should clearly display what you offer to your customers, it's beneficial to display your best-selling deals at the top of your page as these are more likely to interest your visitors.
Contact Page: Your contact page will likely be the main avenue people use to reach out to you. It’s important to make this page as simple as possible so that people have no issues contacting you. You can include addresses, emails, phone numbers, etc. However, it is beneficial to make it as easy as possible for customers to contact you, as this will increase engagement.

This can be achieved through a form present on your contact page that allows the user to instantly send you a message, almost all website builders will allow you create a form like this and link it to an email address We strongly recommend you include one of these forms to increase the number of people reaching out regarding your product and/or service.
About Page: The about page tells your visitors more about your business and how you operate. This is your chance to tell the unique story of your business, including how it started, your values, and how you’ve grown. This is also a great point to seek inspiration from similar websites, implementing the aspects you like and leaving ones you don’t. This allows you to build a relationship with your visitors, so utilize the opportunity to build an emotional connection with your readers, position them to trust your business and want to contribute to your success.

7. Optimise UX

The last thing you want is users getting frustrated at your site — this is why having a positive user experience (UX) is crucial to a successful website. There are many aspects that go into creating an outstanding user experience, but we will go into the main areas where websites fall short.

Navigation:

A simple navigation inspires visitors to explore your site and find exactly what they are looking for. Navigation menus should be easy to find, such as in the header. They should also be clear and easy to read, try and keep the fancy styling for elsewhere.

A popular site structure used to improve navigation is flat site structure.

Nielsen Norman Group has a great diagram displaying the difference:

The left displays a sitemap for a flat site structure, whilst the right shows a deep site structure

Page Speed:

This approach prioritizes having fewer categories, decreasing the number of clicks needed for the user to get to their desired page. Although it may look more disorganized it makes it easier for visitors to navigate your site as there are no pages hidden beneath other pages.

As a rule of thumb, you should be able to get from any page on your site to another in 2 clicks or less. People are impatient and will not waste time trying to dig through your site looking for content, they will simply visit another site that can very quickly provide them with what they are looking for.

There are many techniques to make navigation easier, one of the most effective is drop-down menus. These are menus that open another sub-menu when you hover your cursor over one of the options. This works well with a flat site structure as it allows you to fit a lot of menu options into a smaller space, while avoiding overwhelming the user with excessive menu options.

Site loading time is essential to a successful website, people are getting less and less tolerable of long loading times and this is reflected in the statistics. For every 1 second increase in load times your page receives:

As a rule of thumb your page should load in less than 3 seconds, this can be checked on sites like GTmetrix. There are several methods to decrease the load time of your site but there are two main strategies:

Optimise Images: WordPress users can use plugins such as EWWW Image Optimizer to automatically decrease the size of your images. If you are on a different website builder, you will have to do it manually, this is made easy with sites like Optimizilla that allow you to compress your images before uploading them to your site. Google recommends that every page should be less than 500KB, although as small as possible without a visible decrease in quality is optimal. Consider the quantity and size of images on your page and compress accordingly.
Minify Files: If you have access to the code you can minify files, reducing empty space, unnecessary lines, etc. This reduces the file size and therefore the loading time of your page. WordPress users can use plugins like Autoptimize which will do this for you automatically. Unfortunately, this isn’t possible in template builders like Wix and Squarespace, although their files should already be relatively optimised.

Accessibility:

Accessibility allows people to read and interact with your content despite disabilities and/or physical limitations. The aim is to make the web usable for everyone through conscientious design. There are several tools you can use to make your website more accessible.

Alt Text: All page builders will have a way of adding alternative text to your images, this is for screen readers used by the visually impaired. Alt text will be read out to the visitor, so ensure you give a clear description of the image. However, If the image is purely decorative you can leave the alt text empty. Alt text is also beneficial for SEO as it helps Google scan your site and better understand your content.
Keyboard Accessibility: Some users may have trouble using a mouse or not use one at all, ensure users can tab through interactive components of your site, such as menus and forms.
Text Size: Most modern browsers have a setting for users to increase the default font size, making it easier to read. When setting the font size of your text it is important to specify it in ‘rem’, which is the font size of the root html document. For most users this is 16px so 2rem would equate to 32px and so on, however if this setting has been changed it would increase the base root font size. 2rem may now equate to 40px. This ensures your site displays larger font sizes for people who have difficulty reading small text. Remember to specify your widths and heights in rem as well, otherwise it can result in overflow. This is because for visually impaired users the text will scale up, but if the containers' size is measured in pixels, it will stay the same.

8. Make your Site Responsive

Although you may not intuitively think about designing your website for mobile, over half of all website traffic originates from mobile devices, ignoring these users results in losing a significant amount of customers. Google also ranks your site higher if it is mobile-friendly, increasing SEO. If you are using a site builder your pages should already be relatively mobile responsive, navigate to the responsive menu and test how your site looks on different devices, making tweaks where necessary. There are two important factors to consider when designing your site for mobile interfaces:

Touch-Friendly: Ensure your buttons are large enough to be easily used on a touch screen, there should also be sufficient space between buttons to prevent users from accidentally pressing the wrong one.
Text Size: Text should be relatively large as although the editor may appear large on your monitor, it will be scaled down to fit on a phone. Remember this when determining font size, especially for people who may have difficulty reading small text.

9. Implement SEO

Once you have finished your design it’s time to optimise your site, helping your website rank higher on the search engine results page (SERP). There are many techniques to improve your SEO but we will just go over the fundamentals to ensure you have a good foundation. If you want to learn more about SEO you can find our in-depth article here.

Heading Tree: Google uses your heading structure as a tool to understand your website and its content. You should have one H1 tag which is considered the page title, it should be descriptive of that page and include popular keywords. Beneath that headings should be ordered and logical, with H2 tags for subheadings, H3 tags for sub-subheadings and so forth. It is also very beneficial to include popular keywords in your subheadings.

URL: The slug is the end part of a URL after the slash, e.g. in website.com/clothes, clothes is the slug, this is the individual key for each page on your website. Your slug should be the keyword with the most monthly searches that is relevant to that page. This should be generic because you want the page to rank for a variety of search phrases. It is also important not to repeat phrases in your URL so you cannot include any words from your domain in your slug. For example, a good slug would be ‘divine.com/yoga-clothes’, or ‘divineclothes.com/yoga‘.

SEO Title Tag: This is the link that appears on the google search page, most builders will generate this automatically, but it is best to create your own optimised for SEO. This should include the keywords just below the one used for your slug. Often you can fit 3-4 keywords, but you want to avoid sounding ‘spammy’ at all costs. A good example would be ‘Yoga Clothes for Men and Women – Tops, Vests & More’. This includes several popular keywords while still feeling natural. WordPress users can download the Yoast SEO Plugin to do this.

There is a lot more to SEO but this is all we’ll cover in this section. If your websites ranking is something you are interested in, we highly recommend outsourcing an SEO professional to manage your SEO campaign.

10. Get Feedback

Once you have completed a draft version of your site it’s best to get other people’s opinions and ideas before publishing. You can ask friends, family, colleagues etc, for their input, even setting up video meetings to discuss flaws and possible improvements. Ensure you have variety in the people you are gathering feedback from, as well as including people in your target audience. This will position you to get a lot of valuable feedback.

After receiving your feedback, you should implement all the improvements and address the issues raised to the best of your ability. It’s important to go back to the person who originally gave you the feedback and see what their thoughts are now, and if they have any additional input. Through this cycle your website methodically improves, becoming more accessible and enjoyable to the public.

11. Launch your Website

After you have received feedback on your website you are ready to publish your website. If you are using a template builder like Wix or Squarespace they offer hosting through the platform which is very intuitive to set up. For WordPress and coded sites, you will have to purchase a domain and find a third-party hosting provider. We recommend SiteGround as a hosting provider due to its affordability and user-friendly interface. SiteGround also allows you to purchase domains through their site, reducing the complexity of launching your site.

For WordPress users often the site is built locally, to transfer it into an online site you need to use a migration plugin to ensure everything is copied. There are many plugins, but we have found the most reliable to be WPvivid. Simply download and activate the plugin, then navigate to the WPvivid settings.

Click Backup Now to save a snapshot of your website. This will create a backup just below, once it has finished loading click download to save the file to your computer.

Once you have found your hosting provider create a blank WordPress website and download the WPvivid plugin on the blank site. Navigate to the settings again but this time go to the upload tab. Here you can select you file you downloaded in the previous step.

Once your website has finished uploading it will appear in the Backups tab, navigate to this tab and click restore on the backup.

This will import your site into the live installation. After the plugin has finished visit your website in another tab and start looking for any bugs or issues with your site. Visit the website on your phone and various screen sizes to test its responsiveness.

12. Maintain & Improve your Website

Maintenance:

Your website isn’t finished when it’s published, you still need to maintain and monitor your site to ensure it succeeds online. If your website is built on WordPress, it is crucial you download all major updates as quickly as possible. This is due to the open-source nature of WordPress, malicious users are constantly scanning the code looking for ways to infiltrate WordPress. In response WordPress is constantly upgrading and increasing its security, leaving a WordPress installation out of date leaves your site vulnerable to attacks.

If your site is hijacked and malicious code is injected such as malware, it could tarnish your brand’s reputation and will significantly drop your search rankings. If you don’t have the time to manage your website, we offer a hosting and maintenance package so you can sit back and focus on what your business does best, while we keep your website live and secure.

Monitor Analytics:

You should monitor analytics to understand how your site performs and assess how changes affect engagement, this ensures your site performs to its potential. The first analytic tool you should connect is Google Analytics. This will give you various key performance indicators to understand how users interact with your website. Most page builders come with Google Analytics built in, WordPress users can insert a tracking ID directly into header.php file, however for beginners you can download the MonsterInsights plugin which will guide you through the google analytics setup without any technical knowledge required. Once you have linked Google Analytics you will be presented with various data:

Sessions: A session is a single users visit on your website; this is indicative of how many users are visiting your website in total.
Pageviews: This is the total number of views received by all pages on your website, this can be compared with sessions to determine how people move through your website, do they browse many pages or does the average user only view one.
Avg. Session Duration: This is the average time a user spends on your website, this is an excellent metric for engagement, it will determine how well your website hooks in your viewers.
Bounce Rate: This is the percentage of people that leave your website without interacting with or clicking anything. This metric is used by google, punishing high bounce rates by lowering their position in the SERP. A good bounce rate depends on industry, we recommend using an online tool like Semrush (the free version will work) to compare your competitors bounce rates, looking at the sites with low bounce rates and taking inspiration.

Through monitoring these changes you can work on areas where your website falls short and build an understanding of the relationship between the changes you make and their effect on your site’s performance.

If you want to further your website’s reach a great place to start is investing in SEO. There are a lot of SEO providers, but we would appreciate it if you would have a look at our plans. We pride ourselves on being developer-run so we can offer our services at extremely competitive prices.

How to Design a Website in 2024: Simple 12-Step Guide