Application Design II / Weekly Compilation

29.08.2023 - xx.xx.2023 / Week 1 - Week 7
Yung Siew Weng / 0339847
Application Design II / Bachelor of Design (Hons) in Creative Media
Weekly Compilation

LECTURES

#WEEK 1
Application Design II Lecture #1: Project Briefing 
For this particular week, Mr. Razif had provided us with valuable insights into the module and project introduction towards the overall semester. Also, one of the highlight on this session was the recap on the UX Laws via a website, Laws of UX.

Types of UX Laws
  1. Aesthetic-Usability Effect: Attractive design is often perceived as more user-friendly.
  2. Doherty Threshold: Speedy interaction (<400ms) boosts productivity.
  3. Fitts's Law: Target acquisition time depends on size and distance.
  4. Goal-Gradient Effect: Progress motivates us as we near a goal.
  5. Hick's Law: More choices mean longer decision time.
  6. Jakob's Law: Users prefer familiar website designs.
  7. Law of Common Region: Elements group when they share a boundary.
  8. Law of Proximity: Nearby objects are seen as related.
  9. Law of Prägnanz: Simpler interpretations are preferred.
  10. Law of Similarity: Similar elements form groups.
  11. Law of Uniform Connectedness: Connected items seem related.
  12. Miller’s Law: Our working memory holds 7 (±2) items.
  13. Occam’s Razor: Simple explanations are favored.
  14. Pareto Principle: 80% of effects come from 20% of causes.
  15. Parkinson’s Law: Tasks expand to fill available time.
  16. Peak-End Rule: Experiences are judged by peaks and endings.
  17. Postel’s Law: Be lenient receiving, strict sending.
  18. Serial Position Effect: First and last items are best remembered.
  19. Tesler’s Law: Systems have unavoidable complexity.
  20. Von Restorff Effect: Unique items are remembered.
  21. Zeigarnik Effect: Unfinished tasks are memorable.

#WEEK 2
Application Design II Exercise #1: HTML & CSS

INSTRUCTION
In this particular week, we are instructed to design an HTML landing page. The landing page should consist of a logo page, which begins with a logo and followed by a two-column layout page. The left column should display a full-width image whereas the right column should contain a column with three social media icons. Make sure the pages are responsive.

EXPLORATION
I started my "recap" by using Adobe Dreamweaver and the final output was documented under the PDFs below :

Fig 1.1 Exercise 1 Outcome @ Web Preview 

Fig 1.2 Exercise 1 Outcome @ HTML & CSS Compilation


#WEEK 3
Application Design II - Exercise 2 : HTML & CSS

INSTRUCTION
In this particular week, we are instructed to transform a given Figma design into a functional HTML and CSS site.

EXPLORATION
In this specific exercise, the exercise structure appears to be similar to the previous one, consisting of two pages: one with a logo and another with content. With the help of AI generator, ChatGPT and applying coding techniques learned in class, the final result has been developed. The outcome includes a Netlify link and HTML and CSS compilation were shown below :

Fig 2.1 Given Figma Content

Fig 2.2 Exercise 2 Outcome @ Preview 

Fig 2.3 Exercise 2 Outcome @ HTML & CSS Compilation

//view in Chrome, inspect as IPhone 12pro (390x844) dimension//

#WEEK 4
Application Design II Tutorial #4: JavaScript
In this particular week, we are given some tutorials regarding JavaScript (JS). Our tutorial demo is based on the continuous exercise from the previous week (week 3). The compilation of the solution and concept of the Js are documented in the PDF below:

Fig 3.1 Week 4 Outcome

Fig 3.2 Week 4 concept + compilation

#WEEK 5
Application Design II Tutorial #5: GSAP
In this particular week, we are given some tutorial regarding to GSAP. The full compilation of the exercise and outcome was documented below :

Fig 4.1 Week 5 Outcome, Side Panel

Fig 4.2 Week 5 
concept + compilation

#WEEK 6
Application Design II Tutorial #6: GSAP Timeline
The focuses of the week included :
- Logo Animation in GSAP Timeline
- Animate the title while moving into the viewport
- Enlarge the profile & search icon when click

Fig 5.1 Week 6 Outcome

Fig 6.3 Week 7 
Fig 6.3 Week 7 
Fig 6.3 Week 7 
Fig 6.3 Week 7 
Fig 5.2 Week 6 
concept + compilation

#WEEK 7
Application Design II Tutorial #7: SVG Code [Hamburger Icon] + Search Bar
The focuses of the week included :
- SVG code to html [Hamburger Icon]
- Implement the SVG hamburger icon to the previous HTML
- Activate a search bar under search icon

Fig 6.1 Week 7 Outcome, Hamburger Icon [hamburger.html]

Fig 6.2 Week 7 Outcome, Hamburger Icon & Search Bar

Fig 6.3 Week 7 
concept + compilation

REFLECTION

Throughout the 7-week period of learning, I gained some basic knowledge about Javascript and GSAP animation and their integration with HTML and CSS. While I understood the core concepts, the application of this knowledge to create intricate animations or prototypes posed a challenge. The learning primarily offered theoretical insights, and I recognised the importance of practical application and hands-on experience to solidify the theoretical foundation. The transition from theory to practice emphasised the need for interactive learning methods and real-life projects to enhance comprehension and practical skills in utilising GSAP animations effectively. Overall, it can be stated that the learning is just to be a base, and there is more and more knowledge waiting to be explored during the final prototype creation. So, wish me all the best in the final prototype creation :D

Comments

Post a Comment