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
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:
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 |
Comments
Post a Comment