Introduction to Technical Communication

Download Report

Transcript Introduction to Technical Communication

Designing Basic Web Sites
Week 12
Technical Communication Fall 2003, DAHMEN
Before getting started…





Match user and business/organization goals
Use what the Web does well
Functionality over entertainment
Simplicity
Stay focused
Write a Mission Statement





To clarify what you are designing
To define your objectives
To prevent ‘project creep’
To establish ‘buy in’ from others
Include:



Who the site is for
What the site does
How it differs from other similar sites
Template for Mission Statement¹
____ (site name) is a ______ (noun describing
site), offering _______ (type of product or
service) to __________ (adjective describing
audience) who _______ (need or want) to
________. Unlike other sites, which ___
(description of competition), your site name
will (verb-based purpose, distinguishing your
site from its competition).
¹Cohen, J. (2003). The Unusually Useful Web Book. New York: Pearson Education, 12.
Sample Mission Statement
“MySistersGarden.com is an online gardening
offering information, advice and products to
gardening enthusiasts who want the best possible
products for their outdoor garden. Unlike other
gardening site, which provide either information or
products, MySistersGarden.com will offer a
comprehensive suite of garden-planning tool to
assist in all phases of garden planning, from plant
selection to landscape design to product purchase
to year-round maintenance.”
Deciding what Goes on the Site




Set basic priorities
Make ‘wish list’ of possibilities
Identify ‘core’ features
Prioritize ‘non-core’ features
What goes in your Plan?











Name of site (with alternatives)
Mission and goals
Audience Analysis
Task Analysis (what will they do there?)
Revenue model
Features of site
Identify competition
Have a marketing plan
Identify the team
Outline a schedule and a budget
Identify assumptions
What a well designed site should do…





Let users accomplish their tasks efficiently
Let them do so on different platforms
Make its purpose clear (from the very first
screen)
Follow basic conventions for the Web
Develop its own style
Some Areas where Web Conventions Exist






Page layout/design
Readability
Usability
Use of links
Use of symbols
Placement of certain types of objects
(navigation, logos, shopping carts, logout)
Ways to Create Your Site





By hand (Notepad, Homesite)
HTML editing software (Dreamweaver,
GoLive, FrontPage)
Word ‘save as web’
Graphics (Photoshop, Fireworks, Illustrator)
Animation (Flash)
Ways to Organize Your Site






By task
By user goals
By business goals
“Natural” categories
Organization of off-line organization or
business (bad idea)
By language or location (then replicate)
Documenting Site Structure²
Site Map
Help
My Sister’s Garden Home
Contact us
Stores
Sunny
Lawn
Gardens
Patio
Gardens
Shady
Sunny
Plants A-Z
Shady
²Cohen, J. (2003). The Unusually Useful Web Book. New York: Pearson Education, 108.
User Path
User Logs in
New or old
user
New User
Registration page
Welcome page
Returning User
Page Schematic
Logo
Navigation Bar
Search Box
Links/Nav
bar
Email sign up
Updated content
Paid ads
Strategies for Making Web Pages




Name pages correctly
(.htm, .html)
Organize them clearly
Link pages
Transfer site to serve



No spaces in file names
Names are casesensitive
Name home page
‘index.html’
Web Site: Final 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 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