Figuring Out How To Design A Website: The Complete Beginner’s Guide

In this post, I’m going to help you choose the right platform for your website – and then share some tips on how to design its pages, interface, and even content.

If you’re a website building beginner without any special skills or development experience, figuring out how to design a website can be confusing.

Fortunately, these days, designing a website is not as difficult as it used to be – there are plenty of good tips you can follow and awesome tools you can use. And in this post, I’ll try to give you a crash course on website design.

Here, I’m going to talk about more than a dozen important things – all in all, however, they boil down to the 5 main topics.

These are the main things to consider when learning how to design a website:

  1. Decide which platform you’re going to use. 
  2. Figure out a structure for your website.
  3. Design your webpage’s look. 
  4. Add content to your site.
  5. Publish and update your project. 

1. Decide the Platform1.Decide the Platform

All of the design and editing decisions you will make will depend on one very simple thing – the platform of your choice. How come?

The design options and required skill levels will strongly depend on it! You need to find the right tools to do your best work.

When you’re deciding which website building platform to use, you need to carefully evaluate your knowledge level and how much experience you have.

You could code your website from scratch – but that’s a whole different tutorial.

In general, these are two options for you to pick: a content management system (CMS) and a website builder.

Put your thinking cap on – it’s decision time. Let’s run through these quickly here to help you narrow down your options and choose a platform that suits your needs.  

Why should you pick a CMS?

Using a content management system (CMS) is a more complicated option that requires at least basic web development and technical skills. Some of the most popular CMSs include: 

  • WordPress.org – WordPress.org is actually the most popular website building platform in the world. At last count, it was powering around 34% of the world’s websites, which speaks volumes about its quality. The best thing about WordPress is its versatility and design flexibility.
WordPress.org themes
  • Joomla – Like WordPress, Joomla is a powerful CMS that focuses on backend organization and developer-friendly server access. 
  • Drupal – Focusing on large websites with hundreds or even thousands of pages, Drupal is the third major CMS. Although it isn’t as popular as WordPress, it remains a great choice for those who want to build large websites. It only comes with one drawback – a seriously steep learning curve. 

Sounds good so far? Well, if you’re willing to use a CMS, there’s one thing everyone needs to know. There are some inherent features (wouldn’t call them flaws!) for all of these platforms. You will always have to…

  • Choose a hosting provider – When you use a platform like WordPress or Joomla (or Drupal!) you have to choose a web hosting provider whose servers your files will be stored on. It’s important to choose a high-quality, reliable provider who guarantees good server response time and uptime. 
  • Purchase a domain – You can think of your domain name as your “digital address”, the place where people can find you online. If you use a CMS, you will have to purchase your own domain and connect it to your hosting provider.
  • Set up your CMS – Finally, you will also have to connect your CMS of choice to your hosting provider and domain – and make sure everything’s kept up to date Many web hosts offer one-click CMS installations and automatic updates, but I wouldn’t fully rely on this. 

What does all of that get you? A system, that you can edit to your heart’s content. It means they’re powerful – but beware, as using a CMS tends to be not a very beginner-friendly process.

If you consider yourself a beginner and are only trying to learn how to design a website, I wouldn’t recommend using them. Instead, I’d consider an all-inclusive website builder. 

Why should you pick a website builder?

Unlike content management systems, website builders generally offer all-inclusive deals that come with everything you need to start designing your own website. They tend to be quite beginner-friendly, and builders like Wix are rapidly growing in popularity.

Wix homepage

However, the sheer number of website builders available can make it hard to choose the right one for you and your needs. The features and selling points of different website builders vary incredibly, which means you need to think carefully before settling on one. 

Some of the things you should look at when you’re choosing a website builder include: 

  • Design features – Different builders offer very different design tools and features, which make them suited to different niches or groups of people. For example, Strikingly is great for single-page designs, while Wix is known for its versatility. 
  • Price – Some website builders are much more expensive than others, especially if you need access to special tools or features. If you’re working with a tight budget, make sure to not overpay for the features you don’t need.
  • Functionality – most website builders are designed for specific groups of people in specific niches. Look carefully at the functionality of each builder and compare it to your vision for your website. 
  • App stores – Website builders often come with large app or plugin markets that are designed to add extra features and functionality to your website. If you want your website to have some very specific features, check out its app store – chances are, you’ll find what you need.

