Interactive Design // Exercise 1 & 2

03/04/2023 - // Week 1 - Week 14

Hasnol Rafiq Bin Hasnol Raduan / 0356767
Information Design / Bachelor of Design (Hons) in Creative Media / Taylor's Design School

---

INSTRUCTIONS

---

Exercise 1 :

Web Analysis - Our assignment for the first week is to choose two websites from a list of links and write a brief report of no more than 500 words that may include screenshots to describe each section or page of the websites. We must conduct a thorough investigation of the selected website, paying close attention to its structure, information, functionality, and design. We should also assess the website's advantages and disadvantages and take into account how these aspects affect the user experience.

We must take into account several crucial factors in order to conduct a thorough analysis. First, we should think about the purposes and aims of the website and assess how well the user is informed about them. We should also look at the visual layout and design of the website, including how color, fonts, and images are used. The navigation, forms, and interactive elements of the website should also be closely examined for usability and functionality. Additionally, it is crucial to evaluate the website's content in terms of its caliber, clarity, organization, accuracy, and relevance. The responsiveness, loading times, and device and browser compatibility of the website should also be assessed.

Figure 1.0 - Web Analysis Final 

Exercise 2 :

Web Replication - Our task is to replicate 2 existing websites are given in the link below to gain a better understanding of their structure. Using either Illustrator or Photoshop.

To start of this exercise, I decided to replicate these two websites: 

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

https://www.oceanhealthindex.org/

I decided on both of these websites because I thought they looked challenging and would help understand more about web design and UI/UX design as a whole. I chose Luno.com because I thought the layout was well organized especially with the amount of information that had to be included, I also thought the design of the website was very appealing. I decided on Oceanhealthindex.org because of the way they integrated the image on the background and have it blend well within the website. I chose to do this exercise on Adobe Illustrator. 

 

Figure 2.0 - Web Replication  

To start off with my web replication, I decided to match the canvas size with the size of the website and place grids throughout the websites layout to make it easier with placing the different elements. To help get the accurate colors of the website, I used the inspect tool on the actual website landing page t and look through the source code to figure out the exact details of both website. 

Figure 2.1 - Web Replication Final #1

Replicating Oceanhealthindex.com was pretty simple for the most part, the tricky part was in recreating the fading that transitions between backdrops. My first attempt in doing so was making rectangle in Illustrator and adding a blur effect so that it looks like its fading but the problem was that it looked too messy and blurred out a lot of the image behind. The second attempt was by adding a gradient, this was a much better improvement, it made the fade much clearer and smoother without obstructing the flow of the website.

Figure 2.2 - Web Replication Final #2

 Replicating Luno.com was much trickier compared to Oceanhealthindex.com, due to the fact that it was a much longer website with a lot more content to organize as well as more images, patterns and icons to create. Overall, as time consuming as it was, it wasn't as difficult as I first thought. The only difficulty that I had was recreating the patterns that were present inside the boxes because I spent too much time trying to create accurate shapes and trying to figure out how to clip them on Illustrator.