Our 5 Step Fool-Proof Website Design Process Guarantees Success

Since 1997 I've focused on developing a website design process that will help small business owners like you really grow your business. The more sites I designed, and the more feedback I got from clients, the more specific the process became until I formalized a model that, if followed, guarantees success.

I taught this model for the first time in 2000, in the WSU-Vancouver Web Technologies program. Students who struggled with website overwhelm became confident using my step-by-step approach and their websites took shape before my eyes. I've used it formally and informally with clients with the same successful results, year after year.

My 5 Step Fool-Proof Website Design Process

Step 1: Define your Objectives
Step 2: Map and Travel
Step 3: Design your Layout and Look
Step 4: Build your Web Pages
Step 5: Launch and Test

Over the next few months, I'll explain this process in more detail in our free Better Websites ezine. Here's a summary of what you'll learn:

Step 1: Define your Objectives
You'll do this for your own business. Some of the objectives are obvious, like increasing sales. Don't let yourself off easy here. Really dig in and come up with all the reasons you think a website is going to work for your business. Brainstorm with a friend or partner. Keep writing until your mind is blank.

When you have a good list of business objectives, start thinking about your customers. Why are they going to come to your site? You'll find that if you understand and focus on what your customers want, you'll be two steps ahead of most other business websites.

Step 2: Map and Travel
Once you know what your website must do, you can begin creating a site map, similar to an organizational chart, to help you see how your customers will click from page to page. A simple site map might look like this:

Start simple and remember to become your customer and "travel" through the map to see if the path you designed works. I always take another look at the objectives we wrote down in Step 1 to see if each page of the website accomplishes at least one objective.

Step 3: Design your Layout and Look
The design of your site has two parts: the layout and the look.

The layout of your site can be the most challenging. Make sure it's easy to tell what part of the page is for navigation and what part of the page is for content. The basic layout principle of using a grid to line things up works exceptionally well in web design. Sketch several layouts using the navigation you designed in your site map. Try different placements for navigation and think about what will make the most sense to your customers.

The look of your website should reflect the look of your business. Use your logo and the same colors you use with your other business materials such as your business card and letterhead. If you don't have a logo, design one or hire this out to a professional. Choose colors that reflect the tone and quality of your business. Keep the colors and fonts to a minimum. Simple is best. Use high-quality graphics to maintain a high-quality image for your business.

Working from your sketch, use a graphics program like Fireworks, Paint Shop Pro, or Photoshop to create a "mock-up" of your page. A mock-up is a digital image that shows exactly how everything will look. You can use this to show your friends or partners what the you plan for the website before you start building it. Get feedback and suggestions, tweak your design, then move on to step four.

Step 4: Build your Web Pages
When you're sure that the look and layout of your page is right, it's time to begin building your website. I recommend using a website management tool like Dreamweaver or FrontPage. (My tool of choice is Macromedia Dreamweaver.) Using tables to lay out the content, create your page layout in HTML. Be sure to test your page in both Netscape and Internet Explorer. You will use this first page as a template for your entire site.

We use templates to keep websites consistent. It's very important that things like navigation, logos and content always show up in the same place on every page. Templates help you keep the layout and color consistent throughout your site. Both Dreamweaver and FrontPage have features that allow you to create templates and lock them so that pages can be changed only in the areas you want.

Using your template, create your Web pages and add the content. You can add extra links in your content to help your customers find specific information and you can create links to other files such as PDFs, Word documents or photos.

Step 5: Launch and Test
The last step in the Fool-Proof Website Design Process is putting it on your Web server for everyone to see. I recommend placing your files in a test folder first so that you can preview them before they're live to the public.

The easiest way to put your files on the server is to use Dreamweaver or FrontPage. They automatically create a mirror of your website, making sure that links work and images display properly once they are on the Web server.

Another option is to FTP your files (File Transfer Protocol, the process of sending your files to a Web server) is a free tool called WS_FTP. This tool requires that you manually upload files and folders to create an exact duplicate of your website on the Web server.

With your website uploaded to the server, it's time to open your browser and see how it looks. Type your domain name in the address box of your browser and click Go. (If you placed your site in a test folder, your address would look something like this: http://www.mydomain.com/test/ )You should see your site load in the window. Be sure to click to view every page. Check all links, email addresses, forms and other interactive items you have on your site.

When you've tested everything and you're sure that each and every link works, it's time to send out an announcement to your customers, friends and associates. (If you first uploaded your website to a test folder, remember to re-upload the site to the root of your Web server folder and re-check links and forms to make sure they still work correctly.) Congratulations, you now have a website.

You may also want to read more about the services we provide to help your website work better for your business. Our services page will give you more information.