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² ²Cohen, J. (2003). The Unusually Useful Web Book. New York: Pearson Education, 108. My Sister’s Garden Home Stores Plants A-Z Lawn Gardens Patio Gardens ShadySunny Shady Help Contact us Site Map

User Path User Logs in New or old user Registration page Welcome page Returning User New User

Page Schematic Logo Search Box Links/Nav bar sign up Navigation Bar Paid adsUpdated content

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 case- sensitive 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