One of the most important things to understand about website builders is that they are almost always all-inclusive, which means that you don’t have to worry about things like hosting and domain selection.

This tends to make them much more beginner-friendly and easier to get started with than content management systems.

Definitely use a CMS if you wish to become a professional website developer. However, if you just want to design a good-looking website, a website builder will be a perfect option.

With this in mind, I’ve put together a shortlist of the best website builders for those learning how to design their own website  – just like you are. 

  • Wix – Wix is known as the most powerful drag-and-drop website builder in existence. It’s famous for its great web page design customization tools, and it allows pixel-perfect editing. It’s not the most beginner-friendly editor in the world, but you don’t need any special skills to use it.
wixpricewinner

out of 10

LIVE UPTIME
99.99 %
TEMPLATES
10
PRICING
9.5
SPEED
287 ms
FEATURES
9.7
EASE OF USE
10
PRICE FROM
$
0
00
/ mo

out of 10

UPTIME
99.99 %
SPEED
287 ms
PRICE
$ 13 /mo
TEMPLATES
10
FEATURES
9.7
EASE OF USE
10
VISIT SITE READ REVIEW
  • Weebly – Similarly, Weebly is a great all-round website builder with a focus on professional design templates and eCommerce. It isn’t as versatile as Wix, but it’s still a great choice for beautiful designs. 
weeblypricelooser

out of 10

LIVE UPTIME
99.99 %
TEMPLATES
7.7
PRICING
8.9
SPEED
612 ms
FEATURES
7.9
EASE OF USE
8.9
PRICE FROM
$
0
00
/ mo

out of 10

UPTIME
99.99 %
SPEED
612 ms
PRICE
$ 6 /mo
TEMPLATES
7.7
FEATURES
7.9
EASE OF USE
8.9
VISIT SITE
  • Squarespace – Squarespace is also known for its attractive, modern design templates. It certainly isn’t the most powerful website builder available, but it comes with some great native design tools.  
squarespacepricelooser

out of 10

LIVE UPTIME
99.98 %
TEMPLATES
9.9
PRICING
8.9
SPEED
367 ms
FEATURES
8.8
EASE OF USE
8.6
PRICE FROM
$
12
00
/ mo

out of 10

UPTIME
99.98 %
SPEED
367 ms
PRICE
$ 12 /mo
TEMPLATES
9.9
FEATURES
8.8
EASE OF USE
8.6
VISIT SITE READ REVIEW
  • SITE123 – If you’re not too worried about building a super personalized website, then SITE123 could be the way to go. It comes with a basic, intuitive editing interface that makes it a great option for those who just want to get online fast. 
site123pricelooser

out of 10

LIVE UPTIME
99.98 %
TEMPLATES
8.9
PRICING
10
SPEED
421 ms
FEATURES
8.9
EASE OF USE
10
PRICE FROM
$
0
00
/ mo

out of 10

UPTIME
99.98 %
SPEED
421 ms
PRICE
$ 10.80 /mo
TEMPLATES
8.9
FEATURES
8.9
EASE OF USE
10
VISIT SITE READ REVIEW
  • GoDaddy Website Builder – GoDaddy Website Builder is similar to SITE123 because it’s targeted at those who want to build a basic website, fast. It certainly doesn’t come with the most advanced design tools, but it’s great for those who want to learn the basics of web page design without having to worry about using a confusing editing interface. 
godaddy_website_builderpricelooser

out of 10

LIVE UPTIME
99.98 %
TEMPLATES
8.8
PRICING
9.1
SPEED
524 ms
FEATURES
9.6
EASE OF USE
9.2
PRICE FROM
$
10
00
/ mo

out of 10

UPTIME
99.98 %
SPEED
524 ms
PRICE
$ 10 /mo
TEMPLATES
8.8
FEATURES
9.6
EASE OF USE
9.2
VISIT SITE READ REVIEW
  • Strikingly – Finally, Strikingly is a website builder that’s known for its attractive single-page design templates. 
strikinglypricelooser

out of 10

LIVE UPTIME
99.98 %
TEMPLATES
8.5
PRICING
7.8
SPEED
669 ms
FEATURES
8.4
EASE OF USE
9.7
PRICE FROM
$
0
00
/ mo

out of 10

UPTIME
99.98 %
SPEED
669 ms
PRICE
$ 8 /mo
TEMPLATES
8.5
FEATURES
8.4
EASE OF USE
9.7
VISIT SITE READ REVIEW

