Interactive Design - Exercise 2

-

 Interactive Design - Exercise 1

27/4/2025 - 4/5/2025 / Week 2
An Hongzheng / 0378415
Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Exercise 2
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Exercise 2: Web Replication
    3.1 Baci Baci Matera
    3.2 Praxis Leandra Isler
    LECTURES

    Week 2

    Lecture 2


    INSTRUCTIONS
     
    Figure 2.1: Instruction / Week 1 (21/4/2025)

    EXERCISE 2: WEB Replication
    Exercise 2:
    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

    3.1 Augment Threrapy
    Figure 3.1.1 Baci Baci Matera Website replication / Week 2 (4/5/2025)

    First, create a new layer on the template layer(original website image), then use the straw tool to obtain the background color of the original webpage, and then use the rectangle tool to create a background at the corresponding position.

    Step 2

    Figure 3.1.2 Baci Baci Matera Website replication / Week 2 (4/5/2025)

    Select the shape created in the first step and reduce its transparency.


    Step 3

    Figure 3.1.3 Baci Baci Matera Website replication / Week 2 (4/5/2025)

    Select the template image and reduce transparency to ensure more accurate placement of added content in the future.

    Step 4

    Figure 3.1.4 Baci Baci Matera Website replication / Week 2 (4/5/2025)

    Align the downloaded images from the website and place them on a new layer.

    Step 5

    Figure 3.1.5 Baci Baci Matera Website replication / Week 2 (4/5/2025)

    For button graphics without image resources, use the pen tool to draw and use the dropper tool to restore colors.

    Step 6

    Figure 3.1.6 Baci Baci Matera Website replication / Week 2 (4/5/2025)

    Select the appropriate font in the corresponding position and add the text section.

    Step 7

    Figure 3.1.7 Baci Baci Matera Website replication / Week 2 (4/5/2025)

    Finally, select all elements except for the template and adjust the transparency back to 100%.

    Step 8

    Figure 3.1.8 Baci Baci Matera Final Replication Comparition / Week 2 (4/5/2025)

    Done, the above is a comparison.


    3.2 Baci Baci Matera


    Step 1

    Figure 3.2.1 Baci Baci Matera Website replication / Week 2 (4/5/2025)

    First, create a new layer on the template layer(original website image), then use the straw tool to obtain the background color of the original webpage, and then use the rectangle tool to create a background at the corresponding position.

    Step 2

    Figure 3.2.2 Baci Baci Matera Website replication / Week 2 (4/5/2025)

    Select the shape created in the first step and reduce its transparency.

    Step 3

    Figure 3.2.3 Baci Baci Matera Website replication / Week 2 (4/5/2025)

    Align the downloaded images from the website and place them on a new layer.

    Step 4


    Figure 3.2.4 Baci Baci Matera Website replication / Week 2 (4/5/2025)

    For button graphics without image resources, use the pen tool to draw and use the dropper tool to restore colors.

    Step 5

    Figure 3.2.5 Baci Baci Matera Website replication / Week 2 (4/5/2025)

    Select the appropriate font in the corresponding position and add the text section.

    Step 6

    Figure 3.2.6 Baci Baci Matera Website replication / Week 2 (4/5/2025)

    Finally, select all elements except for the template and adjust the transparency back to 100%.

    Step 7


    Figure 3.2.7 Baci Baci Matera Website replication Final Replication Comparition / Week 2 (4/5/2025)

    Done, the above is a comparison.



    Comments

    Post a Comment

    Popular posts from this blog

    Interactive Design - Exercise 1

    -
    Image
    Interactive Design - Exercise 1 21/4/2025 - 4/5/2025 / Week 1 - Week 2 An Hongzheng / 0378415 Interactive Design / Bachelor of Design in Creative Media / Taylor's University Exercise 1 TABLE OF CONTENTS 1. Lectures 2. Instructions 3. Exercise 1: Web Analysis     3.1 Baci Baci Matera     3.2 Praxis Leandra Isler     3.3 Language Inclusion - Google Research      3.4 Altly.AI      3.5 Augment Therapy 4. Feedback 5. Reflections LECTURES Week 1 Lecture 1 INSTRUCTIONS   Figure 2.1: Instruction / Week 1 (21/4/2025) EXERCISE 1: WEB ANALYSIS Exercise 1: Choose  FIVE (5) websites  from the link given. Review the website that you've selected carefully, taking note of its  design, layout, content, and functionality . Identify the  strengths and weaknesses  of the website, and consider  how they impact the user experience . Write a brief report summarising your findings and recommendations. What To Have in...
    Read more

    Typography Task 1 / Exercises

    -
    Image
    28/09/2024 - 03/11/2024 / Week 1 - Week 4 An Hongzheng / 0378415 Typography / Bachelor of Design (Honours) in Creative Media / Taylors University Task 1 : Exercises CATALOGUE Lectures Instruction Task 1 - Exercises Task 1 - Exercises 2 Feedback Reflections Further Reading LECTURES Week 1 : Typo_0_Introduction Typography is a fundamental aspect of design, used in various fields like animation, graphic design, and new media. It involves creating letters, typefaces, and type families, and is essential in website and app design, signage, and product packaging. Typography focuses on arranging text to enhance legibility and visual appeal, making it a skill practiced by many today. Figure 1.1.1 Examples of typography using in website design, app design, signage design, labels . Typography is the art and techniques of arranging type to make written language legible, readable and appealing when displayed.  /It is now something everybody does./ Terminology Font:a font refers to the individ...
    Read more

    Typography Task 3: Type Design and Communication

    -
    Image
    4/11/2024 - 24/11/2024 / Week 7 - Week 9 An Hongzheng / 0378415 Typography / Bachelor of Design (Honours) in Creative Media / Taylors University Task 3 :  Type Design and Communication CATALOGUE Lectures 2. Instructions 3. Task 3: Type Design and Communication       3.1 Research       3.2 Sketches       3.3 Identify and deconstruct references       3.4 Digitalized       3.5 FontLab       3.6 Final Outcome 4. Feedback 5. Reflection 6. Further Reading LECTURES Week 7 (Lecture 7): Mr. Vinod briefly introduced us to the content of our Task 3. We use prepared markers and grid paper to draw sketches with uppercase and lowercase letters: "h, o, b, g". We need at least three different styles. Fig.1.1.1  Deconstructed "r" Fig.1.1.2  References Fig.1.1.3  Additional reference of a writing tools Tools: 1. The broad-edge pen (flat)...
    Read more