10 Essential Steps to Designing a Successful Web Site

You got the gig. You hang up the phone with a big grin as the client’s words ring happily in your ear, “We want you to build our website.” Awesome. Moments later, however, the  smile droops slightly as you consider, “What do I do now?”

The following is a practical, real world guide to the 10 essential steps you need to build a successful website. Technically, there are really 10,000 essential steps, and everyone eventually comes up with their own workflow that suits their own unique style. But when first starting out, there is a process you can use to help get the job done quickly and professionally.

1 Know Your Stuff – Especially HTML and CSS

HTML and CSS should be like old familiar friends. Div elements with unique id’s should give you a warm fuzzy feeling, and few things should be more exciting in your life than a pure CSS nav bar positioned perfectly below the site’s name – residing snuggly, of course, inside its <h1> heading element.

Before you accept money to design a website, you need to have these tools confidently tucked in your belt, ready to use the right way. This may seem like an obvious first step, but you would be surprised how many people believe that the ability to draw boxes in Dreamweaver, or some other WYSIWYG program, make them a web designer. Courses like Web Design from the Ground Up are a great place to start building the skill set you really need.

2 Listen to the Client, Want What they Want

Ask the client to write down everything they want in their site, then read it like a love letter. Don’t skim over it like a grocery list, read it like it came from the person you’ve had a crush on all year, but never had the courage to talk to. Look at the blossoming site from the client’s perspective, anticipate their needs in ways that they themselves did not consider.

3 Draw a Picture

The next step is to “wireframe” your layout with the client’s needs in mind. Wireframing is really just a fancy term for drawing out the elements of your site, usually in boxes with labels like “logo”, “navigation”, etc. There are a ton of software tools that can assist you in wireframing your site layout, but in my experience nothing beats good old fashion analog paper and pencil, at least  for the first draft. Trust me, you don’t want to immediately jump into Photoshop, spend 20 hours on the perfect layout, only to find out that the site really calls for contextual menus instead of dropdown menus, or some other design-breaking revelation comes to light.

4 Draw a tree

A “site tree” is a flow chart of how one page goes to the next in your site, and once again this puppy can be drafted with nothing but a pencil and a slice of dead tree. Those of you who are environmentally inclined (and I suppose we should all be at this point), can use readily available tools in MS Word or other word processing programs.  With your client’s requirements in mind, draw your site tree logically, taking a user’s point of view whenever possible.

5 Check in with the Client

Throughout the planning stage, you need to keep your client in the loop. Getting your client’s input keeps the client happy, and happy clients write checks. Furthermore, you want the client to sign-off on each step of the development so there are no misunderstandings. That way, if the client changes their mind halfway through the process, you are within your rights to ask for extra compensation.

6 Draw the Page

Okay, you can put the pencil away. Now that the planning is complete we need to get out the big guns, and I prefer Photoshop for the job. There are many other programs you can use to design the site layout itself, but my personal preference is Photoshop (we will be adding some cool Photoshop tutorials soon).  At this point I like to draw a complete example page, with place holder text in the appropriate content areas. The layout should be to exact scale and should reflect your vision for the layout as accurately as possible.

7  Repeat Step 5

Once again, we need the client’s approval at this point. This is the crucial no-turning-back (at least without extra cash) point. Give the client the opportunity to suggest changes or adjustments in your layout, and finally get the client to sign off on the completed design.

8 Code it up

Slice up the Photoshop image of your site taking the image elements you need to code your site. Apply all the knowledge you acquired from step 1, keeping in mind that a well coded site is easier for search engines to index, and thus good for your client’s site rankings. A properly coded site that conforms to web standards will also look good in all browsers, including future browser versions, thus making your client happy. Did I mention that happy client’s write checks?

9 Add the Content

Most of the time the client is responsible to supply the content for their website. After all, no one knows more about their business than themselves. Once again, when adding the content be sure to comply to the web standards laid down by the W3C to insure consistent results between browsers.  On a side note, in my experience this step can hold up a website project for a long time. If your client is responsible to supply you with content, you might want to make sure that there are collecting and creating that content while you work on the layout. That way, it will be there when you are ready (and you are also more likely to get paid on time).

10 Take It Live!

Launch your site on the server. Some clients already have a hosting account, some ask that you set one up for them. If you are an independent contractor, you should have your own hosting account so you can re-sell hosting services to your clients. After uploading the site, fully test it in all the major browsers including IE, Firefox, Safari, etc. It’s also a good idea to go back 2 versions in your IE testing as IE users tend to ignore browser updates. If everything checks out, you’re done!

Summary

This was just a rough sketch of the many steps involved in  launching a new website, or even rebuilding an existing website. Keep an eye out on this blog for more information regarding web design and development.