SHIMANLIN,（0375858)
BACHELOR OF DESIGN(HONOURS)IN CREATIVE MEDIA || TAYLOR'S UNIVERSITY
INTERACTIVE DESIGN - Exercise 2
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Task
4. Reflections
LECTURES
WEEK 1 - 2 LECTURES:
PLEASE CLICK HERE
WEEK 3 - 6 LECTURES:
PLEASE CLICK HERE
INSTRUCTIONS
Web Replication the Google Drive link of the final submission:
Exercise 2 - Web Replication
Fig. Website replication process (Adobe Ai)
Step 1: Set up the artboard
I created a new document in Adobe Illustrator and made sure it was the same
size as the layout of the website I was going to replicate so that the
subsequent elements would be accurately aligned.
Step 2: Import reference images
I took a screenshot of the homepage of the HOMERUN Creative Things website
and imported it into Illustrator as a design reference.
Step 3: Create the title area
Using the rectangle tool, I drew the background area of the homepage, and
then used the type tool to add the website title and navigation links. By
comparing the web design, I tried to match the font style and size as much
as possible.
Step 4: Design the main visual banner
I drew a large rectangle as the main banner area and inserted the background
image. Then I used the type tool to add the title and subtitle, and adjusted
the font size, color, and alignment to keep it consistent with the original
web page.
Step 5: Build the content area
I used the type tool to create the paragraph text and title box, and
inserted the required images and icons, and ensured that the overall layout
was neat and the elements were aligned uniformly.
Step 6: Design the footer
Use the rectangle tool to draw the footer background, add text, links and
social media icons to complete the page structure.
Step 7: Style adjustment and unification
Use the eyedropper tool to extract the original color scheme of the webpage,
and adjust the overall color to ensure a consistent style.
Step 8: Export the work
Finally, I exported the designed page to the required file format for
display and subsequent use.
Final Network Copy 1#: HOMERUN Creative Things
Fig. Website replication process (Adobe Ai)
Step 1: Set up the artboard
I first created a new document in Adobe Illustrator and set the artboard
size to match the layout of the OH Architecture website homepage to ensure
the design proportions were accurate.
Step 2: Import reference screenshots
I took a screenshot of the OH Architecture homepage and imported it into
Illustrator as a design reference.
Step 3: Design the header
Use the rectangle tool to draw the header background, trying to restore the
font style and size in the original webpage.
Step 4: Design the main visual area
I drew a large rectangle for the main visual area and inserted the
corresponding background image. Then I used the text tool to add the main
title and subtitle, and adjusted the font size, color, and alignment to make
it close to the original design.
Step 5: Build content modules
For each content module, I used the rectangle tool to build the background
structure, and used the text tool to add text content, focusing on the
layout hierarchy and element alignment.
Step 6: Footer Design
I created the footer area by drawing a rectangle, adding text, navigation
links and social media icons to keep the overall style consistent.
Step 7: Style Optimization and Adjustment
Use the eyedropper tool to extract the color scheme in the web page to
ensure color consistency. At the same time, the spacing and alignment of
elements were carefully adjusted to improve the overall visual effect.
Step 8: Export the design results
When the page design is completed, I export the work to a suitable file
format for easy display and further use.
Final Network Copy 2#: OH Architecture
REFLECTIONS
Experience
This exercise allowed me to explore how website structures are built
from scratch. Recreating a layout based on observation was not only an
enjoyable task but also one that required patience and close attention
to detail. It felt like reverse-engineering something visually —
starting from what I saw and working backwards to understand how it was
constructed. I found the process rewarding, especially when elements
began to align as intended and the structure started to take shape
naturally.
Observations
I noticed that consistency plays a big role in maintaining visual
rhythm. Text sizes, line heights, and spacing patterns often follow a
specific logic, which becomes more obvious during replication. Instead
of tweaking each part individually, maintaining a base guideline for
spacing helped me save time and made the layout feel more cohesive. It
also became clear that a strong hierarchy helps users digest content
more efficiently.
Findings
I discovered that technical shortcuts, like importing assets or using
guides, can significantly speed up the design process without
compromising quality. However, I also realized that rushing leads to
repeated revisions. Every time I thought I had completed a section, a
small misalignment or inconsistency would catch my eye. Although it
can feel tedious, I see this as a valuable part of learning — it's
through these small corrections that I improve both precision and
awareness.
Comments
Post a Comment