Introduction to Web Design (DECO7140)

Course overview

This course introduces the student to User Experience Design (UX), User Interface Design (UI) and Frontend Development (FED) focusing on websites. Modern design and development practices for the web are taught framed by an introduction to human-centred designapproaches, Usability Principles for User Interface Design, and web accessibility based on the current W3C Web Content Accessibility Guidelines (WCAG). Today's websites need to be both well designed and dynamic, so the course also introduces some basic JavaScript for going beyond static content. The course also introduces students to the process of deploying a website to a web server. As the using the web is becoming essential for people to meet their fundamental needs, social, cultural, colonial, ethical and cybersecurity issues must also be considered when designing websites. The focus of learning is activity-based and incorporates both individual exercises and collaborative activities.

There are currently around 400 million active websites on the internet (source: Web Tribunal, 6 March 2023).ﾠOn average in the US, internet users visit over 100 web pages each day (source: Web Tribunal, 6 March 2023). Many services that meet people’s essential needs are now mostly accessed through websites such as accessing social security, banking, and health information.ﾠOutside of these services, websites are also used in commerce, providing essential information (as we saw often during the pandemic), providing opportunities for people to connect, and so much more.

Using the web has very much become embedded in people’s everyday lives.ﾠThis means that websites must:

• Meet people’s needs and what they value: These needs and values are not only in terms of achieving a goal (like selling a pair of shoes or paying an electricity bill) but also that people’s more fundamental psychological needs are supported (not being able to book a doctor’s appointment through a website may make someone feel less capable than others and consequently less a part of their community).ﾠUser Experience Design (UX) focuses on this aspect of web design and development using different methods to identify people’s needs and creating design considerations that aim to support those needs.
• Be usable: People must be able to interact effectively and efficiently with the site to achieve their desired goals and be satisfied with the outcome.ﾠOur world is made up of a diverse range of people with an equally diverse range of life experiences and abilities.ﾠThis means that what is usable for one person may not be usable for another.ﾠTherefore websites must also be accessible.ﾠUser Interface Design (UI) focuses on creating user interfaces that are usable and accessible but also support a positive experience as people interact with the website.
• Be functional.ﾠWhen people open a website anything that they see, click on, or use is produced by code and ‘served’ by a web server.ﾠFrontend Development (FED) involves using code, such as HTML, CSS and JavaScript, to create the website so that it can be ‘served’ by a web server and viewed by a person.ﾠFrontend Developers develop the code, test the code and then deploy the code to the web server so they also have skills in working with web servers.

As can be seen from the above, a wide range of skills are needed to design, develop and deploy dynamic websites.ﾠ In many situations, this complexity requires people to work in collaborative teams where having an understanding of all of the specific roles and functions across the team ensures that people can work together effectively.

In this course we will focus on the components of ‘client-side’ of a web design and development – that part of the website that the person interacts with.ﾠTo do this the course covers:

• An introduction to User Experience Design (UX) including theory and methods.
• An introduction to User Interface Design (UI) for websites including theory, such as accessibility, and tools.
• Frontend Development (FED) for websites using HTML, CSS, and jQuery/JavaScript, and including the processes and tools for deployment to a web server.
• Introduction to social, cultural, colonial, ethical and cybersecurity issues of website design and development.

This course has a focus on activity-based learning. The lectures provide details of relevant theory and concepts with some stimulus about the application of those theories and concepts. The tutorials and practicals provide guided activities that involve discussion and collaboration with peers to enhance understanding as well as to support development of collaboration and communication skills.ﾠThere is a range of individual assessment that will develop skills across UX, UI and FED as well as an understanding of social, cultural, colonial, ethical and cybersecurity issues of website design and development.ﾠSome assessment is also focused on developing collaboration skills with online systems that are designed to be similar to the online forums and systems that are often used in UX, UI and FED.

How will I use these skills in the future?ﾠBy acquiring these skills, students will have a foundation for future careers in web design, user experience (UX) design, user interface (UI) design, front-end development, and related fields. They will have the tools and knowledge to create human-centred, visually appealing, acceptable, and accessible digital experiences while adhering to best practices and industry standards.

