Front-End web design is concerned with the design and production of website elements that directly shape a user’s experience of a site. Front-end web has a broad scope, encompassing elements such as typography, layout, visual aesthetics, interface behaviours, and information architecture. It is a highly dynamic, burgeoning field of practice that is the creative engine-room of the modern web. This course provides a hands-on foundation in front-end web, introducing students to its fundamental concepts, theories, production practices and core technologies such as HTML, CSS and Javascript. The skills and knowledge acquired in this course are versatile and powerful, and will be of value to students from any field of study.

Learning Outcomes

Upon successful completion, students will have the knowledge and skills to:

Upon successful completion of this course, students will have the knowledge and skills to:

1. Creatively apply front-end web concepts, practices and technologies including HTML5 and CSS3.
2. Creatively adapt to the technical and cultural constraints of a specific context.
3. Conduct research into design artefacts and processes, and apply findings to creative production.
4. Substantiate design outcomes with research and rationale.

 

Staff Feedback

Students will be given feedback in the following forms in this course:

• written comments
• verbal comments
• feedback to whole class, groups, individuals, focus group etc

Student Feedback

ANU is committed to the demonstration of educational excellence and regularly seeks feedback from students. Students are encouraged to offer feedback directly to their Course Convener or through their College and Course representatives (if applicable). The feedback given in these surveys is anonymous and provides the Colleges, University Education Committee and Academic Board with opportunities to recognise excellent teaching, and opportunities for improvement. The Surveys and Evaluation website provides more information on student surveys at ANU and reports on the feedback provided on ANU courses.

Class Schedule

Week/Session	Summary of Activities	Assessment
1	Lecture: Introduction to Front End Web Design Activities: Website Anatomy. Getting started on website audits. Examining the brief: client, content, contexts.
2	Lecture: Affordance Online Activities: Approaches to structuring content and pages. Exploring information architecture with wireframes and wireflows. Low fidelity prototyping.
3	Lecture: Designing for Context Activities: Developing high fidelity designs. Identifying, adapting and applying typographic and visual design conventions. Introduction to HTML.
4	Lecture: Front End Work Flows Activities: Website audit Feedback Sessions. Applying semantic HTML
5	Lecture: Creative Practices on the Web Activities: Wireframe Feedback Sessions.
6	Lecture: Static Site Generators Activities: From content dumping to structured HTML pages. Tools for checking and validating.	Monday - submit Research & Design project
7	Lecture: Access to Information Activities: User experience, accessibility and the web
8	Lecture: An Introduction to CSS Activities: Getting started with CSS	Monday - submit HTML Website
9	Lecture: The Dark Arts of CSS Activities: CSS for mobile-first web design.
10	Lecture: Data and Multimedia in Front End Web Design Activities: Adapting to desktop.
11	Lecture: Democracy & the Web Activities: Designing behaviours. Aggregating and filtering content.
12	Lecture: The Wicked Problems of the Web Activities: Consolidating and polishing, testing and adjusting.

Tutorial Registration

Registration for tutorial groups can be done through MyTimetable before semester commences.

Assessment Summary

Assessment task	Value	Due Date	Return of assessment	Learning Outcomes
Research Report & Design Development	40 %	29/08/2022	12/09/2022	1, 2, 3, 4
HTML Website	20 %	26/09/2022	10/10/2022	1, 2, 3
Final Website	40 %	07/11/2022	01/12/2022	1, 2, 3, 4

* If the Due Date and Return of Assessment date are blank, see the Assessment Tab for specific Assessment Task details

Policies

ANU has educational policies, procedures and guidelines, which are designed to ensure that staff and students are aware of the University’s academic standards, and implement them. Students are expected to have read the Academic Misconduct Rule before the commencement of their course. Other key policies and guidelines include:

• Student Assessment (Coursework) Policy and Procedure
• Special Assessment Consideration Policy and General Information 
• Student Surveys and Evaluations
• Deferred Examinations
• Student Complaint Resolution Policy and Procedure