Still no idea which one you like best? No worries – the steps on website design I’m going to cover next are universal for all website builders and content management platforms.

Generally speaking, website builders will be easier to use – and much easier to demonstrate things on.

So for this tutorial, I’ll be using a Wix website. It’s free to set up, and at least for me, it has the best combination of simplicity and advanced design features.

That being said, from this point on – all the tips will be suited for websites made on all platforms.

2. Build the Structure of Your Site2.Build the Structure of Your Site

One of the most important design considerations is your website’s structure.

You need to think carefully about what sort of content you need, how much information you plan on adding, and whether or not you plan to continue adding new pages once your website is published. 

The best way to do this is to sit down for a couple of hours and start to create a draft structure for your site

I really suggest just getting out a piece of paper (or using an online tool like draw.io) and just putting up a flowchart of all pages you plan to have on your website.

Example of website's sitemap and navigation
Laying out the structure of your website helps avoid messy design and navigation in the future.

The website you’re on right now? It started off as a drawing on a piece of printer paper.

Try and develop a hierarchy of pages if you have a lot of information to add, and try to include interesting, engaging content on your homepage. 

Above all, you need to try and make the user experience as good as possible. Starting from the homepage, every other page on your site should be reached in as few clicks and actions as possible.

But what on earth are these pages supposed to be like in the first place?

Let’s take a deeper look at this.

What’s your website intent?

The first thing that you have to think about is exactly why you’re building a website and what it needs to do. Are you trying to: 

  • Promote a business, event, or something similar. 
  • Inform people about something, such as current events or a niche topic or interest. 
  • Entertain an audience with original or curated content. 
  • Sell things through an eCommerce store. 

Or, perhaps you’re trying to do something else entirely – that’s up to you to decide. 

Ultimately, the most important thing is to make sure that you’re consistent with your intent and website goals.

And also – that the pages consistent with one another. If you want to design a website that both sells online and informs people, do the world a favor, and separate those intents into two, clearly different pages!

All too often I come across an online shop that dedicates 2,000 words describing how revolutionary the concept of their product is, burying the entire shopping catalog deep underneath. Not cool.

More pages isn’t always better

But of course, if you were to make a separate page for literally everything, things would start going really bad, really quickly.

Just like in life, in website design, it’s all about striking a perfect balance.

How to achieve it?

List the type of information you’re planning on including, and think carefully about how you’re going to present it to your readers. 

For me, one of the most important things to think about is exactly how you’re going to structure your pages

  • Do you want to add a lot of small pages with very distinct content on each? 
  • Or, is it going to be better to create a smaller number of “tall” pages that include more content? 

I’d recommend using longer pages where possible. Really, people are going to be more likely to continue scrolling down a page that they’re already viewing than they are to click through to another page – as long as the content on that one page serves the same or similar purpose.

But, you’re also going to need to consider your page load speed. If you have too much content on a page, it will take too long to load. This will impact the user experience. 

In turn, this will increase your bounce rate – the percentage of visitors who leave your website without actually viewing your content. A high bounce rate will negatively impact your SEO scores, making it harder for you to rank well on the search engine results pages. 

So, you basically need to find the balance between making your pages long enough to engage your readers, but short enough to load quickly and not negatively impact your SEO score.

Clear navigation only!

Following your pages and page structure, you need to think about how you’re going to present navigation menus to your readers. It’s extremely important to make your menus clear and intuitive. Otherwise, people will get fed up when they can’t work out how to access certain parts of your website. 

For me, the first thing to think about is where you’re going to put your navigation menus. This will obviously be different on the desktop and mobile versions of your website.

Generally, the desktop version of your website should have a header menu that directs people to important parts of your site. In your header menu, I’d recommend including links to: 

Your main header menu will obviously change according to the type of website that you’re building and the amount of content you’re adding to your site. 

But, I’ll say it again: 

The most important thing is making sure that your menus are clear and intuitive.

This one, too – the idea is that each page can be reached with the fewest actions.

You also need to consider your mobile navigation options. Most people use the traditional “hamburger” menu design, which involves a slide-out menu located on the top left or right of a website’s mobile interface.

However, menu buttons placed here are actually quite difficult to reach when you’re browsing mobile sites. Most people use their thumbs to get around when they’re viewing on mobiles, and this has led to a recent rise in popularity of “thumb-friendly” mobile navigation layouts. 

Thumb-zone screen mapping

