Design and develop a single-page desktop website that makes use of full-window sections to present information about your chosen literary fiction in an engaging way.
The website must have at least 5 sections, each serving a different purpose
- 1 header section that introduces users to the site
- 3+ sections that presenting some information
- 1 footer section that includes a web form
Any additional sections do not need to be the full size of the browser window.
Your website should consistently apply a specific branding style and art direction that you have created, while making use of a provided MoNaSH brand logo assets.
Some examples of full-window, animated and interactive web experiences:
Perform additional research to find more examples of web animation and interactivity.
Information in your website can be factual or fictional or a combination of both. You may use short excerpts from your selected literary fiction. Other text should be original.
Graphic assets used in the site must be original work or creatively edited using assets with a permissive licence that allows free commercial use.
The information and visuals presented in your site should be appropriate for your chosen target demographic.
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.
- Downloaded media assets must be referenced, including the title, URL, and licence.
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.
- Have 1 unique use of each of the following:
○ An audio, video, or animated media asset.
- Newsletter signup
- Quiz question
- Site feedback
- Contact form
Use of Online Resources
The following requirements apply to all third-party assets that are not your own original work used in the production of your website and website content.
All downloaded visual media must be creatively modified for use in this assignment.
- Downloaded images, video and audio must be either in the public domain,licensed as creative commons, or include a permissive licence that specifically allows free commercial use of the asset.
- All downloaded media assets must be referenced, including a title, source URL, and licence name.
- Web fonts (such as Google Fonts) may be used and must be referenced
- All third-party code used in the site must be referenced. This includes:
○ Third-party code files that you have downloaded or linked to (e.g. jQuery)
○ Online examples and tutorials (e.g. Codepen, StackOverflow, YouTube)
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.
- A document 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.
Your submitted assignment will be assessed using the following criteria.
- Visual art direction and layout design
○ Appealing presentation of content with consistent design implementation.
- Application of media 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.
- Documentation and references
○ List of section features, references with correct identification of licences.