Assessment Requirements

The ANU is using Turnitin to enhance student citation and referencing techniques, and to assess assignment submissions as a component of the University's approach to managing Academic Integrity. For additional information regarding Turnitin please visit the Academic Integrity . In rare cases where online submission using Turnitin software is not technically possible; or where not using Turnitin software has been justified by the Course Convener and approved by the Associate Dean (Education) on the basis of the teaching model being employed; students shall submit assessment online via ‘Wattle’ outside of Turnitin, or failing that in hard copy, or through a combination of submission methods as approved by the Associate Dean (Education). The submission method is detailed below.

Moderation of Assessment

Marks that are allocated during Semester are to be considered provisional until formalised by the College examiners meeting at the end of each Semester. If appropriate, some moderation of marks might be applied prior to final results being released.

Participation

The course has been designed with the expectation that students will attend and participate in the weekly class activities and feedback sessions.

Assessment Task 1

Research Report & Design Development

Website overview

In this course you will research, plan, and produce a working website that is tailored to the content of a particular client to promote and inform stakeholders and audience about their work. A full creative brief will be supplied via the course Wattle site.

This first assessment focuses on the planning and design of your website. It requires you to research, analyse and adapt existing website conventions, and apply them in your own designs.

Research

The aim of the research and analysis is to develop understanding of web design practices before embarking on the design and production of your own site. The focus of the analysis is design conventions. Conventions underpin the organisation, presentation, function and behaviour of all websites. They serve as useful design rules but are cultural inventions, changing over time and adapting to different contexts. Therefore, it is integral that you identify websites and conventions that are most relevant to your particular aims and objectives for your client and their key stakeholders.

Identify at least 4 existing websites with relevance to the project brief and your design aims  (ie. Not Facebook, or Google, or Amazon, or Pinterest, or Instagram, etc.). Audit your website collection and identify and document design elements, conventions and patterns. Where required, seek out additional websites to further investigate particular conventions or patterns.

Design Development

Develop a set of webpage designs and assets that apply the design conventions and patterns identified in your research. Detail the look and feel of your website including layout, navigation, typography, colour, backgrounds and other visual details. See the brief on Wattle for a complete list of details for material to be submitted. You will prepare for mobile and desktop resolutions the following media:

1. Wireflows detailing the two different user journeys mobile and desktop sizes using supplied content. See the brief on Wattle for examples.
2. Wireframes - Screenshots of your selected websites (4 minimum) at mobile and desktop widths with key elements, conventions and patterns you have identified labelled. Screenshots of your designs at mobile and desktop widths with all of the key elements, conventions and patterns you have implemented labelled. 
3. Social Media Assets – A set of graphics carrying over your design  for particular social media contexts.
4. Report - Accompanying written explanation of your design decisions. Substantiate your design choices with evidence from your research, relevant resources and analysis of the project brief. 2000 word maximum. Cite all references using your preferred citation style.

Submission: Assemble all of the required documentation together into a single PDF and submit on Wattle with your assets. Your submission must feature all of the required content as listed in the full brief posted on Wattle.

Assessment Criteria:

1. Create wireframes and assets that follow specifications and illustrate detailed designs
2. Create wireflows that fully detail functionality and information architecture
3. Research and apply relevant conventions and patterns to design and substantiate with evidence from the field

Rubric

