top of page
Writer's pictureRizza Mae Marvel

How to DIY Your Business Website: a Step-by-Step Guide with a Website Plan Template - Ep. 47






Why You Need a Website Plan Hey there! Today, we're diving into how to DIY your business website, and I’ll guide you step-by-step using a website plan template.

One of the most common mistakes people make when designing a website is going straight to the design. This often leads to staring at a blank screen or feeling lost when trying to edit a template. But here’s the truth—you need a solid plan first.

You need to determine the goal of your website and figure out what pages and sections you’ll need. Do you have your branding in place? If not, it’s essential to decide on your colors, fonts, and the copy that will go on your site. And don’t forget about keywords—knowing what you want to rank for is crucial.


To make it easy on you, I do have a checklist that you can download here:




If you are ready to get your DIY business website finished, then keep reading or listen below. Let's dive in.



Five Phases of a Website

Planning Phase

  1. Get organized. It's helpful to use a project management tool. If you want to do it digitally, Milanote is my favorite. I have tried a lot of different project management tools, but Milanote is great for creatives who don't want to stick to one way of organizing their projects. You can add to-do lists, different boards, draw, take notes, add documents and images. It lets me be creative and see everything in front of me all at once. Or there's other management tools like Trello or Asana, if you've heard of those. Here's a link to Milanote's specific website planning template.

  2. Research competitors and your industry. Researching top competitors in your market and other industry websites is a crucial step in the planning process. This will give you insight into the pages you need and the sections within those pages. By examining what others in your industry are doing, you can identify best practices and features that resonate with your target audience.

    If you're a service-based business, pay attention to how competitors present their packages and showcase their portfolios. Do they highlight their awards? If they do you can consider whether you want to include your own achievements on your site. This research helps you make informed decisions about what to feature on your website to make it stands out and meets the expectations of your potential clients.

  3. Figure out the goals of your website. Understanding the primary goal of your website is essential for figuring out what you want to include. For example, if your goal is to get people to book your services, you'll need to display your service packages and, ideally, your pricing—even if it's just starting rate prices. Being transparent about your pricing can encourage your potential clients to take the next step in booking with you.

    If you sell products, your website needs to include an online store where customers can browse and purchase your items. You'll need to set up a point-of-sale (POS) system to handle transactions seamlessly.

    This brings us to the next part of the planning stage, figuring out what pages you need.

  4. Figure out what pages you need. Start with the essential pages: your Homepage, About Page, and Contact Page. These are the backbone of most websites and provide essential information to your visitors.


    Next, add specific pages for your services. For example, if you're a photographer, you might have separate pages for Boudoir Photography and Branding Photography. Each service should have its own dedicated page to showcase what you offer. If you sell products, a Shop Page is crucial. You might also want a Pricing Page to list your packages, even if it's just starting prices, transparent pricing will help potential clients decide if you're within their budget.


    Consider adding a Reviews Page to showcase client testimonials, a Portfolio Page to display your work, a Podcast Page if you have one, and a Resources Page if you offer additional materials or tools.


    To keep your main navigation menu simple and user-friendly, you can add a "More" Dropdown menu to organize less essential pages without overwhelming visitors with too many options at once. For example, you can place pages like Resources or Podcast under this dropdown.


    Additionally, you can use your website's footer as a "junk drawer" to include links to all the pages that aren't as important. This might include pages like Terms and Conditions, and your Privacy Policy.


    One important tip: use straightforward titles for your menu items. For example, instead of using "Client Love" for testimonials, use "Reviews" because that’s what people typically search for. Similarly, use "Pricing" instead of "Investments" in your menu; you can still use "Investments" within the page's copy.


    Finally, don’t forget about Hidden Pages—those that aren't linked in your main navigation but are still important, such as your 404 Error Page, Instagram Links Page, and any Thank You Pages for your sales funnels. Start with your visible pages and then move on to creating these hidden pages as needed.

  5. Find the keywords you want to rank for. When it comes to optimizing your website for search engines, researching and using relevant keywords is essential. These keywords will help ensure that your website is visible to people searching for the services or products you offer.


    Start by figuring out keywords that are closely related to your business. For each page on your website, you should plan to incorporate these keywords into your meta title and meta description. This is how search engines like Google or Bing will find your site and present it to potential visitors.


    To find the right keywords, you can use several tools. One simple method is to use Google itself. Type in a term you think your customers might search for, and pay attention to the autofill suggestions—these are often popular searches. Also, check out the "People also ask" section on Google, which can give you ideas for related keywords.


    If you're looking for more in-depth keyword research, tools like KeySearch (a paid tool that’s very user-friendly and is what I use), Google Keyword Planner (which is free), or SEMrush (another paid option) can provide more detailed insights into what people are searching for in your industry.


    For example, if you’re a graphic designer in Juneau, your keywords might be "Juneau graphic designer," "Juneau web designer," or "Alaska logo designer." If you own a hair salon, you might focus on "Juneau hair salon," "Juneau hairstylist," or "Juneau wedding hair." An artist might use keywords like "Alaskan artist," "Alaskan art print," or "Alaska mountain artwork."


    These keywords should be strategically placed throughout your website, particularly in the headings, subheadings, web copy, and image alt text. They should also be included in the meta descriptions—those are the short blurbs that appear under your website’s link on search engine results pages. When someone searches for a keyword and it appears in your meta description, that’s how your site gets noticed.


    Focusing on on-page SEO (which includes everything mentioned above) is one of the simplest and most effective ways to improve your website’s search engine visibility. It’s all about thinking from your clients’ perspective: What words would they type into a search engine when looking for your services or products? Once you have that figured out, you can use those keywords to optimize your website. If you want to learn more about SEO, you should listen to Episode 26, Simple SEO - Your Eight Step On Page SEO Checklist.

  6. Set Clear Goals for Each Page When creating your website make sure to keep your target audience in mind. Your website should cater to their needs and interests, so set specific goals for each page to ensure it meets its purpose.

    Services Page: The primary goal of your services page is to guide visitors towards taking action. Include a clear call-to-action button that directs them to your contact page or a discovery call page where they can schedule a session or reach out to you.

    Contact Page: Go beyond just providing a contact form. Include your email address and phone number to give visitors multiple ways to get in touch. This approach caters to different preferences and increases the likelihood of potential clients reaching out.

    About Page: Use your about page to let visitors get to know you, the business owner. Share your story and background, but also highlight how your experience benefits them. For instance, if you enjoy collaborating with clients, mention how this collaborative approach enhances the design process and helps meet their needs.

    Service Pages: Visitors often visit service pages to find pricing and package details. Make sure to clearly present this information to help potential clients understand if your offerings are right for them and encourage them to book your services.

    Shop Page: To build trust and encourage purchases, ensure your shop page features high-quality images that show your products in use. Include customer reviews to enhance credibility. If you’re not yet ready to sell, consider adding a “join our waitlist” option to keep potential customers engaged.

    Homepage: Your homepage should act as a navigational hub, giving visitors an overview of your business and guiding them to the main sections of your site. It’s the first impression and should effectively showcase what your business offers.

    By defining the objectives for each page, you’ll create a website that not only attracts visitors but also converts them into customers.

  7. Determine the Key Sections for Each Page When designing your website, outline the sections you need on each page to make sure that all you website visitors questions are answered. Here’s a breakdown of what you might include:

    Service Pages:

    • Pricing Overview: Display a clear, side-by-side comparison of your prices to help visitors easily compare options.

    • Package Details: Provide descriptions of each package, including what’s included and the price. Add a call-to-action button that directs visitors to your contact page.

    • Who is this for?: Include a section explaining who each service is ideal for, helping visitors determine if it’s the right fit for them.

    • How It Works: Outline the process or steps involved in your service, so visitors know exactly what to expect.

    • Reviews: include testimonials or reviews to build trust and provide social proof.

    Tip: As you plan the sections for each page, think about potential questions visitors might have. For example, if a visitor is wondering about pricing, display it at the end of your package description. If they’re curious about cancellation policies, include it in the FAQ section.

    By structuring your pages with intentional sections, you’ll create a user-friendly experience that addresses common questions and guides visitors smoothly through their decision-making process. Here's an example of a section of a home page:



For the about page, it could look something like this:



Copy Phase

  1. Write the web copy. Using the keywords that you found earlier, weave them into your web copy. You can also use ChatGPT to guide you; I have a free guide on prompts to use with ChatGPT to write web copy. When crafting your copy, it's common to structure it with a header, subhead, paragraph, and button copy. This will guide your readers through the content. You don't always need to follow this structure. Sometimes, a simpler approach can be just as effective.

    For instance, you might find that a strong header followed by a paragraph and a clear call-to-action button is all you need to get your message across.

    The key is to stay flexible and consider what will work best for your audience and the message you're trying to convey. The most important thing is that your copy serves a clear purpose and helps guide your visitors toward the next step. Here's an example of how web copy looks, on my homepage:

Section: Above the fold Header: "Brand Identity and Website Design for Small Businesses Ready to Stand Out" Paragraph: "No matter what stage of business you're in or what type of customers you serve, together we'll find and nail your signature style to create a brand you and your customers love." Buttons: "Logos & Branding" and "Web Design"



Remember to integrate your keywords naturally into your copy. Each page on your website should have its own unique set of keywords tailored to the specific content and audience of that page. For example, on my website "Juneau graphic designer" is a keyword for my homepage. For my brand and logo design, I use keywords like "Juneau logo designer" or "Juneau brand designer." On my website design page, I use keywords like "Juneau website designer" or "Alaska website designer."

