This assessment is designed to extend knowledge of front end web design. This assessment

has multiple benefits for students in all design fields such as:

A$)$ Enables students to gain digital skills in an ever increasing digital communications

industry

B$)$ Enables students to gain experience in an entry requirement for junior designer roles

C$)$ Extends student$$s abilities beyond static design work towards interaction design that

incorporates human behaviour

D$)$ Introducing programming languages like HTML and CSS opens designers up to a field

$($programming$)$ in which advanced solutions can be made beyond traditional

capabilities

Task:

This assessment requires you to design and code a second webpage for the same client as

assessment $2.$ The content of the page will be provided, but you are required to create the

HTML and CSS to display the content in a sophisticated manner.

Mobile responsive design:

This assessment will include the requirement of the site being fluidly responsive for mobile

and tablet. This means that the site you design is required to change its layout to suit the

size of the hardware that it is displayed on$.$ A mobile version of the site will have a different

structural layout. For example: Two columns of text side$-$by$-$side for desktop or tablet are

responsively designed to stack on top of each other for mobile.

Some other examples of responsive design include:

$-$ Menu buttons should stack on top of each other and extend the width of the page

$-$ Font sizes may decrease or increase

$-$ Images should use up maximum space in terms of width

$-$ Padding and margins may decrease to use up more space

jQuery:

This assessment will also include the requirement to include a jQuery script coded by the

student. The required interaction is a hamburger menu $($for mobile$)$ that opens and closes

on click to reveal buttons in the menu $($mandatory$).$ Some examples of other optional

interactive components students could create or include from libraries include:

$-$ A scroll$-$to$-$top button that changes the users scroll position on click $($optional$)$

$-$ Animate on screen DOM elements when the page loads $($optional$)$

$-$ Multiple drop down menu $($optional$)$

$-$ Date $+$ time incorporated into HTML and CSS to display opening hours $($optional$)$

$-$ On$-$screen slider $($optional$)$

User input:

Students must also include at least one user input area $($mandatory$).$ These must be styled

to correctly match the brand. Some examples of user input areas students could design

include:

$-$ A search bar for navigating the site

$-$ A signup form for the sites newsletter or updates

$-$ A contact form for enquiries or questions

Process:

Students should create a wireframe of their design. This will guide you while you code and

design the structure of the page. Students will then need to code the webpage using HTML

and CSS$.$

As a guide, the content of the webpage will most likely include the following sections:

$$ Header

$$ Menu with buttons

$$ Hero image or image gallery

$$ Page body content

$$ Footer

$$ Social media icons

Content:

The contents for this webpage can be found on Blackboard inside of the Assessment $3$ area

titled: DIG$103\_$Interaction$\_$Design$\_$Assessment$\_3\_$Assets.zip

$$ All of the text is required on this page, although minor edits to formatting$/$language

can be made.

$$ All images of the artists must be included on the page

Assessment $3$: Artist's page web design $+$ code $-$ Text asset

Required text content for webpage

$($Artists names to be used in conjunction with images $-$ can choose any image to match an artist$)$

Artist's page:

International and national artists locked in for this years show:

Jock Boyd $($AU$)$

Peter McKinnon $($EU$)$

Boris Brejcha $($NE$)$

DJ Muller $($BR$)$

DJ Rekab $($UK$)$

Emperors $($AU$)$

The Chevelles $($AU$)$

Coerce $($AU$)$

Femme Fatales $($AU$)$

Hawks of Alba $($AU$)$

The Thieves $($AU$)$

Aforemention $($FR$)$

Submission requirements:

$$ The webpage $($the second page$)$ should change for at least three different sizes $$

desktop, tablet andmobile

$$ Mobile menu bar should display all buttons on top of each other $$ no interaction is

required $($students do not need to include an $$on click$$ event to expand$/$contract the

menu i$.$e$.$ a typical hamburger menu$)$

$$ Images should be resized and compressed if they are too large

$$ Fonts should make use of the www$.$google.com$/$fonts repository or the font file

included in the submission folder using @font$-$face in CSS

Students will zip their entire folder of their website $($including all image assets, font files, the

HTML page and CSS sheet$)$ and submit to Blackboard.

Evaluation criteria:

Students will be assessed on their ability to:

$1.$ Create and code HTML and CSS to design a webpage using correct web standard

techniques

$2.$ Design visual aesthetics of the composition, imagery, type and colour that are

professional, sophisticated and elevate the brand

$3.$ Design fluidly responsive webpages for desktop, tablet and mobile using correct

coding techniques

$4.$ Create and code an engaging interactive component using jQuery