Criteria	HD	D	C	P	F
Create wireframes and assets that follow specifications and illustrate detailed designs (25%)	The realisation of wireframes and assets are fully resolved in their detail and perfectly reflect the specifications.	The realisation of wireframes and assets are well resolved in detail and reflect the specifications.	The realisation of wireframes and assets are somewhat resolved. Some more detail would illustrate designs with clarity and better attention to specifications is needed.	The realisation of wireframes and assets are adequate. The wireframes lacked the details to illustrate designs with clarity. A number of specifications needed to be followed.	The wireframes and assets fail to detail designs and do not meet specifications.
Create wireflows that fully detail functionality and information architecture (25%)	Wireflows illustrate functionality, user flows and information architecture in perfect to outstanding detail.	Wireflows illustrate functionality, user flows and information architecture in great detail.	Wireflows illustrate functionality, user flows and information architecture in effective detail.	Wireflows illustrate functionality, user flows and information architecture with some detail.	Wireflows do not illustrate functionality, user flows and information architecture in any detail.
Research, analyse and apply relevant conventions and patterns to design and substantiate with evidence from the field (50%)	The submission rigorously analyses and applies the relevant conventions and patterns to designs. Designs and discussion are evidenced by exemplary research.	The submission thoughtfully analyses and applies the relevant conventions and patterns to designs. Designs and discussion are evidenced by a variety of research.	The submission analyses and applies relevant conventions and patterns to designs. Designs and discussion are evidenced by some good research.	The submission analyses and applies some relevant conventions and patterns to designs. Designs and discussion are evidenced by research.	The submission does not analyse or apply relevant conventions and patterns to designs. Designs and discussion do not reference research.

Assessment Task 2

HTML Website

This project focuses on using HTML to create the foundation of your working website. It requires you to markup the client’s content into a semantic HTML website. While much of your analysis for the Research & Design project focused on the visual attributes of websites (colour, layout, sizing, etc.), semantic HTML is concerned with using HTML tags to describe the meaning of the content. The challenge in creating semantic HTML pages is to largely ignore what your pages look like (colours, fonts, sizing, layout etc.) and focus on applying HTML tags that accurately describe the content (ie. paragraph, heading, image, caption, nav, list, etc.). 

Using the client’s content, create HTML pages structured according to your Design submission. Research and apply HTML tags that describe the type of content being displayed on each page. Ensure you include all of the content - don’t leave anything out. Include links to allow navigation between pages and/or sections of pages, as well as links to external sites and resources. Use best practices for naming and organising your files for web.

Your functioning HTML website must feature the mandatory pages discussed in the full brief on Wattle. In addition, your HTML site must address the following requirements:

• Full content (full texts, all images and video, all image/video details etc.)
• Semantic html that accurately and accessibly describes your content.
• Error free code with generous comments demonstrating deep understanding.
• HTML is accessible.
• Functional navigation, and links to sites/resources.
• Files named and organised following web best practices.
• HTML only - no CSS or styling of any kind.

Submission: Submit your website including all HTML, images and associated files following the procedures outlined on the full brief on Wattle.

Note: You cannot use any machine-generated or third party code. You must personally author all of your code. Inclusion of machine-generated or copied code will result in a fail for the project. Any images featured in your design (ie. logos, backgrounds, textures, patterns) must be your own original work.

Failure to include all of the required content will result in a penalty for the project. I.e. If only 60% of the content is included, your project grade will be scaled by 60%.

Assessment Criteria:

1. The code is error free and valid. Code application and comments demonstrate understanding of semantic html and CSS.
2. Pages are technically resolved to satisfy navigation and accessibility and web standards.
3. The site conforms best practices in file organisation.

Rubric

Criteria	HD	D	C	P	F
The code is error free and valid. Code application and comments demonstrate understanding of semantic html and CSS (40%)	Perfect to outstanding selection of code, fastidiously organised and expertly applied.	Demonstratees excellent understanding of web coding.	Demonstrates sound understanding of web coding.	Demonstrates adequate understanding of web code.	Inadequate understanding of web coding.
Pages are technically resolved to satisfy navigation requirements, accessibility and web standards (40%)	Navigation is seamless and site delivers exemplary web standards and accessibility.	Navigation is functioning excellently and thoughtful consideration and application of web standards and accessibility are reflected.	Navigation functions well and a good amount of accessibility and web standards have been considered and applied.	Navigation is functional and some accessibility and web standards have been applied.	Navigation malfunctions and accessibility and web standards have not been applied.
The site conforms best practices in organisation (20%)	The site is meticulously organised to best practices.	The site is well organised to best practices.	The site is organised to best practices.	The site applies best practices in its organisation with some inaccuracies.	The site fails to apply best practices in its organisation.

