How to Design a Website in 2020 [Step-by-Step Tutorial]

Written by:
Chloe West

how to design a website - header

Designing your own website seems like an impossible task. But with the right tools, tips and visual resources, you can absolutely accomplish it. This is why we’ve put together a quick step-by-step tutorial to show you how to design a website.

Not only that, but how to design a website that will convert. Because user experience and ease of use are just as important to ensure that your website does its job of informing and selling to your customer.

But don’t worry – you don’t need to start learning how to code or stressing out about a long, drawn out design process. Of course you can always hire a professional web designer, but if you don't have the budget, follow along with us.

Our website design guide shows you how you can easily use all of the readily available tools, resources and trends out there in 2020 to create a basic, easy-to-use and easy-to-update website.

Let’s dig in.

 

Step 1: Determine Your Site’s Objective

The first step in designing your new website is to determine what the main objective of your site is. Why are you creating this website? How does it need to function?

There are many different types of websites. You might want to create a one of the following.

how to design a website - types of websites
Create your own infographic today!Try It For Free
  • Online store
  • Portfolio
  • Blog
  • Landing page
  • Resume
  • Event site
  • Brand website

And each one can be just as equally important as the next.

While each one will have different pages, copy and visuals, what they all have in common is that you need to follow each of the next steps to get to completion.

 

Step 2: Pinpoint Your Domain Name

Choosing a domain name is one of the most important things you’ll do, as it’s the address to your website. It needs to both match your business name and be easy for your customers to type into their navigation bar.

This means you don’t want to include numbers, hyphens and other characters within your domain name. You want to be able to easily say your website URL and have someone be able to type it in without any trouble.

Regardless of where you choose to host or set up your website, you’ll need to purchase a domain name from a registrar.

If the business name you’ve chosen isn’t available, you might want to look into changing it unless you’ve already started to establish your presence. If this is the case, you can start to look into different domain extensions.

For example, our website is visme.co. While we have visme.com redirecting to our main URL, we chose .co as our domain extension.

There are a variety of extensions, like .com, .co, .net, .online, .site and more, but the most common one is .com. This is why it’s a good idea to choose a basic .com website, however you can still work with other domain extensions.

Once you’ve found your domain – ideally yourbusinessname.com – it’s time to click that buy button and make sure you own it. You’ll have to renew your domain name each year, but many of them are only about $10-20 each time.

 

Step 3: Choose Your Website Platform

Now that you know what type of website you plan to create, your next step is to choose your website platform.

We’re covering four of the most popular website platforms, each for varying website objectives and design knowledge. If you know how to design a website using a bit of code and content blocks, some could be easier for you than others.

WordPress

Easily the most popular website platform, 20% of self-hosted websites are powered by WordPress. This is because it’s so incredibly versatile and customizable.

You could look at five completely different websites that have absolutely no design elements in common, and each one could still be a WordPress website.

But with great power comes great responsibility.

Yes, you can create a robust and completely unique website with WordPress. But it also requires you to get your own hosting plan, purchase and upload your theme, and fully build your website from the ground up.

Hosting

Let’s start with the first thing you’ll have to take care of if you choose to create a WordPress website, and that’s your website hosting.

There are many different hosting options, like BlueHost, GoDaddy or DreamHost, each with their own plans based on what you might need for your website.

To give you a sneak peek into the types of hosting plans you might choose from, here’s a look at BlueHost’s options.

how to design a website - hosting options

For a blog or portfolio website, you might be able to get away with a shared hosting plan, but if you’re building a website for an online store or another area where people would be inputting their payment information, you’ll need a better, more secure option.

Themes

The next thing you need to know about WordPress websites is that you’ll have to purchase a separate WordPress theme

While, yes, WordPress does offer a few free and paid options, you’ll find a lot more variety if you check out an online market like ThemeForest.

There, you can browse through professionally designed themes that fit various website categories, like a blog, an ecommerce website, a real estate site and more.

how to design a website - wordpress themes

Once you find a theme, you can purchase it through ThemeForest and download the theme’s zip file to upload to your WordPress website.

Plugins

Another thing that really sets WordPress websites apart from the rest of the platforms we’ll mention is the ability to add plugins to further customize your website.

There are WordPress plugins that allow you to connect analytics, create an online shop, easily change your design, make it easy to share blog content and more.

Often, the ability to add and take advantage of the thousands of plugins causes people to choose WordPress, but if you want something much more basic, we have more options.

Squarespace