Course requirements

Assumed background

DECO7140 is an introductory level course. Students entering this course are assumed to have no background in web design or developing webpages, but are assumed to have a basic level of competency in using desktop-based software like text editors, web browsers etc.

Incompatible

You can't enrol in this course if you've already completed the following:

DECO1400 or IENV7961 or MMDS1400 or MMDS7961

Course contact

Course staff

Timetable

The timetable for this course is available on the UQ Public Timetable.

Aims and outcomes

This course will:

• Introduce students to User Experience Design based in human-centred principles including theory and methods.
• Introduce students to User Interface Design for websites including theory and tools.
• Introduce students to Frontend Development for websites (HTML, CSS, JavaScript) based on the W3C Web Standards Model for a good practice approach.
• Introduce students to accessibility, usability, social, cultural, colonial, ethical and cybersecurity issues of website design and development.

Learning outcomes

After successfully completing this course you should be able to:

Assessment

Assessment summary

A hurdle is an assessment requirement that must be satisfied in order to receive a specific grade for the course. Check the assessment details for more information about hurdle requirements.

Assessment details

Ethical Reasoning in Web Design

Mode

Written

Category

Paper/ Report/ Annotation

Weight

1

Due date

19/08/2024 2:00 pm

Learning outcomes

L01, L02, L04, L07, L08

Task description

Submission guidelines

Submission will be through a Turnitin link available in Blackboard Ultra in the Assessment information. More information about how to submit will be available in the brief for this assessment item (via the course Blackboard site).

Deferral or extension

You may be able to apply for an extension.

The maximum extension allowed is 7 days. Extensions are given in multiples of 24 hours.

This course uses a progressive assessment approach, where assessments involve planned release of feedback. Marked submissions with feedback and/or detailed solutions with feedback will be released to students within 14-21 days, where the earlier time frame applies if no extensions.

Late submission

A penalty of 1 grade for each 24 hour period from time submission is due will apply for up to 7 days. After 7 days you will receive a mark of 0.

Accessibility Audit

Mode

Written

Category

Paper/ Report/ Annotation

Weight

1

Due date

2/09/2024 2:00 pm

Learning outcomes

L02, L03, L04, L05, L06, L08

Task description

Submission guidelines

Submission will be through a Turnitin link available in Blackboard Ultra in the Assessment information. More information about how to submit will be available in the brief for this assessment item (via the course Blackboard site).

Deferral or extension

You may be able to apply for an extension.

The maximum extension allowed is 7 days. Extensions are given in multiples of 24 hours.

This course uses a progressive assessment approach, where assessments involve planned release of feedback. Marked submissions with feedback and/or detailed solutions with feedback will be released to students within 14-21 days, where the earlier time frame applies if no extensions.

Late submission

A penalty of 1 grade for each 24 hour period from time submission is due will apply for up to 7 days. After 7 days you will receive a mark of 0.

Website - Design Proposal

Mode

Written

Category

Paper/ Report/ Annotation

Weight

2

Due date

16/09/2024 2:00 pm

Learning outcomes

L01, L02, L04, L08

Task description

Submission guidelines

Submission will be through a Turnitin link available in Blackboard Ultra in the Assessment information. More information about how to submit will be available in the brief for this assessment item (via the course Blackboard site).

Deferral or extension

You may be able to apply for an extension.

The maximum extension allowed is 7 days. Extensions are given in multiples of 24 hours.

This course uses a progressive assessment approach, where assessments involve planned release of feedback. Marked submissions with feedback and/or detailed solutions with feedback will be released to students within 14-21 days, where the earlier time frame applies if no extensions.

Late submission

A penalty of 1 grade for each 24 hour period from time submission is due will apply for up to 7 days. After 7 days you will receive a mark of 0.

Website - Implementation

• Hurdle
• Identity Verified
• In-person

Mode

Activity/ Performance, Product/ Artefact/ Multimedia, Written

