Advanced Interactive Design - Project 1

-

Advanced Interactive Design



26.08.2020 - 14.10.2020  (Week 1 - Week 8)
Wong Kai Yi (0340236)
Advanced Interactive Design
Project 1

1. LECTURE

Week 1 - Week 8

Mr Razif did a brief on the MIB, we have 3 projects to work on. 

Senior blog reference: Joe Piyaphon

Project 1 (App for a business)
Wireframe: determining the content (what needs to be there), separate design and wireframe
Detailed wireframe e.g. image icon in the box etc

E-commerce
Example: restaurant, online shop, clothes store
Requirements: 
buy, payment
pop ups in a page to give more confirmation (complete experience)
order status

Ideas, flowchart, wireframe

Using Adobe Animate to make app animations:
Move / fade: Create classic tween 
Fade in or out: alpha value 0%, 100%
Nested animation (animation in movie clip)
Ease in, ease out for better transition effects

Use scripting for buttons, 
stop the animation from looping / continuing: this.stop
buttons navigate to 
somewhere in the nested animation: this.gotoAndPlay
outside the nested animation: exportRoot.gotoAndPlay

To open script (actions)

this.stop to stop animation

this.gotoAndPlay (button)

exportRoot.gotoAndPlay (button)


2. INSTRUCTIONS



Project 1

Ideas

  • Florist
  • Gadget 
  • Tealive / drinks
  • Music shop (instruments & accessories)
  • Zero waste store
  • Random YouTuber merch store
I had some questions as well (picture below). My options were between florist and music store. I consulted Mr Razif, and decided to go for music store.
Options and questions

Florist

Music shop


Initially I wanted to go for the app design for instrument store (Swee Lee), but it was too complicated, so I chose to focus on music instruments only, specifically Yamaha's brand. So the app is for Yamaha Musical Instruments.


Yamaha Musical Instruments

References

These are several references for the app design. I wanted to go for a clean minimalistic design, to represent Yamaha's professionalism.

App design reference 1

App design reference 2

App design reference 3

App design reference 4

App design reference 5

App design reference 6

Moodboard
Color palette
Yamaha musical instruments color is purple, so the primary color is purple. While the secondary colors are different shades of grey and white.

Color palette

Typeface
The typefaces are the same from the website, to ensure consistency.
The primary typeface is Oswald, while the secondary typeface is Helvetica.

Typeface

Adobe Illustrator

Wireframe
The wireframe is just a rough idea of what the app will look like, so it will have constant changes and improvements up till the actual app design is completed in Adobe Animate.

Wireframe 1
Login / sign up page and welcome page

Wireframe 2

Products, product details and cart page

Wireframe 3

Payment and order complete page

Wireframe 4

Icons
Payment icons

Basic icons

Overall look of Adobe Illustrator file



Along the way, when doing in Adobe Animate, there will be slight changes in the design.

Adobe Animate

These are some of the screenshots of Adobe Animate progress.

Adobe Animate progress 1

Adobe Animate progress 2

Adobe Animate progress 3

Adobe Animate progress 4

Adobe Animate progress 5
Prototype 1 & 2

YouTube

Prototype 1

Prototype 2: https://youtu.be/3KHR-PqWOwY

Final Prototype

YouTube

Horizontal view

Final prototype horizontal view

Vertical view

Final prototype vertical view

3. FEEDBACK

Week 6
First submission: 
  • The animation is quite normal, can be more dynamic to increase interactivity. 
  • To resolve the buttons issue, use this.mc_bla.btn_home.on from the outer page, not the nested layer.
  • Finish the remaining pages
Week 9
Final submission week
The animation is dynamic and interactive, but it must not be too long and waste the viewer's time. Others is all good.

Comments

Post a Comment

Popular posts from this blog

Publishing Design - Final Compilation & Reflection

-
Image
Publishing Design - Final Compilation & Reflection 28.08.2020 -  27.11.2020 (Week 1 - Week 14) Wong Kai Yi (0340236) Publishing Design Final Compilation & Reflection 1. INSTRUCTIONS Exercises Project 1 Project 2 Final Project 2. SUBMISSIONS Exercises Determining book size We are to take an A3 paper or stick 2 A4 papers together then fold it into half. After that, we have to determine our book size by making at least 3 sizes which are between A5 to A4. Fig 5.1 determining book size - red line (chosen size) Fig 5.2 determining book size - 32 pages cut out (untrimmed) Fig 5.3 determining book size - opened book (untrimmed) Here is a video of how it looks:  Fig 5.4 paged book before trimming Fig 5.5 Final 32 paged book Fig 5.6 Final 32 paged book Fig 5.7 Final 32 paged book Fig 5.8 Final 32 paged book Van de Graaf Grid Fig 5.9 Van de Graaf grid and with text Text formatting Fig 5.10 text formatting 1...
Read more

Design Research Dissertation

-
Image
Design Research Dissertation 27.08.2020 - 26.11.2020  (Week 1 - Week 14) Wong Kai Yi (0340236) Design Research Dissertation 1. INSTRUCTIONS 2. SUBMISSIONS Turnitin Report (PDF) Fig 1.1 Turnitin Report (PDF) Flipbook (Fliphtml5) Fig 1.2 Flipbook Journal Article (PDF) Fig 1.3 Journal Article (PDF) 3. REFLECTION This module is very different from the other modules in the Creative Media course, because it focuses on research. This journey through design research methodology and design research dissertation has been interesting yet challenging, as we are exposed to the systematic way of conducting research. I have learnt a lot on research, such as methodology, discussion etc. It is also crucial to include references from reliable sources and provide justification wherever required. Otherwise, the research would be not convincing and reliable as it is not backed up by academic sources.  Although I have faced many difficulties throughout both modul...
Read more

Brand Corporate Identity - Project 3

-
Image
Brand Corporate Identity - Project 3 16.10.2020 - 13.11.2020  (Week 8 - Week 12) Wong Kai Yi (0340236) Brand Corporate Identity Project 3 (Positioning and Identity) 1. LECTURE Project 1 2. INSTRUCTIONS Progress 16.10.2020 (Week 8) Project 3 includes stationeries, collateral and environmental graphics. We started making the business card and continue with the letterhead and continuation sheet. First attempt: Fig 3.1 Business card back Fig 3.2 Business card front Fig 3.3 Business card back Fig 3.4 Letterhead Fig 3.5 Continuation sheet Fig 3.6 Continuation sheet Fig 3.7 Invoice They were not approved, as the design has to be formal. It was because business transactions will be done through the stationeries. After receiving feedback from Mr Vinod, I made amendments. 23.10.2020 (Week 9) Attempt 2: I did a few variations of the business card. Fig 3.8 business card Fig 3.9 business card Fig 3.10 letterhead Fig 3.11 continuation sheet Fig 3.12 invoice I contin...
Read more