7 Steps Before You Begin Any Web Site

Before you begin any Web site, you must first have a good understanding of the project as a whole, as well as all the different steps or phases that you will move through during the Web-development process.

Most Web site projects have a logical flow of development, a type of evolution with distinct phases that, when followed, can streamline the entire design process. Here’s the general order in which most Web site projects evolve:

Planning

7-golden-rule-planning

Define the goals and purpose of the site, construct a site identity, determine what content should go on the site, diagnose dynamic site requirements, if any, and figure out ways to attract visitors to the site after it gets published on the Web.

Contract

7-golden-rule-contract

Draft and submit a proposal to the client for the project that outlines the scope of the work in written form so that both the designer and client have a clear understanding of the expectations and outcome of the project, as well as financial agreements, time frame, and deliverables. Upon approval, the proposal gets converted into an official contract that both parties sign, and a deposit is paid to the designer to begin work.

Design

7-golden-rule-design

Characterize a target audience; construct an identity for the ideal site visitor; gather information about the target audience’s computer usage; determine the benefits to visitors; make decisions about layout, color, organization, and content; and finally mock up a design and present it to the client for approval.

Building

7-golden-rule-building

Convert a mock-up into HTML, CSS, and JavaScript in a WYSIWYG Web editor such as Adobe Dreamweaver; organize content in visually pleasing ways; create and optimize Web graphics; add dynamic capabilities to the pages with JavaScript and other programming languages when warranted; and ensure that all the pages on the site look good and function well in a variety of browsers on both the Mac and PC as the pages are being built.

Testing

7-golden-rule-testing

Test the design on a testing server in the most popular browsers and browser versions on Mac, PC, and Linux platforms in the most popular operating systems (Windows XP, Vista, Mac OS X, and so on) at a variety of monitor resolutions; validate the code; check for spelling errors; fix coding errors; and otherwise ensure that each visitor can navigate through the site with no technical problems.

Site Launch

Secure a domain and hosting plan, upload the site’s files to a host server, retest the site, and be ready to maintain the site postlaunch.

Postlaunch Site Maintenance

Ensure that the site’s content stays relevant and up to date by adding new and editing existing content, as well as making improvements and other enhancements to the site.

There have been 13 comments | Subscribe to Comments | Jump to Form »

B. Andreas

Golf and Web. You made very well couple there. Thank you for this great article.

1

Daryn St. Pierre

I think this is a nice guide for both the novice and veteran groups. The only thing I would change is to place the domain and hosting purchase prior to beginning the rest. There’s nothing worse than going through all the work and then being halted by the domain name the client originally wanted no longer being available, and/or dealing with someone at a hosting company that drops the ball, thus halting progress (trust me, I’ve been there).

2

Mert TOL

@ Daryn St. Pierre :

I think this is a nice guide for both the novice and veteran groups. The only thing I would change is to place the domain and hosting purchase prior to beginning the rest. There’s nothing worse than going through all the work and then being halted by the domain name the client originally wanted no longer being available, and/or dealing with someone at a hosting company that drops the ball, thus halting progress (trust me, I’ve been there).

I agree, hosting and domain processing are sometimes much harder than ever. People should build good connection to their clients exactly in these phase. Next time, I’m thinking to write about clients situations and problems.

If you want, you can send your experiences to me via email.

3

Andy

Very nice and useful article. Thanks for sharing.

4

Jonathan Meeler

Thanks for the post. I’ll be launching my website soon and this article really helped.

5

Kay

Um… Could you please implent a more display-friendly background to your own site? Just scroll down and see what’s happening on a regular notebook display: terrible.

6

Phil

Nice guide, as said above though Domain is a must in the contract and planning stage, by the time all is complete that domain might have gone and you would be left returning to the branding stage again potentially.

7

Mert TOL

@ Kay :

Um… Could you please implent a more display-friendly background to your own site? Just scroll down and see what’s happening on a regular notebook display: terrible.

I’ll fix I fixed it, thank you for pointing that out.

8

Brian Cray

Excellent approach. Once again, great article my friend.

9

Digital Agency

Pretty simple, pretty straight forward – I say, not a lot of agencies can even get this right. Thanks for sharing.

10

Kureikain

I think this is just useful for simple site with static HTML. A huge site with PHP, database… We can not do it easily like this!

Because the phase is megered into! We have much section, features on the site and will publish & test step by step then we continue to publish other feature and test again! I absolutely believe that no one can get a huge, fantastic right as starting. By the time, the service/website will get become bigger than!

But anyway, this is very useful for small service/website. Thank you!

11

Jaymus

You forgot one glaring, crucial step. The one that most designers and clients forget: The copy.

Write the content, or at least have a good start on your content before you design. What a website says is just as, if not more, important than how it looks.

12

Mert TOL

@ Kureikain :

I think this is just useful for simple site with static HTML. A huge site with PHP, database… We can not do it easily like this!

Actually, these phases are not just for the static HTML web sites. First of all, you should think generally for these phases. And than, of course, professional designers or developers (like you) can fill the for example “Building” or “Testing” phase with so many specific steps. You can feel free like this for every steps.

13

Post Comment on This Article

Your e-mail address won't be published. If you simply add some value to the original post and stay on the topic, your comment will be approved.

You can use Textile parameters on your comments. For example: _italic_ *bold* bq. quated text "link text":URL — Get your own picture next to your comment with a Gravatar account.