Squarespace is an easy drag-and-drop website builder that helps users with little to no website design experience create a beautiful website that can work for their objectives. Plus, you don’t have to worry about external hosting.

With Squarespace, you’ll simply choose from one of their website template options based on the type of site you’re looking to create and then customize from there.

how to design a website - squarespace templates

From your Squarespace dashboard, you can add, edit and delete pages easily. You can add a blog to your website, create secondary page navigation and more.

Squarespace also hooks up to certain website tools like Google Analytics and allows you to input necessary SEO information to rank in search results.

Wix

Another drag-and-drop website builder that will host your website for you is Wix. Simply browse through their website templates to find one that suits you and start customizing.

how to design a website - wix templates

Wix is very similar to Squarespace in its features and the way you create and customize your website pages.

You can also access analytics and SEO with your Wix website, which is an essential function for anyone hoping to build a successful website.

Shopify

The last website platform we’re going to cover is Shopify. While Shopify websites are much less customizable, they’re perfect for online shops who want to start selling their products with little to no hassle.

You’ll still choose a store theme to create a website look and feel that matches your branding, but your customization options are much more limited.

how to design a website - shopify themes

One reason why Shopify is very popular is its app marketplace. There are plenty of third party apps for all kinds of e-commerce solutions like inventory management, shipping, marketing, customer support, etc.

Make sure you also install some of these security apps that can protect your website from attacks and also recover your store in case of any disruption.

Then once you choose a theme, simply activate it on your online Shopify store, add your products, input some copy and most of the work has been done.

 

Step 4: Select Your Theme/Template

Now that we’ve shown you the website platforms and where you can find themes or templates for each one, it’s time to jump right into this next step.

After signing up for your website platform of choice, start browsing through your design options. While each website will likely still need tons of customization to fit your brand and web page needs, this helps provide a great starting point.

If you’re choosing a WordPress theme, you’ll have to upload the zip file under the Appearance > Themes section in your left sidebar.

Each other website platform will allow you to activate the theme internally, since you’ll be choosing your selection right from their website.

 

Step 5: Create Your Site Map

The next step in designing your website is to create a site map and determine how many pages you need to create.

The reason creating a site map is such an essential step is so that you don’t go in blindly and not have a full idea of what your website will cover.

A good site map tends to include pages like:

  • Home page
  • About page
  • Product/services page(s)
  • Blog
  • Contact page

Of course, each business and website objective is different, so just make sure you cover the most important services, features, aspects, etc., of your business within your website.

You can use a flowchart like the one below to help you organize the way your website should look and where pages should live in your navigation.

how to design a website - use a flowchart to create your site map
Customize this flowchart template and make it your own!Edit and Download

Step 6: Write Your Website Copy

Once you know which pages you’re going to need on your website, you can start writing your website copy. While website copy doesn’t necessarily need to be long, it does need to be enticing.

You want your website copy to really draw your website visitors in so they take action and start to work with you and your business.

Here are a few tips to start writing compelling website copy that drives conversions.

Talk to your ideal customer.

Be sure that when you’re writing your website copy, you’re keeping your target audience in mind. Write directly to them, because they’re the ones that are going to be reading this.

You want to write in a way that convinces them to take action, not the whole world or a different market segment. Only talk to the people who would be in the market to buy your product or service.

Keep it short and concise.

Website copy is not a blog post. It needs to be straight to the point, a paragraph (at most) at a time in each section of your home page.

Even on our website, the longest of our landing pages has only about 1,200 words, while our blog posts tend to start at 1,500 at a minimum.

Take a look at this section on our logo maker landing page.

how to design a website - concise website copy example

We have a big, attention-grabbing headline, a smaller paragraph of content, a button and a visually appealing graphic consisting of our logo templates.

Website copy is not meant to be walls of text, but simply supporting copy alongside videos, graphics, call-to-actions and things like that.

Bold important words or phrases.

To help your smaller paragraphs stand out even more, bold some of the more important keywords within so your website visitors can further skim your pages.

Here’s another example, this time from our design collaboration landing page.

how to design a website - bold important words example

Bolding various words help them to stand out and let readers know what’s most important in each line.

Include keywords.

You want your landing pages to rank in Google, right? This means you need to optimize your copy for search.

Include important keywords within your copy, and try to focus on a single main keyword for each landing page to better ensure you rank for that keyword.

Create calls-to-action.

Our last tip is to make sure that you include calls-to-action all throughout your landing pages to help maximize your conversions. 

