|
Steps in the Web Site Production Process
Step 1: Form a Team
As part of our Web Training program students work in teams to create a Web site for a client within the Sonoma County community. This Web site began in August of 2002, as students enrolled in CIS 58.54 and CIS 58.55 met as a class and a team was formed. The students assigned to this Web site were assigned the following roles:
- Project Manager - Project Managers are responsible for defining the scope of the project, developing the project plan, scheduling the project, allocating resources, budgeting and managing the team. Their role on a Web Development team is to maintain the vision and goals of the project throughout the development process, and make sure things get done (on time and within budget). The project manager is responsible for scheduling, progress reports, workflow, and client relations.
The project manager must be superb communicator. They will be asked to manage people, resolve conflict, deal with clients, adjust to change, and meet deadlines.
The Project Manager deals with all the political and business issues, including contracts, licensing, and other administrative issues. The project manager also handles client management, ensuring that client content and feedback comes in on time.
-
Designer - The role of the designer is to visually communicate the site's message. Web designers should have a good understanding of design principles including: layout, interface design, color theory, and typography.
Designers need to understand how images need to be created for display on the Web, as well as a basic knowledge of Web site construction. Designers have strong skills in HTML and Photoshop.
The designer creates the original images for the site including site navigation, color scheme, and logos. Designers scan in photos and converts them to web images. Coordinates color scheme, selects font, determines look and feel of the site.
Designers are responsible for creating all images used at the site, such as navigational graphics, photos which are supplement site content, logos, and header graphics. Designers create a site color scheme, determine the formatting for all text at the site and determine specifications for all content photos. Finally the designer translates the site mock up into an HTML template which is used by the content developers to build the site.
-
Programmer - Creates Perl, Java, ASP, PHP or Javascript code for project. Will communicate with the client to determine their needs and design a Web solution that works for this project. Programmers work in cooperation with the designer to insure their forms and output of the scripts coordinates with the look and feel of the site.
Programmers are responsible for making "interactive" portions of the site work. This may include creating creating feedback forms, a calendar which the client can update, an online shopping cart, or database driven pages.
Programmers need to Understand how Web programming can be used
to enhance a Web site and communicate the programming options
to the client and their team. Programmers must have a thorough
understanding of HTML , UNIX, database and Web programming languages.
HTML Content Developer - Builds the majority of the pages that make up the site. Content developers work closely with the client to gather, understand, and modify the content. Content developers are responsible for understanding the template created by the designer, and inserting the client's content into the template to produce the Web site. They also convert written forms to Web pages, or PDF files.Content Developers are responsible for checking for typos and grammatical errors.
In some cases content developers are responsible for marketing and search engine optimization. Finally content developers contribute to the creation of the client manual and client training.
Step 2: Set Goals for the Site
Students met as a team and with the client to determine the needs
of the project. The goals and objectives were to entice new students
to the program, provide information about curent and upcoming
classes, provide resources for activities, schools and other theaters
of interest as well as to market performances to the student body
as well as the public. The most important feature is to provide
an easily updateable interface for website maintenance. Future
goals are to provide either on-line ticket registration or registration
through email.
|
 Step
3: Create a Propposal and Mockups
A Web Proposal is a written description of the site which allows
the client and the team to clearly understand what the site will
contain and how it will be created. Web proposals contains a written
overview of the project, a detailed list of deliverables, a storyboard,
timeline, workchart, and contract.
An essential element of the proposal is the site mock ups. These
are pictures of what the web site will look like after it is
built. Mock ups are done for the opening screen and the major
pages which link off the main page (called second level pages).
Designers are required to create three versions of the mock
ups for the client. In many cases the mockups are three very
similar designs with minor variations in layout or color. This
site was an exception, each mock up is very different, and they
were created one after the other in response to client feedback.
The client originally requested a red site. When presented
with a site that had large areas of red, they found the colors
to be overwhelming on screen. The second mockup's colors were
much more inviting, however the design was rejected in large
part because the photo chosen had negative memories for the
client. The third mock up included a different photo and added
blue to the color palette, making the site pop. The client selected
third mockup shown at the left.
|
Step 4: Produce the Site
The actual production of the site occurs in a 2-4 week period.
That may surprise you, since the course lasts for 18 weeks. We
have found that planning, takes between 8-9 weeks, the testing
is done over a 3 week period, and handoff and training can take
2 weeks. So.... we crank these sites out in a month.
Step 5: Test and Debug
After the pages were completed and the scripts written the site
was viewed by classmates, the client, and typical users. The testers
answered questions about the "look and feel", site content,
navigation, and download time. They used a wonderful online form
created by programmer Dale Goetsch. Next, the site was viewed
in various hardware and software configurations including IE and
Netscape, Windows and Macintosh, 15" - 21" monitors,
without images, and with slow modems or T3 connections. Errors
were corrected and feedback evaluated. Overall the site was well
received and very few changes were made.
Step 6: Handoff and Training
After completing the site the team produces a CD with the web
pages, scripts, web graphics, original PSD files and a client
manual. We can also load the site onto the client's server. In
this case the site will be loaded by the Webmaster for SRJC. The
team also offers a few hours of training so the client can maintain
the site after we hand it off. The clients plan to use Dreamweaver
to maintain the site. We recommended that they take a course in
the software.
Problems Encountered and Lessons Learned
The primary problem this group faced was communication.
One team member (let's call them Silent Sam) was not answering
email in a timely manner, or sending email to the team. Silent
Samchecked email every 3-4 days and seldom answered messages.
The team was also concerned about Silent Sam's standards, some
of his assignments were sloppy and were redone by teammates. The
group was becoming frustrated and at one point asked me to remove
Silent Samfrom the project. To solve the problem I met with the
team and told Silent Sam- "communicate or be dropped".
Communication was defined as answering email messages within
24 hours of them being sent, requiring Silent Sam to send the
team three messages per week, the team was required to cc me
on all group communication, and Silent Sam needed to raise his
standards to his teammates' level.
How to Work on a Project like this
To participate as a Project Manager or Content Developer enroll
in these classes:
- CIS 58.51 A/B: (HTML) Creating Web Pages
- HTML and CIS 58.54: Web Content Practicum
To participate as a Designer: Enroll in the classes listed
above and
- CIS 73.31 A/B Intro. & Intermediate Photoshop
- CIS 58.53 A/B Web Graphics, CIS 58.55: Business of Web
To participate as a Programmer: classes listed above and
- CIS 10A _ Comp. Sci. Fundamentals
- CIS 16A _ Beginning Programming
And 1 of these 4 programming classes:
- CIS 17 Java
- CIS 54.31 Perl
- CIS 54.13 Javascript
- CIS 54.35 ASP
- CIS 58.55 Business of Web
|
| |
|
|
