In this assignment, you will design and implement a single-page website using HTML, CSS, and original photographic and image assets that you have created. The webpage will be about a collection of 8 small objects that you have photographed yourself. The objects must share a common theme. The webpage will also present fictional text information about each of the objects in the collection.
All graphics and text used in this site must be your own original work – this includes the photographs and descriptions of the objects featured in the website.
The webpage will be presented as a single long-scrolling page divided into several sections. At the top of the page, the first section will introduce the collection, providing context and explaining the significance of the collection. Below this, there will be a separate section for each object. You must provide at least 1 clear image and a description of no more than 100 words for each object. At the end of the page, a final section will provide brief information about the owner of the collection, or where the collection can be viewed.
While it is important that each page section presents content in an interesting way, all sections must share a common visual style with professional branding. Basic elements and principles of design should be applied with an understanding of typography and user interface conventions are applied in web sites.
In the conceptual design stage for this assignment you must produce a wireframe diagram and visual mock-ups of your planned website design. This will allow you to begin planning the page layout and visual style of the site while you are still learning HTML and CSS design and development techniques. Your research and planning process must be shown in your documentation.
Important!
This assignment should be about practising our application of graphic design elements principles. You are not expected to implement advanced features such as JavaScript interactivity, or create video or animated site content.
It is important that you focus your efforts on creating a compelling visual design and implementing the page layout. The site does not need to work on a mobile phone.
Your website must be hosted online. Your Moodle submission must include the following deliverables:
▪ A “project” folder containing your original photos used in the assignment in JPEG format
A total upload limit of 100MB applies for this assignment submission. If necessary, you may resize the original photographs to at least 2 megapixels to reduce their file size for submission.
▪ A “site” folder containing your web page as an HTML document, styled using CSS.
Any assets required to view the page correctly should be organised using sub-folders. Files should be optimised for online delivery – all files used by the web page must not exceed 25MB. The web page will be tested using Google Chrome.
▪ Creative process documentation as a PDF file
An annotated visual diary showing your creative process, demonstrating how research, experimentation and understanding of theory contributed to the development of your designs. This documentation should include wireframe layout diagrams and visual mockups of designs.
Include URLs of all images or web sites you refer to for your research. Your documentation shows your thinking and experimentation. There are bound to be a few dead ends and restarts in your process, and you will get marks for explaining them!
In addition to a Moodle upload submission, you must also upload your completed website to a web host and provide a URL in the documentation to access the site online. It is your responsibility to ensure that the site works correctly when viewed online.
Web hosting options will be discussed in the week 12 lecture.
Your submission will be graded on the following criteria:
▪ Originality and creativity in response to the brief
• Originality of concept and site design
• Creative use of edit images including photographic elements
▪ Application of design elements and principles, and web design conventions
• Implementation of graphic design principles
• Implementation of web design principles and content readability
▪ Technical execution of web page using HTML and CSS code techniques
• Application and execution of HTML and CSS techniques
• Appropriate optimisation of image assets
▪ Written and visual documentation
• Coverage of design process (including research, references, inspiration, etc.)
• Use of wireframes, mock-ups, screenshots and other resources to illustrate
development
• Explanation of decision-making process
Any submission received after the due date without approved special consideration will receive a 10% reduction to their final mark per day late for a maximum of three days (30% reduction in total). Submissions received in excess of 3 days after the due date without a prior arranged extension will maintain a 30% penalty.