Interactive Design - Task 2: Exercises 2

 April 25, 2025

02/5/2025 - 12/5/2025 / Week 3

Zhang Tianyao / 0376838

Bachelor of Design (Honours) in Creative Media / Taylors University

Interactive Design 

Task 2: Exercises 2

LIST

1. Lectures

2. Instructions

3. Exercises 2

4. Reflections

Lectures

In this week's offline session, Mr. Shamsul led us through a hands-on tutorial on Exercise 2 (website replication). In particular, he emphasized that visual consistency is key to the process when it comes to restoring web pages. In class demonstrations, he taught us how to accurately draw and align blocks of content based on the structure of the original website. This helped me a lot when adjusting my layout proportions and page spacing

Instructions

Exercises 2

1）

1.Why I Chose to Replicate the WeMake Website

I selected Too Good To Go for my second website replication task because of its clean layout, accessible structure, and meaningful concept. As a platform that promotes food sustainability, the website uses soft color schemes and clear user flow to communicate its message. I found the interface highly organized and relatively easy to study, making it a good reference for practicing layout precision, CTA (Call-To-Action) placement, and color harmony.

2.Detailed Breakdown of the Replication Process

I used Adobe Illustrator to replicate the homepage by following four main steps:

• Step 1: Canvas and Grid Setup
  I created an artboard with matching width and applied vertical guides to structure the layout.

• Step 2: Header and Hero Section
  I rebuilt the green-toned header with logo and navigation, followed by the main banner with a central CTA button.

• Step 3: Content Sections
  Key sections like “How It Works” and “Join the Movement” were replicated using simplified icons and consistent spacing.

• Step 4: Footer
  I reconstructed the footer with essential links, social icons, and app buttons, ensuring alignment and balance.

Fig 1.1 Too Good To Go

3.Using Guides and Layers for Structural Accuracy

To maintain structural accuracy, I relied heavily on guidelines and layer naming. Each horizontal section was aligned to grid columns, and I separated elements like text, buttons, and icons into their own layers. This made it easier to keep consistent padding and visual rhythm, especially for elements like buttons and section dividers.

4.Insights Gained from the Replication Experience

This task helped me understand the importance of clarity in interface design. Even though the design is simple, every element serves a clear purpose. The minimal style requires accurate spacing and careful alignment, which helped me appreciate the balance between design simplicity and functional communication.

Fig 1.2 Too Good To Go final

5.Final Deliverables and File Access

Too Good To Go

2）

1.Why I Chose to Replicate the WeMake Website

I chose to replicate the Innocent Drinks website because of its playful, vibrant design and strong brand identity. The site uses hand-drawn illustrations, cheerful color schemes, and casual typography to create a lighthearted and friendly atmosphere. These elements work together to communicate the brand’s mission of promoting a healthy lifestyle in a fun and approachable way. I saw this website as a great opportunity to explore how visual tone and brand storytelling can be translated into web design.

2.Detailed Breakdown of the Replication Process

I used Adobe Illustrator to recreate the homepage structure of Innocent Drinks, following these key steps:

• Step 1: Canvas and Grid Setup
  I prepared an artboard based on the site’s dimensions and used guides to divide the layout into clear sections.

• Step 2: Header and Hero Area
  I replicated the illustrated header background and main slogan area using substitute visuals that captured the playful tone, including fruit-themed graphics and large, friendly typography.

• Step 3: Product and Brand Sections
  I recreated modules like “Who We Are” and “Our Drinks” using placeholder product images and matching the visual spacing and text hierarchy of the original layout.

• Step 4: Footer and Social Links
  The footer was replicated with navigation items, social media icons, and subscription prompts. I focused on maintaining the balance between visual elements and whitespace.

Fig 2.1 Innocent Drinks

3.Using Guides and Layers for Structural Accuracy

To ensure precise alignment, I applied both vertical and horizontal guides to define consistent padding across sections. Each content group was separated into its own layer and clearly labeled (e.g., “Header,” “Product Section,” “Footer”), allowing for easy adjustments and improving my workflow within Illustrator.

4.Insights Gained from the Replication Experience

