ADT202 Assessment Task 2: Interface Concept ProposalSPSS

Java Python 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 websit ADT202 Assessment Task 2: Interface Concept ProposalSPSS e 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