APPLICATION DESIGN II - EXERCISES

APPLICATION DESIGN II - EXERCISES

16/4/20- 4/6/20 (Week 1- Week 8)Maydeline (0335392)
Application Design II
Exercises

---

LECTURES

Lecture 1: Introduction to the Module

16.04.20 (Week 1)

We were briefed about the Module Information Booklet of this module. Mr Razif explained to us about our upcoming exercises and projects. This module is continuation of Application Design I, we would do the coding (HTML CSS JS) for the design we did in Application Design I.

Mr Razif gave us some examples done by our seniors:
http://thedesignschool.taylors.edu.my/newmedia/app2/vivien/#changeRecipe
http://thedesignschool.taylors.edu.my/newmedia/app2/kamal/#alerts

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.

Lecture 4:-

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.

We were also given a link to tutorials and demo about jQuery Mobile that we can try out:


https://www.quanzhanketang.com/jquerymobile/default.html


https://demos.jquerymobile.com/1.4.5/


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. Here are the coding:

Fig 1.1 Layout Grid jQuery

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 to change the colors of the buttons and footer, and include padding.

Lecture 8: Introduction to Interaction & Micro Interactions

28/5/20 (Week 7)

We presented our completed  redesigned app design to Mr. Razif. We moved on to our exercise which involves interaction & micro interactions. We were introduced to gsap animation from this website :
https://greensock.com/gsap/ and https://airbnb.design/lottie/#get-started

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.1 GSAP animation

Lecture 10: Onclick & onComplete Function

5/6/20 (Week 8)

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.2 onClick trigger

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.

---

INSTRUCTIONS

 

---

EXERCISES

Exercise 1: Recap on HTML/CSS

16.04.20 - 23.04.20 (Week 1 - Week 2)

Our first task is to recap our HTML and CSS knowledge. We need to create a mobile website design. The website should be responsive to our phone screen size. The theme of the website is our personal website.

The four pages that I will focus on:
1. Home
2. About
3. Portfolio
4. Contact

I proceeded to do the coding in Dreamweaver using a free bootstrap template called Regna. Here's the link to the bootstrap https://bootstrapmade.com/regna-bootstrap-onepage-template/

Fig 1.1 Process in Dreamweaver

Here are a video walkthrough of 4 pages of my personal website.

Video Walkthrough Final Result:

Fig 2.3 Exercise 1 (Final)

Google drive link with HTML & CSS & JavaScript files:
https://drive.google.com/drive/folders/1-q4pIzkjcAR4yWmlVSUG9A1v86n2JSew?fbclid=IwAR2OETgvuv8WdcnJUK3iQwRJqbTgXfZ2lp-Qeui5-6AnWPL_RX1HiRQpMD0

Feedback : Mr Razif said that my mobile website exercise is good but there is one problem with the spacing when it's reduced to mobile size. I could add more padding at some parts. Don't change index.html to something else, it has to remain with that name.

Exercise 2 : Mobile App Layout


14/5/20 (Week 5)- 28/5/20 (Week 7)

Fig 2.4 Exercise 2 (1st attempt)

Feedback : Looks good but let's make it harder. Make pop up for the images. Include side panels. Lastly, create like heart buttons function so that users can like the post.

Fig 2.5 Exercise 2 (Final Result)

Exercise 3 : Animating Mobile App Layout

4/6/20 (Week 8)

We are required to use gsap animation to animate our exercise 2 pages. Here's the outcome:

Fig 2.6 Exercise 3 (Final Result)

---

FEEDBACK

Week 1

No feedback was given. 

Week 2

No feedback was given. 

Week 3 

This week Mr Razif said that my mobile website exercise is good but there is one problem with the spacing when it's reduced to mobile size. I could add more padding at some parts. Don't change index.html to something else, it has to remain with that name.

Week 5

Looks good but let's make it harder. Make pop up for the images. Include side panels. Lastly, create like heart buttons function so that users can like the post.

Week 7

Animation looks good. Overall it's okay.