How to Design a Website: a Comprehensive, Start to Finish Guide

What’s the best way to design a website?

So you want to design your website, where to begin?

For starters, what do you want to achieve with this website? Sell a product or service online? Are you looking to build an online presence and increase your brand awareness? Answering these questions will help you decide the kind of site your business will need and guide you on how to start designing a website.

Once you’ve answered those macro questions and have a general direction, you can focus your efforts on the website page design.

While most of the websites of old were the result of web designers and developers working together, these days, anyone can develop a high-quality website thanks to tools like WordPress, SquareSpace, Wix and more. Fortunately, you don’t need prior coding knowledge or even an IT professional for this anymore. You can pull it off yourself with the help of a content management system, time and dedication.

For those new to designing websites, most experts would recommend WordPress.com, a ready-to-use version of the world’s most popular CMS, offering some customization and support features such as custom themes and plugins.

However, those with some website design experience may opt to use WordPress.org since it supports full customization. It’s 100% free to use and offers complete control over your website’s design.

It’s important to remember that there is a distinct difference between wordpress.COM and wordpress.ORG.

Nonetheless, both options save you a ton of time as well, as it would take months to learn how to code and create a website from scratch.

Here’s how to design a website

Now let’s get to the meat and potatoes; learning how to design websites. Although building a website from the ground up can seem like a daunting task, especially given the extremely high quality of the world’s top websites, you’re quite capable of doing it yourself. As long as you adhere to the following steps to designing a website, you can be confident that the final result will be a site that anyone can find and navigate with ease.

1. Choose a domain name
2. Get yourself a good hosting company
3. Choose a platform to design your website on
4. Plan your website information architecture
5. Select your plugins
6. Choose your website layout design
7. Decide on a theme for your website
8. Acquaint yourself with page builders
9. Add some pages to your website
10. Maintain your site

1. Designing websites begins with a domain name

Picking a domain name is quite similar to choosing a brand name; you want something simple, recognizable and memorable. In fact, it should align closely with your brand name.

Simply put, a domain name is a unique identifier that allows web users to find your website. If the internet is a city filled with streets, avenues and millions of houses (websites), then a domain name is the address that allows people to find their way to your house (website). Make it too complicated, or unrelated to what you do, and users will have trouble remembering it. Don’t rush to ask, “how do you design a website?” before you’ve picked an appropriate domain name.

Tips for choosing a domain name

Picking a domain name is pretty straightforward but it’s important to keep a few things in mind to ensure you land on one that works well for you.

• Use the right domain name extensions (.com, .org, or .net). We recommend going for a .com extension.
• Pick a name that markets your company’s brand. You can create new words, use existing ones or leverage domain name generators that use your domain ideas and keywords to generate a brandable domain name.
• Make it short. Shorter domain names are easier to read and remember, make your business seem more professional or exclusive and make your website look more trustworthy and authoritative.
• Make it easy to type and pronounce. Think Google, Yahoo or CNN. The largest websites in the world tend to have short, easy to type domain names with relatively simple spelling.
• Avoid numbers and hyphens at all costs. They make a domain name needlessly complicated and hard to remember.
• Use niche keywords to make your website more identifiable in your particular niche.
• Think long-term. Create a great domain name as changing it in the future will cost you SEO rankings, branding and money.
• Make sure your preferred domain name is not already trademarked or in use.

2. Get yourself a good hosting company

With a domain locked in, you can now continue your site designing journey by settling on a good hosting company. But first, what is a hosting company, and why do you need one?

Similar to how your business may need a physical location to store and sell its products, you need a digital location to store all the HTML code, files and images that make up your website. A web hosting company provides this service by essentially renting out space on its web servers. Think of a hosting company as a digital landlord that provides digital space for you to lay out your wares and market them to the public.

Their servers will host all of your website’s files and deliver them to any browser that requests them by typing your domain name.

You’ll want a web host that addresses your website’s specific needs and supports the platforms and tools you’ll need to design your website. Furthermore, you’ll need a reliable web host that provides your website with more than enough storage and server speed. After determining what your website needs, it’s time to weigh your options using factors like the price of sign-up and renewal, ease of use, support services and customizability as deciding factors.

There are a ton of web hosting providers; HostGator, A2 Hosting and SiteGround are just a few notable examples.

