Interactive Design Exercises

3/4/2023 - XX/XX/2023
Edwin Choo Quan Rong / 0348305 / Bachelor of Design (Hons) In Creative Media
GCD 60904 / Interactive Design
Exercises

---

3/4/2023 - 10/4/2023
(Week 1 - Week 2)
Exercise 1: Web Analysis

This is the introductory exercise we have to the class of Interactive Design. To understand websites better, we are tasked to analyze TWO websites from this link. A brief summary of analyzing 2 websites was written so we can take note and improve our understanding of the design, layout, content, and functionality, strengths and weaknesses about websites.

The websites I chose to analyze were Simply Chocolate and Torgerson Design Partners. 

Here is my analysis for each website.


Simply Chocolate

Landing page looks clean and gives an easy introduction. The big white text is clear and readable but the smaller texts of white can be harder to see as the background is also of light color. The menu texts on the side are placed sideways, making it harder to read quickly or repeatedly as those menus are something the user would want to revisit frequently. The bottom half of the screen lies an interactive chocolate bar, bouncing out to entice the user to explore further into the page. Clicking on the bar starts this cool interaction where the wrapping slowly reveals the chocolate inside, along with more information about it displaying on the screen as you scroll. The information is divided into small chunks, making it easy to read and it goes well with the large colored name of the chocolate in the background. My only complaint for this section of the page is there isn’t an option to move the chocolate to the side while reading as it blocks the middle of the screen. After every chocolate bar, there is a call-to-action button for you to shop before it loops into the next chocolate bar and repeats with a consistent layout design. If u want to review the chocolate above, you cannot until you scroll back down to it again in the cycle, this makes the user spend more time on the website than necessary. The overall user experience is smooth, fast loading time and the multiple color choice covers the variety of chocolates they have on showcase. Menu navigation is simple, and some even have pop-up windows to show a glimpse of what is in store. 


Torgerson Design Partners

Landing page is simple, there is already a call-to-action button on the bottom left, along with a couple areas of interest. Scrolling down, there is more information to be learned about the website, with popup menus from the left to promote interactivity and content, slight animation of statistics and reasonable word size for quick reading. The typeface used is easy to read and fits well with their theme of architecture. Images are placed nicely in a way that it’s neither cluttered nor spacious. Navigation is easy to understand as the menus provide panels that show multiple categories of interest. Overall load time is smooth, there’s no need to wait long. Some areas change color, light up or pop up when hovered over with the mouse, adding a small bit to interactivity and feedback. One good thing about this website is their information is well organized, it is easy to find what you are looking for. The only weaknesses I could see is some images are placed too close to the text, making it seem cluttered.

---

10/4/2023 - 24/4/2023
(Week 2 - Week 4)
Exercise 2: Replicate a Website

For this exercise, we are tasked to replicate the landing page of TWO websites, ensuring that we focus on the font style, color style as well as layout. This helps improve our understanding of a website's structure, with key elements such as headlines and call-to-action buttons as well as polishing on our Photoshop/Adobe Illustrator skills. Images can be reused via screenshot or we can use new images from https://www.pexels.com/. 

---

From a selection of 5 websites, I chose People by Wagepoint and Ocean Health Index for replication.

Fig 1.1 - Landing page of People by Wagepoint

I begin with creating a new document for Web-Large (1920 x 1080px) in Illustrator and screenshotted the landing page in chunks and pasted it into Illustrator for replicating.

Fig 1.2 - Replicating the website

I duplicated the artboard to the left and started replicating elements such as text for the headlines, subtext, headers, footers and call-to-action buttons on top of the screenshots.

Fig 1.3 - People by Wagepoint replica (First screenshot)

I started with typing the text into a textbox, then adjusting its size to match image of text below by hovering over it. Then I proceeded to find similar looking fonts so that it matches almost perfectly with the original screenshot. The images I used for this part is taken from https://www.pexels.com/. The elements of color such as the call-to-action button and also the background were made with shape tools or pen tools and eye-dropped with color from the original screenshot.

Common fonts I used throughout these are:

• Adobe Caslon Pro
• Futura Std
• ITC Garamond Std
• Bodoni Std
• Serifa Std

Fig 1.4 - People by Wagepoint replica (Second screenshot)

The same practice is done here, type, resize, use a suitable typeface and repeat. 

Common fonts are:

• Roboto
• Adobe Caslon Pro

Fig 1.5 - People by Wagepoint replica (Third screenshot)

The images of people and logos were screengrabbed from the original screenshot. Text was made and some kerning had to be done to ensure it fits perfectly with the original.

Common fonts are: 

• Bahnschrift
• ITC New Baskerville Std
• Roboto
  

Fig 1.6 - People by Wagepoint replica (Fourth screenshot)

Elements such as the email address textbox, Wagepoint's logo and the call-to-action button were made with pen tool or shape tool while all text follows the same procedure as the previous screenshots.

Common fonts are:

• Roboto
• Gill Sans Std
• Serifa Std
  
  

Fig 1.7 - People by Wagepoint replica comparison

Here is the comparison between the replica (left) and the original screenshots (right). Note that I didn't replicate the popup chatbox at the bottom right of the page because for a static landing page, it remains at the top.

---

Onto the next website: Ocean Health Index 

Fig 2.1 - Landing page of Ocean Health Index

Same steps here, a document for Web-Large (1920 x 1080px) size with landing page screenshotted into chunks for replicating.

Fig 2.2 - Replicating the website

Duplicated artboard to the left and started replicating with text for the headlines, subtext, headers, footers and call-to-action buttons. Images and logos are screengrabbed from the original.

Fig 2.3 - Ocean Health Index replica (First screenshot)

This website's landing page is more consistent with their font choice, with most fonts looking similar. So I used the same font family but different types (Bold, Italic, Thin etc.). Texts were adjusted to fit the original by changing its size and elements like the boxes were made with shape tool. Logo elements were screengrabbed from the original. The background image was taken from https://www.pexels.com/. 

Font family used throughout (for all text related replicas)

• Acumin Variable Concept (with varying types)

Fig 2.4 - Ocean Health Index replica (Second and Third screenshot)

Since the 2nd chunk of screenshot was short, I decided to combine it with the 3rd one for display here. Text procedure is the same with resizing to fit the original, images were screengrabbed from the original and elements are made using shape tool. Kerning was done on text to ensure it aligns with the original while fitting in the box at the same time.

Fig 2.5 - Ocean Health Index replica (Fourth screenshot)

Same text procedure as above with resizing, logos were screengrabbed and certain texts are kerned to ensure it fits.

Fig 2.6 - Ocean Health Index replica comparison

A comparison between the replica (left) and the original (right). Images are screengrabbed or taken from https://www.pexels.com/. 

---