Lab #2: Information Architecture (A.K.A. Site Planning)

Transcription

1 English 413: Electronic Documents and Publications Dr. Jablonski Spring 2004 Lab #2: Information Architecture (A.K.A. Site Planning) What You Need to Complete this Lab 1. HTML editing software, preferably Dreamweaver MX 2. UNLV Student Computing Resources SCR account A basic understanding of how the Internet works and how Web pages are made 4. Knowledge of the readings assigned for today: Taylor's "Dreamweaver Walk-Through" Patrick J. Lynch and Sarah Horton s Web Style Guide Ch. 1 & 2 John Shiple s Information Architecture Tutorial ml Lab Assignment For this lab, you will practice the Web site development process. We ll take baby steps by choosing a relatively simple site to develop: your personal Web site for this Eng. 413 class. You ll first follow John Shiple s advice and produce a design document. Then you ll complete a mock-up of your personal Web site, which should contain the interface design elements discussed by Lynch and Horton (Ch. 2 of Web Style Guide), and Shiple. For this assignment, don t worry about creating an elaborately polished Web site. Your main goal is to brainstorm the site s information architecture, create all of the pages of your site, and organize them in the right folders so that the site is actually working and navigable by the end of the lab. Task Hint Sample 1. Open a new blank Word file and save it into your public_html folder. Name the file Lastname_design_doc.doc Type a main title, something like Design Document for Lastname s Web Site. 2. In the Word file, brainstorm your goals for your personal Web site. Goals. Consider your audiences for this site and brainstorm what they ll want from your site. Turn their needs into a list of goals for your site. 1

2 3. Next, define your audience more clearly. 4. Complete a brief analysis of the following two competitor sites: Site 1: Mitch McAllister wwww/ Site 2: Michelle Monazym %7Emonazym/ ENGLIS%7E1 /index.htm 5. Identify your site s content. You must have at least three levels of information and at least six pages. Audience Definition. List each audience and then develop brief user scenarios for each audience. These scenarios should spell out who the audience is and how they ll use your personal site. Competitive Analysis Summary. Skip a space and type the words INSERT SUMMARY HERE. Skip another space and insert the following table (copy and paste the table from layout view in Word). Complete your analysis of site 1 and then site 2 using the table. When you finished with your analysis of sites 1 and 2, go back and write a brief summary of the pros and cons of what the competition offers. (NOTE: If you re following this in print form, the table is below) In your design document, create another heading called Site Content. Brainstorm your site s main pages, or nodes, and the site s hierarchy of information. Create a Site Diagram in this section using Word (You could keep it simple, using decimal numbering or use the drawing tools for a more elaborate hierarchical site map. See Shiple s examples: See Shiple s examples: lycos.com/ webmonkey/98/28/ index3a_page3.html? tw=design 2

3 6. Plan your site s backend, or file management system. 7. The final step of your design document is planning the visual design. 8. Start building your site by first creating a template of your navigation interface. After you figure out what pages you ll have on your site, determine how you ll name the folders and files of your site. Remember to keep the folder and file names of your site: Short All lowercase letters No spaces (but can use underscore _ key) No questionable characters (like &, *, %, etc.) Of course, your home page will be named index.html. In your design document, create a heading called visual design. On some scrap paper, make some thumbnails, or sketches, of your site s interface. Remember, the main element of your interface is the navigation or button bar, which are usually located either at the left or top, occasionally at the right. Choose one and create some type of representation of your planned interface in your design document (again, this could be crude text or made with Drawing tools). Create a Dreamweaver file named template.html. You can start from scratch (i.e., new blank page) or re-save your current index.html page as template.html and rework what you have. Layout your interface within a borderless table that includes your navigation bar and space for content (see the example at right). See examples in Joshua Allen s Organizing Your Site webmonkey/99/39/ index3a.html?tw=design In the following example, the Web page is set up within a liquid table (using % value). To see how it s done, I ve left the table border at 1, but to create a borderless table, you set the table border value to 0. Example: faculty2/jablonski/ 413/lab2_example.html 3

4 9. In the navigation bar of your template page, add the links to your other pages, following your file naming system (step 6). 10. Make your template page freestanding by ensuring that it have the five elements outlined by Lynch and Horton. 11. Now that you have a template with a linked navigation bar, you can quickly generate the rest of the pages of your site, re-saving the template page as the file names you chose in step Build the backend by reorganizing and/or adding subdirectories (sub-folders) to your public_html folder. 13. Add a link to your design document from your home page. The internal navigation of a Web site relies on relative links, or just the name of the file and, possibly, the directory (or folder) name. To create a link to a links page, assuming it s in the same public_html folder, you simply highlight the links text in your navigation bar and type links.html in the property inspector. Creating relative links to subdirectories is as simple as typing the name of the folder and then the file name (e.g., links/personal_links.html ) To create a relative link up a directory level, you type the symbol../. To link out of the links folder, back to the main page, you d have to type:../index.html Linking to Word files is easy, just make sure you have the whole file name in the link field of the property inspector. The Word file must be in the directory location indicated by the link. See Linking in Joshua Allen s Organizing Your Site webmonkey/99/39/ index3a.html?tw=design 4

5 14. Test your Web site. Any broken links? Does each page have a title? Is there a way to get back to the home page from each node? 15. your new Web site jablonsk@unlv.nevada.edu to Dr. J. Appendix A: Competitive Analysis Table Table 1: Competitive Analysis Site Features Rate on scale of 1 (poor) to 5 (excellent) Site 1 McAllister Site 2 Monazym Freestanding Pages Interface Design/Navigation Visual Design (Look and Feel) Content Usability (Ease of Use) Overall Impression Comments 5