)
· addresses
· contacts
Your design team also requires that you enclose the entire form with a div html element with
the id “bookclubrego”. For example
.
Submission instructions
You will need to submit in two places.
1) to Canvas all files including report, as a zip file
2) to assignment dropbox https://adb.auckland.ac.nz/ all files (except report) as
individual files (no folders, no zip)
Assignment dropbox requirements for submission
You must submit all files, except the report. Example included files are index.html, styles.css,
logo.jpg, script.js, all submitted as individual files. While folders are usual for web file
organisation, for the purposes of this assignment you must not submit any folders. All of
your files, such as your css and image files, should be in the same folder where your
index.html file is located. Do not put any files in folders or subfolders. Your directory
structure should be similar to the file structure below for example:
The examples below shows you how you call local files from your html:
(correct)
(correct)
(incorrect because it’s in a subfolder)
(correct)
(incorrect because it’s in a subfolder)
Technical Requirements Checklist
● The css selector names “custom-color” and ”custom-background-color” are used for
my assigned colour.
● The link or button for the modal uses the id “trigger-modal”.
● The form is enclosed with the div id “bookclubrego”.
● The form uses exactly three div id’s “userDetails”, “addresses” and “contacts” with
exactly 8 input fields, as specified.
● All files are in the same local folder and not in subfolders.
A2 Submission Marking Scheme
For evaluating the compliance of the submission, e.g., with accessibility guidelines, we will
use manual marking and we may use tools to check, e.g., colours. Please recall that only
W3 CSS is allowed.
Report
Quality, clarity of justifications for user experience, Gestalt principles, balance, emphasis,
unity, colour scheme for main page and form. (7 points)
Visual design
Overall quality of user experience, Gestalt principles, balance, emphasis, unity, colour
scheme for main page and form. Appropriate placeholder logo. (7 points)
Common Fate Form follows the Gestalt principle of Common Fate. (2 points)
Proximity Form follows the Gestalt principle of Proximity. (2 points)
Colour Assigned colour is emphasised and present in multiple screen elements. Colour
contrast meets accessibility guidelines. (5 points)
Functionality
Accessibility Submission follows accessibility guidelines presented in lecture. (6 points)
Functional correctness Form pops up as specified. No bugs. (1 point)
Q&A
Q: I understand that the assignment is testing prototyping and not the functionality, but would
some small functionalities be necessary? Specifically in cases like choosing a different item
combo box or applying filters to a list, would we be marked differently if we choose to
implement these small things as it helps to get a better overall feel of the prototype?
A: The purpose for the assignment is design rather than functionality. The assignment asks
students to implement 2 button clicks (i.e., the register button and the close button), and
leave the other buttons non functional.
Overall the answer to this question is No. For best marks, put effort into your design
decisions.
Q: What libraries, etc., can we use?
A: You have to use standard web browser technologies (HTML, CSS, Javascript).You are
not allowed to any libraries except JQuery and, if you wish, the w3.css framework (see
https://www.w3schools.com/w3css/w3css_downloads.asp ). You are not allowed to use
anything that generates code for you.
The reason for this approach is that downloading a template that sets the colour scheme, the
font scheme or has a creative layout isn't your own work. Intrinsically, this assignment does
not require elaborate toolkits, given the super-limited functional requirements of the system.
The assignment focuses on making good design choices rather than implementing
maximum functionality.
Q: Could I submit my github repo?
A: No -- you must follow every single submission instruction precisely as they’ve been laid
out. Each instruction is there for a reason. Please ask us in lecture if you are curious!
Q: How should I check the colour contrast of web elements?