(Note: this article is part 5 of 7 in a series on Building a Website to Grow Your Medical Practice. Check out the entire series here.)

Build a Website Part 5: Checklist for Designing a Functional Website

We’re moving right along in this blog series! By this point, you’ve clarified your message with the StoryBrand BrandScript, planned your website functions, chosen a website builder, and decided to hire a professional or D.I.Y. Now is the moment you’ve been waiting for—design time!

Regardless of whether you are designing the site yourself or hiring a professional, you need to participate in design decisions. A well-designed site will have consistent colors, fonts, imagery, and tone. It will also be easy to navigate and function without a glitch.

I said in the first blog post of this series (Craft Your Message) that the StoryBrand mantra is “if you confuse, you’ll lose.” As much as that applies to your copy, it also applies to your design. A well-designed site should be not only beautiful but also functional. Follow the checklist below to ensure you design a gorgeous and functional site.

7-Point Checklist for a Functional Website

1. Create your site map

A sitemap is a schematic of how your site is organized. Some websites have dozens of pages and subpages, with extremely complex site maps. Most small businesses have no need for such complexity. I recommend keeping your number of pages to a minimum.

Make a list of the pages you need on your site and then draw out how they connect. A sitemap can be as simple as a homepage, about page, services page, and contact page. If you need additional pages—like a blog, shop, or patient portal—sketch those into your sitemap as well.

2. Have your logo ready

If you don’t have a logo, there are several ways to go about getting one. You can find an online tool to design your own logo, you can hire a freelancer through a service like Fiverr, or you can hire a graphic designer directly.

The benefit of hiring somebody to design your logo is that they will know all of the various formats and versions that you will need to build your website. You’ll want to have a standard horizontal version and may also want to have a vertical or square version. You’ll want to have one with a solid background as well as a transparent background. If you have a tagline for your business, you’ll want one logo with and another without your tagline. Lastly, you’ll need to have a favicon, which is the small icon that will appear in the browser tab when somebody visits your site.

3. Choose your colors

Start with the colors in your logo. You might have 2-3 colors in your logo, which will be important colors to repeat throughout your site. You’ll also want to decide what color font to use for the body text on your site. This is usually either black or dark gray so it’s easy to read.

In addition to your logo colors and text color, you may want 1-2 additional colors that you can use as accents throughout your site. One way to come up with these is to use a tool that generates color schemes, like Coolers. If you have an image that you know you want on your site, you can load it to Canva Color Generator to pull out colors from that image.

 4. Choose your fonts

There are two main font types to choose for your website: Header font and body font. Choose your fonts from Google Fonts. If you want to see some examples of type fonts that pair well together, check out this blog on Creative Bloq.

5. Create a library of images

The images you use on your site set the tone and the feeling of your site. Even if you have hired a professional web designer to build your site, it is helpful for you to give some examples of images you like. Search through iStock, where you can save images to a “board” and share with your web designer. Or search for free stock photos through Unsplash or Pexels.

 6. Have your website wireframe ready

A website wireframe is a rough sketch of what you want your home page to look like. If you went through the process described in step 1 of this series (Craft Your Message), you already have a solid BrandScript and StoryBranded copy for your website. Take a big sheet of paper and sketch out how those words will fit on the site and where your images will go. That’s your wireframe to follow when starting to build your site.

7. Start building!

Once you have your sitemap, logo, colors, fonts, images, and wireframe, it’s time to build! That exact process will depend on the website builder you chose and whether you have hired a professional or decided to do it yourself.

In previous posts in this series, we have already covered how to choose a website builder, where to get help with building your site in WordPress or Squarespace, and what questions to ask when you hire a web designer. If you missed any of those blog posts, go back to the homepage for this blog series to be sure you catch up.

Up next

This article is part 5 of 7 in a series on Building a Website to Grow Your Medical Practice. Once you have designed your site, you're ready to take a deep breath. And then? Then you put a sales funnel in place to convert site visitors to buyers. Up next: Step 6: Building a Winning Sales Funnel for Your Site