FIT2902 - Interactive Media Studio 2
2023 Semester 2
ASSIGNMENT 1 INDIVIDUAL PROJECT [30%]
2D WEB PROJECT
Brief
Websites can deliver educational and entertaining experiences, allowing users to enjoy
storytelling and learning in an visually engaging and mentally stimulating way.
Develop a website based on the literary fiction you selected for the MoNaSH creative
brief and design and develop a website that makes use of media assets, CSS and
JavaScript to create an animated interactive experience for visitors.
This is an individual assessment task. Your website will be based on the research and
pre-productionwork demonstrated in the Assignment 1 Presentation assessment.
Task
Working individually, design and develop a single-page desktop website that makes
use of full-window sections to present key scenes about your chosen literary fiction in
an engaging way.
The website must have 5-6 full-window sections, each serving a different purpose
● 1 header section that introduces users to the site
● 3-4 sections that communicate important story information, such as characters,
setting and story events
● 1 footer section that includes a web form
Full-window sections must be as wide as the browser viewport, and at least as tall as
the browser viewport. Section may be taller than the browser viewport to allow
additional scrolling.
Your website should consistently apply a specific branding style and art direction that
you have researched and created, while making use of a providedMoNaSH brand logo
assets.
Each section in the website must make use of original/edited media assets, CSS,
animation and JavaScript techniques to present information in an attractive and
engaging way.
Implemented animations and interactions in each section should be listed in your
documentation, as well as all references.
1
FIT2902 - Interactive Media Studio 2
2023 Semester 2
Website Requirements
Your website will present a few key scenes from your chosen literary fiction. Keep in
mind that you do not need to re-tell the entire story. You may use short excerpts from
your selected literary fiction.
Your website production must take into account the following technical considerations:
● The website will be tested at desktop resolutions of 1366 x 768px and 1920 x 1080px.
● Organise your website files using sub-folders and sensible file naming.
● Media assets must use appropriate file formats for use on the web.
● Media assets must be appropriately optimised to minimise file sizes.
Each of the the 5 required page sections must:
● Completely fill the browser viewport to offer a full-window experience.
● Have a unique layout design, different to other sections.
● Animation created using CSS or JavaScript.
● JavaScript interaction that controls an animation.
● JavaScript interaction that triggers audio playback.
You may have additional CSS animation and JavaScript interaction that is applied
globally through the entire site to create consistency between sections. For example,
CSS and JavaScript that are used for a navigation menu that is visible in all sections.
The final section of the website must also include an HTML web form that uses
JavaScript to check values entered into form fields. For example, a form could be:
● Newsletter signup
● Quiz question
● Site feedback
● Contact form
Theweb formdoes not need to store or send any submitted information. Data
entered into the formonly needs to be processed using JavaScript.
Use of Online and AI Resources
The following requirements apply to all resources that are not your own original work
used in the production of your website and website content.
● All downloaded images, video and audio assets must be in the public domain,
licensed as creative commons, or include a permissive licence that specifically
allows free commercial use of the asset.
2
FIT2902 - Interactive Media Studio 2
2023 Semester 2
● All downloaded media assets must be referenced, including the title, URL, and
licence type.
● Webfonts (such as Google Fonts) may be used and must be referenced
● All code sourced from the Internet must be referenced. This includes:
○ Code files that you have downloaded or linked to
○ Code from online examples that you have modified (e.g., StackOverflow)
○ Code from online tutorials (e.g. YouTube videos)
● Generative AI tools may be used to create media and text assets for the website.
○ AI-generated media assets must be creatively edited and declared in your
references.
○ Use of generative AI tools and content must be declared in your references.
Any non-original assets that are used in video(s) you createmust be referenced.
Deliverables
Submit your assignment as a ZIP file containing your website and documentation.
● A folder named "Website"
○ All files required to view the website, with subfolders for file organisation.
○ All media assets must be appropriately optimised for web delivery.
● Adocument named "Documentation.pdf"
○ A list of animations and interactions implemented in each page section.
○ A list of references for all third-party assets and resources used in the site.
Assessment Criteria
Your submitted assignment will be assessed using the following criteria. Please check
the Marking Guidelines document for further criteria breakdown.
● Visual art direction and layout design
○ Appealing presentation of content with consistent design implementation.
● Application ofmedia assets
○ Use of different types of media assets with appropriate optimisation.
● Application of CSS animation
○ Use of a variety of different CSS techniques to create animated content.
● Application of JavaScript interactivity
○ Implementation of different JavaScript interactions including an HTML form.
● Documentation and references
○ List of section features, references with correct identification of licences.
SUBMISSION DUE: Friday Week 8, 11:55PM