DIG103A_Assessment 3_20240603 Page 1 of 7
ASSESSMENT BRIEF 3
Subject Code and Title DIG103: Interaction Design
Assessment Develop and code a
responsive about page
Individual/Group Individual
Length
2 x HTML pages
1 x CSS sheet
1 x jQuery script
Learning Outcomes
A) Design and code interactive webpages and collateral in
response to a design brief
B) Apply fundamental web standards and languages
to produce responsive interactive solutions
Submission Face-to-face students: Due by 11:55pm AEST/AEDT day of
class of Week 12
Online students: 12-Week Duration: Due by 11:55pm
AEST/AEDT, Wednesday of Week 12
6-Week Duration: Due by 11:55pm AEST/AEDT, Wednesday
of Week 6
Weighting 40%
Total Marks 100 marks
Context:
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
DIG103A_Assessment 3_20240603 Page 2 of 7
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
DIG103A_Assessment 3_20240603 Page 3 of 7
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: DIG103_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
DIG103A_Assessment 3_20240603 Page 4 of 7
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
DIG103A_Assessment 3_20240603 Page 5 of 7
Submit your assessment task via the Assessment link in the main navigation menu in DIG103
Interaction Design. For face to face classes, this assessment is due in class on Module 12 (Week
12).
For online classes, this assessment task is due by 11:55 pm Sunday of Module 12 (Week 12).
Marking
The learning facilitator will provide feedback via the Grade Centre in the Blackboard portal.
Feedback can be viewed in My Grades. The weighting of this task is 40%.
The Learning Rubric below is your guide to how you will be marked in this assessment.
Please be sure to check this rubric very carefully before you submit.
Use of non-original material
Assessable aspects of this brief, identified in the marking criteria, need to be the student’s
original work. If non-original material can be included in the submission, the lecturer will
provide details regarding what this can be. Students need to comply with the Academic
Integrity Policy, and can refer to the Academic Writing Guide in the Student Handbook for
further information regarding the use of non-original material.
Referencing acknowledges the thoughts and ideas expressed by other people within your
work. To meet recognised academic standards, material for all assignments must be
referenced correctly to identify the source. Torrens University Australia requires students
comply with the APA 6th edition style. For details refer to the Academic Writing Guide
available in the student handbook and Blackboard Academic Skills site.
DIG103A_Assessment 3_20240603 Page 6 of 7
Learning Rubrics
Assessment
Attributes
Fail (Unacceptable)
Pass
(Functional)
Credit
(Proficient)
Distinction
(Advanced)
High Distinction
(Exceptional)
Create and code HTML and CSS code was HTML and CSS code HTML and CSS code HTML and CSS code HTML and CSS code
HTML and CSS to full of errors, and was not contained a number of contained some errors, contained minimal errors, contained no errors,
design a webpage produced to a high errors, and was produced and was produced to a and was produced to an and was produced to a
using correct web enough standard. to an adequate standard. proficient standard. advanced standard. sophisticated standard.
standard techniques
30 points
No comments included in
the code.
Some comments included
in the code.
Thorough comments
included in the code.
High quality comments
included in the code.
Clear and insightful
included in the code.
Design visual Visual aesthetics have not Visual aesthetics have been Visual aesthetics are Visual aesthetics are Visual aesthetics are
aesthetics of the been developed to an developed to an adequate thought out, developed highly developed and industry standard, and
composition, imagery, adequate standard. and professional standard and produced to a produced to a highly are sophisticated in
type and colour that
with multiple areas professional level with professional level. their finish.
are professional,
needing improvement. some areas that need
sophisticated and
improvement.
elevate the brand
30 points
Design fluidly
responsive
webpages for
desktop, tablet and
mobile using correct
coding techniques
30 points
Webpages do not scale
content correctly or
fluidly for different sized
hardware.
Many errors were present
at the different sizes.
Webpages do scale
content correctly and
fluidly for different sized
hardware, but are
awkwardin some places.
A number of errors were
present at the different
sizes.
Webpages do scale
content correctly and
fluidly for different sized
hardware but still
require improvement in
some places.
Some errors were
present at the different
sizes.
Webpages do scale
content correctly and
fluidly for different sized
hardware in an advanced
manner.
Few errors were present
at the different sizes.
Webpages do scale
content correctly and
fluidly for different
sized hardware in an
exceptional manner.
No errors were present
at the different sizes.
DIG103A_Assessment 3_20240603 Page 7 of 7
Create and code
multiple engaging
interactive
components using
jQuery
jQuery script was not
included, non-functional
or included copyrighted
content.
jQuery script was
included, but interactive
components contained
errors, or did not feel
finished or polished
jQuery script was
included but were
minimal, contained
errors or added little to
the overall UX.
jQuery script was
included and was high
quality, contained minimal
errors and added
positively to the overall
UX.
jQuery script was
advanced and
exceptional, contained
no errors and increased
the overall UX in a
professional manner.
10 points
51作业君版权所有
