SOFTENG350 -Assignment 2 - Solved

Registration form for a book club website


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. 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.

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 UPI@aucklanduni.ac.nz 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; }
(correct because correct css selector name)
.assigned-background-color { background-color: #ffffff; }
(incorrect because incorrect css selector name)
Part 2
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>.


 

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.