Category

Project

Weight

6

Due date

Code Review 1 30/09/2024 2:00 pm

Code Review 2 21/10/2024 2:00 pm

Website Code 4/11/2024 2:00 pm

Design Rationale 4/11/2024 2:00 pm

Code Review 1 and 2

Code Reviews will take place during your allocated Studio.

Learning outcomes

L02, L03, L04, L05, L06, L08

Task description

Hurdle requirements

Submission guidelines

Code Review 1 and 2

Code reviews are Identity Verified Assessment and therefore require in-person attendance during your allocated studio.

Website Code

Website code must be submitted by both of the following methods:

1. Uploading your code to your allocated UQCloud zone, and
2. Submitting your zipped code to Blackboard.

Design Rationale

Submission will be through a Turnitin link available in Blackboard Ultra in the Assessment information.

More information about submitting these assessment items

More detailed information about how to submit these three assessment items (including in-person attendance for Code Review 1 and 2) will be available in the brief for this assessment item (via the course Blackboard site).

Deferral or extension

You may be able to apply for an extension.

The maximum extension allowed is 7 days. Extensions are given in multiples of 24 hours.

Marked submissions with feedback and/or detailed solutions with feedback will be released to students within 14-21 days, where the earlier time frame applies if no extensions.

Late submission

A penalty of 1 grade for each 24 hour period from time submission is due will apply for up to 7 days. After 7 days you will receive a mark of 0.

Course grading

Full criteria for each grade is available in the Assessment Procedure.

Additional course grading information

Qualitative Grading

Grades for assessment during the semester will identify your work as being of a particular standard from the list above.