This helps search engines understand the specific focus of each page, improving my chances of ranking well for those terms. Just make sure the keywords flow naturally within your content and don't feel forced or repetitive.



Design Phase

  1. Gather photos or get a brand photo shoot done. Sometimes, the website editor you're using, like Wix Studio, offers a decent selection of stock photos that can work well for your site. However, if you want to elevate your brand, I recommend investing in a professional photo shoot. Custom images can make your website stand out and feel more authentic to your brand.

    If a photo shoot isn't in your budget right now, there are also free resources like Pexels, where you can find high-quality stock images that fit your needs. Just be sure to choose images that align with your brand's aesthetic and message. I have two episodes that you can check out. Episode 28, Why You Should Hire a Professional Brand Photographer and then Episode 29, How to Prepare for Your Brand Photoshoot with Examples. If you need more help with brand photography.

  2. Have your branding elements ready. Branding is essential for maintaining a cohesive look and feel across your website. By limiting the number of fonts you use, sticking to a consistent color palette, and establishing a specific brand vibe, you create a unified experience for your visitors. Imagine how confusing it would be if each page had a different vibe with mismatched fonts and colors—it would be chaotic and unprofessional.

    If you don't have a brand in place yet, there are a couple of things you can do. One option is to create a mood board, which helps you visualize what you like. A mood board should include a variety of elements, such as color palettes, photography or illustration styles, fonts, layout preferences, and navigation styles. It’s a great way to gather inspiration and start shaping your brand.

    Another option is to choose a website template that you find aesthetically pleasing. This can serve as a foundation for your branding, giving you a ready-made style to build on as you develop your unique brand identity. I also have a couple of resources. I have a free video training, 5 Strategies for a Standout Brand, to help you get started. A brand style guide template for $17 which has 10 different unique looks. Or you can take my DIY Brand Yourself in 5 Days Mini Course to design your own cohesive brand for less than $300. If you already have branding in place make sure to grab your brand guidelines and follow it. When setting up site styles in your website editor apply your brand elements. Start by adding your header and paragraph fonts and entering the hex codes for your color palette. This will make sure that your typography and colors are uniform across your entire site.


    Next, upload any brand elements you have, such as your logo, illustrative icons, or other visual assets. These could include unique drawings, textures, or other design elements that reflect your brand's identity.


    If your website editor has a graphic gallery, be mindful to select illustrations, photo frames, and other visuals that align with your brand. For example, if you have a boho brand, you might choose a fluid, blobby photo frame that matches your aesthetic. On the other hand, an editorial brand might benefit from clean, square photo frames.


    Button styles are also important in conveying your brand's personality. An organic brand might use oval buttons, while an editorial brand could stick to classic rectangular buttons. By tailoring these small details to your brand's vibe, you create a more cohesive and on brand website. If you want to learn more about branding, check out Episode 1: What is Branding and Brand Design?

  3. Draw a website wireframe. You want to start by mapping out each page and section with a quick sketch of your website's content. Here's how I do it: First, I create the page layout, dividing it into different sections. Within each section, I'll sketch a rectangle with an "X" in the middle to represent a photo. For the header, I like to do a big scribble, followed by a smaller scribble for the subhead. Straight lines represent the copy, and I'll mark where the buttons, images, and other graphics should go.


    This sketch is just a guide—it doesn't have to be perfect or final. The goal is to get your ideas down ahead of time to avoid staring at a blank screen. If you're using a template, you can skip this step, but otherwise, this method helps you visualize your website and keeps you organized as you build each page. Here's an example of a wireframe sketch:


