THE PROCESS

One of the most common questions we're asked is to explain the process of developing a professional Website. In this article, we'll be covering what is involved in producing and managing a large Web project. Although the process is more about large projects, most of this information will pertain to smaller Websites as well. The process would also pertain to an online ad banner or marketing campaign, but with fewer planing documents.

Stage 1: Research and Planning

The first part of any new project is discovery; which involves researching a client's business and/or product. This can involve meetings and interviews with key individuals, as well as researching the marketplace and competitors. The amount of time it takes depends on the complexity of the business or the budget allowed. Without the discovery process, a designer cannot design a Web site that communicates effectively.

Although important, the discovery phase is not restricted to large budget projects. For lower budget sites we guide the client into providing their own market research and competitor activity via questionnaires and meetings. This can greatly reduce the amount of time and costs needed to put a strong plan in place.

Planning documents
The actual documents produced by Dragonfly can vary depending on size, complexity, components and budget. A project with a content management system, four categories of products, online ad campaign and several sub-brands will obviously require more planning that a eight page Web site that introduces a new business service to a limited market. No matter how large or small, there are some basic planning documents that we develop for all of our Web projects.

Proposal: A bid document that outlines that basics of the project, rough time frame, budget and tasks. The proposal is just a guide, and the parameters of the project can grow beyond what is outlined.

Letter of Agreement: Outlines the exact details of the project up to the date and is signed by all parties involved -similar to a contract.

Project Questionnaire: A basic series of questions used to help us write a more effective creative brief and/or technical brief. The questionnaire is typically answered by the client.

Marketing/Creative Brief: A simple, one-page document that outlines the creative and marketing objectives of the project. The end rersult will guide the Website design.

Flow Chart (site map): A visual planning element that shows all of the site’s major architecture and page relationships. The flow chart will visualize the page hierarchy and any back-end data development. The end result is a document that shows where a user will travel for content and the source from which it's published. (see sample)

Wire frames: Document shows the rough mock-up of page content in relationship to positioning and emphasis. This is a rough visual representation of what to expect on a page not a design document. Some projects will have multiple wire frames for various sections, depending on complexity.

Design Comps: Visual designs that illustrate the look and feel of the site. We produce from two to four design comps for a project, depending on budget. The comps will be static representations of Web pages, and can change slightly once moved into production. A typical comp will consist of a home page and inside page layout.

Optional Documents, depending on project scope:

Content Plan: Depending on project size and other variables, this is a plan for how the site’s content will be developed. When redesigning an existing site with good content, the needs will be minimal. For most site overhauls, the required amount of new content can be extensive. Having a plan that outlines what’s needed, who will develop new content is key to keeping the production on track.

Back-end development plan: For projects requiring extensive back-end Web development, we’ll put together a planning document that shows how the data will be stored, administered and published to pages within the site. This document is reserved for more extensive Web projects or when working with data from a client’s existing system. Development plans have their own flow chart that illustrates the data paths.

Design Guide: A useful guide for anyone who needs to add additional pages or content to the Web site. The guide will list such visual elements as text styles, spacing, color usage, image usage, page sizes and style sheet parameters. The size and detail of the design guide will depend on the complexity of the site. This document is reserved for larger sites where new pages will be added on a regular basis, especially by persons within the company. Not every Web site requires a design guide, but it's a must with sites managed by internal departments or corporations. (see sample)

Next Page >> Stage 2 - Design