Download Introduction to Technical Communication

Designing Basic Web Sites II:
Process
Based on Web Style Guide, Lynch and Horton
2001 www.webstyleguide.com
Technical Communication Fall 2006, DAHMEN
Process: Before you Begin

Planning




What are your goals?
Know your audience.
Design Critiques
Content Inventory
Site Specifications

Goals and strategies






Mission
Supporting this mission
Goals for site
Strategies for meeting goals for audience
Criteria of succes
Maintenance
Production Issues





Budget
Pages in site
Technical needs (ie Cold Fusion, PHP, etc)
Schedule for design and production
Identify team/responsibilities
Site Development Process






Site Definition and Planning
Information Architecture
Site Design
Site Construction
Site Marketing
Tracking, evaluation and maintenance
Step I: Site Definition and Planning





Production
Technology
Web-server support
Budgetings
Site Editor
Step 2: Information Architecture


Site specification
Content







Layout scheme
Site lap
Outline
Table of Contents
Tech Support specs
Schedule
Design sketches
Step 3: Site Design

Content






Text (edited, proofread, edited for web)
Graphics and templates
Examples of pages
Interface desing
Illustrations
Photography
Site design continued

Technical components





JavaScript scripts, applets, etc
Database and support
Search enging
Templates
Accessibility testing
Step 4: Site Construction







Completed HTML pages
Navigation completed
Programming in place/beta testing
Database functioning
Graphics ready and in place
Text proofread
Archives made
Maintainable Code
Example 1:¹
<! — START OF SCHEDULE TABLE ======= — >
<table summary="Human Investigations Committee II schedule, FY
2001." border="0" width="100%" cellspacing="0" cellpadding="1">
<tr valign="top">
<! — =============================== — >
<td width="50%">
<p class="tabletext">
Deadline for Submissions</p>
</td>
<td width="2%">
&nbsp;
</td>
<td width="48%">
<p class="tabletext">
Meeting Dates 2001</p>
</td></tr>
<! — =============================== — >
¹ Taken from Horton and Lynch: http://www.webstyleguide.com/process/construct.html
Maintainable Code
Example 2:
<table summary="Human Investigations
Committee II schedule, FY 2001." border="0"
width="100%" cellspacing="0"
cellpadding="1"><tr valign="top"><td
width="50%"><p class="tabletext">Deadline
for Submissions</p></td><td
width="2%">&nbsp;</td><td width="48%"><p
class="tabletext">Meeting Dates
2001</p></td></tr>
Step 5: Site Marketing








Print, posters, billboards
Radio/tv
Kiosks/physical positions
Direct mail
Business cards
Promotional items
Bills/statement
Manuals/packaging materials etc…
Step 6: Tracking, Evaluation and
Maintenance




Site tracking
Maintenance
Archives
Revisit your success criteria!
Web Site: Take Home Test




By completing this test students should be able to:
 Design and create a simple Web site using Macromedia Dreamweaver
consisting of a home page and at least 2 dependent pages
 Understand how to modify writing for the Web
 Use the following elements of Web pages: tables, navigation bar, links,
images, styles.
 Understand basic aspects of Web design such as organization, layout
and space management
This Website will have one home page and two dependent pages, though
you can create other pages in the site architecture even if they are not
created for this project.
Final submission must include:
 Mission statement for site
 Picture of site architecture
 The site itself
You may use the content of the ARANAS website or use your own
content/idea which must be approved by me.