We tend to like A2 Hosting because it delivers some of the fastest server speeds on the web. They’re also a reliable, developer-friendly web host with affordable pricing, a unique ‘anytime’ money-back guarantee, 24/7 customer support and malware scanning, and super-fast loading speeds.

Remember, speed matters. The finer points of how to lay out a website are sort of wasted if the final site loads at a snail’s pace. Why? Because people bounce from slow loading sites and when they bounce, so does their money. Google found that when load time increases from 1 to 5 seconds, the probability of a bounce increases by 90%.

Another great web hosting option is Kinsta who offer a wide variety of plans broken down by how many WordPress installs you need. Accordingly, they have plenty of experience with WordPress and all plans include free migrations. Kinsta is obsessed with website speed and also uses the latest technology to enhance the security of the sites they host.

Another great web hosting option is Kinsta who offer a wide variety of plans broken down by how many WordPress installs you need. Accordingly, they have plenty of experience with WordPress and all plans include free migrations. Kinsta is obsessed with website speed and also uses the latest technology to enhance the security of the sites they host.

3. Choose a platform to design your website on

Now that you have settled on a web hosting provider and chosen a domain name for your site, it’s time to decide on the platform you’ll use in the process of designing a simple website.

Quick bit of housekeeping to explain what a platform is; it’s a website builder, it’s where the magic happens, and they’re chock full of all the tools you’ll need to create a website. There are a handful of prominent ones out there each with unique features and pros & cons.

The trick to successfully designing web pages is finding the platform that suits your needs and complements your long-term plans and goals. Currently, the most popular web builders are WordPress, Squarespace, Weebly and Wix, with WordPress being the most used platform.

In fact, they are by far the most used CMS with nearly 62% of the market share.

There’s a reason for the dominance and why WordPress has cornered such a large portion of the web; it’s free to install, comes with a truly ridiculous amount of plugins and themes (over 50,000 and 11,000, respectively) and grants you complete control over the site designing process.

WordPress provides web developers with near endless functionality and extensibility options. It also plays very well with e-commerce if you need an online marketplace for your business with plugins like WooCommerce and supports search engine optimization through plugins such as Yoast.

However, there is something of a learning curve making WordPress a more complicated platform for a beginner to pick up.

Squarespace is an all-in-one web builder that provides hosting, domain purchasing and more dedicated website design help than WordPress. However, it’s not as flexible and doesn’t allow for the same level of customization. Furthermore, their SEO and e-commerce tools aren’t quite as robust as WP’s.

Weebly and Wix are drag and drop web builders making them by far the most straightforward to use. While this is a great feature, especially for beginners, they provide little in the way of website design and functionality, aren’t as strong at SEO as WordPress and because neither allow you root access with respect to hosting, you’re largely unable to do anything custom with development which is pretty limiting.

For business owners who want total control over their websites, powerful e-commerce and SEO functionality and the ability to scale their site as their business matures, WordPress is perhaps the best way to design a website.

4. Plan your information architecture (and content!)

Websites provide people with information; how you organize that information determines how easily they find it. So before you start designing, you need to think about what you want to say and how you’re going to arrange it. This means planning your content.

Building out your information architecture before you start designing allows you to hone the user journey. This ultimately improves both the user experience and your interface by serving to intuitively guide them to what they’re looking for, be it a solution to their problem or just an answer to a question or an ecommerce user flow that leads to a purchase.

Information architecture is like an outline of the content on your site. Use it to determine critical details such as your ideal number of pages or the perfect copy for your site navigation options. The process can be as simple as drawing notes on a sheet of paper, but larger, more complex websites can benefit from a dedicated, purpose-built tool like Slickplan which can help you design intricate information architecture, plan content and more.

💡SlickTip: If there’s a website whose structure you like, you can put the URL into our website structure visualizer to see the complete architecture, like the image below, and use it as the starting point for your own site.

5. Choose your plugins

Now that you’ve identified the information that’ll go on your website, you can think about how the site will function. That’s when plugins come into play.

These miniature pieces of software improve the functionality of your website and add site features that would’ve otherwise required extensive web development knowledge.

Platforms like Squarespace and Wix offer a few plugins; however, WordPress is the definite leader when it comes to creating a highly functional site. It has a mind-boggling number of plugins in its Plugin Directory – 54,561 to be exact – and these plugins can do everything from creating contact forms and adding social media buttons to enhancing a website’s SEO and building booking systems for hotels.

