syllabusit web design

20
Syllabus IT/236 Version 4 1 Syllabus Axia College College of Information Systems & Technolog y IT/236 - Web Design I Copyright © 2009, 2007, 2006 by University of Phoenix. All rights reserved. Course Description This course introduces effective Web design principles and the essential role of the Web designer in today's business environment. Topics covered include site architecture, page layout, navigation, content, functionality, and usability. Students will evaluate existing Web sites and apply best practices to prototype a unique design using a Web authoring application. Policies Faculty and students/learners will be held responsible for understanding and adhering to all policies contained within the following two documents: University policies : You must be logged into the student website to view this document. Instructor policies: This document is posted in the Course Materials forum. University policies are subject to change. Be sure to read the policies at the beginning of each class. Policies may be slightly different depending on the modality in which you attend class. If you have recently changed modalities, read the policies governing your current class modality. Course Materials Textbooks Huddleston, R. (2009). Master visually Dreamweaver ® CS4 and Flash ® CS4 Professional. Indianapolis: Wiley. Sklar, J. (2003). Principles of Web Design (2nd ed.). Boston: Course Technology. Software Dreamweaver ® and Photoshop ® provided through Toolwire ® . All electronic materials are available on the student website. If you have your own copy of Dreamweaver ®

Upload: naveen-raj

Post on 03-Jan-2016

75 views

Category:

Documents


1 download

DESCRIPTION

Web design syllabus

TRANSCRIPT

Page 1: Syllabusit Web Design

SyllabusIT/236 Version 4

1

SyllabusAxia College

College of Information Systems & TechnologyIT/236 - Web Design I

Copyright © 2009, 2007, 2006 by University of Phoenix. All rights reserved.

Course Description

This course introduces effective Web design principles and the essential role of the Web designer in today's business environment. Topics covered include site architecture, page layout, navigation, content, functionality, and usability. Students will evaluate existing Web sites and apply best practices to prototype a unique design using a Web authoring application.

Policies

Faculty and students/learners will be held responsible for understanding and adhering to all policies contained within the following two documents:

University policies: You must be logged into the student website to view this document. Instructor policies: This document is posted in the Course Materials forum.

University policies are subject to change. Be sure to read the policies at the beginning of each class. Policies may be slightly different depending on the modality in which you attend class. If you have recently changed modalities, read the policies governing your current class modality.

Course Materials

Textbooks

Huddleston, R. (2009). Master visually Dreamweaver® CS4 and Flash® CS4 Professional. Indianapolis: Wiley.

Sklar, J. (2003). Principles of Web Design (2nd ed.). Boston: Course Technology.

Software

Dreamweaver® and Photoshop® provided through Toolwire®. All electronic materials are available on the student website. If you have your own copy of Dreamweaver® and Photoshop® CS4 or greater, you may use your software instead of the software provided in Toolwire®. Even if you choose to use your own copy of the software to complete the assignments each week, you must complete the Toolwire® tutorials for practice. Toolwire

Toolwire is an experiential learning company providing access to real hardware and software over the Internet. This platform provides expert lab guides, real-world scenarios, online assessments, group collaboration, personal storage and websites so students, can receive expert hands-on technology training anywhere, anytime. It’s all about the experience, because experience matters. There are two components to toolwire: the Student Desktops and the LiveLabs. Student Desktops are hosted virtual computers customized for this class training needs and provides a hands-on "sandbox" for your experiential learning. LiveLabs are similar but in addition provide expert step-by-step lab guide instructions. Completing these guided labs will help you complete the checkpoints and assignments in this course. Please note that you do not need to submit the guided labs for grading except during week 8 (see instructions under week 8).

Page 2: Syllabusit Web Design

SyllabusIT/236 Version 4

2

Week One: Web Site Planning

Details Points

Objectives 1.1 Identify how the purpose, target audience, and intended message drive Web site development.

1.2 List reasons for and importance of a Web site design.1.3 Define fundamental Web design terminology.

Course Preparation

Read the course description and objectives.Read the instructor’s biography and post your own.Decide on the Web site topic and theme for your project. You design the Project plan for a 3- to 5-page Web site throughout the course. Once your topic or theme has been decided on, it may not be changed; therefore, considerable thought should be put into this decision. Possibilities include developing a Web site Plan for

