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:
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.
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:
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…
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.
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.
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:
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.
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.
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.
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.
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:
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.
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.
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.
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-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.
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:
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.
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:
Here are some of the main aspects:
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.
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.
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.
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:
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.
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.
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!
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.
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:
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.
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).
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.
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.
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:
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.
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.
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.
I’ve put together a few tips to help you maximize the effectiveness of the images you use on your website:
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.
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.
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.
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.
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.
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:
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.
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.
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.
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:
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 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.
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:
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.
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.
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.
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.
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.
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.
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.
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:
Take things slowly, stick to it, and you will have your own website online before you know it.