Thumb-friendly menus are usually placed at the bottom of a mobile website, rather than in one of the top corners. This makes them much easier to access, which in turn should increase the amount of time people spend browsing your website. 

As you can probably see, your navigation and menu design are extremely important. If you’re not too sure about the best way to present menus on your website, I’d recommend taking inspiration from large, successful sites in your niche. 

Functions needed

Finally, you need to decide what specific functions you need and where different elements should be placed to achieve these. For example, if you’re planning to add a lot of visual content to your website, you might add image galleries to different pages. 

But, there are many more things to think about than this. Some of the more specific elements you should keep in mind when you’re thinking about your web page design include: 

  • Call to action buttons. If you’re trying to sell products, get people to sign up for a newsletter, or encouraging your readers to perform any other action, call to action buttons are a must. They should be prominent, attractive, and strategically placed for maximum effectiveness. 
  • Graphs are very useful tools for displaying data and keeping things clear and concise. If you think graphs can be useful for your website, you need to think about where you’re going to put them and how you’re going to format them. 
  • Search features can be particularly useful if you’re planning on building a large site with a lot of content. Make sure that you place your search box in a logical place that’s easy to find and use. And oh – make sure the thing works, because that’s a common issue (but more on that later).

The exact functions that you include with your website will depend on your needs and long-term goals, but hopefully, I’ve given you an idea of where to start. 

And once again, no need to be overwhelmed. Even if you’re not completely comfortable with everything that we’ve covered so far, things will become clearer when you actually start to design your own website. 

3. Design the Look3.Design the Look

Once you’ve got your structure sorted you need to start working on the visual design of your website. There is a range of things that you need to consider. Unless you’re building your site from complete scratch – which I wouldn’t recommend anyway – you will need to choose a starting template. 

You will also need to think about the color scheme and fonts that you’re going to use, any symbols and icons that will be part of your site, and what images are going to be placed where. A good website is generally: 

  • Consistent throughout, with similar design features on every page. 
  • Minimal to some extent, with every element playing a role and bringing some sort of meaning to your content. 
  • Easy to follow, which means that your overall design shouldn’t distract your readers from your content, but should complement it. 

Here are some of the main aspects:

Selecting a template

Before you can really think about fine-tuning your website design you will need to choose a template to base your site on. If you’ve followed the steps above, you should already have quite a good idea of what you want your site to look like, which means that it shouldn’t be too hard to find the right template.

Fortunately, most website builders tend to categorize their templates based on their features and the type of website that they’re best suited to. For example, Wix’s 500+ templates are heavily categorized on two levels, which gives users the ability to choose a template based on their general goals. 

wix templates

However, it’s still very important to make sure that you take your time when you’re choosing a design template for your website. Start by looking under the relevant category, but I’d really recommend exploring a range of different types of templates and choosing the one that best fits your desired website.

What if you’re not using a website builder, but instead employ a CMS?

Depending on the CMS of your choice, you will have a pick of various templates – as a matter of fact, there are plenty of free and premium themes that can serve as a great starting point.

Shops like Template Monster have thousands of options for each major CMS platform.
|

Color SchemeColor Scheme

Similarly, you need to think carefully about the colors you’re going to use on your website. Make sure that you choose complementary colors, and stick to your choices throughout your entire site. 

Once again, consistency is the key to creating a professional online presence. Chopping and changing between colors is not a good design technique, and it won’t help you attract more readers to your website. 

Although you might feel completely lost in terms of choosing the right colors for your website, you shouldn’t. Most website builders come with built-in color matching tools to help you choose colors that work together

For example, when you use Wix ADI to build your website, you will be given a number of color recommendations as part of the overall website creation process. Think about your choice carefully, but don’t worry too much – you can always change your color scheme later. 

wix color pallete

When you’re choosing a color scheme for your website, I’d recommend thinking carefully about your goals and the way you want to present your site. For example: 

  • Vibrant colors can be used to create a feeling of excitement or happiness. They are great for game or entertainment style websites. 
  • Black and whites are becoming increasingly popular. Using a greyscale color scheme prevents distraction and allows people to focus on your content and the message that you’re trying to get across. 
  • Company colors should be used if you already have an established brand. In this case, it’s important to make sure that your website is consistent with your existing branding.

I had a quick look at a couple of existing websites to show you an example of what works. I loved the greyscale color scheme on the Mike Kelly Art website, which really directed my eyes to the actual artwork on display. Notice how even the social media icons are black and white. 