your favorite charitable organization. a professional portfolio about yourself. a small business needing a Web presence. your choice – I suggest keeping the project simple.

Reading Read Ch. 1 of Principles of Web Design.

Reading Read Ch. 2 of Principles of Web Design.

Reading Read Ch. 3 of Principles of Web Design.

Reading Read Glossary of Principles of Web Design.

Reading Read Week one Electronic Reserve Readings.

Participation Participate in class discussion by posting 8 substantive responses - 2 posts per day up to 8 posts for the week.

20

CheckPointWeb Design Terminology

Due date: Day 4 - ThursdayResource: Appendix B and Glossary of Principles of Web Design.Complete the Web Design Key Terms matching table in Appendix B. Post the completed Appendix B as an attachment in the assignment forum. Grading Rubric: Please check the grading rubric included in the Course Materials section of the classroom for additional assignment requirements. Grading rubric is provided with week one overview.

40

Page 3: Syllabusit Web Design

SyllabusIT/236 Version 4

3

Week Two: Project Proposal

Details Points

Objectives 1.4 Identify site purpose, target audience, and intended message. 1.5 Draw a site navigation map. Create a project proposal.

Toolwire Links Review the information about toolwire under the course outline in the Materials tab.

CheckPointWeb Site Plan Part One

Due date: Day 4 - ThursdayCreate the first section of a Web site plan. The plan must include:

Site purpose: A short paragraph to describe the purpose of the Web site. Target audience: list of your target audience. Site slogan: It must be 10 words or less, but must drive the site purpose to the

audience. Write 2 to 3 sentences explaining how the slogan with drive the Web site content.

Format your paper according to APA standards using Microsoft Word 2003 or later version. Post your file as an attachment in the assignment forum.Grading Rubric: Please check the grading rubric included in the Course Materials section of the classroom for additional assignment requirements. Grading rubric is provided with week two overview.

50

IndividualProject Proposal: Site Structure

Due date: Day 7 - SundaySubmit the second section of a Web site plan illustrating the site structure to define the page content, file names, and relationships between pages. This assignment must include the following:

Page content: Short paragraph for each Web page describing its content and purpose. Include each page name and be sure the page names do not include spaces or special characters. The underscore ( _ ) character is acceptable. For example, homepage: index.html or resume page: LName_Resume.html, etc. It is industry standard to name the homepage index.html. For ideas on naming your web pages, please review the Content Idea Table posted in the Course Material forum.

Site structure type: List the structure type you will use with a short paragraph of why you selected this type. See your textbook, Principles of Web Design pp. 75–78.

Storyboard: Create the site architecture map or storyboard using Microsoft® Word, PowerPoint®, Visio®, or Adobe® Photoshop®. See your textbook, Principles of Web Design pp. 75–78. IMPORTANT: You must convert the storyboard/map to a jpg and insert the storyboard/map in your paper.

Format your paper according to APA standards using Microsoft Word 2003 or later version.Post your paper as an attachment in the assignment forum.Grading Rubric: Please check the grading rubric included in the Course Materials section of the classroom for additional assignment requirements. Grading rubric is provided with week two overview. NOTE: Keep in mind that there is a limit of 10 MB for uploading files in the classroom forum. If your file exceeds this amount, you must optimize your images in order to reduce the file size of your work.

100

Page 4: Syllabusit Web Design

SyllabusIT/236 Version 4

4

Week Three: Web Design Concepts & Techniques

Details Points

Objectives 1.6 Identify popular Web design tools and their applications.1.7 Create a Web page using Adobe® Dreamweaver®.1.8 Prototype various layouts of a home page and secondary pages.

Reading Read Ch. 4 of Principles of Web Design.

Reading Read Ch. 1 of Master Visually.

Reading Read Ch. 2 of Master Visually.

Reading Read Ch. 3 of Master Visually.

Reading Read Ch. 5 of Master Visually.

Reading Read Week 3 Electronic Reserve Readings.

Toolwire Links Review the information about toolwire under the course outline in the Materials tab.

