Interactive Design - Exercise 2: Web Replication

 29.04.2025 - 6.05.2025 / Week 2 — Week 3

Chan Zhi-Ren Zenndan / 0369069

Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

Exercise 2: Web Replication

Table of Contents

    1. Instructions

    2. Web Replication

1. Instructions

Document 1.1 Module Information Booklet (21/04/2025).


For this exercise, we were asked to replicate two main pages from a website of our choice, maintaining the original dimensions and closely matching visual elements like layout, fonts, colors, shapes, and images. The work was done in Adobe Illustrator, with optional support from Photoshop.

Your task is to replicate TWO (2) existing main pages of the websites that you have analyzed in Exercise 1 to gain a better understanding of their structure. Follow the dimensions of the existing website, including the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator and gain insights into web design best practices. 

You can use any image from a stock image or a free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page.

Inspect > 3 dots >run command > search for full screen capture

Illustrator > open screenshot file > object >artboards > fit to artwork bounds

Rename layer to template > right click layer > adjust opacity

>Submission

Upload as jpeg or pdf (no need for both)

Upload ai file to google drive and submit along with e-portfolio


WEBSITES CHOSEN

1. Clement Grellier

2. Wandergates


2. Web Replication

2.1 Clement Grellier

To start, I captured full-size screenshots of three different sections.

Fig 2.1.1 Run a command to capture full size screenshot (02/05/2025).


Then, I went to Illustrator and pasted the screenshots to set up my template.

Fig 2.1.2 Lowered opacity and locked template layer (02/05/2025).

I managed to find the font family through the inspect element, so I was able to replicate the text.

Fig 2.1.3 Font family 'Amiamie' found (02/05/2025).

With a font selected, I was able to start replicating. I decided to cover all three pages for practice and to see what the end result would look like.

Fig 2.1.4 Outline of the landing page/top fold (02/05/2025).

Fig 2.1.5 Outline of a section of the second page (02/05/2025).

Comparison


For the final submission, I chose to have the 'Work' page to be submitted. Fig 2.1.6 and Fig 2.1.7 show the comparison between the original and the replica.



Fig 2.1.6 Comparison #1 between the original (left) and the replica (right) (02/05/2025).


Fig 2.1.7 Comparison #2 between the original (top) and the replica (bottom) (02/05/2025).


2.2 Wandergates

I did the same process for the second website. I took a full-screen capture and set it as my template on Illustrator.

Fig 2.2.1 Setting up template (02/05/2025).

After that, I checked to see what font was used by using the Inspect Element. Then, I went and start replicating the homepage.

Fig 2.2.2 Font family 'Suisseintl' found (02/05/2025).

Fig 2.2.3 Website 2 replication process (02/05/2025).

Comparison


Once done replicating, I felt satisfied with the results. Due to the large file size, I can't upload the full photo, so I will break each section down into different figures. Fig 2.2.4, Fig 2.2.5, and Fig 2.2.6 show the comparison between the original and the replica.



Fig 2.2.4 Comparison #1 between the original (left) and the replica (right) (02/05/2025).



Fig 2.2.5 Comparison #2 between the original (left) and the replica (right) (02/05/2025).




Fig 2.2.6 Comparison #3 between the original (left) and the replica (right) (02/05/2025).



The JPEG and AI file submissions for both website replicas can be found by clicking here.

Comments

Post a Comment

Popular posts from this blog

Typography - Task 1: Exercises

Image
23.09.2024 -27.10.2024 / Week 1 - Week 5 Chan Zhi-Ren Zenndan / 0369069 Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 1 TABLE OF CONTENTS 1. LECTURES 2. INSTRUCTIONS 3. FEEDBACK 4. REFLECTIONS 5. FURTHER READING 1. LECTURES Week 1 Typo_0_Introduction Typography is a fundamental aspect in any design studies discipline. Typography has evolved over 500 years: calligraphy > lettering > typography Calligraphy: refers to the writing styles, such as Blackletter and Round hand. Lettering: refers to the drawing of letters, such as drawing out the circumference of the letter. Typography:  the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Font: refers to the individual font or weight within the typeface. Fig 1.1 Fonts. Typeface: refers to the entire family of fonts/weights that share similar styles. Fig 1.2 Typefaces. Typo_1_Development The Greeks changed the direction of writing w...
Read more

Typography - Task 2: Typographic Exploration & Communication

Image
21.10.2024 - 17.11.2024 / Week 5 - Week 8 Chan Zhi-Ren Zenndan / 0369069 Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 2: Editorial Spread TABLE OF CONTENTS      1. LECTURES      2. INSTRUCTIONS                  3. FEEDBACK      4. REFLECTIONS     5. FURTHER READING 1. LECTURES Week 5 Typo_5_Understanding The uppercase letter shown in Fig 1.1 suggests symmetry but, in fact, is not symmetrical. Baskerville Easy to see the two different stroke weights Each bracket connecting the serif to the stem has a unique arc. Univers It may appear symmetrical, but upon closer inspection, the width of the left slope is thinner than the right stroke. Fig 1.1 Letter 'A' in Baskerville (left) and Univers (right). The complexity of letterforms can be neatly demonstrated by examining the lowercase 'a' of two seemingly similar sans-serif typefaces—Helvetica and ...
Read more

Illustration & Visual Narrative - Task 1: Vormator Challenge

Image
25.09.2024 - 11.10.2024 / Week 1 - Week 3 Chan Zhi-Ren Zenndan / 0369069 Illustration & Visual Narrative / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 1: Vormator Challenge TABLE OF CONTENTS 1. LECTURES 2. INSTRUCTIONS 3. VORMATOR PROCESS 4. REFLECTION 1. LECTURES Week 1 : Since there was no lecture, Mr Hafiz informed the students to review the material uploaded to Google Classroom. Week 2: The Bezier Game was introduced to the students, which is basically a game to practice using the pen tool. We were also taught how to use a few other tools and shortcuts in Adobe Illustrator, which would come in helpful in our Vormator exercise. Week 3: We learned about shape psychology and how each shape carries unique meanings. We had to see what shape our Vormator carries and try to incorporate its meanings into our design. We also learned and practiced using the shape builder and pathfinder tool, which would help us create patterns for our vormator. Back to...
Read more