Mike Kelly Art website

Although it might seem like there’s a lot of pressure to choose the “right” or “best“ color scheme for your website, it may be just valuable to pick the premade scheme from your theme or logo.

Or, better yet, you may do some DIY!

Looking to match colors yourself? Here’s a handy tip on how to choose the colors that go well together.

Make sure the colors have the same level of brightness and saturation. The easiest way to do it is to open a picture-editing app that has a color panel included, like Photoshop.

Then, set the saturation and brightness sliders to your desired levels.

color picker

And then, simply start changing the hue to get a different color – voila, these two colors match together and can be used to make a scheme!

color picker

Ultimately, there’s no right or wrong choice on how you create your visual identity. Using premade schemes and templates is fine. Making your own is fine, too.

Play around with your design, and do your best to come up with colors that you find attractive and which work alongside your other design features. As the old saying goes, “if it works, it works”. Or something like that.

|

FontsFonts

Along with your color scheme, your font selection is one of the most important design considerations when you’re building a new website. The fonts you choose can say a lot about you and your message, especially if you decide not to use conventional font pairings. 

It’s usually a good idea not to use too many different fonts on one website. I’d recommend using one for headings and one for your general content.

Using the same font for everything makes your website look stale and bland. Nothing pops out – when it should.

Choosing a font shouldn’t be a hard process. Make sure that your: 

  • Fonts complement each other. Even if you use a few different fonts for different parts of your website, it’s important to make sure that they work well together. 
  • Headings and titles are easy to read. People are lazy. If you don’t make things easy for them, they won’t explore your website – it’s as simple as that. 
  • Website font selection is consistent with your offline branding. If you’re building a website for your existing business, you need to make sure that your branding – which includes your font selection – is consistent throughout. 

Unfortunately, the Wix Editor is actually a little confusing when it comes to font selection. Rather than setting fonts for your entire website, you will have to select your font for each textbox or title that you add. Ultimately, you just need to make sure that you stay consistent throughout your website. 

wix font selection

This is where other builders like Squarespace, get extra points. Because on Squarespace, you can choose from thousands of fonts, and apply them to a specific type of content (i.e. headings, navigation, body text).

squarespacepricelooser

out of 10

LIVE UPTIME
99.98 %
TEMPLATES
9.9
PRICING
8.9
SPEED
367 ms
FEATURES
8.8
EASE OF USE
8.6
PRICE FROM
$
12
00
/ mo

out of 10

UPTIME
99.98 %
SPEED
367 ms
PRICE
$ 12 /mo
TEMPLATES
9.9
FEATURES
8.8
EASE OF USE
8.6
VISIT SITE READ REVIEW

That being said, from many fonts available on website builder, I’m a big fan of the fonts used by French design and marketing agency Studio Ouam. Although their main heading fonts aren’t super conventional, they work. And, they are attractive and draw the eye to the important parts of the website. 

Studio Ouam website

When you’re choosing fonts for your website, you shouldn’t worry too much about making the “perfect” selection. Instead, focus on finding fonts that you think look good and that are consistent with your general branding. 

|

IconsIcons

When you’re learning how to design a website you will need to carefully consider what sort of icons you’re going to use and where you’re going to use them. A good website uses symbols and icons cleverly, working them in with the rest of the web page design to improve the overall quality of the site. 

There are a few different types of icons and symbols that you should keep in mind when you’re designing a website, including: 

  • Logo – Your logo is an essential part of your brand identity and should be one of the first things that you develop when you’re designing a website. If you don’t already have a logo, there are plenty of design tools out there that you can use to make one. You might also choose to pay someone to make one for you. Or – you could use a logo creator from a website builder. Wix has one.
  • Favicon – Your favicon is also a very important part of your site’s identity. Basically, it’s the small image that’s shown next to a website’s name on your browser tabs. Your favicon should be similar to your logo, immediately recognizable, and memorable. If your logo is minimal, it would do as well.

A great example of how icons should be used effectively can be found in the Maapilim online store. It uses four selling points to engage with potential customers, and each of these points is paired with a symbol that draws the eye and helps convey the desired message.   

Maaplim online store

Although they are generally small, icons and symbols can form an important part of your overall website design. Think carefully about what sort of icons you’re going to include and where you’re going to put them. 

|

ImagesImages