Participation Participate in class discussion by posting 8 substantive responses - 2 posts per day up to 8 posts for the week.

20

CheckPointProject Proposal: Page Design

Due date: Day 4 - ThursdayResource: Project ProposalContinue building on your Project Proposal from Week 2. You may create a new document or add to the proposal submitted on week 2. Visualize the page design for your site and create two different page designs (Theme A and Theme B). Each design theme should include a homepage and the secondary pages. Since your web project must be at least 3 web pages, you need two different themes and each theme must have a design for the homepage and the two secondary pages. A minimum of six pages should be submitted for this assignment. Include the following components:

You may create the page designs using your choice of Microsoft Word®, PowerPoint®, Visio®, Adobe Photoshop®, etc.

Make sure to include any suggestions provided by your instructor and any modifications made to your Project Proposal.

Each page layout must include placement of headings, navigational menu, text areas, images, etc. Color and font choice should also be indicated. The example below depict a 3-page web project:

Theme A

50

Homepage

Home | Page1|Page2

Secondary Page 1

Home | Page1|Page2

Insert text here

Insert text here

Secondary Page 2

Home | Page1|Page2

Insert text here

Page 5: Syllabusit Web Design

SyllabusIT/236 Version 4

5

Week Three: Web Design Concepts & Techniques - continued

Theme B

Submit your design themes as an attachment to the assignment forum. Grading Rubric: Please check the grading rubric included in the Course Materials section of the classroom for additional assignment requirements. Grading rubric is provided with week three overview.

Exercise: Create a Web Page

Due date: Day 7 - SundayResource: Toolwire® tutorialsComplete the Toolwire® Lab: Create a Web Page as a learning tool. Do not submit Toolwire® lab to your instructor. Complete the following:Use Dreamweaver to create your web pages as identified on your proposal. Remember, you may use your own copy of Dreamweaver if you have one. Name the homepage index.html and the secondary pages should be named with a short meaningful name that describes the page content. For example: your products page can be named products.html, your about page can be named aboutUs.html or about.html, etc. See the Content Idea Table posted during week 2 for suggestions. Do not add any images or text to your pages at this time. The pages you create for this assignment will be blank pages. We will add these items in the upcoming weeks.Save the web pages to your computer’s desktop. If you are working in Toolwire, you need to transfer the files from toolwire to your computer’s desktop. Compress your web pages and submit your web pages and post the compressed file as an attachment to the assignment forum.Grading Rubric: Please check the grading rubric included in the Course Materials section of the classroom for additional assignment requirements. Grading rubric is provided with week three overview. NOTE 1: Keep in mind that there is a limit of 10 MB for uploading files in the classroom forum. If your file exceeds this amount, you must optimize your images in order to reduce the file size of your work. NOTE 2: The web project consists of 3 - 5 pages. Keep it simple! You are welcome to add more pages to your project once the course ends. If you build more than five pages, the project will be evaluated as a whole and all pages must be complete. Intro pages are not considered web pages.

30

Secondary Page 2

HomePage2Page3

Secondary Page 1

HomePage2Page3

Homepage

HomePage2Page3

Insert text here

Insert text here

Insert text here

Insert text here

Insert text here

Insert text here

Insert text here

Page 6: Syllabusit Web Design

SyllabusIT/236 Version 4

6

Week Four: Web Site Structure and Navigation

Details Points

Objectives 1.9 Create a site (file) structure using Adobe® Dreamweaver®.1.10 Explain the importance of file organization for a Web site.1.11 Explain design principles for effective Web site navigation.1.12 Research and identify best practices for site navigation.1.13 Create usable navigation.

Reading Read Ch. 5 of Principles of Web Design.

Reading Read Ch. 8 of Principles of Web Design.

Reading Read Ch. 4 of Master Visually.

Reading Read Ch. 6 of Master Visually.

CheckPointNavigation

