[Back to Johndonohoe.net]
TutorialFinal Review
Introduction
  • The Purpose
  • "Common Language"
  • Process Overview
  • Project Roles
  • Review

The Purpose
The purpose of this tutorial is to increase communication between a website design agency and a new client.

This tutorial will instruct a new client in the basic website design process which will help create a common language between the client and the agency.

This instruction is geared towards novices to website design or experienced clients who would like a clearer definition of concepts they have already worked with.

This common language between client and agency includes an understanding of:

  • Basic steps in a website design and development
  • Project roles and responsibilities
  • Common deliverables and their purpose
  • The interdependencies of roles and necessary work


Understanding equals Success:
The theory being applied to this tutorial is "if everyone on a project has a solid understanding of the process the project has a greater chance of being successful."

A “solid understanding” can be described as:

  • A universally understood set of expectations of how the project will progress which reduces unproductive miscommunication
  • A greater ability to anticipate project hindrances and compensate for them
  • An increased capacity for everyone involved to provide a higher quality of participation in the design process capacity to provide higher quality participation in the design process

Tutorial Layout:
The tutorial is broken into three stages:

  • The introduction (which is where you are currently)
  • The tutorial
  • A final quiz

Read thought the next few pages of the introduction and then move onto the tutorial.
The each chapter of the tutorial will have a review quiz. The tutorial ends with a final quiz. There is no grading for these quizzes; they are merely a tool to help you retain what you learned.

 

"Speaking a Common Language"
How many times have you felt your lack of knowledge was preventing you from doing your best in a given situation? How many times have you been required to participate in a project or task but your complete lack of experience has left you at the mercy of the experts?

Imagine if you had a better understanding of what it took to fix your car. You don't need to be an automotive expert (that is what you are paying the mechanic for) but think if you had a basic understanding of how your car works and how a mechanic approaches fixing your car. You would be in a more equitable position, right?

You and your mechanic would share a common language when it comes to talking about broken cars.

The same idea applies as a client when starting a web design project with a design agency.

You don’t need to be an expert in the design process, but by understanding some of the basics of how a website is created you would communicate better with the design team, which in turn can:

  • Add value to the design process
  • Ensure that your project meets your definition of success
  • Make sure the final website reflects what you need it to


*Cartoon appears courtesy of Joe Martin. © 2007 Neatly Chiseled Features, all rights reserved

Process Overview

Waterfall Process
There are as many ways to build a website as there are reasons to build a website. Each project will have its own unique goals and its own special way of approaching a website project.

The basic website design process shown here is the most common one in use today. It is a variation of the software development “waterfall method” of project management, meaning that the timeline of the project is based on a sequential completion of tasks. Once one task completed, it is finished and not to be revisited. The work is to only flow forward, like a waterfall.

The different steps in the project can be broken down a multitude of ways from very broad groupings down to granular task.

This tutorial breaks the overall project cycle into four major phases:

  • Strategy – The assessment and planning
  • Design – Visual and conceptual design
  • Development – The implementing the needed technology
  • Quality Assurance – Check and ensure that the project goals are being met




Project Roles
The phases and project activities are the focus of this tutorial. But let’s define who participates in these activities.

The following team roles are the most typical in a web design project. There are variations of these roles found on different projects and some specialized positions aren’t represented.


The Sponsor
Another name for the sponsor is the client. The sponsor is one of the most critical roles in the successful completion of a web design project. The sponsor/client is the expert about the client organization; what their goals are, their business objectives, their culture. Without extensive participation from the client the design team cannot hope to deliver a product that meets the client’s needs.

Producer
The title producer includes account and project managers. These are the big picture people that focus on keeping the project team on task and making decisions that support the overall project goals.

They are traditionally the single point of contact between the client and the agency teams and act as the client advocate when the client can’t be present during the project.

Traditionally, producers do not come from any one discipline in the design agency but often times know enough about the various skill sets to be considered generalists of website design and development.

Editor
The editor is responsible for the copy and message of the website. Sometimes this position is strictly a strategic role that is tasked with setting the tone and voice of the client organization and overseeing the content development and acquisition. Other times this position is primarily as a copywriter, taking the tone set by the client‘s brand guidelines and executing them by creating copy for the website.

Information Architect
The information architect is responsible for the underlying structure of the website and making the website usable, intuitive and well organized. The effects of the information architect’s work reaches into all other disciplines (strategy, graphic design, development, content, etc.) and as a result, the information architect must be a generalist and collaborate extensively with their team members.

Designer
The designer is the most well know position on a web design team as their work is the most obvious. The graphic designer is responsible for creating the emotional connection between the audience and the website. Through primarily visual means, the graphic designer is responsible for relating the personality and message of the organization as well as effectively presenting content.

Front-End Developer
The front-end developer takes the work of the designer and information architect and makes it functional. They build the “surface level” or “presentation layer” of the website, which is another way of saying they code the aspect of the website that the user sees and interacts with on their computer.

Back-End Developer / Database Engineer
The back-end developer is usually only engaged with websites that require dynamically generated content or data manipulation. They are the builders of the website’s data and content repositories. Depending on the project goals, these technical wizards can create the website’s ability to personalize a user's experience by presenting dynamic content in immediate, useful and relevant ways. They can provide a wide variety of functions, including eCommerce, account creation and maintenance, and the gathering of analytic data.

Introduction Review

Click the button below to launch a quick review of this introduction. Once you are done, close the review and start the tutorial.

Take the Chapter Review
key points
  • Tutorial Objectives
    You will be able to:
    • Relate the basic tasks/concepts involved in designing and developing a website
    • Explain the inter-dependencies between the tasks
    • Use the terminology common in the design/development process
  • Tutorial Benefits
    • Universally understood expectations
    • Greater ability to anticipate project hindrances
    • Increased capacity to be involved in the creative process
Phases in a Web Design Project
Creative Commons License This work is licensed under a
Creative Commons Attribution-Noncommercial 3.0 United States License.
References