Assignments

=Assignments=

Assignment 1. Jump Page

 * Due Thursday, January 28**

Create a jump page that allows the instructor to jump (link) to all of the labs and assignments you produce in the course. None of the assignments will be graded unless they are posted to your web space, so be sure they are posted correctly and do not have broken links.

The jump page should include the following:

o Your name o The school’s name o Course name, section, number and academic term (ex: Fall 2007) o Instructor’s name o The use of basic formatting, color, and imagery o There should be a seasonal theme (think of nature or something dealing with this season) for the design treatment o A link to all of the labs and assignments for the course. Since the other assignments and labs are not created yet, you should create a placeholder page for each of the assignments that contains the assignment name, assignment number, and the due date. The links to the labs should be placed on jump page in their own table. All of the assignments should open in a new browser window. o You should use the file structure that was discussed in class. o The visitor should not have to scroll to access the assignment and lab links.

Your jump page should …

o Have a clear information hierarchy that is appropriate to the content o Keep important content above the fold o Not place text on a busy photographic or patterned background o Present type in a legible fashion o Use web standards to the best of your ability (all assignments following will be required to pass XHTML transitional validation).

If you own your own domain name and have a legitimate web hosting account in place, you may use it to host your projects. Geocities, Angelfire, AOL, Tripod, Free Webs, and other “free” hosts will not be accepted, since they often do not allow the use of an FTP client and contain advertisements and pop ups. Any assignment submitted on a free web server will not be accepted.

o Include the following meta tag in all pages to prevent search engines from indexing your site:



Marking Criteria:
Total Points: /25 o All requirements (10) o Aesthetics (10) o Quality Assurance (5)

Assignment 2. CSS Page Design

 * Due Thursday, February 4**

Museum of Modern Art (Bauhaus exhibit) []

