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: Developing Understandings Through Histories of the Web Activities: Examining the brief: client, content, contexts. Getting started on the website audit and low-fidelity prototyping.
2	Lecture: Access to Information Activities: Website Anatomy. Different approaches to structuring content and pages. Exploring information architecture with wireframes and wireflows.
3	Lecture: Creative Practices on the Web Activities: Developing high fidelity designs.
4	Lecture: Designing for Context Activities: Hello HTML. Identifying, adapting and applying typographic and visual design conventions. The one page website.
5	Lecture: Dipping our toe in a cascading style sheet (CSS) Activities: Getting started with semantic HTML. Pre-submission crit and feedback
6	Lecture: Artificial Intelligence on the Web Activities: From content dumping to structured HTML pages. Tools for checking and validating.	Monday - submit Research & Design project
7	Lecture: Affordances in Front End Web Activities: HTML crit and feedback. Tools for checking and validating.
8	Lecture: Online Economies Activities: Getting started with CSS.	Monday - submit HTML Website
9	Lecture: Industry Case Study Activities: CSS for mobile-first web design.
10	Lecture: Industry Case Study Activities: Adapting to desktop.
11	Lecture: Industry Case Study Activities: Animation, transition and behaviour. 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 Wattle before semester commences.

Assessment Summary

Assessment task	Value	Due Date	Return of assessment	Learning Outcomes
Research & Design	40 %	30/08/2021	13/09/2021	1, 2, 3, 4
HTML Website	20 %	27/09/2021	11/10/2021	1, 2, 3
Final Website	40 %	08/11/2021	02/12/2021	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 delivered online.

Assessment Task 1

Research & Design

Website overview

A professional website is an essential tool for people and organisations to get public exposure and to communicate with prospective and existing clients, patrons and stake holders as well as the media. 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 project 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: Develop a set of webpage designs 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 mandatory pages. Prepare for mobile and desktop resolutions.  

Wireflows: Wireflows are sets of wireframes illustrating a user journey through a site. The wireflows are your chance to test the logic of your site’s information architecture and address gaps or issues. Using Adobe XD or another equivalent platform, prepare wireflows detailing the two different user journeys that include 4 to 5 pages. See the brief on Wattle for examples. Prepare boards for the user journeys in mobile and desktop sizes. Use the supplied content and extend the height of the wireframes to accommodate for the content. See wattle for wireflow examples. 

Report: Prepare a report featuring the following:

1. Screenshots of your selected websites (4 minimum) at mobile and desktop widths. Label all of the key elements, conventions and patterns you have identified.
2. Screenshots of your designs at mobile and desktop widths. Label all of the key elements, conventions and patterns you have implemented. 
3. 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. Your submission must feature all of the required content as listed in the full brief posted on Wattle.

Assessment Criteria:

1. Creatively apply front-end web concepts and practices to your designs.

2. Creatively respond to the content and needs of a specific client.

3. Apply research of design artefacts and processes to your designs.

4. Use research and rationale to support your design decisions.

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 as a single zipped folder 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. Creatively apply front-end web concepts, practices and technologies to your designs.

2. Creatively respond to the content and needs of a specific client.

3. Apply research of design artefacts and processes to your designs.

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 of 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%.

Marking will address:

1. Creatively apply front-end web concepts, practices and technologies to your designs.

2. Creatively respond to the content and needs of a specific client.

3. Apply research of design artefacts and processes to your designs.

4. Use research and rationale to support your design decisions.

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