Due date: Day 4 - ThursdayResearch the best practices for site navigation. Find examples of effective site navigation from the Internet. Identify examples of how you would like your site navigation to work and function.Take a screen shot of at least one example.Write a 350- to 700-word paper explaining the effective design features. Include the screen shot. Format your paper according to APA standards using Microsoft Word 2003 or later version.Post your paper as an attachment in the assignment forum.Grading Rubric: Please check the grading rubric included in the Course Materials section of the classroom for additional assignment requirements. Grading rubric is provided with week four overview.

50

IndividualSite Structure

Due date: Day 7 - SundayResource: Toolwire® tutorialsComplete the Toolwire® Lab: Create a Site with Navigation for practice. Do not submit this week’s Toolwire Lab to your instructor.Complete the following:Create a new site structure by creating a folder on your computer’s desktop. Name the folder IT236_Name, where Name is the initial of your first name followed by your last name (i.e., IT236_EEarley). Make sure your folder name does not include spaces or special characters. Add a folder inside the IT236-Name folder and name it “images”. Select a minimum of four images you will use on your web pages and save these images in the images folder inside the IT236_Name folder. When working with Dreamweaver, it is important that you save all the images you will use on your website project in this folder before adding them to your web pages. Move the web pages you created last week to your IT236_Name folder. Use Adobe® Dreamweaver® software on the Toolwire® desktop or you may use your own copy of Dreamweaver if you have one. Open your homepage and secondary pages.

100

Page 7: Syllabusit Web Design

SyllabusIT/236 Version 4

7

Week Four: Web Site Structure and Navigation - continued

Create a navigation menu on each page and hyperlinked each menu item. A navigation menu should be included on all pages with hyperlinks to the homepage and all secondary pages on each page. Below is an example of a navigation menu:

Home I About Us | Services | Contact Us

NOTE 1: Make sure all your pages are saved in your IT236 folder prior to creating the hyperlinks. Use a relative path when creating each hyperlink.

Save the changes. Do not add any images or text to your pages at this time. Each page on your website should only have the navigation menu. We will add other items in the upcoming weeks.Compress and submit your entire IT236_Name folder and post the compressed file as an attachment to the assignment forum.Grading Rubric: Please check the grading rubric included in the Course Materials section of the classroom for additional assignment requirements. Grading rubric is provided with week four overview.

NOTE 2: Keep in mind that there is a limit of 10 MB for uploading files in the classroom forum. If your file exceeds this amount, you must optimize your images in order to reduce the file size of your work.

Page 8: Syllabusit Web Design

SyllabusIT/236 Version 4

8

Week Five: Web Site Graphic Content

Details Points

Objectives 1.14 Recognize advantages and disadvantages of common graphic formats. 1.15 Explain good design techniques for integrating multimedia into a Web site. 1.16 Identify a plug-in for multimedia.

Reading Read Ch. 5 of Principles of Web Design.

Reading Read Ch. 8 of Principles of Web Design.

Reading Read Ch. 4 of Master Visually.

Reading Read Ch. 6 of Master Visually.

Reading Read this week’s Electronic Reserve Readings.

Participation Participate in class discussion by posting 8 substantive responses - 2 posts per day up to 8 posts for the week.

20

CheckPointProject Proposal: Graphic Design

Due date: Day 4 - ThursdayResource: Project ProposalComplete your Project Proposal from Week Three. Finalize the page design for your site by finding images and multimedia for your Web site. Include the following components:

Modifications made to your Project Proposal as recommended by your instructor.

Any media formats and plug-ins that will be necessary in the site A description of how graphics will be used in the site A description of the content to be included in the site and how this content will

be acquired – Attention must be given to copyright restrictions. A description of how usability and accessibility are considered in the site

designFormat your paper according to APA standards using Microsoft Word 2003 or later.Post your paper as an attachment in the assignment forum.Grading Rubric: Please check the grading rubric included in the Course Materials section of the classroom for additional assignment requirements. Grading rubric is provided with week five overview.

50

Page 9: Syllabusit Web Design

SyllabusIT/236 Version 4

9

Week Six: Web Site Content and Layout

Details Points

Objectives 1.17 Discuss the implications of copyrights on the usage of content on a Web site. 1.18 Explain how to optimize text content for search engines.1.19 Add textual content to a Web page using a table.

Reading Read Ch. 5 of Principles of Web Design.

