How I Design Custom Websites For Service Based Businesses

Designing your own website? See how a professional does it to get inspiration for your own site. Learn my secrets, workflow and favorite techniques to achieve great results. Also grab your Ultimate Website Launch Checklist so you don’t miss any step in the process! It covers everything from domain, hosting, WordPress, and building your website, plus all the small details that can truly transform your website into a user-friendly one!

If you’ve been trying to design your website but have no clue where to start or if you think you’re missing things, then this post is for you.

As a web designer, I’ve gone through trial and error honing down a consistent process that delivers great results.

So today, I’m going to show you everything I do behind the scenes to build gorgeous, and effective custom websites for my service-based clients.

You’ll see my exact process, my tools, and my own design insight that goes into every website design project.
See all the necessary steps to build your website. #webdesign Click To Tweet

Some of the links contained in this post are affiliate links. This means that I may receive a commission if you click on the link and make a purchase from the affiliate. I only recommend products and services that I know or trust to be of high quality, whether an affiliate relationship is in place or not.

Phase 1: Prep

Average Timeframe: 1-2 weeks

This first phase is all about getting things ready for us to design and build your website!

Because before we can create what you need, we need to know exactly what you need.

So after you decide to work with me, I email you my invoice (50% deposit) and contract. Once you pay and sign, I email you 2 questionnaires on Google Docs to get all the needed details:

  1. Website Questionnaire: all about your website’s goals, what you want, what you don’t want, any colors you like, what feel you’re going for, required elements, etc.
  2. Business Questionnaire: all about your business, goals, tone, target audience, etc.

Website Questionnaire

Business Questionnaire
These are crucial to understanding what kind of website you need and how it should look and work. Everything from colors to tone to pages needs to have a solid game plan.

My copywriter and I then thoroughly review the questionnaires and come up with a whole list of questions, comments, and ideas. The creative juices are really flowing here!

We all find a good time for a phone call and discuss your questionnaires and all our questions from reviewing them. On this call (which usually lasts 30 minutes to an hour), we discuss your business and your website needs to make sure we’re all on the same page and very clear on the project.

We all determine what pages you need, what the website path needs to be, goals to be achieved, etc.

Because I like to go above and beyond just designing a website. It’s your business and I take that seriously. While it needs to look amazing, it also needs to work right and say the right things.
Your website needs to look amazing AND work the right way for your business. Click To Tweet Then it’s time for us to do our magic…

Phase 2: Mockups + Copy

Average Timeframe: 3-4 weeks

If you’ve ever been overwhelmed with everything needed to design your website, hopefully this will enlighten you with my process.

Because this phase focuses on only 3 things:

  1. Deciding what pages we need
  2. Writing the copy for the pages
  3. Designing how the pages will look

And if you focus on each at a time, it makes the process less overwhelming and more concrete and clear.


1. Site Architecture

So, the first thing I do is make a list of all the pages we need for your website. This might involve any or all of these pages:

  • Home
  • About
  • Services
  • Sales Page(s)
  • Contact Us
  • FAQs
  • Careers
  • Blog
  • Blog Post
  • 404 Error Page

This creates a good plan because that’s all a website is…a collection of pages. It takes the overwhelm out by seeing a concrete list of what’s needed.

page List
I organize the list of pages in a shared Google Sheet in our shared folder (this becomes our hub with everything in one place). Then I have multiple columns to mark the page’s development stage (like Initial Copy, Initial Mockup, Final Copy, etc.). This keeps things organized in a great bird’s eye view!

Note:

If you’d rather use Dropbox instead of Google Drive , that’s cool too!

I then think about an organizational structure for the menu, like main tabs and subtabs. This can always change later, but it’s just good to come up with an initial menu.


2. Copy

Copy is the next thing we do for each page.

So in the shared “hub” folder, I create a separate document for each page that’s needed. I usually entitle them Page Name_INITIAL.

Hub for pages

Note:

“INITIAL” means it’s the first draft. Once you are happy with the copy, it’s renamed “FINAL.”

Our SEO copywriter then writes 5 pages for you, which should be your most important pages (if you’re not sure, we can discuss this to determine them). First she does SEO keyword research to find the best keywords you can rank for. Then she writes and edits the copy to make sure they’re being used in the best way, and the copy is clear and compelling.

And the remaining pages’ copy either comes from your existing website or you if it’s brand new.

But I make it easier for you, as you get my “Copy Cheatsheet.” This 14+ page Google Doc lays out best practices from research studies what each page should have/say.

Copy Cheatsheet
So if you want to write your About page, just go to the “About” section and see tips about what to include. I have that for most pages…the home page, services, sales, contact, 404/error, etc.

Copy Cheatsheet Landing page
While it’s not a concrete framework, it makes coming up with copy a whole lot easier as now you have ideas of what to say!


3. Mockups

Ok, so now we have what pages we need and the copy for each page. So all that’s left is to design how the pages will look on the website!

Psst…this is my favorite part!

I use Adobe Illustrator to create full-color PDF initial “Mockups” of how each page will look.

Mockups in Illustrator

Usually I first come up with the color palette of the website. This could use your existing branding or else it’ll be new based on your questionnaires.

Color Scheme
Then I collect a whole bunch of photos that I might use on the website. It’s easier to do this at one time, than to have to keep stopping to find photos throughout the process.

You might provide photos to use or else I can find commercial use/attribution free images online.

Photos
I’ll then come up with the font scheme for headings and install any fonts if needed.

Armed with the right colors, photos, fonts, and copy, it’s then time to bring them all together cohesively in the mockup.