A basic WordPress website without any plugins is comparable to a mobile phone without apps; plugins allow you to significantly increase the scope of what you can do with your website. In many cases, they’re integral to the success of a website because they serve functions that are crucial to your website’s long-term performance.

Consider adding these plugins to your website:

• Website’s security
• Offline database
• Contact form
• Search engine optimization

You should also utilize a plugin that makes your website more responsive. Since more than 50% of all internet traffic comes from mobile devices, websites that are responsive to all screen sizes will likely enjoy longer and more frequent visits. Installing a mobile responsive plugin will also ensure that your website will render well on every screen regardless of whether it’s accessed via a monitor, laptop, tablet or mobile phone.

6. Create a website layout design

Before you can begin building your website, you should start by thinking about the general layout. This is a continuation of the information architecture you created earlier. If you’re having trouble working out exactly how to lay out a website, apps like Figma, Adobe XD and Sketch can save the day by helping you create visual layouts of your site to give you an idea of how it’ll look.

On a more basic level, if you’re wondering how to design a website layout, it’s no different than picking up a pen and paper. Simply gather the elements you identified and organized in the process of putting together the info architecture and draw/connect them using one of the above apps.

When choosing a WordPress theme, you can expect that it’ll generally have a fairly optimal layout. Keep in mind though, by planning and creating your layout before selecting your theme, you’ll have a better idea of what you’re going to build and also have an easier time selecting that perfect theme.

This is where it might be wise to do some rapid prototyping to see what does and doesn’t work InVision has always been a popular option but with their shutdown coming soon, now’s the time to sign up for an InVision replacement.

Website page layout examples

With the word “plan” right in our name, you know squarely where we stand on the importance of doing that pre-build planning. It just makes life easier and helps avoid costly (and dreaded) rebuilds.

Seeing is believing though, so we thought it’d be cool to share some website page layout examples, and the accompanying Slickplan sitemaps from real customers, to give you a feel for how plans become reality.

We use Slickplan for every site we build and they are all on WordPress and we use the Slickplan importer plugin

John Falke, Founder & Creative Director at Johnny Flash

We use SlickPlan on almost ALL of our website projects

Laura Engel, Creative Operations Director at Running Robots

7. Optimize your website page design with a theme

Speaking of themes, if you’re stumped on how to design web pages, look no further than these silver bullets. Themes make WordPress sites easy to customize regardless of your website design skill level. Additionally, WordPress supports a variety of them; some of which you can fully customize, while others come ready-to-launch as they are while allowing for some minor tweaks. Think of themes as a little cheat code to design a web page.

Some of our favorite fully customizable WordPress themes include:

Divi which overhauls the standard WordPress post editor, replacing it with a vastly superior visual editor. Even a complete beginner will be able to use Divi’s drag and drop interface to create spectacular designs with surprising ease and efficiency.

Astra is currently one of the most popular, fastest loading, multipurpose themes on WordPress. Versatility is its strong point. This theme works well on all kinds of websites, be they for business, e-commerce or a blog.

Spencer is another multipurpose theme with drag and drop capabilities thanks to a fully widgetized homepage. It includes multiple page templates, a sticky navigation menu, custom widgets for social media and content discovery features.

Technico is yet another fast-loading multipurpose theme (sensing a theme here amongst these themes?). It’s best suited for small businesses, consultancy firms, pharmacies and academic institutes.

8. The role of a page builder in designing a website

Most web developers who use WordPress to design their websites leverage paid subscriptions page builders like Elementor, WPBakery Page Builder and Beaver Builder. These page builders make it a lot easier for folks without any coding knowledge to design a web page, saving them tons of time and money.

However, WordPress 5.0+ released a built-in page building tool called Gutenberg – named after Johannes Gutenberg, inventor of the printing press – disrupting the subscription page builder space. Unlike the paid subscription page builders which are built by third-party developers and installed separately, Gutenberg is now a core WordPress feature.

It’s the default page builder in WordPress 5.0+ and with its wide array of useful features, novice web developers may find no need to switch to other options when designing a web page.

Also known as the Block Editor, Gutenberg uses manageable drag and drop blocks to arrange and add content elements to web posts and pages. There are some shortcomings though, while you can add and move blocks up and down, you can’t adjust their height or width. Additionally, you can’t use rows and columns to create complex layouts or add blocks inside other blocks, as you can with other page builders.