Assessment Task 3

Final Website

This project focuses on researching and applying CSS to visually render your website as proposed in your Design submission. Create a single CSS file to style all of the pages in your website. Use the different tags in your HTML pages as the basis of your CSS stylings. Add classes, ids and structural HTML elements to your pages as required. Test and evaluate your work as you go. Where necessary, revise your final site based on your understanding of HTML and CSS, noting any variations in the rationale cover sheet. Your website must feature all the pages listed in the brief on wattle and may require additional page/s of your choosing. 

 

In addition to featuring all the content listed in the brief on Wattle, your final site must address the following requirements:

• Full content (text, images, video, details etc.)
• Semantic html that accurately and accessibly describes your content.
• Responsive designs optimised for viewing at target mobile and desktop sizes.
• Aesthetically attuned to the content and audience.
• Functional navigation and behaviour.
• Error free code with generous comments demonstrating deep understanding.
• Files named and organised following web best practices.

 

Submission: Submit your website as a single zipped folder containing all HTML, CSS, images and associated files via Wattle. Include a succinct rationale outlining the design features of your site and if/how you have adapted your design from the Design submission.

 

Note: You cannot use any machine-generated or third party code. You must personally author all of your code. Inclusion of machine-generated or copied code will result in a fail for the project. Any images featured in your design (ie. logos, backgrounds, textures, patterns) must be your own original work.

 Failure to include all of the required content will result in a penalty for the project. I.e. If only 60% of the content is included, your project grade will be scaled by 60%.

 

Assessment Criteria:

1. The code is error free and valid. Code application and comments demonstrate understanding of semantic html and responsive css
2. Site is technically and aesthetically resolved to create an engaging and satisfying user experience
3. The site creatively adapts web technologies to produce a distinctive solution appropriate to the client’s content and audience

Rubric

Criteria	HD	D	C	P	F
The code is error free and valid. Code application and comments demonstrate understanding of semantic html and responsive css (33.3%)	Perfect to outstanding selection of code, fastidiously organised and expertly applied.	Demonstrates effective application of accessible responsive web code.	Demonstrates sound understanding of web coding.	Demonstrates adequate understanding of web code.	Inadequately resolved or fails to meet requirements.
Site is technically and aesthetically resolved to create an engaging and satisfying user experience (33.3%)	Site is resolved to perfection or outstanding as an innovative professional piece.	Adeptly resolved as a convincing working website.	Effectively resolved as an authentic website.	Adequately resolved as a feasible working website.	Inadequately resolved or fails to meet requirements.
The site creatively adapts web technologies to produce a distinctive solution appropriate to the client’s content and audience (33.3%)	Design is perfectly or outstandingly attuned to its content and audience.	Adeptly resolved as a convincing working website.	Effectively resolved as an authentic website.	Adequately resolved as a feasible working website.	Inadequately resolved or fails to meet requirements.

Academic Integrity

Academic integrity is a core part of the ANU culture as a community of scholars. At its heart, academic integrity is about behaving ethically, committing to honest and responsible scholarly practice and upholding these values with respect and fairness.

The ANU commits to assisting all members of our community to understand how to engage in academic work in ways that are consistent with, and actively support academic integrity. The ANU expects staff and students to be familiar with the academic integrity principle and Academic Misconduct Rule, uphold high standards of academic integrity and act ethically and honestly, to ensure the quality and value of the qualification that you will graduate with.