I make it look as close as possible to what it’ll look like on the website. My mockups even have the designed menu and footer to bring it to life.

Home Page Illustrator Mockup
My design style is characterized by

  • A lot of headings for easy reading
  • Generous white space to focus on the copy
  • Icons where needed to illustrate concepts
  • Modern full-width photos/sections with color overlays

Once I finish the mockups, I add them to the Google Drive folder and await your feedback!

You can revise the copy and mockups over 2 rounds to make sure it’s exactly what you need and like.

When you’re happy and approved the Final Mockups, I invoice you the remaining 50%.

When paid, it’s on to the exciting step of making your mockups come to life as I build the pages.

Phase 3: Build

Average Timeframe: 1-2 weeks

I build the website in one of two ways:

Option 1:
If you don’t plan on changing your website much in the future, I build your website on the GeneratePress framework and use HTML/CSS to customize where necessary. While it’s more difficult for you to make changes unless you’re familiar with coding, the pages don’t require much updating (except for the theme of course).

CSS or HTML
Option 2:

For those who want to be able to easily change things down the road, I use the GeneratePress framework and the page builder plugin, Elementor . Both are free – no monthly or yearly fees in the future. This page builder plugin allows you to visually make changes SO easily (I teach you how to do this in the walkthrough). It’s just that your pages are built on a plugin, so you’ll have to keep it installed and up-to-date to have the content viewable.

Elementor
We discuss what would be the best option for you and then I start building the pages on my development website.
Deciding what tools you need to build your website is a great first step. Click To Tweet

I create every page and put the photos, copy, and elements in the right place. I then make sure the menu and footer look great as well!

Once each page is complete, I analyze them with GTMetrix . It tells me if the images are bigger than necessary, which adds to your page load time. So I resize and optimize the images to the best specifications and fix any other performance issues that come up.

Ali Rand Web Design GTMetrix Score for Starr Mechanical
I do all this to help with your SEO. And I want to make sure your website is as fast as possible by installing the right code on the server and website, optimizing all images, and having it be mobile responsive. This helps increase your search rankings as Google rewards faster sites (and makes your visitors happier!).

Get your own website optimized for better SEO with my Fast as Lightning Workshop! Follow along with 5 video tutorials to make your website faster and convert more customers!

Once your page is as lean as it can get, I check each page for mobile responsiveness. I do it manually by resizing the window and fixing all the issues.

Then I do a final check with Google’s Mobile Friendly Test and fix any issues that come up there.

Mobile Responsive Website Design for Starr Mechanical by Ali Rand
Once this is all done, it’s time to transfer them to your website and fully build out your site!

I use Asana to keep track of all the steps in the build/transfer. Here’s right from my project template:

  • Install GeneratePress theme
  • Install GeneratePress child theme
  • Activate themes
  • Install and activate necessary plugins
  • Import settings
  • Upload logo & favicon
  • Import pages
  • Import CSS
  • Check CSS for browser-compatibility
  • Install any custom fonts
  • Test pages’ links
  • Test contact forms
  • Add SEO Title Tags & Meta Descriptions
  • Integrate social media
  • Integrate email marketing
  • Create menu & footer
  • Test & fix mobile responsiveness
  • Analyze each page with GTMetrix
  • Fix any GTMetrix issues
  • Analyze site for SEO
  • Analyze site for broken links
  • Integrate Google Analytics
  • Take down coming soon page (if applicable)

The last thing I do is perform a complete website backup with your databases, files, and WordPress export files. This ensures you always have a “restore point” you could use if needed in the future!

Phase 4: Support

Average Timeframe: 4+ weeks

After your website is complete, it’s time to celebrate your launch! You’ve got a great new online home and you deserve to tell the world.

And I want to make sure you know how to take care of your online home, so we can schedule a convenient time to walk through your website via a screenshare.
Full Features List for Ali Rand Custom Website Support
I can teach you how to create new pages, add/remove pages to the menu or footer, create blog posts, add media, etc. Everything you need to know about WordPress and your unique website elements, we can go over until you’re totally confident in your skills!

At this time, you also receive your Goodbye Package. This has a Beginner’s Guide to WordPress and reference sheets on everything about your website (ex. Installed plugins, login details, maintenance care).

Finally understand how to use WordPress to build your blog or website. We will walkthrough the basics so you can get your website started. And do not forget to download your free 20 page WordPress Beginner's Handbook to refer to in the future!
I also give you your original backup and your new backup files, so you always have a fallback option if needed!

And lastly, I provide support for a month afterwards…so if you have any questions or comments, I’m just a phone call or email away.

Conclusion

Investing in a custom website is an exciting thing!

You get a new, gorgeous, professional website that converts more visitors into paying customers.

It’s a site that you’re proud to show off and call your online home.

And the best part for you is that you get to stop wasting your time away fiddling with it to lackluster results.

To learn more about my Custom Website service, click here to explore!

And if you want more tips and a list to keep forever, click the button below to get your Website List…

Some of the links contained in this post are affiliate links. This means that I may receive a commission if you click on the link and make a purchase from the affiliate. I only recommend products and services that I know or trust to be of high quality, whether an affiliate relationship is in place or not.



Got a second? Leave a comment or question below about my design process. I’d love to hear from you!

And if you’ve found this post helpful, please share it with your friends so they can also see how it’s done!

About the Author
I create beautiful and conversion-focused WordPress websites for service-based entrepreneurs and businesses. Because websites should sell for you, not just look pretty. And if you're interested in learning how to maintain your website (so you can fix those pesky issues!), then click here.

Leave a Comment