Finally, visual content like images can be what makes or breaks your website. When used cleverly, images can turn even the dullest written content into something worth reading.

However, low quality or poorly placed images can do just the opposite, detracting from your site and negatively impacting your design efforts. 

animations in a website
Good idea, bad execution.

I’ve put together a few tips to help you maximize the effectiveness of the images you use on your website: 

  • Be careful using stock photos. Although stock photos can work – sometimes – it’s usually a good idea to avoid them or limit the use to a minimum. Instead, I’d recommend taking custom pictures that are related to your brand and website goals. 
  • Make sure your images are relevant. You shouldn’t ever add pictures just for the sake of it. Instead, you need to make sure that all of the images you use complement your written content, either supporting a point or providing evidence of a product or service. 
  • Think about using a background photo. Some website designs work well when a background image is used. If you do decide to add a background image, then you need to ensure that it is relevant and attractive but doesn’t draw the eyes away from the rest of your content.  

Background images can cover your entire site, or they can be used for certain sections. For example, the website of football freestyler Tobias Becs uses an attractive header image which brightens the page and immediately made me want to keep browsing. 

Tobias Becs website

And Strikingly website builder makes a very good case, how you can get a background image and useful information all in one place. The key is really simple – a colored overlay, that doesn’t allow the image to pop out.

strikingly homepage
strikinglypricelooser

out of 10

LIVE UPTIME
99.98 %
TEMPLATES
8.5
PRICING
7.8
SPEED
669 ms
FEATURES
8.4
EASE OF USE
9.7
PRICE FROM
$
8
00
/ mo

out of 10

UPTIME
99.98 %
SPEED
669 ms
PRICE
$ 8 /mo
TEMPLATES
8.5
FEATURES
8.4
EASE OF USE
9.7
VISIT SITE READ REVIEW

Website builders like Wix make adding different types of images or visual content to your website quite straightforward. Wix allows you to upload pictures from various sources, including Facebook and Instagram. Its design flexibility makes editing and positioning visual content very easy, and you can effectively put what you want, where you want it.

wix image gallery

Ultimately, you need to make sure that you use high-quality, relevant images when you’re designing your website. As the old saying goes, “a picture is worth a thousand words” – but make sure those thousand words are good enough and in line with your content.

4. Build the Content4.Build the Content

By now you should have a platform, an idea, and a design outline. But we’re not done yet.

Once you’ve figured out your general design and fine-tuned more specific things like color schemes and fonts, it’s time to start adding content

When you’re adding content to your website you need to be careful to make sure that it’s streamlined and relevant to your brand and general goals. You should always prioritize quality over quantity, and it’s a good idea to have at least a basic understanding of key search engine optimization (SEO) techniques. 

Without further ado, let’s jump into the different types of content you should add and what it should look like. 

|

Written ContentWritten Content

If you’ve read this far, you should already have quite a good idea of what your website is going to look like, including your page structure and navigation style. But, you will also need to add content to your pages that is both engaging and relevant

Unfortunately, creating high-quality written content isn’t as simple as just jotting down a few things on Microsoft Word and uploading it to your site. You also have to think about: 

  • User intent – First and the most important thing – you have to make sure that your content is actually providing the information or answers that people are searching for. Make sure that you’re writing with the user intent in mind. Otherwise, your website won’t be anywhere near as successful as it could be. 
  • Keywords/phrases – Search engines place much less emphasis on keywords and phrases than they used to. But it’s still a good idea to do some research and include relevant phrases in your title, headings, and general content. This is especially important if you’re building a location-specific website. 
  • Paragraph structure – Similarly, you should also break up large paragraphs into numerous smaller ones. Try to keep your paragraphs short and concise, covering one simple idea at a time. 
  • Subheading structure – If you’re not an experienced writer, it’s easy to fall into the trap of offering walls of text to your readers. I’m telling you right now that this is a bad idea which should be avoided at all costs. You should always try and break up your content as much as possible with informative subheadings so that your readers stay engaged without becoming overwhelmed or bored. 

Important: Use heading tags (H1, H2, H3, etc) for your content! Don’t just make the font larger and bolder! Heading tags simplify your website for the search engines, and make it easy to understand what topics the site is covering.

Once again, remember that less is sometimes more. Most people would rather get answers to their questions quickly rather than having to read through a thousand-word article to find the sentence they’re looking for. (“Hey, but aren’t you already like 5,000 words into this post?” Yes I am, don’t be rude.)

