ADVANCED INTERACTIVE DESIGN

26.08.20 - 23.09.20 (Week 1 - Week 5)

Piyaphon Inthavong (0337589)

Advanced Interactive Design

Project 1

INSTRUCTIONS

LECTURES

Week 1 | August 26th, 2020

The class was introduced to the Advanced Interactive Design MIB (module information booklet) today. Mr. Lun thoroughly briefed us through the project requirements, deadlines, marking criteria, and made sure the necessary software is downloaded at the beginning of the class. The 2 main tools we'll be utilizing for the module are Adobe Animate and Spark AR Studio.

We learned the basic interface of Adobe Animate and the essential animation features such as the keyframes, classic tween, shape tween, motion tween, symbols, graphics, button elements, etc. The animation is to be done in the HTML5 file type. Before heading straight to the project, Mr. Lun showed us a few examples from the seniors and suggested the class to check out ui movement website for future project inspiration.

Week 2 | September 2nd, 2020

Mr. Lun gave us a long tutorial session on starting up project 1. We first learned the basics of Adobe Animate such as setting up a project (HTML 5, 720 x 1280, 24 fps), useful shortcuts to speed up our workload, the basics of keyframes, and different types of animation tweens (classic, shape, and motion).

Mr. Lun showed us a few exercises for us to play around with after the session. We learned a few Java script codes to give functions to the buttons and objects in Animate.

Setup the HTML5 file with the standard HD format.
Create 2 pages with appropriate keyframes. Add a shape in the 2nd layer for a shape tween animation.
Convert frame to the symbol, and text to a movie clip and set the animation by changing the alpha of one of the keyframes.
Add a rectangular shape and convert it as a button symbol below layer 1. Set its color properties (up, over, down, hit) in its sub-layer. Write the JavaScript code to give click function to the button.
Hit Cmd + Enter to playtest (see figure L2.1 for the result).

Figure L2.1. Using buttons to change UI scene/page.

Figure L2.2. Shopping cart exercise.

Week 3 | September 9th, 2020

This week we had our final lecture for the first project before moving to the consultation phase. We learned to script the function of check boxes on Adobe Animate using the following codes:

Figure L3.1. Java Script code for check boxes on Animate.

As an optional extension to the previous script, we could make the rest of the options unchecked when one of the option is ticked. This can come in handy for choosing payment methods or especially in booking systems.

Figure L3.2. Continuation script to untick all other boxes when one is ticked.

Before moving into consultation slots, Mr. Lun showed the class how to animate certain scenes when the mouse is hovered over a button. The following code is allows a scene to play when a mouse is rolled over a set button:

FigureL3.3. Script to play a scene from a hovering action.

Week 4-5 | September 16th - 23rd, 2020

These 2 weeks were served as project continuation and consultation slots in class.

PROJECT 1

Week 1 | August 26th, 2020

The project 1 brief was given to the class today. We are required to design an interactive screen application that features a journey of the transaction process between the users and an online store.

The project began with a quick ideation process where I ran through a draft of ideas on a paper. Decisions were then made in the first phase as I decided to work on an online store that sells rare collections of fashionable and vintage clothes in a similar vibe to a thrift shop. I continued as I studied the common interaction process of normal fashion store and a thrift shop through real references to understand the user journey in standard e-commerce stores. A flow was then created from the understanding of the customer interaction points.

Figure 1.1. Flow Chart for the fashion application.

Week 2 | September 2nd, 2020

Following the flow chart done in the previous week, I dedicated a day to go through streams of references in order to familiarise myself with the standard and creative user interface for online fashion stores. My source of references includes: Dribbble, UI Movement, Behance, Play Store, and Pinterest. The following sketches makes up the first phase of the wire-framing process (see figure 2.1).

Figure 2.1. Wireframe sketches for the app.

To make sure the layout looks fine on screen, it's important to digitise the wireframe sketches into a low-fidelity version of the wireframe. This gives a little consideration to the white spaces and content hierarchy in the simplest and quick form (refer to figure 2.2).

Figure 2.2. Low-fidelity wireframe.

As a follow up process, I compiled the references that I favour into one place to help me fill in colors, and design identity for the next process, the high-fidelity wireframe (see figure 2.3 for the compiled references).

Figure 2.3. Compiled references for the app.

Week 3 | September 9th, 2020

After gathering enough references, I started looking for assets that is most relevant to my application. Figure 3.1 are the compiled collection of high quality photos I collected online. The photos were meant for clothing thumbnails, display photos, wallpapers. These are important, as they make up at least 70-90% of the look for many fashion interfaces.

Figure 3.1. Compiled photo assets for the app.

To create harmony for the thumbnail colors, many clothing stores uses matching photos and color themes throughout their entire app. This is essential to help make everything look as if they're meant to be together. I tried to replicate such technique by recoloring most of my unmatched assets using the manipulative tools provided in Adobe Photoshop (see figure 3.2). The technique is utilized throughout the category page which will be shown in later stages.

Figure 3.2. Editing photo assets to match its background color with other products. The photo on the top left is the original version.

When assets are ready, I head over to Figma to create my high-fidelity wireframes. The following wireframes in figure 3.3 are the few attempts in progress.

Figure 3.3. First set of the high-fidelity wireframe in progress.

After working with the design for a while, a few variations of the navigation menu was designed (figure 3.4).

Figure 3.4. Navigation menu variations.

Week 4 | September 16th, 2020

I continued working on the high-fidelity wireframe this week. I made a few more variations from last week in order to provide more options to choose from.

Figure 4.1. More high-fidelity wireframe variations.

Figure 4.2. Variations of the bag page. The variation on the most-left was chosen.

It took a few days and attempts to achieve different designs, variations and styles for the app. It was a matter of exploring and seeing which is the most suitable. The following photo (figure 4.3) are my extra trial-and-error attempts before being finalized.

Figure 4.3. Extra variations (discarded).

Figure 4.4. Measuring spaces between words and elements with blocks (the automated ruler don't measure type accurately so I decided to give them a final touch with the manual spacing method).

Figure 4.5. Final high fidelity wireframes.

Week 5 | September 23rd, 2020

It was a while, but once the high-fidelity wireframe was finalized, I export my layout and assets from Figma to Adobe Animate and prepare its layers appropriately for the animation. As a matter of starting out the animation process as a beginner, I utilized the traditional pencil and paper method to help me plan out my animation directions (see figure 5.1).

I focused on creating subtle animation movements upon clicking actions and page transitions as a start up. The sliding and easing techniques are highly utilized in the project. Animations are presented with slight delays according to the information hierarchy (labelled 1, 2, 3, 4... in my animation notes). Elements in the layout are met with timely transitions as they leave and enter the screen from the closest distance to the edges of the screen.