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. Expertly apply and adapt front-end web concepts, technologies and practices.
2. Define technical and cultural constraints of a specific context and develop innovative solutions.
3. Conduct research into design artefacts and processes, and expertly apply findings to creative production.
4. Demonstrate understanding of design as a critical research practice and substantiate process and outcomes.

 

Recommended Resources

Resources will be made available via the course Wattle site and in weekly classes.

Staff Feedback

Students will be provided with verbal feedback in the weekly classes. Verbal and written feedback will be provided for all assessment items.

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). Feedback can also be provided to Course Conveners and teachers via the Student Experience of Learning & Teaching (SELT) feedback program. SELT surveys are confidential and also provide the Colleges and ANU Executive with opportunities to recognise excellent teaching, and opportunities for improvement.

Other Information

Referencing requirements: You may use your preferred referencing style (Harvard, APA, AMA, etc.) but ensure it is consistently and rigorously applied.

Class Schedule

Week/Session	Summary of Activities	Assessment
1	Lecture: Introduction to Front End Web DesignActivities: 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 FlowsActivities: Website audit Feedback Sessions. Applying semantic HTML
5	Lecture: Creative Practices on the WebActivities: Wireframe Feedback Sessions.
6	Lecture: Static Site Generators Activities: From content dumping to structured HTML pages. Tools for checking and validating.	Assessment 1
7	Lecture: HTML SprintActivities: User experience, accessibility and the web	Assessment 2
8	Lecture: An Introduction to CSSActivities: Getting started with CSS
9	Lecture: The Dark Arts of CSSActivities: CSS for mobile-first web design.
10	Lecture: Data and Multimedia in Front End Web Design Activities: Adapting to desktop.
11	Lecture: Democracy & the WebActivities: 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	Learning Outcomes
Research Report & Design Development	40 %	1, 2, 3, 4
HTML Website Sprint	10 %	1
Final Website	40 %	1, 2, 3, 4
Final Website Rationale	10 %	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 Integrity Rule before the commencement of their course. Other key policies and guidelines include:

• Academic Integrity Policy and Procedure
• Student Assessment (Coursework) Policy and Procedure
• Extenuating Circumstances Application
• Student Surveys and Evaluations
• Deferred Examinations
• Student Complaint Resolution Policy and Procedure
• Code of practice for teaching and learning

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 Skills website. 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 Report

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 project's 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 these websites 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 your own 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:

Wireflows detailing the two different user journeys mobile and desktop sizes using supplied content. See the brief on Wattle for examples.

Research Report Proposed Design Rationale

Your report should finish with a concluding section that details your proposed design rationale. You should use screenshots of your selected websites at mobile and desktop widths to highlight the key elements, conventions and patterns you will be informed by. You should evidence this by using screenshots of your designs at mobile and desktop widths with all of the key elements, conventions and patterns you have implemented labelled. This is a written explanation of your design decisions. Substantiate your design choices with evidence from your research, relevant resources and analysis of the project brief.

Submissions must include:

1. Wireflows for your design at mobile and desktop widths
2. Wireframes for your design at mobile and desktop widths
3. Report - 2000 word maximum. Cite all references using Chicago 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 (LO, 1, 2)
2. Create wireflows that fully detail functionality and information architecture (LO 1, 2)
3. Research and apply relevant conventions and patterns to design and substantiate with evidence from the field (LO 3, 4)

Rubric

Criteria	HD	D	C	P	F
Create wireframes and assets that follow specifications and illustrate detailed designs (25% LO 1, 2)	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% LO 1, 2)	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% LO 3, 4)	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 Sprint

This project focuses on using HTML to create the foundation a working website in a design sprint context. Design sprints are events that facilitate the development of work in an short amount of time. The idea is to devote focused attention on achieving the goals associated with development towards a project. Often development includes adapting and incorporating new methodologies outside a designer's skill-set.

