ADT202

Assessment Task 2: Interface Concept Proposal

INTRODUCTION

Each assessment task for this unit builds upon each other to form. a resolved interactive design.

In this second assignment, you will leverage user interface (UI) design and user experience (UX) design considerations as you explore and critically analyse potential page layouts for your website, before translating them into low-fidelity wireframes, resolved high-fidelity wireframes (mockups), and interactive prototypes.

Students will be introduced to Figma, a powerful tool for designing web and app user interfaces, wireframes, and interactive prototypes to produce designs for a dynamic 4-page website.

SUBMISSION DETAILS

Timeline:

Weeks 4, 5, 6, 7

Due Dates:

Compulsory WIP Review: Assessed in class during Week 7

Final Submission: Friday December 20th, 2024 at 8pm

Weighting:

30%

Deliverables:

1x multi-page PDF document

WHAT YOU ARE REQUIRED TO DO

For this assignment you are required to develop resolved page designs and working prototypes for a 4-page website catering to both desktop and mobile devices.

1. Page layout exploration

Complete the following:

Research and document a minimum of 5 websites that make good use of grids as well as websites which break the rules.

Explore a minimum of 5 layout sketches per page (4 pages) for your website viewed on desktop (20 sketches total).

Explore a minimum of 3 layout sketches per page (4 pages) for your website viewed on mobile (12 total).

Demonstrate curiosity and a willingness to take risks as you interrogate the different ways users can interact with your content. Move elements around the page. Play with grid structures, information hierarchy, scale, contrast, balance, and other design principles to see what works effectively and what doesn't. The best work will have a wide variety of exploration at this stage!

COMPULSORY IN-CLASS ACTIVITY

Follow the Week 4 compulsory in-class activity to explore potential page layout variations via hand-rendered sketches.

2. Low-fidelity wireframes

Low-fidelity wireframes are a great tool for understanding and communicating how the pages of a site or screens of an app are composed.

Critically analyse your earlier page layout exploration to determine which is the most appropriate, engaging, and effective layout for each page of your site, and translate those into low-fidelity wireframes. We're not looking for content and aesthetics just yet. Simply develop clean and structured layouts for each page.

Complete the following:

Using Figma, translate your chosen layout sketches into digital low-fidelity wireframes for each of your 4 pages, for both desktop and mobile (8 page designs in total).

COMPULSORY IN-CLASS ACTIVITY

Follow the Week 4 compulsory in-class activity to create considered and clean low-fidelity wireframes for each page of your website in Figma.

3. High-fidelity wireframes / mockups

With the structure and layout of your website finalised, you can now turn to aesthetics and content.

High-fidelity wireframes—or mockups—give us a greater sense of how the site will look. They include branded elements such as logos, colour palettes, and typography, as well as appropriate imagery, icons, and buttons. Mockups are a fantastic way to present a concept to clients or teams so that everyone can see what the finished product will look like.

Complete the following:

Using Figma, build upon your low-fidelity wireframes by adding colour, text, and image content to turn them into high-fidelity wireframes/mockups, for both desktop and mobile (8 page designs in total)..

Note: It is a mandatory requirement that ALL imagery used in these websites is created by you. No stock photography or internet images can be used. The use of externally sourced imagery will result in zero marks given for this component. YOU MUST USE THE IMAGES AND TEXT YOU GENERATED FOR ASSIGNMENT 1.

COMPULSORY IN-CLASS ACTIVITY

Follow the Week 5 compulsory in-class activity to create a resolved, high-fidelity wireframe/mockup of each page of your website in Figma.

4. Interactive Figma prototype

While mockups are great, and are a common way to present ideas to clients and teams, interactive prototypes allow designers to take things a big step further and present an early version of a website or app before it's built. This gives everyone an even richer sense of the final outcome and drives more-meaningful insights, as it actually allows the user experience to be tested.

Complete the following:

Using the Prototype mode in Figma, add interactions to your high-fidelity wireframes/mockups such as linking between pages, hover and click effects, and swipe gestures on mobile.

Create one interactive prototype for desktop and one for mobile.

Test your desktop prototype on your computer and test your mobile prototype on your phone.

COMPULSORY IN-CLASS ACTIVITY

Follow the Week 6 compulsory in-class activity to create an interactive prototype of your website in Figma.

5. Participate in the compulsory WIP Review in Week 7

The work-in-progress (WIP) review is an integral part of the project workflow, so it's essential that you participate no matter how much progress you've made.

Complete the following:

In small groups (on-campus students) or via screensharing (online students), share the progress of your website designs, discussing what you've done so far and where you're going with everything.

Provide feedback on other students' work, either in your small groups (on-campus students) or via the online chat (online students).

Note: If you are unable to participate in the WIP Review on the day, it is your responsibility to negotiate an alternative presentation of your work with your lecturer prior to the final submission deadline. If the WIP Review is not completed, marks cannot be allocated for it.

Follow the Week 7 compulsory in-class activity to participate in the sharing of your work and providing of feedback to others.

PREPARE YOUR DOCUMENT FOR SUBMISSION

Neatly compile all required components into one multi-page PDF document for submission, including:

✅ Cover page (including your full name, student ID, unit code, and lecturer name)

✅ Page layout exploration (min 5 websites researched, min 20 hand-rendered sketches for desktop and 12 for mobile + annotations)

✅ Low-fidelity wireframes (min 4 digital layouts + annotations for each of desktop and mobile)

✅ High-fidelity wireframes / mockups (min 4 digital designs + annotations for each of desktop and mobile)

✅ Links to your completed interactive Figma prototypes (1x desktop prototype, 1x mobile prototype + development screenshots and annotations) ***TEST YOUR LINKS!***

✅ WIP Review feedback (including before/after screenshots and annotations of changes made as a result of feedback)

✅ Reference List (ensure your references include name of creator and source/publication where you found it)

✅ Use of AI Statement (refer to Acceptable Use of AI)