Design documentation – Global Homework Experts

CMP81001 – Assignment 1 1
Assignment 1
Web-based Interactive Book
Due Dates:
Part A: Design documentation: 11pm Friday of Week 5.
Part B: Final product: 11pm Monday of Week 7.
Task Description:
Part A of this assignment requires you to produce design documentation for a web-based
interactive book (eBook) in accordance with UX design principles. For Part B, you must
develop that product for use in a web browser using Google Web Designer.
Client Brief:
You are required to create an interactive book/eBook. The book should contain a home page
and at least 3 other pages with a table of contents and appropriate navigation between the
pages. You may choose the dimensions of your book but it should be no smaller than 320 x
568 pixels and no larger than 768 x 1024 pixels.
Your design and final product should include:
6 major animations, with at least one animation on each page. It is up to you as to where
you put these 6 animations – but they should be appropriate for your theme and contribute
to the overall user experience. Your major animations must include at least one example of
each of the following: objects growing larger or smaller, objects moving around the page
(e.g. from left to right, up and down, etc.) and objects changing colour.
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.
Any additional headings and text if they are appropriate for your chosen theme.
Your interactive book/eBook should be designed in accordance with UX design principles,
and should demonstrate your design skills. It should include appropriate use of text,
graphics, animation and interactivity for your chosen theme. Your design should use a
variety of animation techniques, text and graphic elements providing information and other
techniques to display information using custom interaction. You must demonstrate your
ability to create the following interactions and feedback:
Appropriate buttons and/or links to navigate to other pages of the book;
Buttons or links which provide feedback in the form of visual change (e.g. on rollover) and
sound (e.g. subtle click).
Objects which allow users to interact with the content with the mouse, either by clicking or
rolling over content to trigger further feedback such asanimations
CMP81001 – Assignment 1 2
Theme Options:
You may choose from any of the below themes. These are provided as source ideas. Students
may propose their own themes for this task but should check their intention with their local
tutor before proceeding. 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 (make sure you have
permission to use them and reference them!)
5) Animals – zoo or pet shop characters
6) A journey (can be a holiday, or travelling to a new country)
Students may further define their theme and interpretation.
Example 1: Within the theme “Animals”, a student may narrow their selection to “frogs”.
The interactive book on frogs may be interpreted to be introductory content for infants
school age users addressing the life cycle of frogs {egg – tadpole- froglet- frog} or may be
technical content for university environmental science students addressing the habitat of a
specific frog, such as the tree frog “Isthmohvla rivularis” (conduct a search on this and you
will find some very specific information).
Example 2: Within the theme “A journey”, you might choose to create a book to describe a
holiday, or travel to/from Australia, or a simple journey to work or university.
Development Milestones:
Part A – Design Documentation (progressive hand-in) – due Week 5:
Your Part A submission is a progressive hand-in of your design documentation. This will be
used to demonstrate your book’s design, including the, appropriate screen layouts using
storyboard techniques to communicate animation, media, user interaction, content
placement and suitable graphic design. There is also an option to demonstrate extra effort to
create an online wireframe using one of the free tools.
This hand-in will enable your tutor to give you feedback on your design in the workshop or
by online comments. Note that this Part A submission will not be marked at this time, rather
it will be resubmitted and marked with your final Part B submission.
Part B – Final Product – due Week 7:
You will develop your interactive book/eBook as per your design documentation submitted
in Part A –
using Google Web Designer (GWD). Submissions which are not created using
GWD will not be accepted.
Your Part B submission will include your final product as well as your final design
documentation as detailed in the submission details below. Marking will occur after this
final submission.

CMP81001 – Assignment 1 3
Submission Details:
Part A – Design Documentation:
Your design documentation must meet the client brief options provided above. The
documentation is to be submitted as one Word document using the report template provided.
Please name this in the following format (using your own name rather than bsmith):
As provided in the report template, this documentation should include:
A description of your interactive book;
A clear indication of your chosen theme and a description of how you have
interpreted the theme. You may also want to indicate the target audience (e.g. preschool or primary school child, teenager, adult etc);
at least one storyboard for each page with appropriate details under each of the
headings (as per provided report template) , including;
o description and purpose of page;
o media items to be used;
o description and purpose of user interactions required;
o description and purpose of animations (Note that additional storyboard
pages/screens may be required to demonstrate your animations);
o description and purpose of visual/aural feedback;
o navigation design;
a full media list of all media items used; and any additional design details
appropriate to demonstrate your final product;
(optional) a link to your wireframe prototypes in your chosen tool (Moqups,
Balsamiq, Mockingbird or other wireframe product). Note that only 3 screens
need to be presented due to limitations placed upon some of these free version
Part B – Final Product:
Your Part B submission should include:
1. Your published book – this means a version of your book created using the Publish
button in GWD. This folder should be zipped up and submitted. Please name this in the
following format (using your own name rather than bsmith):
2. Your book’s project files – this means the entire contents of your book’s GWD folder
not just a published or preview version). This whole folder should be zipped up and
submitted. Please name this in the following format (using your own name rather than
3. A resubmission of your Part A design documentation. Note that you may update this
documentation prior to submitting it with your final product.

CMP81001 – Assignment 1 4
Marking Criteria:
Part A: Design Documentation (10%)
appropriate documentation to deliver to a client;
quality of storyboards – at least one storyboard for each page with appropriate details
under each of the headings (as per provided in reporttemplate);
o media items to be used;
o description of all user interactions required;
o description of animations and their purpose/use. Note that additional storyboard
pages/screens may be required to demonstrate someanimations);
o visual/aural feedback and the purpose/use of the feedback;
o navigation design;
Full media list of all media items used in your project;
(optional) appropriate creation of wireframe prototype for demonstration to a client;
Part B: Interface, Text, Graphics, Animation, Final Product (20%)
balance of individual elements on the screen (text, graphics,animations);
consistency of look/feel between content elements;
appropriate use of fonts and text media;
appropriate use of aural/visual feedback;
appropriate naming conventions of resources;
appropriate use of animation techniques;
animations suit the purpose of the screen;
demonstrated understanding of UX concepts.
Media files (image and sound files) that you have sourced from the internet may be used in
this assignment,
provided that:
you reference the file in your documentation (at minimum, the file name and where
you sourced it from should be added to your media list);and
you have permission to use the file (if the file is copyright to another entity); or
the file’s usage rights allow you use it (e.g. Labelled forreuse).
Code: It is not necessary for you to use any code other than that created using Google Web
Designer. However, should you choose to do this, it is imperative that you acknowledge that
it is not yours. The inclusion of a comment indicating the source is all that is required, e.g.:
/* *****************************************************
Original source code by <Name> or from <Source>
Modified by <your name> on <date>
****************************************************** */
Include any modified code in between lines like this – which helps to identify your work:
/* ******************** Modified ***************************/
your code goes here
/* ******************** end modifications ***************** */

CMP81001 – Assignment 1 5
Choose a theme to tie your web content together. This has the dual benefit of presenting a
“unified” set of content, and potentially reduces the workload in development because some
of the resources are being used several times across the webpages.
Screen Space (Screen Real-Estate)
Animation moving across your content will only be effective if there is sufficient space to do
so. For content that has a “small” real-estate area, animation will likely be reduced to “image
swaps”. Design your layouts and animations according to thecontent sizes.
You are allowed to have fun. Although there are many practical and technical aspects of the
design and development process that must be adhered to, there is ample scope to be creative,
artistic and imaginative with respect to the selection of content, and how you choose to
present this to screen.

order now