These grades map directly to the standard UQ Grade descriptors (from https://policies.uq.edu.au/document/view-current.php?id=184 Part H). It is recommended that you read the descriptors and example criteria that are associated with each of the UQ grade standards. Note, that percentages or numerical marks are not required in grading assessment or for calculatingﾠgrade cutoffs. Percentage cutoffsﾠare primarily employed in courses that utilise quantitative (numerical based) methods for marking.ﾠ

The final grade for the course will be initially constructed from the individual grades according to assessment weightings. It will then be reviewed & moderated based on overall performance across the course.

Calculation of final grades for course

Final grades will be calculated as a weighted average of a student’s assessment grades, using the same formula as used for calculating a student’s GPA (https://my.uq.edu.au/information-and-services/manage-my-program/exams-and-assessment/final-grades-and-gpas). In this case, U equals the weighting for that particular assessment item; and G equal to the grade for the assessment item.

Example 1:

If a student receives the following grades:

1. Ethical Reasoning in Web Design: Grade of 4 at weighting of 1
2. Accessibility Audit: Grade of 5 at weighting of 1
3. Website - Design Proposal : Grade of 6 at weighting of 2
4. Website - Implementation: Grade of 5 at weighting of 6

The final grade will be calculated as:

(4x1)+(5x1)+(6x2)+(5x6) / (1+1+2+6)

= 51/10

= 5.1

Grade = Credit (5)

Example 2:

If a student receives the following grades:

1. Ethical Reasoning in Web Design: Grade of 7 at weighting of 1
2. Accessibility Audit: Grade of 6 at weighting of 1
3. Website - Design Proposal: Grade of 7 at weighting of 2
4. Website - Implementation: Grade of 7 at weighting of 6

The final grade will be calculated as:

(7x1)+(6x1)+(7x2)+(7x6) / (1+1+2+6)

= 69/10

= 6.9

Grade = High Distinction (7)

Calculation of grades for individual assessment items

The weighted average approach will also be taken for determining the grade for each assessment item taking into account the grade and weighting for each criteria item.

Identity Verification and Pass hurdle - Course as a whole

Within the website - implementation assessment item there are 3 assessment items that students must pass to pass the course as a whole:

1. Code Review 1 (note: this assessment item is both an identity verification and assessment integrity hurdle)
2. Code Review 2: (note: this assessment item is both an identity verification and assessment integrity hurdle)
3. Website - Implementation (overall grade)

Failure to meet any of these requirements will result in the final grade being capped at Marginal Fail (3), regardless of performance in other assessment items.

Supplementary assessment

Supplementary assessment is available for this course.

Additional assessment information

Use of Generative AI and/or Machine Translation (MT) Tools in Assessment

Key points

The assessment in this course is designed to be complex, challenging, and authentic. 

• Artificial Intelligence (AI) and Machine Translation (MT) are emerging tools that may support students in completing this assessment task. Students may appropriately use generative AI and/or MT in completing the assessment tasks in this course.
• Students must clearly reference/acknowledge any use of generative AI or MT in each instance.

Please note: What is appropriate use will vary between each assessment item. More detail about this is provided below.

Rationale

This course is aimed at introducing students to fundamental concepts in User Experience Design, User Interface Design, and Frontend Development. In the field of web design, creativity plays a pivotal role as designers and developers strive to create visually appealing designs, user-friendlyﾠinterfaces, seamless interaction flows, and functional websites that align with the desired user experience.

In addition to the focus on fundamental concepts and creativity, this course also highlights the ethical responsibilities of web designers and developers. As creators of digital experiences, it is crucial to approach design and development with a strong ethical framework that prioritizes people's basic needs and values, inclusivity, and respect for diversity. Ethical considerations encompass both avoiding manipulative practices that exploit users and ensuring that web experiences are accessible and inclusive to all individuals. Designers and developers should be mindful of not employing dark patterns or deceptive techniques that may manipulate user behaviour or compromise their privacy.

Furthermore, web designers and developers have a responsibility to address the diverse needs of people, including those with different abilities, cultural backgrounds, and life experiences. This involves creating interfaces that are accessible to individuals with disabilities, designing content that is culturally sensitive and inclusive, and considering the diverse perspectives and needs of people throughout the design process.

While generative AI and MT tools have made significant advancements, relying solely on them may fall short of capturing the full scope of creative problem-solving and nuanced decision-making required in web design. The assessments in this course have been carefully designed to ensure that students not only remember and understand these essential concepts but also have the opportunity to apply them in practical scenarios. By engaging in hands-on exercises and projects, students will develop the critical thinking and creative skills necessary to craft compelling web experiences that meet people's needs and expectations.

Additionally, it is important to acknowledge that the effective utilization of generative AI and/or MT in web design necessitates students to possess a strong understanding of how these technologies function and the requisite background knowledge to critically evaluate their outputs. While generative AI and/or MT can offer innovative possibilities, it is crucial to approach its implementation with a discerning eye. Students must develop the skills to assess and scrutinize the outputs generated by AI/MT technologies to ensure they align with ethical and human-centredﾠdesign principles. This requires students to have a good understanding of the underlying algorithms, their limitations, biases, and potential ethical implications. By possessing this foundational knowledge, students can make informed decisions and exercise critical judgment when incorporating generative AI and/or MT into their web design processes.

It is essential to recognise that the primary objectives of this course and the assessment that you will complete is for you to demonstrate your achievement of the learning objectives outlined in the Aims and Outcomes section above, as well as UQ’s Graduate Attributes as are relevant to this course. Generative AI and ML technologies can be used to facilitate or enhance your understanding of the core concepts and principles taught in this course, but generative AI/MT tools must not be used in a way that replaces or diminishes your understanding and ability to critically apply those concepts and principles.

Ultimately, by coupling a solid understanding of generative AI and/or MT with critical evaluation skills based on a deep understanding of these fundamental concepts and principles, students can harness the power of AI/MT in a responsible and meaningful manner, augmenting their web design capabilities while upholding ethical considerations and user needs.

Appropriate use varies between each assessment item

The brief for each assessment item (available in Blackboard) will detail the boundaries of how you may use and not use generative AI and/or Machine Translation as well as the requirements for referencing and/or acknowledging any use of generative AI technologies. The brief for each assessment item (available in Blackboard) will detail the boundaries of how you may use and not use generative AI and/or Machine Translation as well as the requirements for referencing and/or acknowledging any use of generative AI technologies. You must ensure that you read and understand this information in the brief for each assessment item.

In all cases, inappropriate use means that students must NOT use generative AI/MT tools to:

Replace Creative Thought and Application: Utilise generative AI/MT tools to generate content that replaces their own creative process and application of web design concepts.

Automate Understanding: Rely on generative AI/MT tools to create or produce any content that requires you to understand and apply web design concepts, including coding in HTML, CSS, and JavaScript.

Obscure Decision-making: Use generative AI/MT tools in a manner that hides or obscures the rationale, decisions, and application of web design theories, principles, coding practices, and ethical considerations.

Violate Ethical Guidelines: Employ generative AI/MT tools in a way that contradicts the ethical, social, cultural, and cybersecurity guidelines of the course.

Referencing/Acknowledging use of AI and/or MT

For each assessment item, you are required to include information about your use or non-use of generative AI and/or MT and include an appendix (or a link to the source) of material generated by AI/MT and any prompts used. The brief for each assessment will provide specific details about how to do this.

Failure to reference/acknowledge use of generative AI and/or MT constitutes student misconduct under the Student Code of Conduct.

Demonstrating remembering, understanding, and application of knowledge

Whilst you may use generative AI and/or MT, successful completion of assessment in this course requires you to demonstrate that you can remember, understand, and apply these concepts to the specific context of the assessment and effectively use the outputs of generative AI/MT tools. Work submitted that is substantially or entirely the product of generative AI, even when cited appropriately, may still be considered without academic merit, resulting in a failing grade. This is because the assessment criteria are designed to evaluate your own understanding, creativity, and abilities.

If there is reasonable suspicion that you have used generative AI and/or MT beyond the acceptable limits specified in the assessment brief, you will be required to attend an in-person interview. During this interview, you will be asked questions about your submission for the relevant assessment item. More information about this process can be found in the brief for each assessment item.

Having Troubles?

If you are having difficulties with any aspect of the course material, you should seek help. Speak to the course teaching staff.

If external circumstances are affecting your ability to work on the course, you should seek help as soon as possible. The University and UQ Union have organisations and staff who are able to help, for example, UQ Student Services are able to help with study and exam skills, tertiary learning skills, writing skills, financial assistance, personal issues, and disability services (among other things).

Complaints and criticisms should be directed in the first instance to the course coordinator. If you are not satisfied with the outcome, you may bring the matter to the attention of the School of EECS Director of Teaching and Learning.

Learning resources

You'll need the following resources to successfully complete the course. We've indicated below if you need a personal copy of the reading materials or your own item.

Library resources

Find the required and recommended resources for this course on the UQ Library website.

Additional learning resources information

All announcements, assessment briefs & learning resources (including Contact outlines, Lecture slides/videos etc) will be delivered via the course Blackboard site.

Students are expected to check their student email account and the course Blackboard site regularly, especially prior to their Contact. Many Contacts will require students to prepare materials for use during the Contact.

Website Deployment onto UQCloud

During this course, Students will be deploying their websites to the UQCloud service.ﾠ Specific guides will be provided to students during practicals.ﾠ However a comprehensive guide to working with UQCloud is available here:

https://stluc.manta.uqcloud.net/xlex/public/zones-guide.html

This guide contains more information that Students will need to complete work in this course and students will not be required to access this guide directly.ﾠ It is provided here as general information only.

Learning activities

The learning activities for this course are outlined below. Learn more about the learning outcomes that apply to this course.

Policies and procedures

University policies and procedures apply to all aspects of student life. As a UQ student, you must comply with University-wide and program-specific requirements, including the:

• Student Code of Conduct Policy
• Student Integrity and Misconduct Policy and Procedure
• Assessment Procedure
• Examinations Procedure
• Reasonable Adjustments - Students Policy and Procedure

Learn more about UQ policies on my.UQ and the Policy and Procedure Library.

School guidelines

Your school has additional guidelines you'll need to follow for this course:

• EECS School Guidelines for Students