Gutenberg is heavily reliant on the themes provided by WordPress and while it allows you to add custom code for blocks, it can’t override WordPress’s theme styles. In that respect, powerful web builders like Divi, Astra and Spencer have much more functionality, allowing you to work with native themes and override them if you want to create custom page layouts.

Still, Gutenberg makes the web design process easier for beginners to pick up. It lets you get a good idea of how your site will look, provides a variety of discrete elements for customizing content and eliminates the need for installing a separate page builder.

If you’re learning how to design and build a website for the first time, Gutenberg will provide all the tools. If you need any extra bells and whistles once you’re more experienced, you can always upgrade to a premium page builder.

9. Add some pages

Now that you have your content planned, it’s now time to add pages to your website. Regardless of whether you decided to use WordPress’s native Block Editor or opted for a third-party page builder, you’re a lot closer to achieving your goal of designing a simple website.

Web pages divide your website into sections and make it easier for users to find and consume content. What would you prefer, a book whose contents are all jammed into a single page or one where the content is well-arranged on clearly numbered pages? The latter would be the better option as it elevates the user experience and also makes it easy for you or the publisher to go back to old content and update it.

The web pages you add are going to be based on the architecture you created earlier and, get this; you can fill in those pages by directly migrating the content you developed earlier to WordPress with our plugin. Moreover, Slickplan has a content block feature built right into the Content Planner meaning that we play very well with the Gutenberg editor.

There’s an art to web design; every website requires certain pages to be cohesive and deviating from this formula will most likely put off new customers. For starters, let’s talk a little about how to design a homepage. This is the page most people will land on first when they visit your site, so make sure it’s compelling enough to catch and hold their attention. Put an eye-catching image or slider at the top of the page and include a brief introduction to you or your company, a summary of the services you offer, a call to action and a way to contact you. Don’t forget about your mission statement and, if possible, customer testimonials. Try to use as few images as possible as they can slow your website down.

The homepage is arguably the most important real-estate on your site and here’s a fun fact: visitors may form an impression of your site in as little as 50 milliseconds. This is why planning is so important.

Here are a few other pages you should consider including:

• an about page with a longer description of you or your company
• a services/products page (or sub-service/product pages if necessary) to showcase the products and services you offer to the public
• a portfolio or testimonials page to show potential clients your previous work
• a blog to engage with customers and increase SEO rankings
• a privacy policy page if you’re operating an online store
• a contact page

Our Sitemap Builder lets you easily add custom page types to your sitemap to help refine the organization of your site. With that, the journey of designing a website is essentially complete.

10. Maintain your site

The heavy lifting is behind you now and all that’s left to do is maintain your WordPress website and ensure it’s running efficiently. Just like you have to fuel and maintain your car regularly to keep it in tip-top shape, websites also need regular care. Your site has a lot of moving parts and if even one malfunctions or breaks down, it can have a ripple effect across the entire thing. Fortunately, unlike a car, website care and maintenance only takes a fraction of the time and keeps your website safe, secure and performing well.

But what exactly does this maintenance entail?

Start with security; experts recommend changing your passwords regularly as they can always be compromised, even if you use a really strong password.

Furthermore, create a backup of your site using a backup plugin and regularly check those backup files to ensure they are properly stored. Routinely update all WordPress files, including themes and plugins. Becauses themes and plugins may fail to automatically check for an update or notify you when their licenses expire, go to the WordPress Updates page occasionally and check for updates manually.

Additionally, make sure to test your WordPress form builder plugins, find and fix 404 errors as well as broken links, perform SEO audits and run performance tests.
As far as a maintenance schedule goes, a site with a lot of traffic and plenty of new content being added should be maintained every three months, while one with low traffic and less frequent content updates will need maintenance every six months.

Planning makes perfect

Those are the basics of what you need to know to design a website with absolutely zero coding knowledge. Now comes the challenging but equally rewarding job of turning all this theory into practice and then maintaining the website to keep it in top shape. A well-designed, fast-loading website that prioritizes customer engagement can do wonders for your bottom line.

Remember though, well designed websites aren’t an accident. Planning makes perfect and a tool like Slickplan goes a long way towards sharpening the entire process.