Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

COMPSCI 345 / SOFTENG 350

High-Fidelity Prototype

Landing page and registra-on form for a freecycling program, and a report.

30 marks for 30% of your final grade.

This assignment is individual.

Each student should plan to spend 20 hours on this assignment.

For submission instruc-ons please see the sec-on on submission below.

Due May 3rd 2024, 7:00pm

Aim

The aim of this assignment is to develop a high-fidelity prototype as a mock-up Web interface. The assignment allows you to prac=ce skills in high fidelity design, Web technology, HTML, CSS, and JavaScript. This assignment aims to give you familiarity with founda=onal web technologies. It will require you to put the visual design principles discussed in class into prac=ce. Lastly, the assignment demands that you adopt an inclusive design prac=ce by taking web accessibility into considera=on.

High-Fidelity Prototype

Part 1. Main page

Design a homepage for Freecycling!. There are no restric=ons as to what you can include in the

homepage, as long as you stay with the topic of freecycling. You are NOT required to actually include a func=onal browsing page, rather, you just need an informa=ve and appealing homepage.

You should also include a naviga=on bar, a suppor=ng image and a primary call-to ac=on, in this case a buYon or link for registra=on. Make use of the visual design principles discussed in class and take into account the basic accessibility guidelines.

The screenshot in figure 1 shows an example of a website similar to what Freecycling! wants. Your solu=on should have a similar visual complexity and use Gestalt principles and other Design principles where appropriate, and this should be described in the report.

Your design should be suitable for a 1920x1080 screen, more specifically you should check that it looks as you intend it with the Google Chrome tool to test a custom screen size as described in Q10 of the Q&A , and that it is readable if it is displayed on a 14 inch screen, a typical business laptop.

Your design does not need to be responsive.

Both the home screen and the form should be useable without scrolling at this resolu=on. This is important for both the homepage and the form to showcase the visual design in this exercise.

The organisa=on has a par=cular brand colour that they are known for and that they want used in    the website for brand recogni=on, and this is sent to you via your UPI email. Your design should use the colour in an appropriate way that ensures the customer aim of brand recogni=on through that   colour. It must be present in mul=ple html elements in the homepage, and it must adhere to the more specific specifica=ons below.

Because this assignment aims to give you familiarity with founda=onal web technologies, the implementa=on is limited to vanilla Javascript and the stylesheet w3.css and Fontawesome and necessary google fonts.

Your website has to meet accessibility guidelines including colour contrast.

Part 2. Registra1on form

Design a registra=on form for a Freecycling! 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

registra=on buYon or link from the homepage.

The modal window should also have a close buYon (usually a buYon labelled "x") that closes itself   and restores the homepage. This can be achieved using a simple JavaScript code. The buYon or link that you click to trigger the opening of the modal window must have an id of "trigger-modal".

For example:

Register

Your form should have exactly 3 sec=ons with all of the 8 following input fields (each is exactly only 1 input field):

.    user-details                 (For example: <div id="user-details">)

.    address-details            (For example: <div id="address-details">)

.    contact-details             (For example: <div id="contact-details">)

Remember to use these exact div ids for each section.

Your design team also requires that you enclose the entire form with a div html element with the id "form-ct". Thus, the form contents should be within <div id="form-ct"><form>…</form></div> In general, the HTML should be well-formed. This can be achieved by using some of the free IDEs that check markup.

Assignment File Structure/Folder Requirements

While folders are common for web file organisa=on, for the purposes of this assignment you must not have 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 subfolders. Your directory structure should be similar to the file structure below for example:

The examples below show you how you call local files from your html:

<link rel="stylesheet" href="index.css">             (correct)

<link rel="stylesheet" href="hYps://www.w3schools.com/w3css/4/w3.css">          (correct)

<link rel="stylesheet" href="css/index.css">            (incorrect because it is in a subfolder)

<script src="scripts.js"></script>               (correct)

<script src="js/scripts.js"></script>           (incorrect because it is in a subfolder)

For ques=ons see sec=on 12 to 14 of the Q&A.

The Report

You will also need to submit a report, that will consist of a series of annotated screenshots. In the annota=ons, you will describe the ra=onale behind your visual design choices.

You will be marked on the quality and clarity of your jus=fica=on of design decisions in regards to user experience, Gestalt principles, balance, emphasis, unity, and colour scheme, for the main page and form.

Rather than an essay format, we're seeking 5-8 annotated screenshots. At least two screenshots should be complete screen views of your main page and form. The remainder should be par=cular framings and closeups of page elements. The total length of the text in annota=ons should be 800-1000 words and not exceeding 1000 words (including =tles and figure cap=ons, excluding references).

Submission InstrucAons

Submission Marking Scheme

For evalua=ng 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 annota=ons and jus=fica=ons for user experience, Gestalt principles, balance, emphasis, unity, colour scheme for main page and form. Correct number of screenshots. (10 marks)

Visual design

Overall quality of user experience, Gestalt principles, balance, emphasis, unity, colour scheme for main page and form. (5 marks)

Common Fate Form follows the Gestalt principle of Common Fate. (2 marks)

Proximity Form visual subdivision only uses the Gestalt principle of Proximity. (2 marks)

Colour Assigned colour is emphasised and present in mul=ple screen elements. Colour contrast meets accessibility guidelines. (5 marks)

Func-onality

Accessibility Submission follows accessibility guidelines presented in lecture. (5 marks) Func:onal correctness Form pops up and closes as specified. No bugs. (1 marks)

Technical Specifica-ons

All instruc=ons and specifica=ons have been followed. No errors from Validator. The HTML is well- formed. (Up to -4 marks, as deduc=on if not fulfilled)

Q & A

Q9: Can I use mul1ple HTML files?

A:

No, please only use one HTML file named ‘index.html’.

Q10: How do I make sure my website is suitable for a 1920x1080 desktop?

A:

The examples shown will be for MicrosoA Edge and Google Chrome, though most web browsers should support this func:on. Before submission, you should review your design with Google Chrome.

You may follow these steps:

1.    Right click anywhere on the browser.

2.    Click ‘inspect element’.

3.    You should now see the ‘developer tools’ sec=on. (By default it is on the right)

4.    Click the ‘toggle device toolbar’ icon.

It should look similar to the image:

It is also highlighted in red in the following screenshot.