Unlike Too Good To Go, which focuses on clarity and UX flow, Innocent Drinks places more emphasis on brand personality and emotional appeal. This replication helped me understand how illustration style, tone of voice, and color choice shape a brand’s identity on the web. I also learned how to maintain visual rhythm and balance when working with more expressive elements.

Fig 2.2 Innocent Drinks final

5.Final Deliverables and File Access

Innocent Drinks

Project 2 : Working Web Page

Fig 3.1 Final

Project Reflection: Mountain Climbing Club Website Redesign Prototype

Introduction

For this project, my goal was to redesign the website of a mountain climbing club to enhance user experience, visual appeal, and overall functionality. I developed this prototype in Figma, emphasizing the club’s main features, including free mountain training, a professional climbing team, and high-quality equipment support. Below, I will describe the key features of my prototype, the primary design choices I made during the process, and how this design successfully meets the objectives I initially set.

Key Features of the Prototype

Clean and Modern Layout 

I adopted a minimalistic, contemporary aesthetic that emphasizes clarity and ease of navigation. The top navigation bar includes essential sections such as Home, About Us, Services, and Contact, allowing visitors to find information efficiently.

Clear Presentation of Services

In the "Services" section, I highlight the three core offerings:  

Free Mountain Training:

 I dedicated a section to showcase our free training programs, emphasizing professionalism and systematic instruction that appeal to climbers of all skill levels.  

Professional Climbing Team: 

I featured experienced team members and organized climbing excursions, underscoring our expertise and reliability.  

High-Quality Equipment Support: 

I introduced our top-tier gear rental and sales services, ensuring members have access to safe and reliable equipment.

Engaging Homepage Design

The homepage utilizes a large background image combined with motivational messaging to instantly evoke a sense of adventure and professionalism. Clear CTA buttons for registration and inquiries are strategically placed to guide visitors toward engagement.

Simulated Interactive Elements

Though the prototype remains static, I incorporated hover effects and visual cues for buttons and links to simulate interactivity, helping stakeholders envision a dynamic user experience.

About Us and Member Testimonials

I added photos, testimonials, and background information about the club's mission, to help build trust and a sense of community among visitors.

Design Decisions

Color Scheme and Typography

The primary color tone used is deep blue, which conveys stability, trust, and professionalism—qualities associated with outdoor adventure and reliability. I paired this with neutral and lighter accent colors for contrast. The typography is clean and modern, using sans-serif fonts to promote readability and a contemporary look.

Layout Optimization 

I organized content in logical sections, employing icons and high-quality imagery to enhance visual storytelling and focus the user's attention on key messages.

User Guidance

Prominent CTA buttons and clear pathways are integrated to encourage inquiries and memberships, optimizing user flow and boosting engagement.

Fig 3.2 Interaction buttons and settings.

Responsiveness Considerations

While the current prototype is static, I kept in mind future responsiveness for mobile and tablet devices to ensure a seamless experience across platforms.

Meeting the Objectives

This prototype directly aligns with my initial goals by providing a user-friendly interface, eye-catching visuals, and clear presentation of core services. The design emphasizes professionalism and trustworthiness, which are vital for attracting new members and elevating the club’s brand reputation. Through strategic layout and visual hierarchy, visitors are guided naturally toward taking actionable steps, such as signing up or making inquiries.

Conclusion

Creating this prototype has reinforced my understanding of how to design an outdoor adventure website that balances aesthetic appeal with functional clarity. The deep blue primary tone establishes a trustworthy and calming visual identity aligned with outdoor and mountain themes. I am eager to refine this further, incorporating feedback and adding interactivity to develop a fully functional website that effectively promotes the club and its services.

Reflections

This week’s session helped me understand how important visual consistency is when replicating websites. Mr. Shamsul’s demo on block alignment and layout structure made it easier for me to organize my designs.

Through replicating Too Good To Go and Innocent Drinks, I learned how different websites use layout, color, and tone to reflect their purpose. One focuses on clarity and user flow, while the other emphasizes brand personality and emotion.

This exercise improved my Illustrator skills and helped me see how good design combines structure with storytelling.