Interactive design Exercises Web Replication & HTML

08.5.2025 - 05.2025 (Week 3 – Week 6)

ZHOU YUTONG / 0378676

GCD61004 / Interactive design / Bachelor of Design (Honours) in Creative Media 

Exercises  Web Replication & HTML

---

TABLE OF CONTENT

LECTURES

INSTRUCTIONS

TASK

FEEDBACK

REFLECTION

---

LECTURES

WEEK 2  Lecture | Usability

Introduction to Usability

Usability is a key component of User Experience (UX) design. It refers to how effectively and efficiently a user can achieve their goals within a particular context using a product. A highly usable interface enables users to reach their objectives easily without requiring expert knowledge.

Five Key Principles of Usability

1. Consistency
   Maintain visual and functional consistency throughout the design. This helps users form habits and reduces confusion. For example, all buttons should have a uniform style, and navigation icons like “back” should remain the same across pages.

2. Simplicity
   Interfaces should be streamlined and simple. Reduce unnecessary steps, use clear symbols and terminology, and make it hard for users to make mistakes. This allows users to achieve their goals faster and more enjoyably.

3. Visibility
   Important functions and options should be clearly visible. Users should be able to see what actions are available without needing to guess or search.

4. Feedback
   Systems should respond clearly to user actions, indicating success or failure. For example, a selected icon may change color to show it is active.

5. Error Prevention
   Prevent user errors through alerts, smart design, and constraints. Since human error is inevitable, good design should minimize the chances of it occurring.

Common Usability Issues

• Overly complex interfaces

• Confusing navigation

• Poor or missing feedback

• Inadequate error handling

---

INSTRUCTIONS

---

TASK 

Exercises 

• Replicate websites (Week 3 - 10 Marks)

Your task is to replicate an existing website to gain a better understanding of its structure. This exercise will help you develop your design skills using software such as Photoshop, Adobe Illustrator or Figma, and gain insights into web design best practices. Full brief will be upload in Google Classroom.

Part 1 Process

Contrast

• Step 1:

Create the artboards and piece them together into one long whiteboard. This setup makes it easier to allocate different sections of the website later.

• Step 2:

Take screenshots of the original website, inspect the elements, and research the main information about the site to find matching or similar images.

• Step 3:

Choose a suitable font. I selected Segoe UI Variable, as it closely resembles the font used on the original website.

• Step 4:

Start composing the pages using text tools and image insertion. I used Photoshop to assist with removing backgrounds or creating transparent images, and I used the path tool or pen tool to create some custom graphics.

• Step 5:

Select all the completed, individual artboards and rearrange them to form one continuous page layout.

FINAL WEB REPLICATION 1#: Mugaritz - Mugaritz

Link:https://drive.google.com/file/d/1zROpc-IDCFYlwZax_vdF1znZRKKnlRvu/view?usp=drive_link

Part 2 Process

Contrast

Step 1

Download the entire webpage from the browser, then embed the images into the AI (Adobe Illustrator) file without changing their dimensions.

Step 2

Based on the size of the website, create a suitable artboard on the canvas.

Step 3

Find the appropriate font, then press Ctrl + Shift + T to bring up the ruler tool to ensure consistent letter spacing.

Step 4

Look for images. When embedding them, hold Shift to keep the image dimensions unchanged.

FINAL WEB REPLICATION 2#: Preloader animationfromProVoke

Link:https://drive.google.com/file/d/13rvfiZ5sx_sg6gY-KYQcobMdMoFSFcND/view?usp=drive_link

---

FEEDBACK

WEEK 3 ：My artboard size is incorrect, and the page actually uses one single long canvas. I also need to find a similar font

---

REFLECTION

Through the Web Replication exercises, I developed a deeper understanding of website structure and design principles. In the first task, replicating the Mugaritz website allowed me to practice using Photoshop for layout composition, image transparency, and font matching. I initially made mistakes with the artboard size and font choice, but feedback helped me correct these issues and pay more attention to consistency and accuracy.

In the second replication, I applied the feedback from the first task. I used Adobe Illustrator and ensured that all images were properly embedded without distortion. Using the ruler tool helped me maintain consistent spacing and alignment, improving my precision. This task also made me more aware of the importance of contrast and visual clarity in web design.

Overall, this exercise enhanced my technical design skills and strengthened my ability to analyze and reproduce professional websites with attention to usability, layout, and visual balance.