Interactive Design - Exercise 2

-
06/04/25 - 5/5/25 (Week 3 - Week 6)
Samuel Keane / 0376236
Interactive Design /  Bachelor of Design (Hons) in Creative Media
Exercise 2

JUMPLINKS

LECTURES

Lectures

INSTRUCTIONS

PROJECTS

Exercise 2 — Web Replication

Exercise 2 requires us to replicate two websites. These are the two websites I picked to replicate.

1. The Banshies

To begin, I first screengrabbed the entire website homepage.

Fig. 3.1, Homepage screengrab, (04/05/2025)

Then, I open up Illustrator and started scanning through the fonts used and found out that all of it was from Helvetica. Knowing this, I instantly do the text replication from top to bottom. A little bit of kerning was done to the text, so I need to do a little bit of adjustments on the spacing between text.

Fig. 3.1, Live events comparison, (04/05/2025)

After writing all the text down, I started to replicate small details such as the logo and small icons. For the black icons, I copied the ones from the website and putting them on red circles exactly like the ones there.

Fig. 3.3, Replicating small icons, (04/05/2025)

The logo was a little bit complicated. I am pretty sure the fonts used was specially made for the logo. After doing a little bit of research, I found out the closest font I can use to substitute the capital "B" on the logo is the font Great Vibes regular. For the font used in, well, "the", Didot italic was the closest font I can find to match. Here is a side-by-side comparison of it.

Fig. 3.4, Replicating the band logo, (04/05/2025)

After finishing the graphics and text, now it is time to work with the images. I picked all of the images from pexels, a website to access stock images. Here are the links to the images I used for the website replica.

Click here to open the links for images used.

This is the final result of the replica.


2. OH Architecture

Just like before, I screengrabbed the website homepage from top to bottom.

Fig. 3.5, Homepage screengrab, (04/05/2025)

Coincidentaly, this website also uses Helvetica for all of the text. I guess Helvetica really is the standard for a clean look on design. As usual, I still have to do kerning on all of the text and adjust its line spacing as well.

Fig. 3.6, Replicating text, (04/05/2025)

The buttons and icons on this website is pretty simple. It is just a text with a circle next to it, in the middle of a rounded rectangle.

Fig. 3.6, Replicating buttons, (04/05/2025)

Last but not least, I searched for stock images online for replacing the original photos.

Click here to open the links for images used.

This is the final result of the replica.

REFLECTIONS

So, turns out replicating a website took me quite some time. I thought it would be pretty easy since we were only told to replicate. All of these exercise made me pay attention to details in websites more. Graphics and icons are used but was put on a specific area to enhance the looks of the site. White space is used very evidently to minimize distractions and highlights important information and details on the site.

Comments

Post a Comment

Popular posts from this blog

Typography - Task 1: Exercise 1 & 2

-
Image
24/09/24-22/10/24 (Week 1-Week 5) Samuel Keane / 0376236 Typography / Bachelors of Design (Honors) in Creative Media / Taylor's University Task 1: Exercise 1 & 2 JUMPLINKS 1. LECTURES 2. INSTRUCTIONS 3. TASK 4. FEEDBACKS 5. REFLECTIONS 6.  FURTHER READING LECTURES Lecture 1: Typo_0_Introduction What I generally get from Mr. Vinod's on this lecture is the definition of typography, some of the origins and the terminologies within typography. Typography is the act of making and creating letters which can be interpreted as the creation of typefaces. Furthermore, Mr. Vinod stated that typography came in many forms from digital images to physical objects. For example, animations, website designs, apps, signs, products, posters, books, essentially everywhere. In conclusion, typography is a very ...
Read more

Design Principles - Task 1: Exploration

-
Image
3/2/25-17/2/25 (Week 1-Week 3) Samuel Keane / 0376236 Design Principles / Bachelors of Design (Honors) in Creative Media / Taylor's University Task 1: Exploration JUMPLINKS 1. INSTRUCTIONS (MIB) 2. TASK 3. FEEDBACK INSTRUCTIONS TASK 1. Gestalt Theory The word "gestalt" originated from German, which means "shape" or "form". Gestalt theory is a rule that give details the way human eye perceive visual elements. This principle is meant to show how the eye perceive shapes as a single form rather than separate simpler elements. These are 5 types of principles in gestalt theory. Principle of similarity is when eyes perceive similar elements as a whole picture, even when all elements are separate. Principle of continuation is when the eye follows the paths, design and curves of a design as a continuous flow. Principle of closure is when the eye fills in missing visual information to perceive a complete...
Read more

Typography - Task 3: Type Design & Communication

-
Image
12/11/24-23/12/24  (Week 8-Week 13) Samuel Keane / 0376236 Typography / Bachelors of Design (Honors) in Creative Media Task 3: Type Design & Communication JUMPLINKS 1.  LECTURES 2.  INSTRUCTIONS 3. TASK 4.  FEEDBACKS 5.  REFLECTIONS 6.  FURTHER READING LECTURES There are no lectures. INSTRUCTIONS TASK Week 7 Task 3: Type Design & Communication 1. Dissecting Letters On this task, we were instructed to dissect the letter H, o, g, b from the selected 10 fonts provided. In my case, I chose to dissect the font Serifa Std 45 Light. Fig. 2.1.1, H, o, g, b dissection, (05/11/24) ...
Read more