Application Design II-Task 3

-
13.06.2024 - 08.07.2024 / Week 8-Week 11
Kor Qian Qian / 0359496
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 3

INSTRUCTIONS



Task 3

In task 2, we completed the planning for the micro and macro animations of our redesigned app. In task 3, we need to implement all the micro animations into a functional software interface using HTML, CSS, and JavaScript.

I am about to demonstrate the following animations: 

  • Welcome page's page indicator
  • Login page transition
  • Home page side panel
  • Home page navigation bar
  • Transfer page input field
  • Transfer steps indicator

Welcome page



Image & text transition:

I have 3 pages in total for the welcoming pages, so when user clicking the "next" button, the image will slide to the left and next image will slide in as a page transition. The welcome text is just fade out to make a smooth transition with next page.

Page indicator:

The indicator is composed of three very simple dots. The dot will scale up slightly when transit to the next page, it serves as a reminder of the page the user is on, but is not too eye-catching.


Log In page

It separate into 2 parts in this screen. The above part slide in from the top, and the bellow part slide in from the bottom.


Home Page

Main content category:

Content slides up one by one. (I used a simple box replace the content)


Side panel:

The side panel slide in with 0.5 opacity and blurry background, and the content slide in one by one same as what I have introduced in my task 2 design.


Navigation Bar:

I created an interactive navigation bar. The title will shown when click on the icon, the icon will slightly higher and with a circle highlight.


Transfer page

Input field:

The "next" button is unclickable before user type anything in the field. If user click the grey button, the input field will scale up slightly as a reminder. After user type something in the field, the button turns blue and is clickable.


Steps indicator:

The steps indicator is apply to all pages of the transferring action (not to done all pages design in this stage, just show the indicator animation.)


Pop up panel:

As my application is an banking app, there is a confirmation message will appear when user proceed to the last step. When click "back", then will not proceed to the last step. When click "confirm", then will not be able to back to the previous steps anymore.


Video presentation




Reflection

In Task 3, I didn't feel confident about my ability to perform well because I wasn't satisfied with what I achieved in Task 2. I believed there was a lot of room for improvement, but I ran out of time. Initially, I had no idea how to start Task 3. However, after reviewing the class videos and trying things out on my own, the process turned out to be surprisingly smooth.

Having previous experience with HTML and CSS made those parts easy to handle. JavaScript, on the other hand, was new to me. It was only after completing Task 3 that I realized I didn't need to create multiple HTML files to achieve those pages; I could have used JavaScript to link the pages together. At least I understand that now.

Despite this realisation, I still struggled with some of the more interactive animations because I haven't fully mastered JavaScript yet.

Comments

Post a Comment

Popular posts from this blog

Advanced Interactive Design-Final Project

-
Image
23.06.2024-03.08.2024 / Week 9-Week 15 Kor Qian Qian / 0359496 Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media Final Project INSTRUCTIONS Final Project -  Completed Thematic Interactive Website In tasks 1 and 2, we have fully expressed our ideas and plans. In this final project, we will transform our prototype into a real webpage using Adobe Animate. All animations must be completed in Adobe Animate. We will integrate visual assets and refine the prototype into a complete, working, and functional product experience. Process Preloader page At first, I created the layout in Adobe Illustrator and then imported it into Adobe Animate. However, because the layer arrangement in Illustrator was crucial, I had difficulty grouping the layers correctly. Ultimately, I decided to create the layout directly in Adobe Animate. For the preloader page, I created a new file specifically for it and, a...
Read more

Advanced Interactive Design-Task 1

-
Image
24.04.2024-29.05.2024 / Week 1-Week 4 Kor Qian Qian / 0359496 Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media Task 1 INSTRUCTIONS Task 1 - Thematic Interactive Website Proposal What to do:  Fig 1.1 Requirement Brainstorming Initially, I explored food brands such as Starbucks, McDonald's, and Burger King, but these themes didn't interest me. So, I looked into many luxury brands, and finally decided to base my assignment on Jo Malone's Mother's Day collection. Jo Malone's Mother's Day collection includes various products such as perfumes, scented candles, and cosmetics. I decided to focus solely on the perfumes from the same collection for the website I'm about to create. Fig 1.2 Main product ...
Read more

Minor Project-Pink Stuff

-
Image
24.04.2024-15.08.2024 / Week 1-Week17 Kor Qian Qian / 0359496 Minor Project / Bachelor of Design (Honours) in Creative Media Pink Stuff-Pinkify Instruction Important link MIRO Board Website Prototype Final Proposal Presentation Slide Final Project Presentation Research Question Google Form Pink Stuff Week 2 - Meet Client Met with the client to gather insights about their preferences for pink-themed products. Discussed the client's expectations from the project. Aligned on the overall vision and direction for the project. Every group members give their idea and opinion for the direction of our products, I suggested pet supplies and eco products. My idea These are the ideas of the team members. All members's ideas Week 3 Decided to focus on gaming accessories as the main product line. Discussed and finalised the specific products to be featured. Planned surveys or interviews to gather user feed...
Read more