Interactive Design-Exercise1

 

Interactive Design/Bachelor of Design(Honours) in Creative Media

Taylor'sUniversity

Yexinyan/0355096






Instructions



Lecture

WEEK 1 :Surveying the possibilities

<iframe src="https://drive.google.com/file/d/1Cxunw-ozOcZ4DZQVDh4jWB1QxbfNzTot/preview" width="640" height="480" allow="autoplay"></iframe>
Week 1 Lecture Notes

WEEK 2: Usability: Designing Products for User Satisfaction



<iframe src="https://drive.google.com/file/d/1IViE9MZT5xiKCpwQgpbrMO3zAugZJWvT/preview" width="640" height="480" allow="autoplay"></iframe>
Week 2 Lecture Notes

WEEK 3 : Colors for Web 


<iframe src="https://drive.google.com/file/d/1yClT4Kh5-WhIycUW2BAysVQSGuVK73OX/preview" width="640" height="480" allow="autoplay"></iframe>
Week 3 Lecture Notes

Exercise 1

Web Analysis

We must examine two current websites from the link provided by Mr. Shamsul for this work and pinpoint areas that could be improved. We must thoroughly examine the chosen website, noting its layout, content, and functionality. Determine the website's advantages and disadvantages, and take into account how they affect the user experience. Briefly summarise your results and suggestions in a report.

What To Have in The Analysis:
  • Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
  • Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
  • Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
  • Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
  • Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
The selected websites that I chose to analyze for this exercise:

First Website: Rainforest Guardian (https://rainforest.arkivert.no/#kart)


Second Website: ETQ（https://www.etq-amsterdam.com/）

<iframe src="https://drive.google.com/file/d/1BPbov1RBGJrDz0do1JMkQbxPtOVl7r9Q/preview" width="640" height="480" allow="autoplay"></iframe>
Final Exercise 1 (PDF)


Exercise 2

Web Replication

For this exercise we are asked to replicate two existing websites provided by Mr Shamsul to gain a better understanding of their structure. We have to follow the dimension of the existing website from the width and height. This exercise will help us develop our design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. We can use any image from stock image or free stock icon. The image that we will be using does not have to be an exact image. We may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, can download fonts from Google Fonts.

 
According to the given websites provided by google classroom, it is decided to choose Buy Bitcoin Malaysia and People by Wagepoint makes HR simple websites for this exercise. Check out the website, then I go to Google Fonts to find a web-appropriate font.


First Website: https://www.luno.com/en/my

First,Import screen into Adobe Illustrator, and next search for similar images from stock images or the Unsplash site.



Search for similar images from stock images or the Unsplash site


 Process in Adobe Illustrator


Final Outcome:

First Website: https://www.luno.com/en/my


Final Exercise 2: Website 1 (JPG)






<iframe src="https://drive.google.com/file/d/1NAhsBTmgLBRmJsJFAYcYaeWb0fWV1Iy6/preview" width="640" height="480" allow="autoplay"></iframe>
Final Exercise 2: Website 1 (PDF)


2. Second Website：https://kinhr.com/

 Process in Adobe Illustrator


Final Exercise 2: Website 2 (JPG)


<iframe src="https://drive.google.com/file/d/1tb1vi8CwucCrnCzWroFfvuIPNBcD4s_e/preview" width="640" height="480" allow="autoplay"></iframe>
Final Exercise 2: Website 2 (PDF)

Exercise 3-HTML and CSS Document Development




Comments

Post a Comment

Popular Posts