This blog post may contain affiliate links. This means that if you click a link and make a purchase, I may make a small commission at no extra cost to you. But don't worry, I only share affiliate links to kickass products/services that I truly love. No BS. 🚫💩
If you’re in the market for a new business website, odds are you’ve considered DIYing your website but aren’t quite sure how to actually make the dang thing. While creating a website is no small undertaking, I find that breaking the process down into smaller, bite-size pieces can help make a project that once felt monstrous feel a bit more manageable.
In this blog post I’m going to break my tried-and-true website design process down into 9 steps that anyone can follow, so you can stop website stressin’ and start client impressin’… like, today!
But before diving into the process of building the website, if you haven’t done a single lick of prepwork for your website build, you need to read this blog post FIRST: 4 Things You Need to Do Before Starting Your Website.
Seriously, I don’t care if you follow my 9 Step Process to a T.. if you haven’t done these 4 things first, you’re going to end up with a website that doesn’t actually accomplish anything or attract anyone.
Once you’ve nailed down those 4 things, it’s time to start website building!!
9 Step Process: How to Build a Website
- Choose between WordPress or Squarespace
- Purchase your domain and hosting
- “Activate” your website
- Assign your brand colors and fonts within your website
- Create a wireframe for your Home page
- Build the Home page
- Build out other pages
- Optimize for mobile devices
- Launch!
Step 1. Choose between WordPress and Squarespace
WordPress and Squarespace are two of the most popular website platforms out there, and for good reason. They’re both capable of creating highly professional, powerful websites.
Squarespace is the more user-friendly, DIY-friendly option of the two, but with user-friendliness comes some design and functionality limitations when using Squarespace.
WordPress on the other hand, is practically limitless and by far the most flexible option. But with unlimited options, comes a much steeper learning curve.
When it comes to DIY website building, unless you’re a secret website creating prodigy, I tend to quite firmly recommend people use Squarespace for DIY websites.
Don’t get me wrong, WordPress is fantastic. I use WordPress and Squarespace and love them both – but the learning curve for WordPress is STEEP, and if you’re only looking to create one website and be done (i.e. you’re not trying to become a web designer), learning WordPress isn’t likely to be worth your time, effort, and frustration.
However, if you’re interested in building a website because you want to eventually become a website designer (or maybe you intend to outsource the website to a designer), then I encourage you to dive more into whether or not WordPress is the right option for you and your business.
Your answer might still be Squarespace, but if you’re not DIYing then I give you my blessing to more freely weigh the option between WordPress and Squarespace.
To help you decide which option best suits your needs, I created an Unbiased Comparison of WordPress vs Squarespace, where I walk you through the 7 key criteria that you should consider when choosing between WordPress and Squarespace.
Once you’ve picked your website platform, it’s time to move onto the next step…
Step 2. Purchase your domain and hosting
Two things that all websites need are a domain and hosting.
Your domain is essentially your “address” on the internet. So my domain is www.heartandhustlestudio.com.
A domain will typically cost around $12/year. One thing to note is that you should absolutely, positively, always purchase Privacy Protection with your domain.
You will need to purchase your domain from a Domain Registrar. Generally speaking, most domain registrars are created (fairly) equal. You don’t need to spend a ton of time researching and comparing domain registrars because they’re all fairly comparable and it’s frankly not that important. Plus you’ll want to save that research energy for choosing a hosting company. (More on that in a sec).
My personal domain registrar of choice is Google Domains (domains.google.com). I like Google Domains because they include that super important thing called Privacy Protection for free with all domains.
Once you’ve got your domain, the next thing you’ll need is hosting.
Hosting is essentially what “powers” your website and where it’s stored on the internet.
You will purchase hosting from a Hosting Company.
This part will look a little different between Squarespace and WordPress websites.
For a Squarespace website, Squarespace actually IS your hosting company. So if you opt to take the Squarespace route, you don’t need to purchase separate hosting because it’s included in your Squarespace Plan. You can actually completely forget the word “hosting” all together and just purchase your Squarespace plan, and Squarespace takes care of the rest!
For a WordPress website, you need to purchase hosting on your own and it’s critically important that you choose a good, reputable hosting company because things like your website speed and website downtime (which is hopefully zero!) is dependent on the quality of hosting company you use.
I highly, highly recommend a hosting company called Siteground. I use them for ALL of my client websites that use WordPress and they’re phenomenal. Their Customer Service alone makes them the obvious choice for me.
Not sure ya grasp the whole “domain and hosting” concept yet?
No worries, it’s not straightforward to a lot of people! Check out this blog post for a more in-depth explanation: Website Domains & Hosting Explained
Step 3. “Activate” your website
Now that you’ve purchased your domain and your hosting (or Squarespace plan), it’s time to actually “activate” your website!
I have activate in quotations because we’re not totally activating something, but we need to go in and “turn on” your website so we can actually begin building.
For Squarespace:
- Simply go to Squarespace.com > Login > Create Account.
- Once your account is created choose the Create a Site option in the top right menu and Voila, website activated!
For WordPress:
- Login to your hosting company’s website and navigate to your cPanel.
- Navigate to WordPress AutoInstaller > Install Now
- Set your Site Settings like website name and description. Don’t worry you can change them later.
- Set your Admin info like login username, password, and your current email address. (Remember your login info, you’ll need it later!!). Pro-tip: Don’t use admin as your username. It makes your website easier to hack into.
- Click Install. Done!*
*It may take up to 24-48 hours to be accessible, but typically I can access my websites within a few minutes.
To access your website login page, add /wp-admin after your domain. So if your domain is www.fancypantsdance.com, you would access your login page by going to www.fancypantsdance.com/wp-admin
Once activated, you’ll want to put up a simple Coming Soon page so no sneaky browsers can see it before you’re ready to launch it to the world. Squarespace has a built in Coming Soon page option you can use, and for WordPress you can use a Coming Soon page plugin like Nifty Coming Soon Page. I use Divi Coming Soon page since my theme of choice is Divi.
DIYing your site got you stressed?
How about I give you my exact checklist of the 7 things all websites MUST have? Because I think we’d all love for your website stress days to be over. Like, yesterday…
Download my free checklist now!
Step 4. Assign your brand colors and fonts within your website
Next, you want to go through and set the styles for your website. This means assigning what fonts and font styles your headings and body font will have, as well as what color certain elements of your website (text, buttons, menus, etc.) will be.
By assigning your brand colors and fonts before your start building your website you can focus solely on your website’s layout and content, without having to maintain consistent branding throughout – because it’s already all set!
In Squarespace, go to Design > Site Styles to set your brand colors, fonts, and other styles throughout your website.
In WordPress (specific to the Divi Theme)
- Go to Divi > Theme Options > Upload your logo and assign brand colors
- Go to Divi > Theme Customizer > Assign your styles.
Related Post: 4 Ways to Add Your Brand into Your Website
Now that you’ve got your website all setup, styled, and ready to go – it’s time to start laying out your first page: the Home page.
Step 5. Create a wireframe for your Home page
A quick and easy way to visually layout your Home page is by creating something called a wireframe.
A wireframe is a skeleton sketch of your page, showing what content will be included and where it will be placed. The key to a wireframe is that it is ONLY a layout – it does not have any design, colors, actual pictures, or other flare. It’s strictly meant to get your thoughts down so you can envision what the overall page will look like, and make sure you have everything included that you need.
Here’s an example of a wireframe:
You can create a wireframe with pencil and paper, or another option, which I prefer, is a free online app called InVision.
I like InVision because it’s super simple to draw out what you want on your website, rearrange it, then rearrange it again, add notes to yourself, and get it exactly how you want so you have a crystal clear layout of what your page will contain.
Next, it’s time to turn your wireframe into a real life page….
Step 6. Build out your Home page
Going back into your website, you want to create a new page from scratch. Then using your trusty wireframe, you can begin putting the pieces of your page together.
If you properly assigned your site styles from Step 4, you should notice that as your content is being added to the page, your brand colors and fonts are also helping to pull together your layout and your desired style.
Don’t forget to optimize your images before uploading them to your website!
Pro-tip: Sometimes I find that it’s easier to use placeholder text (i.e. fake text) so that I can focus on the bigger picture at first, and then come back to put in the written text once the layout is completed. Many times I don’t even add in the text until all the pages are created, simply because I’m someone who gets too wrapped up in the words and it derails my productivity.
After you’ve successfully replicated the layout from your wireframe, it’s time to add the finishing design touches and you’ve successfully made your first website page!
Whether or not you have your written content completed, with the layout and design completed you can move onto creating the remaining pages. You can come back to the writing part later, if need be.
Don’t forget to set this page as your Home page within your website.
In Squarespace:
- Hover over your Home page in the Main Menu and click the gear icon.
- Select General > Set as Homepage > Save
In WordPress (specific to Divi):
- Go to Divi > Theme Customizer > Homepage Settings
- Select “A Static Page” and in the Homepage dropdown menu choose your Home page
Step 7. Build out the rest of your website pages
Once you’ve perfected the exact design you like for your Home page, use that page to guide you in creating the remaining pages of your website.
It’s important to keep the style and design elements consistent throughout all of your pages and resist the temptation to “change it up” on every page.
If wireframing worked well for you on the Home page, I definitely recommend doing the same for the remaining pages.
When building out these pages on the website, I like to duplicate the Home page and use it as a starting point, design-wise. You by no means have to do it this way, but I like doing so that my spacings, dividers, alignments, paddings, margins, etc all remain consistent.
The layouts from page to page will change (as you’ll see in your wireframes) but the overall design and vibe should be consistent. Use your Home page design and your wireframes to help you complete the other pages of your website.
If you waited until the end to add in your website words, be sure to do that now. You’ll also want to add these extra pages to your Main Menu, if they are intended to be menu items.
In Squarespace:
Simply drag your desired pages into the Main Navigation section and arrange them in the order of which you want them to appear in the menu.
In WordPress:
- Go to Appearance > Menus > Create a new menu.
- Name your menu Primary Menu
- Select all the pages on the left that you want in your menu and click Add to Menu.
Drag these pages to rearrange in the order you want them to appear, and click Save Menu.
Step 8. Optimize your website for mobile devices
So now you have this kickass website that’s alllll done and you can’t wait to share it with the world. But hold your horses just a second, there’s one last step. You’ve worked so hard on your website, don’t skip this one just because your website feels finished.
In today’s day and age, it’s a safe bet that people are going to be viewing your website on their mobile devices.
Up until this point, you’ve probably been looking at and designing your website for how people will view it on a computer.
It’s important to take a glance at your site on a mobile device (tablet and phone) to make sure your design is translating properly from desktop to tablet to phone.
Based on how your site looks on your mobile devices, you may wish to make a few adjustments to the layout or design details to ensure people on all devices are getting the best possible experience on your website.
In Squarespace, you can view your mobile views by clicking the arrow at the top of your screen. Upon clicking, it will expand to look like the image below, where you can choose to view your website as if you are on a phone, tablet, or desktop.
In WordPress, specifically using Divi, you can view your mobile views by toggling the gray icons in the bottom left corner to choose between a phone, tablet, or desktop view.
Once you know what your site looks like on all devices and have made the necessary tweaks to ensure it’s fabulous across ALL of them, it is officially TIME TO LAUNCH!!
Step 9. LAUNCH!
This step is the easiest of them all! All you have to do is disable your Coming Soon page, and your website will be live to the world!
Go celebrate, you badass you! You just conquered the world!
Pat yourself on the back, pop a bottle of celebratory whatever-you-prefer, and shout it to the world: YOU’RE A WEBSITE OWNER!!! 🍾
Want to make sure your new beautiful home on the interwebs really checks all the boxes?
Drop your info in the box below and I’ll send you my FREE website checklist of the 7 most important website must-haves, so you can soar past your competition with confidence!
