When inexperienced designers start a Web site design, they typically begin by laying out the major functional blocks of the home page or by doing a color and graphic layout.
But designing a site is just the same as building a house. You have to start with the foundation and work up.If the foundation isn't solid, it will need reinforcement work later on. If the foundation isn't the right shape, then the final form of the house will not be what you need. Trying to fix a foundation after it has a house built on top of it is an expensive and time-consuming process.
A Web site is the same way. The functions of a site will drive its final form. You need to define the requirements as completely as possible before you start the site layout.
Why? Because if you don’t, you may have to throw away what you have done and start over.Not defining the requirements early can easily double the amount of work you have to do. Unfortunately, you don't get to increase your price to compensate for this. After all, it’s not the client's fault that you didn’t collect all of the requirements before you began.
There are certain steps to follow whenever you design a Web site. It doesn’t matter how big or how small the site is, the steps are always the same. The professionals design this way and so should you -- after all, you are a professional designer now.
First, the big picture…1) Define the purpose of the site
2) Identify your client’s target market
3) Conduct a competition survey
4) Define the features of the site
5) Identify keywords
6) Develop the wire frame
7) Create the storyboard
8) Build the prototype
9) Complete the final design
STEP #1 -- Define the purpose of the site.
Just like a business, a Web site needs clearly stated goals. Without clear goals, the site will be much more difficult to design. The design will lack direction and the Web site will never quite meet the user’s needs.
The site goals should just pop right out of your initial client interview, but often they will not be so apparent. Your client may not have well-defined objectives and may not even realize that they are required. It is also possible that s/he expects so much from the site that dozens of goals are presented.
When this happens, you will have to work with the client to define the real goals of the site. Discuss each one but keep narrowing down the choices as you go along.
Ken Evoy, well-respected Internet marketing author/guru and President of SiteSell.com (http://www.sitesell.com/) coined the phrase “MWR (Most Wanted Response).” It’s an excellent term to use when you are helping a client pinpoint the purpose of his or her site.
Don’t get trapped into goals that you cannot achieve or cannot control. A goal to sell 637 books a day is not realistic. You can design a site to sell books, but you can’t control how many it sells. There are too many factors involved -- you don’t have absolute control over the site’s Search Engine ranking, the size of the market, or the popularity of the book.
It’s acceptable to have more than one goal, but if you attempt too many things, the site will not accomplish anything well.
Here are a few examples of goal statements… • The primary objective of this site is to promote and sell Mr. Smith’s new book. The site will provide a direct sales outlet for the book, and it will also promote seminars associated with this book.
• The goal of the site is to create an online scholarly journal to promote the study of natural history.
(Did you recognize the last one? It could be a possible goal statement for a designer’s site.)
Once you have a clear goal for the site, everything else in the design should work towards achieving that goal.
STEP #2 Identify your client’s target market. After you figure out the goals of the site, you have to determine its audience. The best way to do this is by developing a “Customer Profile.” You and your client need to define as many specific customer characteristics as possible.
This is where your marketing skills come into play -- especially, your knowledge about niche marketing and market segments. You don’t have to be an expert but you do need to share what you know. Your client may or may not (the latter is the usual situation) have any experience with this.
Work with your client to figure out exactly who is going to visit his site and buy his products and services. How will they use the site? How do they shop? How will they buy?
Knowing who is going to visit and how they will use the site will shape the design.
STEP #3 Conduct a competition survey.Search the Internet for similar sites to see what your client’s competitors are doing.
Check out the features and content of their sites. You are certainly not going to copy their sites, but you don’t want to overlook anything that might leave your client at a competitive disadvantage. You can also get a good feel for the needs of the target market by reviewing these sites.
You can do this manually via your favorite Search Engine tool, or you can use Site Build It! (http://buildit.sitesell.com/ ). Its super-brainstorming tool will automatically provide the URLs of the most popular sites for hundreds of keywords/topics related to your client’s business theme.
STEP #4 Define the features of the site The features of the site can best be described as those things that add functionality and utility. These include the client’s requests, the features that you found during your Internet searches, and those items that you know need to be there (based on your expertise as a designer.)
Your features list might look something like this…• 2" x 3" product photos (16)
• 4" x 6" product photos (16)
• Flash animation of product #1
• Contact Us form
The purpose of this step is to make sure that you have identified anything and everything that may drive the design of the site. You don’t want to find yourself trying to squeeze something in later on in the process.
STEP #5 Identify the best keywords. Discuss and create a list of keywords that the client believes his target market would use to find his business. There are also several keyword search tools available online that can help you supplement the list.
(I like SBI!’s brainstorming tool because it quickly identifies a list of related keywords/keyword phrases along with a profitability ratio. You can see at a glance, which keywords are the best choices to build theme-related pages around. The brainstorming software is also part of a complete all-in-one package, so it comes at no extra cost.)
STEP #6 Develop the wire frame.
Developing a wire frame is an essential step. You start integrating the information you have into a Web site. The wire frame is a tool that lets you organize and reorganize the site information quickly and easily. It makes it easy to spot any inconsistencies and omissions and it lets you view the entire Web site on one piece of paper.
Start by making a site map (list of all pages). Under each page name, list the features that you will put on that page, as well as any subordinate pages. You should include comments, ideas, and as much detail as you like in your wire frame. In fact, the more detail you include, the easier the next step will be.
Wire framing forces you to examine the site page by page and function by function.It’s important to carefully consider the role of the site’s content pages. Highvalue relevant content pages are the key ingredients for building traffic. This reality is often the most overlooked and forgotten part of site development, especially with an e-commerce site. Don’t fall into the same trap.
You should expect to make several versions of the wire frame before you are satisfied. Every time you update the wire frame, review it from the visitor's viewpoint, from the client's, and from your own as the designer.
OK, back to the present task at hand… imagine that you are a visitor and walk through the site…Can you find the information you need? Can you select a product, add it to your shopping cart, and place the order? If not, go back and revise it.
Secondly, examine it from the client’s perspective…
Does it include everything that was discussed in the interviews? Does it have all of the critical features that the competition has in their sites? If not, go back and revise it.
Finally, look at it from a designer’s viewpoint…Do you see anything there that will drive the design? Is the structure so complex that it will be difficult to create a navigation scheme? Is there room for growth? Does the shopping cart that you want to use blend well with this structure, or will you need to change the wire frame because you are locked into a specific layout by the cart?
Invite others to look at the wire frame. Ask them to walk through it as a visitor would.
The more people you get, the more likely you are to find potential problems. But select them carefully. You don’t want reviewers who will stay quiet rather than risk hurting your feelings. Choose people who will really help.
Go through the wire frame as many times as required to get it perfect. Add as much detail as you want so that you don’t miss anything. Remember, if you miss anything now, you will have to add it later, and the impact can be significant.
Submit the completed wire frame to the client for review. By doing this, you are saying, “These are the requirements for the Web site as I understand them.” You want the client to agree to them before you continue.
STEP #7 Create the storyboard.You are getting dangerously close to starting the layout, but you are not there yet. There is one more step -- “storyboarding.”
Do you know how cartoons are developed? After the story and the dialog are written, but before the animation starts, the animators go through a process called storyboarding. In this step, simple sketches of key scenes in the cartoon are drawn and tacked to a wall in a meeting room. This allows everyone working on the project to develop a common baseline. It also defines critical features of each scene.
You are going to use this basic storyboarding concept, but you are going to modify it a little. Your storyboard pages will not contain any graphics. Instead, each page in the storyboard will contain everything you know about each page in the site.
Every page in the wire frame will get its own storyboard page. These pages will define all of the functions, features, and content of the corresponding Web site pages. This means more than just rewriting the information found in the wire frame.
The storyboard is where you write the text for the page and insert the copy provided by the client. Develop keyword-focused, high-value, Search-EngineOptimized content pages that will please both visitor and Search Engine alike. If you don’t, the site will not deliver traffic or sales (i.e., results). And that means a dissatisfied client and no chance at repeat contracts or positive word-of-mouth referrals.
After you complete individual pages, you can organize them into a final storyboard that displays each page’s position in the whole package. Doing this will help you to visualize the site and to see any problems in the relationships between the pages.
STEP #8 Build the prototype. Up to this point, you have been defining the requirements and contents of the site. Now you can start developing the layout. (Finally!) In this step, you will develop some nonfunctioning Web pages -- demo pages for the client to review.
Open your favorite graphics package and start developing your layout visually. Identify a section for the page header, for the menu, for the footer, and for all of the features of the site. Go through your storyboard sheets and make sure that every page can be comfortably mapped into the proposed layout. If something isn’t right, change the layout or revise the storyboard until everything fits together.
Once you have a rough layout, start the detailed graphic design. Pick the colors for the site based on client preferences, site themes, the target market, the products or services, or your personal preferences. Select your navigation scheme and draw the menu links on the page. Add a header and footer if they are part of your design. Continue to work on the layout until you are satisfied that it meets all of the requirements. If there are several distinct types of pages (content pages, product pages, etc.) then create layouts for each page type.
Stop here and send an e-mail to the client. Attach the graphic images and ask for feedback. If the client doesn’t like the layout, color scheme, etc., now is the time to find out. Ask the client to define comments as clearly as possible. It may take an additional revision or two, but if everything was defined up front, the approval cycle should go smoothly.
STEP #9 Complete the final design. Congratulations! You are almost finished. You have the requirements, the page contents, the layout, and client approval. It’s time to do the detailed page layout. Open your HTML editor and your graphics software and design a page template that matches the graphic version that your client approved. Include a functioning menu, define the font sizes, set up the links, and create areas where you can insert content. Save your design as a template so that you can just cut and paste all of the contents in place. If there are different page layouts, make a template for each type.
At this point, it is just a matter of integrating everything into the final product.This isn’t to say that this is a trivial step. The actual building process is still a lot of work, but you will have everything you need at your fingertips. You can now build the complete site, put it online and test it to verify that everything works.
The designing process, outlined in the nine steps above, works very well. If you follow it, your life as a designer will be much, much easier. Please note that the process was developed for larger design shops. In these shops, the client calls and talks to a sales representative who addresses cost, contracts, etc. Once the contract is signed, the account passes to a design supervisor who manages the design and assigns it to a member of the design staff. When different people share responsibilities, it is essential that everything be well defined every step of the way or something may be overlooked.
In your one-person business, you will probably find yourself combining steps, especially when you are developing small Web sites. Let me emphasize something, though… I said ‘combining steps,’ not ‘skipping steps.’
When you develop the site map, you can also start collecting keywords, goals, and site features. You could also create the original site map as a wire frame. There is nothing wrong with that. The essential idea is to see that you have all of the requirements defined before you move from one stage to the next.
There is also one other consideration…The design process has been laid out step by step. In reality, design is a repetitive process and all of the steps are interrelated. You may need to do some of the steps out of order, revise previous steps based on the results of later steps, or combine steps.
The size of the job will also affect your design process. Larger jobs will drive you to follow the steps more closely and to document them. On smaller jobs, you will combine steps and do some of them in your head rather than on paper. Your design technique will be a reflection of your skills, training, and personality. You will find that as you gain experience, you will tailor the procedure to fit the way you work.
It all boils down to this… If you are going to build a successful Web site design business, you need to know how to design successful Web sites -- sites that produce income for your clients.
That’s the bottom line outcome your clients want and need. And, if you meet their needs, they will help you build your business by repeat contracts and wordof-mouth referrals.
Always keep in mind that you are not just designing Web sites. You are building your business by developing marketing tools for your clients.
There are many site development resources available. Some you can buy in bookstores. Others you can buy online. But most of these only give you little pieces of the puzzle.
They teach you about usability, or they tell you about copywriting. But they don’t tie everything together. And very few of these resources tell you how to use Web sites as Internet marketing tools. They don’t really give you what you need to make your Webmaster business soar.
There is, however, one small business source that ties marketing and design information together superbly…SiteSell .com.
This small company already has an impressive “top-500” Alexa traffic ranking (and constantly gaining in popularity) so it knows what it takes to be successful. (Alexa.com, the leading online traffic-measuring company, is an Amazon-owned, Google-powered Search Engine that measures traffic-popularity based on a sampling of about 10 million users.)
SiteSell provides three valuable resources that will ensure the success of your Webmaster business…Make Your Site Sell!
Since there is only enough time and space to highlight one of the above, let’s focus on Site Build It!.
There are several “do it yourself” Web site tools on the market. For the most part, they are tools for amateurs. These tools boast about how easy they are to use and how beautiful their templates are, but few (if any) address the “business side” of site design.
They don’t consider Search Engine ranking. They don’t address the importance of customer-oriented copywriting. The simplest ones just let you get “something” online. Even the more complex ones don’t do much more than that. In short, most of these tools make no concerted attempt to build high trafficked salesgenerating Web sites.
As a professional designer, only one allows you to overdeliver for your client…Site Build It!Use Site Build It! (SBI!) to create sites for 1-10 person small businesses (SSBs = small-small-businesses). See http://buildit.sitesell.com/sbi-businesses.
Its 50+ modules and sub-modules will help you build a high trafficked site faster and more efficiently at a lower cost. Compare the competition… http://buildit.sitesell.com/compare1.html
Enhanced productivity lets you move on to the next contract in line sooner. SBI! will enable you to grow your business quickly as you complete project after project within budget and at a profit.
SBI! also includes a set of Net-marketing tools that lets you easily deliver valueadded services (for example, e-mail marketing, real link-building program and pay-per-click research/mass bidding tools) at no extra cost to you.
Visit http://webmaster.sitesell.com/ for more details.
Okay. The next two challenges go hand in hand… attracting new clients and then dealing with them. First things first…