Creation Phase

  1. Choose the proper website builder that right for you. When comparing popular website builders and web hosting options like WordPress, Wix, and Squarespace, it's important to consider several factors. WordPress, for instance, offers a high level of customization but requires you to also choose a hosting and domain name provider, adding extra steps. Wix and Squarespace, on the other hand, are all-in-one platforms that handle hosting and domains for you.

    As you check out these options, think about ease of use, customization capabilities, and overall cost. Personally, I prefer Wix Studio, as it offers a great balance of flexibility and user-friendliness, making it a favorite choice for my clients.

    If you're not tech savvy when it comes to website design, it's crucial to select a platform with strong template options. This way, you can avoid building from scratch, which is a huge time-saver and creates less of a headache for you.

  2. Set up your workspace. To streamline the setup of your website, start by setting up your site styles. Add your header, subhead, and paragraph fonts. Next, design your buttons, set up backgrounds, and apply your color palette. Upload the images you plan to use and organize them into folders to keep everything neat.

    For optimizing image quality and loading times, I recommend using TinyJPG for compression. If you're familiar with Photoshop, you can also use it to compress your images.

  3. Build your website. First, I create all the necessary pages to establish the site’s menu structure. I then focus on building the home page, laying out each section even if some elements are placeholders. For instance, if I haven't selected a photo yet, I'll use a placeholder image. Similarly, I'll add placeholders for headers, subheads, paragraphs, and buttons if necessary.

    Once everything is roughly laid out, I go back and replace placeholders with final content—upload the images, add the copy, and link the buttons to their respective destinations.

Testing and Launch Phase

  1. Add SEO Adding meta titles and descriptions to your website is a recommended but optional step. If SEO feels overwhelming, it’s okay to skip it for now.

    If you choose to incorporate meta titles and descriptions, be strategic with your keywords. Use the same keywords in your web copy and your image alt text.

    Additionally, ensure your website is mobile-friendly, because it improves SEO and enhances search engine results.

  2. Choose your domain name. When choosing a domain name, aim for something simple, memorable, and closely related to your business name. Avoid complex spellings or unconventional characters. For example, if you're considering a domain like "graphicdesigns.com," stick with the standard spelling and avoid variations like "graphicdesignz." This helps prevent confusion and makes your domain easy to remember and market to your audience.

  3. Test your site. Check for broken links and errors across your site, and make sure to test it on various devices and browsers to ensure compatibility.

  4. Announce it! Announce your new website on social media and your email newsletter. Many people forget to promote their new site, which leads to it going unnoticed. It's important to actively share your website and invite people to visit. Leveraging social media marketing is a great way to get the word out and drive traffic to your new site.



Conclusion

To recap everything we just talked about, here it is again:


Planning Phase

  1. Get organized

  2. Research competitors in your industry

  3. Figure out the goals of your website

  4. Figure out the pages you need

  5. Figure out the keywords you want to rank for

  6. Set goals for each page

  7. Figure out the sections you want for each page


Copy Phase

  1. Write the copy


Design Phase

  1. Gather photos or get a brand photo shoot done

  2. Have your branding elements ready

  3. Draw a website wire frame


Creation Phase

  1. Choose your website builder

  2. Set up your workspace

  3. Build your website


Testing and Launch Phase

  1. Add SEO, meta titles, and description. Optional, but recommended

  2. Choose your domain name

  3. Testing phase

  4. Launch.


Take the time with each step to ensure a successful launch. Again, you can use this PDF checklist to help you get started:




I’m in the process of developing Wix web templates designed with strategy in mind to make your website creation process easier and cheaper. These templates allow you to simply plug in your content and achieve a well-designed, cost-effective website. You can join the waitlist at zsquaredstudio.com/webtemplates.


So there you have it. I hope that gives you a better idea on where to start with your website and why having this plan is going to speed up the process and hopefully not be so overwhelming.


That's all I have for you today. Have a great day and happy designing! Bye.



 

Z Squared Studio is a Brand and Web Design Studio based in Juneau, Alaska. Check out www.zsquaredstudio.com for custom brand design, Alaska logo design, or web design.


Or sign up for our DIY Brand Yourself Mini-Course if you're ready for a stand out, scroll stopping brand without hiring a designer.



Brand Need a Facelift? Check Out These Resources



留言


bottom of page