The HTML Website Sprint requires you to markup a client’s content into a semantic HTML website. Content will be released on Wattle at the beginning of the sprint. 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 a structured HTML website. Research and apply HTML tags that describe the type of content being displayed. Ensure you include all of the content - don’t leave anything out. Include links to allow navigation, 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 content featured in the brief. 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 submission page 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.

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. (LO 1)
2. Pages are technically resolved to satisfy navigation and accessibility and web standards. (LO 1)
3. The site conforms best practices in file organisation. (LO 1)

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% LO 1)	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% LO 1)	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% LO 1)	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. Your website must feature all the pages listed in the brief. 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.

 

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.

 

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 (LO 1)
2. Site is technically and aesthetically resolved to create an engaging and satisfying user experience (LO 2, 3)
3. The site creatively adapts web technologies to produce a distinctive solution appropriate to the client’s content and audience (LO 2)
4. Create a website that follows specifications and illustrate detailed designs (LO 2, 3)

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 (25% LO 1)	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 (25% LO 2, 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 (25% LO 2)	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.
Create a website that follows specifications and illustrate detailed designs (25% LO 2, 3)	The realisation of the website is fully resolved in their detail and perfectly reflect the specifications.	?The realisation of the website is well resolved in detail and reflect the specifications.	The realisation of the website is somewhat resolved. Some more detail would illustrate designs with clarity and better attention to specifications is needed.?	The realisation of the website is adequate. The designs lacked the details to illustrate designs with clarity. A number of specifications needed to be followed.	The website fails to evidence detailed designs and do not meet specifications.

Assessment Task 4

Final Website Rationale

This document revisits your Research Report findings and presents the design of the final website. It provides an updated and succinct rationale outlining the design features of your site, noting any variations. The document should discuss how your design has evolved since your original report, what contributed to these changes and how you resolved any challenges that were met along the way. The writing should be accompanied by annotated screenshots to illustrate these comparisons and it should use case studies from research either from your original report or additional case studies you have found since this initial research.

1000 word maximum.

Cite all references using Chicago citation style.

Assessment Criteria:

1. Create a website that follow specifications and illustrate and detailed designs (LO 2, 3)
2. Research and apply relevant conventions and patterns to design and substantiate with evidence from the field (LO 2, 4)

Rubric

Criteria	HD	D	C	P	F
Create a website that follows specifications and illustrate detailed designs (25% LO 2, 3)	The realisation of the website is fully resolved in their detail and perfectly reflect the specifications.	The realisation of the website is well resolved in detail and reflect the specifications.	The realisation of the website is somewhat resolved. Some more detail would illustrate designs with clarity and better attention to specifications is needed.	The realisation of the website is adequate. The wireframes lacked the details to illustrate designs with clarity. A number of specifications needed to be followed.	The website fails to evidence detailed designs and do not meet specifications.
Research, analyse and apply relevant conventions and patterns to design and substantiate with evidence from the field (50% LO 2, 4)	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.

Academic Integrity

Academic integrity is a core part of the ANU culture as a community of scholars. The University’s students are an integral part of that community. The academic integrity principle commits all students to engage in academic work in ways that are consistent with, and actively support, academic integrity, and to uphold this commitment by behaving honestly, responsibly and ethically, and with respect and fairness, in scholarly practice.

The University expects all staff and students to be familiar with the academic integrity principle, the Academic Integrity Rule 2021, the Policy: Student Academic Integrity and Procedure: Student Academic Integrity, and to uphold high standards of academic integrity to ensure the quality and value of our qualifications.

The Academic Integrity Rule 2021 is a legal document that the University uses to promote academic integrity, and manage breaches of the academic integrity principle. The Policy and Procedure support the Rule by outlining overarching principles, responsibilities and processes. The Academic Integrity Rule 2021 commences on 1 December 2021 and applies to courses commencing on or after that date, as well as to research conduct occurring on or after that date. Prior to this, the Academic Misconduct Rule 2015 applies.

 

The University commits to assisting all students to understand how to engage in academic work in ways that are consistent with, and actively support academic integrity. All coursework students must complete the online Academic Integrity Module (Epigeum), and Higher Degree Research (HDR) students are required to complete research integrity training. The Academic Integrity website provides information about services available to assist students with their assignments, examinations and other learning activities, as well as understanding and upholding academic integrity.

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

Assignments are presented in class. Physical works are submitted in class and digital works submitted via the course Wattle site.

Late Submission

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

The Academic Skills website has information to assist you with your writing and assessments. The website includes information about Academic Integrity including referencing requirements for different disciplines. There is also information on Plagiarism and different ways to use source material.

Returning Assignments

Students are responsible for the collection of their works. Collection times will be published on the course Wattle site.

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 Access 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 all ANU students