Create a single page that uses a divs and other relevant tags for layout, IDs to name each primary section of the layout (ex: head, content, foot), and an internal/embedded style sheet to format the page. Validate your XHTML and CSS with the W3C validators (XHTML: http://validator.w3.org/, CSS: http://jigsaw.w3.org/css-validator/).

Theme: Your page theme is “The Bauhaus School of Design”. Use the content from the Wikipedia.com entry on this subject (http://en.wikipedia.org/wiki/Bauhaus). Additional imagery relating to the subject may be added. Credit the authors of the content and include a link to the web site where you found it. Include the disclaimer (see page 4 of this document) at the bottom of all pages. Your page design should relate to the theme of simplicity and elegance of design and function.

Create your own logo for this page appropriate for the theme.

Ensure your code is well commented and is indented properly to reflect tag nesting. Include the following meta tag in all pages to prevent search engines from indexing your site:



Total Points: /100 o Aesthetics (30) o Assignment Requirements (30) o Code Quality (20) o Usability (10) o Quality Assurance (10) o

Assignment 3 and 4. Wireframes and Design Comps
Originally Due Thursday, February 18
 * Now Due Thursday, February 25**

Using the requirements analysis, site map, and organizational background files supplied to you, create the following items to be used for the creation of your final web site:

1. Create wireframes for the final web site (wireframe for the home page and one interior page). You will use these two wireframes to design the detailed page layout when you enter the visual design phase. Identify the placement of the following critical information items on the page: (You may also include items not listed below that you feel are necessary) a. Logo b. Global navigation complete with all of the accurate labels for each navigation item c. Redundant navigation if needed d. Copyright statement and disclaimer statements e. Call to action items f. Call outs (indicate what information should be placed within the callouts) g. Page heading

You should design for a base resolution of 800 x 600. Note: the typical lowest resolution now is 1024 x 768 and many people use 960 grid system. (960.gs) Plan to use CSS for all formatting, use of div tags for layout, image slicing where appropriate, and forms for use on the contact page.

A critical aspect of your design concept should be a call to action. A call to action encourages a user to get involved in the cause by volunteering or donating. Please take a look at these web sites as benchmarks for how to create an effective call to action:

o http://www.careusa.org/ o http://redcross.org/ o http://peacecorp.gov/ o http://www.greenpeace.org/international_en/ o http://amnesty.org/

Utilizing your wireframes and concept note, develop two different design treatments for the final web site. Each idea should include the home page and one interior page. Please note that your two design sets should be unique, not just a shift in color. These should be in color.

Marking Criteria:
Total Points: /50 o Wireframes (15) o Design Concept Note (15) o Design Comps (15) o Quality Assurance (5)

Assignment 5. Concept Note
Originally Due Thursday, February 25
 * Now Due Thursday, March 4**

Using the requirements analysis, site map, and organizational background files supplied to you as well as your visual comps, create a concept note containing the following:

o Relevant project background information o Graphics of visual comps o Summary of rationale for visual design choices and decisions o Information about correct use of logo o Fonts chosen o Color palette information o Any additional relevant information

Marking Criteria:
Total Points: /75 o Design of Concept Note (10) o Inclusion of Wireframes (5) o Inclusion of Design Comps (5) o Project Background Summary (10) o Design Rationale (10) o Logo Use Instructions (10) o Fonts (10) o Color Palettes (10) o Quality Assurance (5)

Assignment 6. Site CSS Structure and jQuery
Originally Due Thursday, March 4
 * Now Due Thursday, March 11**

Using the planning documents you were given and the outputs from Assignments 3, 4 and 5, create a web site that meets both the client’s and user’s needs. Your web site should meet the following requirements:

o Principles of navigation and usability implemented throughout site o Use of CSS for all formatting, no deprecated markup o CSS should be stored in an external style sheet o Use of CSS text link rollovers o Implementation of a functioning contact form o Hand coded pages (no use of WYSIWYG editors) o Inclusions of disclaimer statement on all pages o Use of Web Standards (must pass XHTML transitional validation and CSS validation)

Conduct thorough quality assurance testing on your web site on the following browsers: o PC, Internet Explorer latest o PC, Firefox latest o Mac, Safari and Firefox





Total Points: /150 o Aesthetics (35) o Code Quality (organization, Web Standards, commenting) (35) o Assignment requirements (35) o Usability (35) o Quality assurance and presentation (10)

Assignment 7. Site Build Out
Originally Due Thursday, March 11
 * Now Due Thursday, March 16**

Using the planning documents you were given and the outputs from Assignments 3, 4 and 5, create a web site that meets both the client’s and user’s needs. Your web site should meet the following requirements:

o Principles of navigation and usability implemented throughout site o Use of CSS for all formatting, no deprecated markup o CSS should be stored in an external style sheet o Use of CSS text link rollovers o Implementation of a functioning contact form o Hand coded pages (no use of WYSIWYG editors) o Inclusions of disclaimer statement on all pages o Use of Web Standards (must pass XHTML transitional validation and CSS validation)

Conduct thorough quality assurance testing on your web site on the following browsers: o PC, Internet Explorer latest o PC, Firefox latest o Mac, Safari and Firefox

Include the following meta tag in all pages to prevent search engines from indexing your site:



Marking Criteria:
Total Points: /150 o Aesthetics (35) o Code Quality (organization, Web Standards, commenting) (35) o Assignment requirements (35) o Usability (35) o Quality assurance and presentation (10)

=PRESENTATIONS=

Research Presentation
**Due Tuesday, February 9**

Create a 5 - 10 minute presentation to be given to the class on one of the designers/topics listed below. Your presentation should be presented in PowerPoint, Keynote, or using Eric Meyer’s S5 (preferred: []). Be sure to include footnotes on each slide where you quote or reference a source (see [] for examples of how to use MLA style citation). Include a bibliography slide at the end with all sources plus recommended information sources. Format the presentations slides so they are easy to read from the back of a classroom, and visually relate to the subject. Include screen shots and visual examples where appropriate.

Potential topics:

o The history of typography o Designing and delivering accessible web content (WAI and Section 508) o Grid systems in design o CSS image replacement techniques compared o Suggest your own topic

If you would like to research an alternative topic not listed above, please consult the instructor for approval.

Marking Criteria:
Total Points: /75 o Quality of research (20) o Presentation materials (20) o Presentation (25) o Spelling and grammar (5) o Citation of sources (5)

Analysis Presentation
**Due Tuesday, February 16**

Create a 5 - 10 minute presentation to be given to the class on a usability analysis of a web site of your choice. Your presentation should be presented in PowerPoint, Keynote, or using Eric Meyer’s S5 (preferred: []). Be sure to include footnotes on each slide where you quote or reference a source (see [] for examples of how to use MLA style citation). Include a bibliography slide at the end with all sources plus recommended information sources. Format the presentations slides so they are easy to read from the back of a classroom, and visually relate to the subject. Include screen shots and visual examples where appropriate.

Marking Criteria:
Total Points: /75 o Quality of research (20) o Presentation materials (20) o Presentation (25) o Spelling and grammar (5) o Citation of sources (5) .