The Website Design Process

First of all, what exactly is a ‘process’? A Web development process is a documented outline of the steps needed to be taken from start to finish in order to complete a typical Web design project. It divides and categorizes the work and then breaks these high-level sections into tasks and resources that can be used as a road map for each project.

A Typical Process

The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.

Listed below is a visual chart to help identify "YOUR ROLE" as the client and "OUR ROLE" as the Webmaster. We also go further and help break down the process into four stages: Planning, Design, Development, and Launch.

1. PLANNINGThe planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.

♦Requirements analysisThis includes client goals, target audience, detailed feature requests and as much relevant information as you can possibly gather.

♦Statement of Work The Statement of Work sums up the information that has been gathered and agreed upon between the client and Digital Creations USA. These documents are typically concise and not overly technical, and they serve as a reference throughout the project.

♦Gain access to servers and build folder structure Typical information to obtain and validate includes FTP host, username and password; control panel log-in information; database configuration; and any languages or frameworks currently installed.

2. DESIGNThe design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverables are a documented site structure and, more importantly, a visual representation. Upon completion of the design phase, the website should more or less have taken shape, but for the absence of the content and special features.

♦Wireframe and design elements planning This is where the visual layout of the website begins to take shape. Using information gathered from the client in the planning phase, Digital Creatiosn USA begins designing the layout using a wireframe. Pencil and paper are surprisingly helpful during this phase, although many tools are online to aid as well.

♦Review and approval cycle A cycle of reviewing, tweaking and approving the mock-ups often takes place until (ideally) both our client and Digital Creations USA are satisfied with the design. This is the easiest time to make changes, not after the design has been moved the development stage and coded.

3. DEVELOPMENTDevelopment involves the bulk of the programming work, as well as loading content.

♦Build development framework This is when unique requirements are installed to make sure that the server can handle the installation and set-up smoothly. This paves the way for the rest of the site to be developed.

♦Code templates for each page type is created A website usually has several pages (e.g. home, general content, blog post, form) that can be based on the custom template.

♦Develop and test special features and interactivity Here’s where the fancy elements come into play. This is where we like to take care of this before adding the static content because the website now provides a relatively clean and uncluttered workspace.

♦Fill with content Loading all of the content provided by the client or our content development staff.

♦Test and verify links and functionality This is a good time for a full website review. Everything from the home page to the submission confirmation page is tested.

4. LAUNCHThe purpose of the launch phase is to prepare the website for public viewing. This requires final polishing of design elements, deep testing of interactivity and features and, most of all, a consideration of the user experience.

♦PolishingHere, we can identify parts of the website that could be improved in small ways. After all, we want to be as proud of this website as our client is.

♦Testing Run the website through the final diagnostics using the available tools: code validators, broken-link checkers, website health checks, spell-checkerand etc.. We want to find any mistakes before hearing from the client or the client's client. Afterall, the Website is a direct reflection of your business.