Include buttons in every other section or add a floating button to the bottom of your page to get users to sign up, learn more, get a demo or whatever action you’re trying to get visitors to take.

 

Step 7: Design Your Website Graphics

Now it’s the fun part! Remember how I said that you need to include graphics and other visuals to go alongside your text? This is the perfect way to really draw users in and get them interested in your business.

If you have a SaaS company, you’ll want to include product screenshots to give users an idea of what to expect if they sign up. If you offer services, you can use stock photos or get more creative with your graphics.

And if you offer products, be sure to create stunning product graphics to help them stand out and grab attention.

You can use a graphic design software like Visme to create stunning website graphics that really stand out to your audience. You’ll want to make sure you design a logo to add to your website as well.

Start browsing through some of our website graphic templates to get started.

Web Graphic Templates

Step 8: Build Your Webpages

Depending on which website platform you chose, this could range from really easy to medium-hard.

On platforms like Shopify, Wix and Squarespace, their interface has been designed to make it easy for anyone to create and edit webpages. You’ll simply create your pages, drag content blocks around and add in your copy and graphics.

However, it can be a bit more complex on WordPress, especially based on which theme you’ve chosen. Some come with awesome, easy-to-use builders while others have a bit more of manual creation process.

Regardless, I recommend you look into some WordPress page builder plugins to help make the process a bit easier on you.

 

Step 9: Add Interactive Experiences

Want to really take your website up to the next level? Add in some interactive experiences that wow your audience and get them excited to buy from you.

What do I mean by interactive experiences?

Well, there are many different types of interactive content that you can create, many of which can be done right inside Visme’s platform.

Here’s just one example of an interactive diagram that we created with Visme to showcase how our tool stacks up against a few other top design tools.

You can easily create your own interactive diagram, presentation, infographic, ebook and more, right inside Visme, then embed it onto a webpage on your new website to engage and convert your audience.

 

Step 10: Launch Your Website

You made it! You’ve fully completed learning how to design a website and it’s time to launch. Publish your site, add the link to your social media profiles and start marketing your new website and business.

You can use a digital marketing plan like the one below to help you grow your traffic and bring in new customers.

how to design a website - digital marketing plan template
Customize this plan template and make it your own!Edit and Download

Design Your Own Website Today

Now that we’ve walked you through this guide on designing your own stunning website to grow your business and convert customers, it’s time for you to get started.

Choose your website platform, write your copy, design your website graphics, add interactivity and boom. You’ve got a fully-fledged website that’s open for business.

SPEAK LOUDLY. SPEAK VISUALLY.

65% of the population are visual learners

Create, share and download beautiful visuals with the world’s most versatile and powerful visual communication tool.

Create Your Design. Sign Up Free
 
We’re stingy and don’t share emails with anyone.

About the Author

Chloe West is the content marketing manager at Visme. Her experience in digital marketing includes everything from social media, blogging, email marketing to graphic design, strategy creation and implementation, and more. During her spare time, she enjoys exploring her home city of Charleston with her son.

5 responses to “How to Design a Website in 2020 [Step-by-Step Tutorial]”

  1. Sara Youl says:

    Lana, thanks for your useful post, Really WordPress is very easy to use CMS among all of CMS. and you know that approximately 48.46% market is conquered by WordPress. The most powerful things are of WordPress is that it has many SEO plugins which are very useful for your website marketing.

    • Lana Miro says:

      Hi Sara! Thank you for sharing your thoughts. I also prefer WordPress CMS, but sometimes it has some problems to face with. Anyway, there are a lot of forums, which help me to solve it:)

  2. compra venta relojes madrid says:

    Hey Tһere. I found you blog using msn. This is a very
    wеll ѡritten article. Ӏ’ll make suге to bookmark it аnd comе bɑck to rеad morе of yur uѕeful informɑtion. Thanks foг the
    post. Ι wіll certainlү return.

  3. Riitaa says:

    Hey Lana
    Thanks for sharing this wonderful post. Yes I have created my website under $100 in WordPress

  4. RABSON BANDA says:

    Wow WordPress is very easy and flexible I really like it and am interested to use it always

Leave a Reply

Your email address will not be published. Required fields are marked *

Create Graphics That Convert

Want to create stunning visual content that converts better? Start creating engaging content within minutes with our easy drag-and-drop software. Access 100+ beautiful templates, 100+ free fonts and millions of images and icons right now.

Now Available: Become a Certified Presentation Expert for FreeTake the Course
Now Available: Become a Certified Presentation Expert for FreeTake the Course