代写COMPSCI 345 / SOFTENG 350 High-Fidelity Prototype代写Java编程

日期：2024-04-29 04:03

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.

Figure 1 - Screenshot taken from a freecycling themed website. Your prototype should have comparable visual complexity to this example.

Background

Imagine that you have been asked to design a website called “Freecycling!” including its registra=on form. Freecycling! intends to use this website to enable users to sign up for a freecycling network in their local community, where individuals can give away items they no longer need for free.

A combina=on of usability, visual appeal and accessibility will make sure the visitors get the most out of your site, building the founda=on for an excep=onal user experience. The account crea=on or

registra=on form is a typical part of websites that provide personalized services. The user experience  of the website and such online forms supports the rela=onship between the service and its audience.

You are tasked with developing their website. It should include a registra=on form which will allow new members to fill up their details and submit the form. The business will then handle future

freecycling ini=a=ves and other member ac=vi=es.

For this assignment, you will have to prototype only:

1.    the homepage and

2.    the online registra=on form.

You are designing for a high-fidelity prototype therefore, it does not need to be fully func=onal (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.

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 rganisa=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

o Given name

o Surname

o Username

o Password

.    Addresses

o Home Address

o Work Address

.    Contacts

o Mobile Number

o Email

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.

For simplicity, your form. should keep these three sections within ONE column, with the fields directed towards one common fate. The visual subdivision into the three sections should only use the principle of proximity.

Furthermore we assume that your design team requires that the three sections have the exact div ids:

.    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

Use the Valida1on Prior to Submission

The submission system h"ps://hci-submissions.researchprogrammerhub.cloud.edu.au will help you ensure that your submission meets certain technical specifica=ons. (Aoer each upload, a validator will check most but not all of the technical requirements in this assignment). You can submit a .zip file. You will need to login using your university email (i.e. [email protected])

There are no restric=ons as to how many =mes you use the validator. You can validate your assignment as many =mes as you need to before the deadline.

We reserve the right to reduce marks for any technical specifica=ons not followed. Passing all the Validator Syntax tests is an important indicator that your assignment meets technical specifica=ons, but you are responsible to check for all specifica=ons.

In case of issues with the submission system, please contact [email protected]c.nz.

Submission Overview

You will need to submit in two places.

1.   to Canvas all files including the Report in PDF format, as a zip file

2.   to the submission system

h"ps://hci-submissions.researchprogrammerhub.cloud.edu.au

as a zip file except the report.

This submission system will accept your last submission before the deadline as the final submission.

You need to submit in BOTH places. 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. We reserve the right to apply a late penalty if the assignment is not correctly submiYed to both places.

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

This sec=on includes common ques=ons regarding the projects. If you s=ll have any ques=ons don’t hesitate to ask on Piazza.

Q1: Can I use other colours?

A:

Yes, you can, but you need to include the exact brand colour you were given a few =mes on the website, and also theme your colour scheme around said colour.

You can use a colour scheme such as complementary or analogous colour scheme that contains your colour.

Remember, the intui=on behind the assigned colour is that this is the brand colour of our customer. So the customer wants to receive a solu=on that fits to the brand in terms of colour.

E.g., if my colour was #FFBA00 I would play around with hYps://paleYon.com. And find similar/complementary shades I could use.

Q2: Can I use inline styles?

A:

Yes.

To clarify, inline CSS is having the styling code inside the HTML file, and not in a separate CSS file. You

are allowed to either have a separate CSS file or use inline styles.

Q3: Will I get full marks if my project passes the validator?

A:

No, the validator is a tool to help catch any errors related to a subset of technical specifica=ons and specified naming conven=ons; it will not mark your project.

Q4: Can we use Google Fonts?

A:

Yes.

Q5: Can we use templates?

A:

You may browse for templates only from w3school’s w3.css templates.

hYps://www.w3schools.com/w3css/w3css_templates.asp.

But you need to ensure that you modify the template substan=ally, to make it your own. You also need to indicate your code contribu=on.

No other templates other than the ones men=oned are allowed. 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 crea=ve layout isn't your own work. Intrinsically, this assignment does not require elaborate toolkits, given the super-limited func=onal requirements of the system. The assignment focuses on making good design choices rather than implemen=ng maximum func=onality.

W3schools template recommended to study popup func=onality:

hYps://www.w3schools.com/w3css/tryw3css_templates_mail.htm

Q6: Can we use External Style Sheets?

A:

You may only use w3.css and Fontawesome and necessary google fonts. No other stylesheets are allowed in this assignment (i.e. bootstrap). The intui=on behind this is that the assignment builds a familiarity with founda=onal web technologies, and that you will use this familiarity to beYer understand current and future frameworks that build upon these founda=ons.

Q7: Does the website need func1onality?

A:

No, the only func=onality you need is to open and close the pop-up modal. You do not need to include anything more complex.

Q8: Do we get beUer marks for responsive websites?

A:

Although we encourage it, this assignment will not mark you based on website responsiveness, so there are no marks for website responsiveness.

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.

5.    Now you should no=ce some changes to the browser.

Near the top of your browser (just under the address bar), you should see two input fields. Set the dimensions to 1920 x 1080.

6.    Now you can see your browser in 1920x1080 resolu=on. These are the dimensions that your marker will see your website in.

Q11: Can I add more sec1ons to my registra1on form?

A:

No, please only add the sec=ons men=oned in the specifica=ons.

Q12: Can I have mul1ple input fields per ques1on?

A:

No, each ques=on can only have one input field.

Q13: Can I separate the sec1ons into mul1ple columns?

A:

No, all the sec=ons and their corresponding ques=ons must be within one column.

Q14: Could I submit my github repo?

A:

No -- you must follow every single submission instruc=on precisely as they’ve been laid out. Each instruc=on is there for a reason. Please ask us in lecture if you are curious!

Q15: How should I check the colour contrast of web elements?

A:

There are many online tools. We recommend: hYps://webaim.org/resources/contrastchecker/