Description
Aim
The aims of this assignment are to develop a hi-fi prototype design as a mockup Web interface. The assignment allows you to practice skills in high fidelity design, Web technology, HTML, CSS, and JavaScript. It will also require you to put the visual design principles discussed in class into practice. Lastly, the assignment demands that you adopt an inclusive design practice by taking web accessibility into consideration.
Figure 1 Screenshot taken from original homepage of the book club website
Figure 2 Example PDF-format Registration Form which was downloaded from the original website BPD
Background
The login or registration form is usually one of the first elements we see on a website – the first impression visitors get from the organization or service. The efficiency of the website navigation and such online forms is what can make or break the relationship between the brand and its audience. A combination of usability, visual appeal and accessibility will make sure the visitors get the most out of your site, building the foundation for an exceptional user experience.
Imagine that you’ve been asked to redesign a website “Book Program Discussion (BPD)1” and registration form for a non-profit organisation that lends books and professional discussion notes to participating book groups. BPD also wants a new logo, which they are contracting out to a design firm. Please include a placeholder logo for a new logo which matches the new colour scheme. Groups make their book selections from an extensive book catalogue and receive enough copies of their selected book to allow everyone in the group to read the same book at the same time. Each group meets on a regular basis to discuss the book they’ve read.
The current website only has a PDF form that prospective members must fill out — it does not have an online registration form for new book club members. The organisation would like to have their website redesigned. It should include a registration form which will allow new members to fill up their details and submit the form. The organisation will then connect the new members to local groups.
For this assignment, you will have to prototype only 1) the homepage and 2) the online registration form. The design should be suitable for a standard full desktop i.e., from 960 to 1140p. You are designing for a high-fidelity prototype therefore doesn’t need to be fully functional (i.e., the prototype does not connect to a database nor does it actually submit the form field input). Error checking for format of addresses, passwords, mobile number, is out of scope.
1 The current website of the organization is shown anonymously in Figure 1 and 2. Please preserve anonymity.
You can choose to build the redesign from scratch, i.e., from the ground up, or you can adapt template(s) from the w3.css framework (see https://www.w3schools.com/w3css/w3css_downloads.asp) and you must
a) reference the template in the HTML source code and in the report, and
b) you must adapt the template with a substantial amount of your own customization.
This assignment is meant to assess your design decisions. As such, you must make enough design decisions and be clear which design decisions are your own versus taken from the template.
High-fidelity Prototype Part 1
Redesign the homepage for the book club by giving it better web styling and structure. There are no restrictions to what you can include in the homepage but there should be a navigation bar, an H1 header, a supporting image and a primary call-to-action, i.e., for this case, a button or link for registration. Make use of the visual design principles discussed in class and take into account the basic accessibility guidelines. Your screen should approximately match the visual complexity of Figure 1.
A colour in hex format has been assigned to you which you will have to use in some parts of your design. You should receive this via individual email to your [email protected] email address. You can use the assigned colour either as a foreground or as a background. It doesn’t have to be applied to all elements, but it must be emphasised and present in multiple html elements in the homepage. When using the assigned colour as a foreground you must choose the appropriate background that meets the colour contrast accessibility guidelines. The same applies when using it as a background. You can check your assigned colour to pick a contrasting colour as a foreground or background by using online tools for example https://htmlcolors.com/hex-color.
In HTML, colours are defined using the attributes ‘color’ typically for foreground elements, such as text or borders on a background; and ‘background-color’ which is a colour used to fill a background. Imagine that you are working with a design team that requires standardised naming of HTML elements.
To apply the assigned colour to elements where the attributes ‘color’ or ‘background-color’ are used, there are two steps. 1) You are required to define your css selectors in the exact format below (with the example assigned colour #ffffff) and 2) you must reference the css class selector in the element.
CSS class selector format in your css file:
.custom-color { (correct because correct css selector name) color: #ffffff;
}
.custom-background-color { background-color: #ffffff;
}
.assigned-background-color { background-color: #ffffff;
}
Part 2
(correct because correct css selector name)
(incorrect because incorrect css selector name)
Design a registration form for a new book club member. The form should be in a modal window that pops up as an overlay on top of the homepage. The modal window only appears if you click the registration button or link from the homepage. The modal window should also have a close button (usually a button labelled “x”) that closes itself and restores the homepage. This can be achieved using a simple JavaScript code. The button or link that you click to trigger the opening of the modal window must have an id of “trigger-modal”.
For example:
<a href=”#” id=”trigger-modal”>Register</a>
For simplicity, your form should have exactly 3 sections with all of the 8 following fields (each input field is only 1 input field):
· User Details
o Given name
o Surname o Username o Password
· Addresses
o Home Address (within exactly 1 input field) o Work Address (within exactly 1 input field)
· Contacts
o Mobile Number (within exactly 1 input field) o Email (within exactly 1 input field)
For the purposes of this assignment, do not add any additional sections or form fields to the registration form which differ from the above specified sections and fields.
Imagine that your design team requires that the sections have the exact div ids:
- · userDetails (For example: <div id=”userDetails”>)
- · addresses
- · contacts
Your design team also requires that you enclose the entire form with a div html element with the id “bookclubrego”. For example <div id=”bookclubrego”><form>…</form></div>.
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:
<link rel=”stylesheet” href=”index.css”> (correct)
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”> (correct) <link rel=”stylesheet” href=”css/index.css”> (incorrect because it’s in a subfolder) <script src=”scripts.js”></script> (correct)
<script src=”js/scripts.js”></script> (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.