The Academic Misconduct Rule is in place to promote academic integrity and manage academic misconduct. Very minor breaches of the academic integrity principle may result in a reduction of marks of up to 10% of the total marks available for the assessment. The ANU offers a number of online and in person services to assist students with their assignments, examinations, and other learning activities. Visit the Academic Skills website for more information about academic integrity, your responsibilities and for assistance with your assignments, writing skills and study.

Online Submission

You will be required to electronically sign a declaration as part of the submission of your assignment. Please keep a copy of the assignment for your records. Unless an exemption has been approved by the Associate Dean (Education) submission must be through Turnitin.

Hardcopy Submission

For some forms of assessment (hand written assignments, art works, laboratory notes, etc.) hard copy submission is appropriate when approved by the Associate Dean (Education). Hard copy submissions must utilise the Assignment Cover Sheet. Please keep a copy of tasks completed for your records.

Late Submission

Individual assessment tasks may or may not allow for late submission. Policy regarding late submission is detailed below:

• Late submission not permitted. If submission of assessment tasks without an extension after the due date is not permitted, a mark of 0 will be awarded.
• Late submission permitted. Late submission of assessment tasks without an extension are penalised at the rate of 5% of the possible marks available per working day or part thereof. Late submission of assessment tasks is not accepted after 10 working days after the due date, or on or after the date specified in the course outline for the return of the assessment item. Late submission is not accepted for take-home examinations.

Referencing Requirements

Accepted academic practice for referencing sources that you use in presentations can be found via the links on the Wattle site, under the file named “ANU and College Policies, Program Information, Student Support Services and Assessment”. Alternatively, you can seek help through the Students Learning Development website.

Extensions and Penalties

Extensions and late submission of assessment pieces are covered by the Student Assessment (Coursework) Policy and Procedure. Extensions may be granted for assessment pieces that are not examinations or take-home examinations. If you need an extension, you must request an extension in writing on or before the due date. If you have documented and appropriate medical evidence that demonstrates you were not able to request an extension on or before the due date, you may be able to request it after the due date.

Privacy Notice

The ANU has made a number of third party, online, databases available for students to use. Use of each online database is conditional on student end users first agreeing to the database licensor’s terms of service and/or privacy policy. Students should read these carefully. In some cases student end users will be required to register an account with the database licensor and submit personal information, including their: first name; last name; ANU email address; and other information.
In cases where student end users are asked to submit ‘content’ to a database, such as an assignment or short answers, the database licensor may only use the student’s ‘content’ in accordance with the terms of service – including any (copyright) licence the student grants to the database licensor. Any personal information or content a student submits may be stored by the licensor, potentially offshore, and will be used to process the database service in accordance with the licensors terms of service and/or privacy policy.
If any student chooses not to agree to the database licensor’s terms of service or privacy policy, the student will not be able to access and use the database. In these circumstances students should contact their lecturer to enquire about alternative arrangements that are available.

Distribution of grades policy

Academic Quality Assurance Committee monitors the performance of students, including attrition, further study and employment rates and grade distribution, and College reports on quality assurance processes for assessment activities, including alignment with national and international disciplinary and interdisciplinary standards, as well as qualification type learning outcomes.

Since first semester 1994, ANU uses a grading scale for all courses. This grading scale is used by all academic areas of the University.

Support for students

The University offers students support through several different services. You may contact the services listed below directly or seek advice from your Course Convener, Student Administrators, or your College and Course representatives (if applicable).

• ANU Health, safety & wellbeing for medical services, counselling, mental health and spiritual support
• ANU Diversity and inclusion for students with a disability or ongoing or chronic illness
• ANU Dean of Students for confidential, impartial advice and help to resolve problems between students and the academic or administrative areas of the University
• ANU Academic Skills and Learning Centre supports you make your own decisions about how you learn and manage your workload.
• ANU Counselling Centre promotes, supports and enhances mental health and wellbeing within the University student community.
• ANUSA supports and represents undergraduate and ANU College students
• PARSA supports and represents postgraduate and research students