CSC10214- Design Documentation and Develop Web-Based

Produce design documentation and develop web-based interactive content in accordance with UX design principles.

Part A - Design Documentation:

You are required complete design documentation to meet the client brief options provided below. The documentation is to be submitted as one Word document and should include the following:

• A clear indication of which of the theme options you have chosen and a description of how you have interpreted the theme.

• at least one storyboard for each web content

• a link to your wireframe prototypes in Moqups, Balsamiq, Mockingbird or other wireframe product

• any additional design details appropriate to demonstrate your final product

Part B - Final Product:

Develop the web-based interactive content as per your design documentation. You should include at least 3 html pages with appropriate navigation to allow the user to move between the pages. Your web content should be placed on the html pages in accordance with UX design principles and should demonstrate your design skills and include appropriate use of text, graphics, animation and interactivity.

Client Brief:

You are required to create an interactive online book. The book should contain six interactive content elements, include at least one of each of the following standard sizes:

1) Horizontal banner: 600 pixels wide x 90 pixels high;

3) Vertical banner: 160 pixels wide x 600 pixels high;

2) Button 1: 125 pixels x 125 pixels;

4) Button 2: 180 pixels wide x 150 pixels high;

5) Custom 1: suggested 320 pixels x 50 pixels;

6) Custom 2: suggested 300 pixels x 250 pixels.

The first (home) page should include a table of contents and navigation should be provided between the pages. Your content should be included on at least 3 other html pages. You may have more than one content element on each page if you wish, or a page for each content element.

You should include:

• sounds which enhance your design appropriate for your chosen theme, including at least one voice-over which you have recorded yourself.

• graphics such as boxes, lines and other background as appropriate for your chosen theme

• additional headings and text if they are appropriate for your chosen theme.

You must demonstrate your ability to create the following user feedback, interactions and animations:

• Buttons and/or links added should provide feedback in the form of visual change (e.g. on rollover) and sound (e.g. subtle click)

• Objects growing larger or smaller

• Objects moving around the page/canvas, e.g. from left to right, up and down, etc.

• Objects changing colour

• Allow users to interact with the content with the mouse, either by clicking or rolling over content to trigger further animations

Theme Options:

You may choose from any of the below themes. Note that your book does not have to tell an actual story and you will not be marked on any story. You will however be marked on consistency of your pages in line with your chosen theme.

1) Stick figures

2) Letters and/or words - animated letters of the alphabet

3) Maths - numbers and/or geometric shapes

4) Cartoon - characters from graphics provided or of your choice

5) Animals - zoo or pet shop characters

6) SCU - advertising banners or other purpose

Introduction

A short description of the storybook should go here.  This could also include a background to your story, what inspired you, etc.  

Storyboards

The following storyboards on the following pages provide a more detailed explanation of the planned product.

(Note that:

?At least one storyboard should be provided for each page of your story.  

?You may need to provide a separate storyboard for some of your banner/animations in order to describe/demonstrate your planned design ideas.  

?The following storyboard format is one option.  You may choose other formats as long as you include the same details)