APPLICATION DESIGN II- EXERCISES
Andrea Vie Choong Jia Qi (0331945)
Application Design II
Exercises
_____________________________________________________________________________
LECTURES
Lecture 1: Introduction to the module
16/4/20 (Week 1)
Here is a sample:
http://thedesignschool.taylors.edu.my/newmedia/app2/vivien/#changeRecipe
Lecture 2:-
23/4/20 (Week 2)
There was no lecture this week.
Lecture 2:-
23/4/20 (Week 2)
There was no lecture this week.
Lecture 3:-
30/4/20 (Week 3)
There was no lecture this week.
30/4/20 (Week 3)
There was no lecture this week.
Lecture 4:-
INFORMATION
Module Information Booklet (MIB)
__________________________________________________________
EXERCISES
Exercise 1: Recap on HTML/CSS
8/5/20 (Week 4)
There was no lecture this week.
Lecture 5:-
14/5/20 (Week 5)
We learned on to use jQuery Mobile in Dreamweaver. We learned to create screens and buttons to navigate between different screens.
Fig 1.1 Screenshot of HTML (jQuery Mobile)
Final Result:
Fig 1.2 Screenshot of Result in Browser
We were also given a link to tutorials and demo about jQuery Mobile that we can try out:
Lecture 6: Layout Grids | Screen Transition | Footer Navigation Bar
__________________________________________________________21/5/20 (Week 6)
We continued with the same jQuery Mobile HTML from last week's class. We learned how to use layout grids, simple screen transition and place footer navigation bar.
i. Layout grids
Fig 1.3 Layout Grids
ii. Screen transitions & footer navigation bar
Fig 1.4 Screen transition & footer navigation bar
Lecture 7: CSS Styling within HTML
22/5/20 (Week 6)
We presented our progress of our app design exercise so far to Mr. Razif and received feedback. We were taught on how to add CSS styling in HTML itself.
Lecture 8: Introduction to Interaction & Micro Interactions
28/5/20 (Week 7)
We presented our completed app design to Mr. Razif. We moved on to the next phase of our exercise which involves interaction & micro interactions. We were introduced to 2 websites that uses interaction.
Lecture 9: Gsap Function Animation
4/6/20 (Week 8)
Mr. Razif taught on how to use simple GSAP animation into our mobile app to enhance the interactivity.
Fig 1.5 Script for screen animation
Lecture 10: Onclick & onComplete Function
5/6/20 (Week 8)
From yesterday's class, we continued to learn how to use the onClick to trigger the animation when a certain button is clicked. onComplete function to trigger the animation of the next page.
Fig 1.6 Script for onClick function
Fig 1.7 Script for animation linking to onClick function & onComplete function
Lecture 11: Onclick & onComplete Function
11/6/20 (Week 9)
We learned how to add a javascript animation to replay the animation in a screen.
Fig 1.8 Script to replay animation transition
INFORMATION
Module Information Booklet (MIB)
__________________________________________________________
EXERCISES
Exercise 1: Recap on HTML/CSS
16/4/20 (Week 1)
We are supposed to practice our knowledge on HTML/CSS. We need to create 3-5 mobile sized screens on our personal website. The website should be responsive to our phone screen size.
The three pages that I will focus on:
1. Home
2. About
2. Food & Travel
Home
Fig 1.1 Home Screen
Fig 1.2 About Screen
Food & Travel
Fig 1.3 Food & Travel Screen
Short walkthrough of the website from a mobile view:
Google Drive Link with HTML & CSS files:
After the consultation, Mr. Razif suggested that I could try again with one page from scratch with only HTML/CSS.
-----------------------------------------------------------------------------------------------------------------------------
Exercise 2: Mobile App Layout
14/5/20 (Week 5)- 28/5/20 (Week 7)
From the lecture we learned, I made a simple plant store app with three main screens: home, shop, profile. Here is my progress in Dreamweaver:
Fig 1.5 Progress of JQuery Mobile HTML
Progression video:
Google Drive Link:
I continued to add in more pages to link to the 3 main pages and style the app further more. I had to add in the pop up image and side panel for this exercise:
Here is the screenshot of the pop up image:
Fig 2.1 Pop up image
Here is the screenshot of the side panel:
Fig 2.2 Side panel
Final Result:
Google Drive Link:
https://drive.google.com/file/d/1ofIAuDZ8blO9sBYyV9hMAdFtMDAZUxVP/view?usp=sharing
-----------------------------------------------------------------------------------------------------------------------------
Exercise 3: App Animation
4/6/20 (Week 8)
From the animation we were taught on, I tested the animation in my previous layout exercise.
Here is the progress of the animation so far:
5/6/20 (Week 8)
We were taught on how to use the onClick and onComplete function to trigger an animation before clicking the next page.
11/6/20 (Week 9)
I tried adding the javascript animation taught into my app exercise.
Google Drive Link:
FEEDBACK
16/4/20 (Week 1)
There was no feedback this week.
23/4/20 (Week 2)
There was no feedback this week.
30/4/20 (Week 3)
Specific feedback: After viewing my website, Mr. Razif said my layout is alright but the customization is not there as it is hard for you to edit from a bootstrap template. Try doing one page from scratch using only HTML and CSS. No need any fancy animations. You can show it to me if you want.
22/5/20 (Week 6)
Specific feedback: After showing my progress, Mr. Razif said to add padding between the images. Do the side panel, pop up images and try different layouts for each page. Most importantly, try out different jQuery mobile widgets in the Dreamweaver and the links I sent last week.
28/5/20 (Week 7)
Specific feedback: After presenting my app design exercise, Mr. Razif said it was fine and he told me to upload the Google Drive link later in Facebook.
4/6/20 (Week 8)
Specific feedback: Mr. Razif said my animation looks good.
12/6/20 (Week 9)
There was no feedback this week.
Comments
Post a Comment