1. Planning and Storyboarding a Web Site
COMP4064
Planning and Storyboarding a Web Site

2. Agenda
Web Sites, Servers, Urls,
Planning and Story boards

3. The Web What is the Web?? Hypertext information system Information
uses links to let the user jump around from one page to another, like help files!
Information
information is linked together
Graphical, Navigable
before the web, everything was text-based
you used hand-typed commands and utilities
“hypermedia”

4. The Web The Web Hypermedia Cross-Platform Information and Transactions
Distributed

5. What is the Web Cross-Platform Distributed
almost any machine can use the web, and any platform (operating system/processor configuration)
some newer web technologies break the rules - e.g. style sheet commands work differently on IE and NS
Distributed
how much disk space do you think the web would take up?!
Information on the web is distributed over many networks

6. What is the Web Dynamic Interactive
when software is updated, you have to re-install it
web authors update their web pages so that each time it’s updated, you see it!
What kinds of web pages would have to be dynamic?
Interactive
the web can “talk back” to the user
what kinds of interactive things can you do on the web?
Play games, shop, do surveys, use simulations or tutorials

7. Web Site vs Web Pages Web Site Single web pages Collection of related

8. Web Servers A web server is the program that runs the web site
the browser requests files and the web server program responds
the server program manages data captured in forms, and links forms and browsers with databases
many browsers can talk to the server at once, so the server program must manage all the browser connections

9. Client sends request using http protocol
How Does it Work?
Laptop
Server
Client sends request using http protocol
Server’s listener
process answers
and accepts request
Server locates the files, sends them and
closes the connection.
Browser
receives,
reads, formats,
and displays
the files

10. URL’s Stands for…? Parts of a URL
Universal (or Uniform) Resource Locator
Parts of a URL
protocol - the communication standard for this site/document
news, gopher, WAIS, http, ftp
domain name - the server where the documents or files are located
eg.

11. URL’s Port - might be included
sometimes your server may have been installed on a network port other than the default
e.g. essex.sheridanc.on.ca:8900
Path and filename - the location of the file on the server
e.g.
anchor name - a specific location in a document

12. Planning a Web Site Web Site vs. Web Page
a web site consists of one or more web pages that are related by some theme or topic
a home page is the top page, or the start page on your web site - index.html
As with programming, planning is important
makes a page easier to maintain and modify
makes your site more organized and easier to understand

13. Planning a Web Site Consider: Content Consider: Goals
What kinds of content do you find in web pages?
What content will your page have?
If you’re stuck for an idea, do some web surfing
Consider: Goals
Why will people visit your site? Are they just exploring? Are they looking for something? Will they read every page?
What is the purpose of your site?

14. Planning a Web Site Consider: Goals (cont’d) Consider: Target Audience
Knowing your goals helps keep out unneeded information
If the page is for a client, they’ll have to tell you what the goals are
Consider: Target Audience
Age? Interests? Reading level?
Browsers? Connections?
Design with these parameters in mind

15. Planning a Web Site Consider: Topics
Break the content up into topics or sections
Categories? Departments? Steps?
Topics should group together related information
Headings for each topic should be meaningful to surfers and search engines

16. Planning a Web Site Consider: Organization and Structure
What is the structure of your site?
Each structure works differently for different content
You have to examine the different structures and see how your content fits into it.

17. Planning a Web Site: Structure
Hierarchical
start with a main topic, which is broken down into sub topics, and each sub topic is broken down, etc.
Example
Uses a Top-Down
approach...

18. Planning a Web Site: Structure
Advantages of Hierarchical
easiest and most logical
easy to navigate if the designer provides the proper navigational links
useful for sites where the user will go in and look for something specific
Disadvantages of Hierarchical
easy to get lost if there are too many levels
should have a consistent navigational interface

19. Planning a Web Site: Structure
Linear (sequential)
like a book, or a “wizard”
you start at the home page, move to the next page, then the next page, until you reach the last page
you can go back and forth but you can’t directly link to another page if it’s not just before or just after the current one
Example

20. Planning a Web Site: Structure
Advantages of Linear
easy for the reader to know where they are and hard to get lost
useful for instructions, tutorials, or anything else that requires a specific order
Disadvantages of Linear
limits user’s freedom of exploration - can only go backwards or forwards
limits the way in which the designer can present information
not effective with very long sets of steps

21. Planning a Web Site: Structure
Linear with Alternatives
linear structure with opportunities for the user to branch off the main line of pages
Example

22. Planning a Web Site: Structure
Linear and Hierarchical
a combination of the two
Hierarchical
Example
Linear

23. Planning a Web Site: Structure
Things to Consider with Linear/Hierarchical
you have to make sure the content lends itself to this kind of structure
users might find it confusing or out of context and might get lost or lose their bearings within the site

24. Planning a Web Site: Structure
Web structure
little or no structure or pattern
Example
Looks like a
web!

25. Planning a Web Site: Structure
Advantages of Web Structure:
useful if your users will simply explore your web site
Disadvantages of Web Structure:
not very organized, hard for users to locate information
easy for users to get lost in your site

26. Story Boards Another tool used to plan web sites
Taken from the film industry
A diagram of the pages (and layouts) with lines that show the linkage between the pages
Helps you to visualize the site

27. Story Boards
Simple story board

28. Story Boards When story boarding, consider:
What topics go on which pages?
Usually each topic is one page but sometimes you want to put a few small topics on one page
Try not to make pages too big
Navigation?
How do the users navigate the site?
Alternate Navigation?
What other methods of navigation are available?
Index? Site Map? Alphabetical Listing?

29. Story Boards What Goes On Home Page? Goals Review
A summary of your site? A list of the topics?
Goals Review
Are the goals you made earlier being met?
Did you include extra information that is not needed?