Assignment 1 Web-based Interactive Book

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 as animations. 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): CMP81001_bsmith_Ass1A.docx 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 interactionsrequired; 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 application. 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): CMP81001_bsmith_Ass1B_book.zip 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 bsmith): CMP81001_bsmith_Ass1B_projectFiles.zip 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 interactionsrequired; 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. Referencing 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 or from Modified by on ****************************************************** */ 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 Hints Efficiency 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. Enjoyment 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.