WD-3 Web Design 3
CUFDIG505A.1 - Design Information Architecture (part 1)
ADVANCED DIPLOMA of SCREEN AND MEDIA (CUF60107)

Teacher Name - lisa.cianci@vu.edu.au
Class Website - http://lisacianci.vucreativeindustries.com/2011/WD3

Assessment Task 1 - jQuery Image Gallery

Deadline: Week 8 - April 4, 2011

  • Design Specification Documents (Storyboards, flowchart) due: Week 4
  • Project Progress Review: Week 6
  • Completed project due : Image Gallery published online as a website, any linked media such as images, JS files, and HTML file published to website): Week 8

50% of total mark for the subject.

Assessment Grades

HD: High Distinction 80-100, D: Distinction 70-79,  C: Credit 60-69, P: Pass 50-59, NC: Not Yet Competent

In order to achieve a HD for this brief you need to:

  • Meet all the requirements of the brief
  • Creatively explore ideas and outcomes
  • Have solid justification and reference for design choices
  • No typos or grammatical errors and consistent formatting in any written material
  • Show comprehensive documentation of planning and production
  • Demonstrate good time management skills

Progressive Assessment

This project is assessed on an ongoing basis. The development of effective design, layout and scripting is an essential part of this project and it is necessary to achieve a competent grade for the design documents before proceeding on to the production phase of the project.
If you do not submit adequate work by the due date you will not be able to continue with the brief.

 

1. Project Description

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 41% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.

jQuery is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2.[4] jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications.

jQuery also provides capabilities for developers to create plugins on top of the JavaScript library. Using these facilities, developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. This contributes to the creation of powerful and dynamic web pages.
(from wikipedia: http://en.wikipedia.org/wiki/JQuery)

We will be using some of the examples at JQuery Tools (http://flowplayer.org/tools/index.html) to develop an image gallery website that is engaging, looks great and has really interesting interaction. This project focuses on familiarising you with complex interactive elements that are now becoming very common in the current web design industry, and gives you the opportunity to showcase your own work, potentially making an artist's portfolio you can use for your own professional development.

 

2. Requirements

You are to create an interactive image gallery website using HTML, Javascript, and using the JQuery library. The image content should demonstrate your personal style and artwork. This piece must allow users to interact with and navigate through a selection of images. The competency for this subject is Design Information Architecture so keep in mind the structure of your website - how the information is broken up and presented to the user. Image and text is information.

You will be shown examples of scripting and online gallery design in class that will give you an idea of the standard that this assessment task is aiming for. We will be using JQuery elements such as "Scrollable", "Overlay", "Expose", and "Tooltips".

This is an opportunity for you to make an excellent and substantial folio piece demonstrating all of your skills in web design and scripting, as well as your conceptual development of ideas and concepts as shown by the images you use in the gallery, so make the most of this chance!

*** PLEASE NOTE - all image content for this project must be your own, and you must have copyright clearance if using content from another creator (for example in the case of using images of group work).

Planning stage

1. Using storyboards and flowcharting, plan the website on paper . Please keep it simple considering time constraints. The storyboards and flowchart are to be reviewed and approved by the teacher before proceeding with the project development.

NOTE: you must submit your design specification documents in digital format. PDF or image files preferred.

 

Development stage

Using HTML, JQuery and any other scripting that you may require, create the interactive image gallery utilising the skills you have learnt.

The image gallery requires the following:

  • minimum of 20 still images in your gallery
  • must have text descriptions of each image which will be used in tool tips
  • must have interactive elements from the JQuery Library that allow the user to navigate through the content.
  • you may link to other pages that are relevant or appropriate to your project such as contact, other work, links, friends etc.
  • you may incorporate a personal logo or header image into your design if appropriate
  • you may also use audio if appropriate for your project, but it is not essential

3. Specifications

Screen Size: design for 800 X 600 pixel screen or larger (consider the size of the images when viewed in an overlay, expose window, so not too large.
Output: Website including HTML, JS, CSS, image files and other relevant media files required for the complete website project. Complete project must be uploaded to your web folder on the art.tafe server for assessment and user testing.
File Sizes: Optimise your image files for the web (72 dpi JPEG, GIF or PNG format)

 

4. Assessment Rubric

Task Advanced Competent Not Yet Competent Elements
storyboard & flowchart Design documents are clear and concise and give an excellent idea of what the project will entail and exactly what is going to be produced. Design documents are adequately constructed and somewhat describe what the project will entail and what is going to be produced. Design documents are not clear in describing the project, or are not complete. Design documents are poorly constructed or generally inadequate and present an unclear or misleading idea of what is going to be produced.

CUFDIG505A.1 - Design Information Architecture (part 1)

2 Classify and organise content 

Incorporation of feedback into designs, layout and scripting of project. Feedback from a teacher or classmate is incorporated into the final project. Planning documents are clear enough but feedback has not been taken on board. Feedback that would have brought an otherwise unsatisfactory piece of work up to standard has been ignored.
Knowledge of media copyright issues Evidence fully demonstrating that all content used in the project has been created by the student, or has the appropriate copyright clearance documentation if produced by a third party. Evidence adequately demonstrating that all content used in the project has been created by the student, or has the appropriate copyright clearance documentation if produced by a third party. No evidence that the student has produced all the content or that copyright clearance has been obtained for third party content.
Creative use of media elements and scripting. Media elements and scripting are used creatively and skillfully. The content and interactions not only work flawlessly but also serve to help support the idea being communicated in a creative or unexpected way. Media elements and scripting are constructed to a solid and competent level. Media elements and scripting in the piece are not working properly or are not up to standard.
Technical construction Work is skillfully completed according to best practice in multimedia production and scripting. Work contains at a minimum, all the required elements and functions without error. Any successful developments additional to what has been shown in class will receive extra marks Work is completed with all required elements and is functionally satisfactory but is not best practice with regard to coding, file construction and organisation. Work is not well constructed, is poorly developed and is unusable as a result.
Bug Free Work thoroughly tested and completely bug free. Satisfactory testing and minor bugs detected are corrected. Little or no testing performed. Fatal bugs discovered and not corrected.
5. Production deadlines
It is important that you bring all materials and development work with you to all classes.

Deadline: Week 8 - April 4, 2011

  • Design Specification Documents (Storyboards, flowchart) due: Week 4
  • Project Progress Review: Week 6
  • Completed project due : Image Gallery published online as a website, any linked media such as images, JS files, and HTML file published to website): Week 8
For the policy which you will be assessed with please refer to the Assessment Policy section of your Creative Industries student handbook or the online copy of the Assessment Policy:
http://multimedia.tafe.vu.edu.au/student//Assessment.cfm