You need a website. You’ve probably heard the same thing from other people and articles all over the internet. You know it’s true. But, the prospect of learning how to design a website can be intimidating.
Here’s the good news:
Even though creating a website used to require a professional web designer or developer, that’s no longer the case. These days it’s easy to learn how to design a website on your own.
You don’t have to be a coding wizard 🧙 or a design expert to create a good-looking website. Anyone can learn how to design a website, and in this guide, we’ll walk you through the basic steps to do so. Most of these steps are similar across popular CMS platforms.
Let’s dive in!
How to design a website
Here’s the table of contents of what’s to come:
- Define your website’s purpose 🎯
- Prepare your website’s content ✍️
- Set up your domain, hosting, and CMS ⚙️
- Determine specific design elements 🎨
- Customize your website’s design 👨🎨
- Add pages to your website 📃
- Set up your website’s navigation ↕️
- Add extra functionality with plugins 🔌
Step 1: Define your website’s purpose 🎯
When learning how to design a website, the first step is to determine your website’s purpose.
Get clear on:
Who your website is for
What you want them to do on your website
What they need to know to take the desired action
Identify your ideal visitor
Before you learn how to design a website, you need to learn who you should build your website for.
Create a profile for your ideal visitor. These are the people who will benefit the most from visiting your website — you can solve their problem with your services or products. If you have the right solutions for the right website visitors, you’ll see an increase in your conversion rate.
Your ideal visitor profile should include their:
- Age, name, and current location
- Education level, occupation, and income
- Spending habits
- Hobbies and interests
- Favorite websites or other online publications
- Preferred social media platforms
This information can help you make your visitors feel like you’re personally speaking to them. Creating a personal connection makes it easier to convert random visitors into repeat visitors, and eventually, buyers.
Try to craft your website’s user experience (UX) and user interface (UI) design around your ideal visitor’s expectations.
Do market research and explore social media platforms like Facebook to start building your ideal target audience profile. If you’ve been in business for a while, you can also use existing customer feedback.
Define what you want your visitors to do
Once you know who your website is for, you need to clarify what you want your website visitors to do once they land on your website.
You might want them to:
- Sign up for your newsletter.
- Fill out a contact form.
- Visit your shop page.
- Make a reservation.
Determine what your visitors need to know
When you have a clear goal in mind, figure out what information will encourage your visitors to take the action you want.
Suppose you’re a local restaurant owner: The most important information to give your customers includes your location, hours, and what kind of food you serve.
(Example of a quality restaurant theme)
Step 2: Prepare your website’s content ✍️
The next steps to design a website involve preparing the content. Speed up the entire website design process by getting your copy and images ready to go upfront!
Here are a few quick copywriting tips:
- Most visitors will skim your website pages instead of reading them. Your copy should be short and concise.
- Center your copy around the people most interested in what you can do for them and why they should care about your product or service.
- Avoid using jargon or technical terms. Unless you’re trying to attract other people in your field, it’s unlikely that your visitors will understand industry-specific language.
- Use headings, short paragraphs, and bullet points to make your text easier to read.
Visual elements will help you tell your story better. They also make your website more eye-catching and stylish.
You’ll need to prepare a few different kinds of images:
- Banner or hero images that span the full width of the page and can be used in the header area.
- Headshots of you and key employees or partners for the about page.
- Product images if you’re designing an online store.
- General stock photography that reflects your industry, online store, and services.
- Previous client or customer photos that you can use with their testimonials.
For some of the images (like your product images or headshots), you’ll need to hire a photographer or enlist the help of a friend who’s good with a camera.
For more general photos, you can turn to stock photography websites like:
- Unsplash or My Stock Photos for free stock photos
- ShutterStock, iStockPhoto, or Adobe Stock for paid images
Step 3: Set up your domain, hosting, and CMS ⚙️
Before you start working on your website, you need a domain name, hosting plan, and a CMS (content management system).
A domain name is your website’s address online. If your website were a house, your domain name would be the street address.
A tool like DomainWheel can help you come up with creative and unique domain names.
Once you have decided on the domain name, you’ll need to purchase a hosting plan.
If you’re a newbie who wants to learn how to design a website for the first time, you could benefit from a company like Bluehost.
Finally, you’ll want to consider the specific functionality necessary in your website and consider which content management system (CMS) will help you achieve it. A CMS provides a user interface from which you can make updates to your website, so you’ll want to decide on one that you consider easy to use.
One of our favorite CMSes is WordPress because it empowers website administrators of all coding skill levels to learn how to design a website. WordPress offers flexible methods for achieving the exact design aesthetic you’re going after. You can learn more about WordPress here.
If you’d like to see what other tools are out there, we also have a comparison of the best CMS software available on the market (read it here 👈).
Throughout the rest of this article, we’ll use some language in reference to how WordPress is setup, explaining concepts that will be relevant regardless of the CMS you’re using.
So how to set it all up?
Bluehost – a web hosting company – streamlines the process of getting a domain, hosting, and WordPress account. It’s also one of the official WordPress hosting partners.
Bluehost gives you a free domain name when you sign up for a hosting plan and they will also complete the WordPress install for you.
To sign up with Bluehost, simply follow the steps below:
Visit Bluehost and click the green Get Started button.
Choose the desired hosting plan on the next page.
Next, enter your desired domain name and click Continue.
Enter your account and payment information. Click on Submit.
Once your account is created, Bluehost will install WordPress for you – the CMS Bluehost uses. When the process is done, you’ll receive an email confirmation with login credentials for your hosting panel and WordPress dashboard. Keep that information somewhere safe as you’ll need it for the next step.
Step 4: Design your website 🎨
Now that you’ve taken care of the technical details and you have your CMS ready to go, it’s time to proceed onto the more creative steps to design a website.
First order of business: picking a theme – the scaffolding for your website design. We’ll use that theme to then design your website around it.
Choose and install a WordPress theme
Even though the theme is just your starting point, pay particular attention to the layout of themes you’re considering:
- Do they have a logical visual hierarchy?
- Are the navigation bar and menu structure clear?
- Does the theme feature a scannable layout that’s easy to follow?
There are plenty of free as well as premium themes available for WordPress, which is a great thing.
Free themes are a good starting point if you’re on a budget. However, you might prefer premium options if you’d like more customization options.
When you’re choosing a specific WordPress theme, there are a few features to look at:
- Regular updates: An outdated theme could expose your website to malware.
- Aesthetic and customization options: Make sure you can use your brand’s colors and fonts, as well as upload your logo.
- Responsive web design: Ensure your website will look good on both mobile and desktop devices. Given that more than half of all internet traffic[3] comes from mobile devices, having a responsive website is crucial.
To install a WordPress theme:
- Log in to your WordPress dashboard by going to
YOURDOMAIN.com/wp-login.php. - Enter your login credentials and click on Log In.
- Look at the left sidebar and click on Appearance → Themes.
- Click on Add new and browse through the theme repository.
- Once you’ve found a theme you like, click on Install and then Activate.
With the theme ready and waiting, let’s now see how to put your design elements around it.
Consider current visual design trends
When you learn how to design a website for the first time, you have the benefit of starting from scratch. You can create an up-to-date, visually appealing website by researching the most current design trends.
Like it or not, design matters. According to statistics compiled by Blue Corona[1], 48% of people say a website’s design is the no.1 factor in deciding how credible a business is. So, it pays to know what’s currently trending in web design.
Start with a simple Google search for web design trends CURRENT_YEAR.
For example, in 2021, this search reveals that trends include:
- Mixing photos and graphics
- Minimalist navigation
- Clear calls-to-action (CTAs)
- Bright and luminous color schemes
- Dark mode options
Websites like Awwwards and CSS Design Awards can also give you ideas about the hottest design trends if you are a beginner who wants to learn how to design a website for the first time.
However, just because something is trending doesn’t mean you need to incorporate it into your website.
For example, if you’re in the food industry, a luminous color scheme paired with dark mode might not work as well as it would for an eCommerce store. However, mixing photos and graphics and using plenty of white space is a great way to help your menu items stand out.
👉 For an added touch of flair that’s guaranteed to attract the eye, consider making sticky menu items. This will keep your menu in place while users scoll the page.
Not all trends fit all industries — look at other websites in your industry and see what your competitors are doing.
As you’re researching design trends and checking out other websites in your industry, save examples you like in a folder on your computer. Then, you can refer to them as you’re working on your website’s design.
Decide on your branding
Of all the steps to design your website, think about how you want your visitors to feel when they interact with your brand — that feeling is at the core of your branding.
At its most basic, website branding consists of a distinct:
- Color scheme
- Set of fonts
- Selection of imagery
These elements need to convey the same message and feeling because they all play a role in sharing your brand’s story and attracting the right visitors to your website.
Choose a color scheme
Color is one of the most important communication tools you can have as a brand.
Typically, you should use one main brand color throughout your website and logo. Pick an additional accent color for CTAs and internal or external links, and you can use one more color for your buttons.
Coolors is a tool that can help you develop a color scheme for your website in an easy, fun way
Choose your fonts
Like colors, fonts play a big role in how visitors perceive your website and business. Traditionally, serif fonts like Georgia will give off a traditional, timeless, and elegant vibe. Sans serif fonts like Helvetica will give off a more modern look and feel.
Choose two fonts for your website: one for the headings and one for the body copy. A tool like FontJoy can help you generate an aesthetically pleasing font pair for your website.
Don’t forget about good imagery
Adding photos to your website is a powerful way to tell your brand story and make it more memorable. According to a study conducted by Brain Rules[2], adding imagery to a piece of content can help readers retain 65% of the information three days later. Images also encourage visitors to click on your CTAs.
However, don’t go overboard with images and be sure to optimize them, so your website speed doesn’t suffer.
Step 5: Customize your website’s design 👨🎨
At this stage, take everything you’ve learned in the previous step and apply it when customizing your theme.
For the purposes of this tutorial, we’ll use the Neve theme. WordPress themes can be customized through the Theme Customizer. If you’re using another website builder/CMS, the process will likely follow a similar flow.
Some themes have a separate Theme Options panel where the style settings are located. You can usually find this under the Appearance tab.
To customize your chosen theme, click on Appearance → Customize. Once the Customizer loads, you’ll see all the different style settings available to you.
To customize your theme’s colors, click on the Colors And Background section. To customize your fonts, click on the Typography tab, and so on.
To upload your logo, click on the Header tab and then click the Change Logo option. You’ll then be able to upload your logo image.
You can also use a page builder plugin like Elementor to customize your website in a more detailed way. A page builder plugin lets you use a drag-and-drop interface to add and arrange text, images, and other blocks on your page.
If you want to learn how to design a website, drag-and-drop editors make it extra easy, since it’s all visually-based.
Step 6: Create your website’s pages 📃
Now that you have your theme installed, it’s time to create your website pages.
Every website typically has the following pages:
- Home
- About
- Services or Products (if you plan on selling anything)
- Contact
- Blog
You’ll also need legal pages with your privacy policy or terms of service. The pages you should create depend on the reason why you want to learn how to design a website – whether it’s a site for business, hobby, or anything in between.
Adding pages in WordPress
To create a page, click on Pages → Add new. You’ll be taken to a screen where you can add a name for your page and the content for it.
Add your content with the corresponding editor blocks. For example, to add text, click on the + sign and select the paragraph block. To add an image, add an image block.
When you’re done adding content, click on Publish and your page will be live. Then, repeat this process for every other page on your website.
Finally, you need to set your homepage and blog page. Go to Settings → Reading. Make sure you check the Static page option next to the Your homepage displays label. Then, select the appropriate homepage and blog page from the drop-down menus. Click on Save changes when you’re done.
Step 7: Set up your website’s navigation menu ↕️
Once you have customized your design and added your pages, it’s time to set up your navigation menu.
Your navigation menu should be clutter-free and easy to understand. Avoid using cute or ambiguous names and keep it between 5-7 links.
How to create a navigation menu in WordPress
- Go to Appearance → Menus.
- Give your menu a name and click on Save Menu.
- Then, under the Pages tab, click on View All and tick the boxes next to the pages you want to add to the menu.
- Click the Add to menu button and then assign it as the Primary location.
- Click on Save Menu.
Step 8: Add extra functionality with plugins 🔌
The last of the steps to design a website is extending its functionality with plugins. Plugins connect your website with other services and code that can help you to achieve specific goals and execute certain desired tasks.
You can use plugins to add things like contact forms and share buttons, improve your content for search engine optimization (SEO), and backup your website.
Extend functionality on WordPress with plugins
For WordPress websites, plugins are like little applications for your website — there are numerous free and premium plugins. You can download plugins from the official repository.
When choosing and installing plugins, make sure any plugin you choose:
- Is regularly updated
- Has at least a 4-star rating
- Does what you need it to do
Additionally, be aware of how many plugins you install. Too many plugins can slow down your website.
Here are a few recommended plugins to get you started:
- Yoast SEO: Ensures your website can be found through search engines.
- WPForms: Adds a contact form to collect information from visitors.
- Sassy Social Share: Helps you and your visitors share your blog posts or articles on social media.
- UpdraftPlus: Backs up your website automatically.
- Wordfence: Keeps your website safe from hackers.
- Optimole: Optimizes your website images to load faster and take up less space on your web server.
Final thoughts on how to design a website
Creating a website might seem daunting but once you have clear instructions, it becomes much simpler. These easy steps to design a website can help you move the process along.
Remember: before you get started on your website design, you’ll need a domain name, hosting plan, CMS, and content for your website, including written copy and images.
It’s not complicated to learn how to design a website with WordPress or any other platform. Get started now by following the steps to design a website outlined in this article and you’re bound to be pleased by the end result.
Happy designing! And if you need more in-depth guidance on how to design a website, CodeinWP has got you covered.
Got any great web design tips we missed? Then, share them with us in the comments below!
…
Don’t forget to join our crash course on speeding up your WordPress site. Learn more below:
Layout and presentation by Karol K and Chris Fitzgerald.