Reading Read Ch. 6 of Principles of Web Design.

Reading Read Ch. 7 of Master Visually.

CheckPointCopyright Implications

Due date: Day 4 - ThursdayResearch and discuss copyright implications related to Web site development. Write a minimum of 350 words discussing the implications of copyrights on the usage of content on a Web site.Include how these implications may be overcome.Post your paper as an attachment in the assignment forum.Format your paper according to APA standards using Microsoft Word 2003 or later version.Grading Rubric: Please check the grading rubric included in the Course Materials section of the classroom for additional assignment requirements. Grading rubric is provided with week six overview.

50

IndividualPage Content

Due date: Day 7 - SundayResources: Toolwire® tutorialComplete the Toolwire® Lab: Textual Content and Tables for practice. Do not submit this weeks Toolwire® lab to your instructor. Complete the following:

Use Adobe® Dreamweaver® on the Toolwire® desktop and open your homepage and secondary pages.Add a table to your web pages. Incorporate the design principles you learned in Ch. 5, “Working with Tables”, of Principles of Web Design. Manipulate the table to create a page layout following the one of the designs created on your project proposal.Add at least 200 words of textual content to your web pages. The content for your web pages should elaborate on your main topic. Use the Content Idea Table provided on week 2 for suggestions. Compress and submit the entire IT236_Name folder as an attachment to the assignment forum.Grading Rubric: Please check the grading rubric included in the Course Materials section of the classroom for additional assignment requirements. Grading rubric is provided with week six overview.

NOTE: Keep in mind that there is a limit of 10 MB for uploading files in the classroom forum. If your file exceeds this amount, you must optimize your images in order to reduce the file size of your work.

100

Page 10: Syllabusit Web Design

SyllabusIT/236 Version 4

10

Week Seven: Web Site Effectiveness

Details Points

Objectives 1.20 Identify a plug-in for multimedia.1.21 Add images to a Web site using Adobe Dreamweaver

Reading Read Ch. 6 of Principles of Web Design.

Reading Read Ch. 7 of Master Visually.

Reading Read week 7 Electronic Reserve Readings.

Participation Participate in class discussion by posting 8 substantive responses - 2 posts per day up to 8 posts for the week.

20

CheckPointInsert Graphics

Due date: Day 4 - ThursdayResource: Toolwire®

Complete the Toolwire® Lab: Adding Graphics for practice. Do not submit this week’s Toolwire® lab to your instructor. This lab can be found under week 5 section in the Materials tab.Complete the following:

Use Adobe® Dreamweaver® on the Toolwire® desktop to insert the two images to each of your Web pages. The images should complement your site content. You may use your own images and/or images from other sources. Cite all sources in a word document and save the reference document inside your IT236_Name folder.Incorporate the design principles you learned in Ch. 8, “Graphics and Color”, of Principles of Web Design. This includes optimizing your images using Photoshop prior to inserting them to your web pages. Also, see image optimization provided in the course material forum.Compress and submit the entire IT236_Name folder to the assignment forum.Grading Rubric: Please check the grading rubric included in the Course Materials section of the classroom for additional assignment requirements. Grading rubric is provided with week seven overview.

NOTE: Keep in mind that there is a limit of 10 MB for uploading files in the classroom forum. If your file exceeds this amount, you must optimize your images in order to reduce the file size of your work.

50

Page 11: Syllabusit Web Design

SyllabusIT/236 Version 4

11

Week Eight: Web Site Prototyping

Details Points

Objectives 1.22 Apply effective design concepts and techniques to prototype a homepage and secondary pages.

1.23 Identify how CSS can be used to create a unified Web site style.1.24 Explain the importance of usability when designing a Web site.1.25 Recognize design principles of basic Web site appearance and functionality.1.26 Use CSS with Adobe® Dreamweaver®.

CheckPointToolwire® Lab: Add Style to Pages

Due date: Day 4 - ThursdayResources: Toolwire® tutorial.Complete the Toolwire® Lab: Add Style to Page Content. NOTE: This is the ONLY Toolwire lab that you will submit for grading. To complete this lab, you need to have the previous toolwire tutorials completed.Compress and submit the Toolwire® lab as an attachment to the assignment forum.Grading Rubric: Please check the grading rubric included in the Course Materials section of the classroom for additional assignment requirements. Grading rubric is provided with week eight overview.

