Web Design Project Process Detail

Years of experience have helped us fine tune our web design project process. By following a well-defined, organized list of steps, we ensure that every aspect of the often complex web design process is covered.

Not all projects, especially smaller ones, will involve all of the process steps outlined below. However, even in smaller projects, we consider each of the steps in order.

Phase 1: Define the Project

Gather and analyze the necessary information, identifying the purpose, scope and direction of the project.

Discovery:

• Gather information
  • Designer customizes and sends Client Survey to Client.
  • Client receives, completes and submits, via e-mail or print, the Client Survey.
• Collect Existing Materials from Client
  • Designer requests delivery of all available content.
• Understand the Audience and Identify Audience's Technical Capabilities.
  • Designer reviews and analyzes the Client Survey, developing an understanding of the target audience, why they'll visit the site and their technical capabilities, develops visitor profiles.
• Develop Functional Requirements for backend processing (if applicable)
  • Designer determines functional requirements besides HTML and javascript
• Analyze the Industry
  • Designer tours existing site, gains understanding of client's current marketing materials and plan, and business strategy.

Clarification & Planning

• Determine overall Goals
  • Designer answers the question of "why is this project happening"
• Create a project plan.
  • Designer wraps the information from the Client Survey, together with budget, scheduling information, technical requirements (if any) and creates the Scope Document.
• Set the Budget
  • Designer defines the size, boundaries and feasibility of the project.
• Finalize Plan - Kick off Project
  • Designer submits Scope Document along with Contract to Client for final approval, signature, and payment of deposit.
• Set up Hosting
  • Designer registers domain name (if needed) and sets up hosting services (if needed). This provides a place to put partially completed work for client review online.

Phase 2: Develop Site Structure

The actual hands-on work of developing the structure begins with content and information strategy - how to organize content so visitors can find it quickly and easily.

Content-View

• Organize Content
  • Designer starts organizing the content conceptually and examines it from an audience perspective. Determine what content visitors would logically expect to see grouped together.
• Audit Existing Content
  • Designer reviews existing content to determine what should be kept, what should be revised and what should be thrown out.
• Establish Final Content
  • Designer determines what content should be used(existing, revamped, and new)

Site-View

• Site-mapping
  • Designer creates a comprehensive sitemap of the website (if needed)
• Review Existing Site Organization (if applies)
  • Designer confirms that new structure truly fixes any pre-existing flow issue problems.
• Set Naming Conventions
  • Designer confirms that sitemap page names conform to predefined naming convention methodology.

Page-View

• Design Navigation
  • Designer determines where navigation needs to go and how general navigation flows between pages.
• Naming and Labeling
  • Designer determines the names of buttons and labels, and confirms that the tone of the wording is consistent throughout the site.

User-View

• Define Key User Paths
  • Designer determines what (if any) user tasks will involve distinct sequences of steps and verifies that the page navigation flow is logical.
• Develop Protosite (if needed)
  • Designer can choose to create HTML click-through pages to test critical functionality areas and to verify that the informational model makes sense.

Phase 3: Design Visual Interface

The visual design, the look and feel - graphic interface is the first experience the audience has with the site. Even before users know if the site is easy to use, they see what it looks like. All design elements are created based on the established information design and the tone and goals set forth in the Scope Document.

Creating

• Review Site Goals
  • Designer reviews the Communication Brief and confirms that the primary purpose of all design is to serve the audience.
• Develop Concepts
  • Designer conceptually brainstorms visual solutions that directly function to meet site objectives. This involves experimentation with colors, layouts, thumbnails and sketches.

Confirming

• Confirm Flows and Functionality
  • During the creation of the visual concept, the Designer continually confirms that the content, page flow, navigation and any back-end functionality adhere to the plan and that they are producible.
• Test Functionality
  • Designer verifies that all buttons, and links, pull-down menus, etc, work across the most popular browsers.

Begin Production

• Produce Graphic Templates
  • Designer creates graphic templates (sliced graphics or HTML templates)
• Create Design Style Guides
  • Designer creates reference document that calls out the standards established for fonts, colors, headers. Some of this detail will end up in CSS style sheets.

Phase 4: Build and Integrate

Everything comes together to merge content, design, HTML/CSS into the completed site. Backend technical functionality (if applicable) is implemented and quality assurance testing is done.

Planning

• Assessing Project Status
  • Designer confirms that the project is still on track with regard to budget, timeline, expectations and scope. Any required changes to budget or scope are made at this point.
• Establishing Guidelines
  • Designer reviews the Client Spec Sheet Survey information to define which browsers, platforms, and technologies need to be supported
• Setting File Structure
  • Designer finalized sitemap info to determine each directory, file and its filename according to naming conventions.

Building and Integration

• Slicing and Optimization
  • Designer slices graphic templates into HTML or creates HTML pages manually.
• Create HTML Templates and Pages
  • Designer creates the home page master template for use by the rest of the pages. Code for navigation menus is established, headers, footers, as well as anything else that appears site-wide.
• Implement Light Scripting
  • Designer implements features such as rollover, forms, pull-down menus, etc.
• Create and Populate Pages
  • Designer places content into page positions defined by the wireframes.
• Integrate Backend Functionality
  • Designer integrates any backend functionality into the pages.

Testing

• Conducting QA Testing
  • Designer internally (alpha) tests all pages, and then has other perform beta testing.
• Prioritizing and Fixing Bugs
  • Designer keeps bug list and fixes the most important first.
• Conduct Final Test
  • Designer performs last check on all design, content, product and functionality features.

Phase 5: Launch and Beyond

All of the components of the site have been assembled, it has been tested and you're ready to launch.

Delivery

• Complete the Production Style Guide
  • Designer finalizes and wraps-up the Production Style Guide which should include code information for HTML tags, attributes, and definitions of graphic elements.
• Maintenance Training
  • If the Client has elected to perform any maintenance duties after launch, Designer trains them.

Launch

• Invoke Announcement Plan
  • Designer informs Client that they can proceed with their site announcement promotional plan
• Perform Search Engine Optimization
  • Designer reviews the SEO sensitive areas of each page and submits the site to the major search engines
• Launch the Site
  • Designer performs procedures necessary to make the new website visible by everyone on the internet

Maintenance

• Develop Maintenance Plan
  • Designer establishes what the routine and intermittent processes and procedures are for maintaining the site.
• Confirm Site Security
  • Designer reviews which areas of the site may be vulnerable to outside attack and verifies integrity.
• Plan Upcoming Initiatives
  • Designer reviews out-of-scope requests that came in during development and plans iterative design phases to address them.
• Measure Site Success
  • Designer regularly reviews visitor statistics, Client reviews sales, etc. to determine how well the site meets goals and expectations.

If you're curious about what we can do to help you with a special project, please contact us for more information.