The Folly Coffee website excels when it comes to presenting high-quality, informative written content. It uses headings and subheadings that immediately make you want to read more, followed by short paragraphs that expand on these. 

Folly Coffee website

So, you’ve got your page content written and uploaded. But wait, you’re not done yet! 

If you want to really drive your website to become successful, you also need to create regular blog posts. These could be informational, provide business updates, or simply be entertaining pieces of writing that make people want to explore your website. 

It can be hard to know exactly how to write a good blog post, and what exactly captivates users. Well, one of the best minds in the industry is Neil Patel. His guides on blogging are great if you’re looking to start from scratch.

Neil Patel's blogging tips

But I don’t need to focus too much on this – it’s a blog post on how to design a website after all! Your website needs to have written content – obviously – but you need to look for quality over quantity. Add some content to your pages, and then think about developing a long-term blog strategy. 

|

Visual ContentVisual Content

Creating high-quality written content might be important, but adding the right visual elements is essential if you want your website to succeed. You need to make sure that your visual content is consistent throughout your website, and that it compliments and adds to every page. 

The type of visuals you include in your website design will depend on the type of site that you’re building, but the most important thing is that everything you add is relevant. Your visuals should be: 

  • High quality – Make sure you only include high-quality visual content. Don’t add things like blurry photos, shaky videos, or poorly-made infographics. Otherwise, your site will appear unprofessional and low-quality. 
  • Consistent – You should use a similar style throughout your website. For example, if you use one type of infographic on one page, I’d recommend using the same format for any other infographics on your site. 
  • Informational – Never add pictures or videos for the sake of it. Make sure you always refer to your visuals in your written content and that they add value to the page they’re on.  
  • SEO optimized – Search engines can’t recognize images or videos on their own. You need to add things like titles, captions, descriptions, and alt texts that are informational and relevant to the visual in question. 

Fortunately, most website builders make it easy to upload and manage your image and video libraries, and Wix is no exception. It allows you to upload images directly from your computer, Facebook, and Instagram, among other things. 

Wix image upload

Wix also provides integrations with websites such as Shutterstock, but I’d be careful using too many generic stock photos. 

As you should be able to see, learning how to choose the right visual content is crucial when you’re figuring out how to design a webpage for the first time. When used well, visuals can turn a mediocre website into an industry-leading one. But, poor-quality or irrelevant pictures and videos will only detract from your site. 

SEO

Finally, search engine optimization (SEO) is an essential part of designing any website. Although it has less to do with your design itself and more to do with the user experience and your written content, you still need to think about SEO basics every step of the way – especially if you’re making a website for yourself. 

Basically, optimizing your website for SEO will help you rank well on the relevant search engine results pages. Hundreds of different factors are taken into account when determining your SEO score, but some carry a lot more weight than others. These include: 

  • Keywords and phrases – You need to make sure that you include relevant keywords and phrases throughout your website. For example, if you’re trying to build a small plumbing website in location X, you need to include keywords like “location X plumbers” and “plumbing services in location X”. This will help people find you and your website. There are several keyword research tools available that would reduce the amount of guessing you’d have to do.
  • The user experience – Although search engines used to focus more on keywords than anything else, this has changed over the past few years. Advances in AI technology mean that search engines now tend to focus on the user experience more than anything. Basically, you want to encourage visitors to your site to browse for as long as possible, clicking between pages and actually reading your content. 
  • Link-building – When other websites link back to your site, you are seen as something of an “authority” in your niche. You can encourage links by writing guest posts, listing your site in various online directories, and creating high-quality content that encourages natural linking.

Note that these are just a few of the most important SEO ranking factors. There are hundreds more, and it’s worth doing some research and building a strong SEO strategy for your website.  

Fortunately, most website builders tend to include SEO tools to help website design beginners like you optimize their sites. 

For example, Wix comes with a built-in SEO Wiz that will guide you through some of the most important aspects of your website’s SEO. 

Wix SEO wiz

As you can see, the Wix SEO Wiz will help you set things like your website title and your SEO meta description, while guiding you through the best ways to optimize your content. 

SEO wix wiz

To put it simply, SEO is crucial if you want your website to be visible online. While it isn’t a major part of the website design process as such, it’s still important to think about it when you’re building your first website. 

If you aren’t familiar with SEO best practices and the best ways to optimize your website, I’d recommend doing some research – but don’t worry, basic SEO isn’t actually that hard. It only becomes a mess once you dive in deeper but hey, we’ll jump that hurdle when we get there.