50

IndividualWeb Site Prototyping

Due date: Day 7 - SundayResources: Toolwire® and Master VisuallyComplete the homepage and your secondary pages. Make the final adjustments to your web pages and incorporate any changes based on feedback from previous weeks. You should have a complete functional 3-5 page website. Use the Adobe® Dreamweaver® software on the Toolwire® desktop to add style and color to your content via CSS. Embed CSS style into all your Web pages to enhance the content and color of your pages.Include at least four different HTML tags in your embedded style. Use Ch. 7 of Master Visually as a reference.Compress and submit the entire IT236_Name folder as an attachment to the assignment forum.Grading Rubric: Please check the grading rubric included in the Course Materials section of the classroom for additional assignment requirements. Grading rubric is provided with week eight overview.

NOTE: Keep in mind that there is a limit of 10 MB for uploading files in the classroom forum. If your file exceeds this amount, you must optimize your images in order to reduce the file size of your work.

100

Page 12: Syllabusit Web Design

SyllabusIT/236 Version 4

12

Week Nine: Web Site Redesign Recommendations

Details Points

Objectives 1.27 Evaluate Web page layouts, navigation, and performance.1.28 Develop recommendations for redesign.

Capstone Participation

Participate in class discussion by posting 8 substantive responses - 2 posts per day up to 8 posts for the week.

20

Final ProjectWeb Site Analysis

Due date: Day 7 - SundayAnalyze the Web site you selected for the Capstone Discussion question. Use the knowledge you gained from the past 8 weeks. Evaluate the current design of the site and identify recommendations for redesign.Write a 750- to 1,050-word page paper providing your evaluation and recommendations for redesign. Format your paper according to APA standards using Microsoft Word 2003 or later version.Post your paper as an attachment to the assignment forum.Grading Rubric: Please check the grading rubric included in the Course Materials section of the classroom for additional assignment requirements. Grading rubric is provided with week nine overview.

80

Page 13: Syllabusit Web Design

SyllabusIT/236 Version 4

13

Page 14: Syllabusit Web Design

SyllabusIT/236 Version 4

14

Discussion Questions

Week One Discussion Questions

List three things that a Web designer must consider and understand about the purpose or target audience prior to site development. Why do you feel each of these is important to a successful plan?

List the reasons why a Web site would need to be redesigned. Why do you think it is important to always be planning the next site redesign for a company?

Week Three Discussion Questions

Compare the advantages and disadvantages of using a Web authoring application, an HTML editor and a text editor for developing Web sites. List an example of each tool.

What have you chosen as the focus of your final project Web site? Describe the preliminary design and navigation goals you aim to achieve and why. Respond to your classmates with additional design goals they might consider.

Week Five Discussion Questions

Based on the readings and Internet research, what are the differences between the graphic formats of jpg, gif, and png? Provide an example of when you would use each.

Research a good design technique for integrating multimedia into a Web site design. Share your findings including the type of multimedia and what plug-in is needed for successfully viewing this type of multimedia on a Web site?

Week Seven Discussion Questions

Based on the Marketing Week (2007) article, explain the importance of usability when designing a Web site.

Based on the readings this week and your own research, how might CSS be used for developing a unique Web site style? Find a Web site that includes CSS to enhance their Web site appearance and functionality. Explain why you think so.

Week Nine Capstone Question

Select a business or e-business Web site from the Internet. Based on your knowledge from the past 8 weeks, reply to this discussion thread with your evaluation of the page layout, navigation, and performance.

Copyright

University of Phoenix® is a registered trademark of Apollo Group, Inc. in the United States and/or other countries.

Microsoft®, Windows®, and Windows NT® are registered trademarks of Microsoft Corporation in the United States and/or other countries. All other company and product names are trademarks or registered trademarks of their respective companies. Use of these marks is not intended to imply endorsement, sponsorship, or affiliation.

Edited in accordance with University of Phoenix® editorial standards and practices.