Interactive Design - Exercise 2
28.4.25 - 5.5.25 (Week 2-3)
PAN RUINING (0378138)
Interactive Design / Bachelor of Design (Honours) in Creative Media
Exercise 2 - Web Replication
CONTENT LIST
· LECTURE
·
FEEDBACK
LECTURE
Week 3 / Understanding Website Structure
INSTRUCTIONS
EXERCISE 2 - WEB REPLICATION
Task Overview
1. Website Replication 1: Dayglow
2. Website Replication 2: Tenute San Sisto
Web Page Replication Process:
For the first replication exercise I selected Dayglow's homepage based
on my analysis from Exercise 1 because it has a clean layout with a
fresh and unified color scheme and a modern visual style.
I used "Capture full size screenshot" under "Run command" in fn+F12 to
take a full-page screenshot of the homepage. To start the replication, I
used Adobe Illustrator.
Fig 1.1 Dayglow's homepage
Typography:
After analyzing the Dayglow website, I found two fonts similar to this
website from the Google font provided by sir, namely the two fonts
"Playfair Display" and "Libre Franklin".
Fig 1.2 Text display on Dayglow's website
Fig 1.3 Libre Franklin Font
Fig 1.4 Playfair Display Font
Colour Palette:
The website uses a bright and modern color scheme with orange and green
as the primary tones, set against a clean white background, creating a
fresh and energetic visual identity that aligns well with the brand’s
vibrant style.
Fig 1.5 Colour palette of Dayglow's website
Layout and Structure:
Although I couldn't find all the exact same background image, I used
grids and ruler tools in Adobe Illustrator throughout the layout process
to ensure accurate structure and text alignment.
Fig 1.5 Section layout using grid and ruler tools
Fig 1.6 Central alignment of elements
Fig.1.7 The original website (left side) and the replication (right
side)
Fig 1.9 Final Outcome Website 1 : Dayglow
Fig 1.10 Final Outcome Website 1 : Dayglow
· Website Replication 2: Tenute San Sisto
The
Website 2 source file on Google Drive.
Web Page Replication Process:
Fig 2.1 Tenute San Sisto's homepage
Same step like a previous websites, take a screenshot of the page then import it to adobe Illustrator.
Typography:
Fig 2.2 Text display on Tenute San Sisto's website
The Tenute San Sisto website features a warm and elegant color palette
dominated by beige, gold tones, and soft browns, reflecting the refined
and traditional character of the brand.
Fig 2.3 Colour palette of Tenute San Sisto's website
Fig 2.4 Section layout using grid and ruler tools (the black lines in the background)
Fig 2.5 Central alignment of
elements
Below are the comparison between the original website (left side) and the replication (right side).
Fig 2.6 The original website
(left side) and the replication (right side)
Final Outcome:
Fig 2.7 Final Outcome
Website 2 : Tenute San Sisto
Fig 2.8 Final Outcome Website 2 : Tenute San Sisto
FEEDBACK
Week 3:
This week, Sir told us about Understanding Website Structure and
asked us to select the poor website of project1 in class and put it
into the Google sheet.
REFLECTION
Experiences
This Website Replication was a project that required a lot of
patience and taught me to carefully analyze and look at websites in
a more purposeful way. It required a lot of time to analyze the
composition of the site as well as the content, such as font sizes,
color choices, etc. For this assignment I used Illustrator as my
main tool and Photoshop to extract the website colors. This allowed
me to become more proficient in the use of both programs.
Observation
Throughout the replication process, I observed that the line
spacing between words, the placement of images, and the colors that
go with them can affect how the content reads. At the same time,
details are handled exquisitely, often through subtle animation or
white space to enhance the overall texture.
Finding
I found it very difficult to make a good website, it takes a lot of
patience for the designer and the user's visual experience to design
it, and it requires a lot of attention to detail.
Comments
Post a Comment