5. Publish and Update5.Publish and Update

The final step in the website design process is publishing and maintaining your website. Once you’ve added your content, fine-tuned your design, and made sure that everything is working properly, you can click the publish button, sit back, and relax.

Ha! And you thought you were done.

There’s one important, and very painful truth about making your website.

“You need to test every single part of your website before it goes live. Then test it again. Then get someone else to test it for you”

This means that you need to click through your site on as many different devices as possible, using as many different web browsers as you can to make sure that everything looks right. Pay special attention to your mobile site, because small design errors can easily pop up that detract from your site’s overall appearance. 

Similarly, make sure that you proofread everything at least two or three times. Once you’ve done that, get someone else to check over your entire website for you. This will take time, but it will save you from customer complaints and issues in the future. 

Well done! If you’ve made it this far, take a few minutes to sit back and pat yourself on the back – you’re now the owner of your very own website!

But, the work doesn’t end here. A good website should be constantly improving, which is where ongoing analysis and maintenance comes into play. 

Analysis and maintenance

Once your website is published and people start engaging with your content, you need to make sure that you’re keeping on top of things and making small design changes to optimize the user experience. 

There are various different analytics tools that you can use to track your visitor interactions and the parts of your website that are performing well. Most website builders come with some form of visitor analytics and also allow you to connect your Google Analytics account. 

For example, Wix doesn’t include very powerful native analytics features, but it allows you to add any one of a range of analytics apps to your website. Most of these apps allow you to track a wide range of website metrics. 

Analytics integrations on Wix

Wix also allows you to connect your Google Analytics, Facebook Pixel, Yandex Metrica, and more. Basically, you can integrate any third-party tracking tool you want to by adding a custom code snippet to your Wix website. 

Tracking tools on Wix

Once you’ve identified which parts of your website are working well, you can use them to inform future marketing and design decisions. 

For example, if one of your blog posts seems to be a lot more successful than the rest of your posts, you need to try and figure out what that post has that your others don’t. It might be that the more popular post has more engaging infographics, a more readable layout, or simply a more interesting topic. Whatever it might be, you can use it to make future posts more engaging. 

Similarly, most analytics tools will tell you what devices your readers are using, where they’re browsing from, and how they’re finding your website. You can use this information to inform future marketing decisions and website updates. 

Remember, a good website is constantly evolving

Your work isn’t finished when you hit the publish button. Sure, you’ll have a high-quality, well-designed website, but you need to make sure that you’re continually working to improve things and drive more visitors to your site. 

|

ConclusionConclusion

Some people or experiences may leave you thinking that designing a website is a near-impossible task.

Well, it’s not true. Sure, it’s not simple. But as long as you have a full plan ahead, all you need is a platform you can trust and a solid amount of work. No superhero mutations or special mountain training needed.

First, you need to decide what platform you’re going to use. Some people use content management systems like WordPress.org or Joomla, but these can be a little difficult to get started with. I’d recommend using an all-inclusive website builder such as Wix or Squarespace. 

Once you’ve settled on a website builder, it’s time to sit down and think about your site structure. Consider the intent of your website, and the intent of the users visiting the page. Make your website simple, all the pages easily accessible.

From here, you can start fine-tuning your design. If you’re using a website builder like Wix, you will need to select a template to base your site on. You will also need to select a basic color scheme, font pairings, icons, and key images to build your site around. 

And then – it’s all about the content that your visitors will actually see.

Finally, you will need to put your website through a rigorous testing process before you hit the publish button

But, things don’t end here. A good website is constantly evolving, which means that you should always pay attention to visitor metrics and make informed updates based on them. 

There are two things that I’d like to touch on quickly before I let you go: 

  1. Although I’ve presented these steps one after the other, they are actually interconnected to some extent. 
  2. Website design isn’t difficult! Anyone can do it, so don’t be discouraged if you’re feeling overwhelmed at first. 

Take things slowly, stick to it, and you will have your own website online before you know it.  

Paulius M.
Paulius M.

The Article Author

Editor-in-chief of Website Advisor, Paulius spent several years of his career building, testing, and breaking websites. Not an avid website builder fan at first, he soon started admiring the concept and is now dedicated to helping people go online quickly. He also follows at least 8 professional sports leagues and loves baking. Go figure.

|Leave a Comment (0)