Interactive Design | Exercise 2 - Web Replication
28/04/2025 - 05/05/2025 | (Week 2)
Nadia Chong Wen | 0355736 | Bachelor's
of Design (Honours) in Creative Media
Interactive Design | Exercise 2 -
Web Replication
Table of Contents
1. Lecture Notes
Week 2
2. Instructions
3. Exercise 2 | Web Replication
The task for this exercise is to choose two existing main pages of the websites that I have analyzed in Exercise 1 in order to gain a better understanding for the structure of the page. It was told to us to follow the dimensions of the existing website, including the width and height.
Chosen Website:
3.1. Web Replication of Taiki Sato's Portfolio
I chose this website due to its simple but effective design. While the main page may seem easy to replicate, the effects on the moon and the background may prove to be a challenge while I deconstruct the website's hierarchy and structure.
Images
For the images used in this exercise, I used pexels.com in order to find the needed images to replace the works of the designer in this recreation of the first page of his website. For the moon and water images, I had to place the image into photos in order to either remove the background or change the colors to be more similar to the original photo used by the designer.
After I cropped the pictures to their required sizes and when the imagery needed extra graphics, I used the pen-tool in illustrator in order to add a graphic that would make it seem similar to the original page's image.
In order to create the misty effect of the original page's first section, I utilized the blending mode "Multiple" and lowered the opacity of the image in order to make the shadowy and bright parts of the page. With this, I did have to use a slightly lighter shade of the original color of the page however but I think it worked well.
Structure of Layout
In order to make sure that I was able to replicate the structure of the page's layout as close as possible, I used guidelines to make sure that every single word and other elements such as buttons and images were in line with the original page's layout. In order to make sure that the colors were as accurate as possible, I also used the eyedropper tool on image of the main page. With the help of these two tools, I was able to go replicate the majority of the page in an accurate way.
Typeface Used
The list of typefaces that I used are listed here:
- Zen Old Mincho
- Cora
- Trajan Sans
- Univers LT Std
- Laima
The first thing I proceeded to do was to focus on the main header logo which was the name. I had to adjust the the type slightly in order to make it as similar to the header as possible.
And so after that, I focused on the other text bodies. For the brief introduction in the beginning and the Menu Button, I used the Cora typeface. Zen Old Mincho was often used for the headers and more as well as the Japanese text that I managed to to type out through the picture to text feature from Google Translate, and Trajan Sans and Cora were often used for brief elements that were written in English.
In order to adjust and remake the logos found in the site, I had to expand the text once I was sure the typeface/font used was similar enough and started adjusting on the logos on the original page in order to make any sort of mistake.
Final Web Replication 1:
3.2. Web Replication of Wemake
As most of the other websites that I have chosen for the previous exercise were not able to capture all the sections of the page or have too many animated elements, I chose the website that our tutorial lecturer recommended to do which was this website. I was able to screenshot it easily compared to the other sites as well.
Images
For the images used in this exercise, I used pexels.com in order to find the needed images to replace the works of the designer in this recreation of the first page of his website. For this website, all I really had to for this website was to crop the images to fit similarly to the website.
Structure of Layout
I proceeded to use guides again in order to make sure everything is in place with the original parts of the texts and other elements. It was fairly simpler to replicate these elements. I thought some of the images would be hard to make accurate as it didn't seem to follow a guide but I eventually found that all the elements are contained in a small invisible box.
The buttons are also quite consistent and easy to replicate as well besides the extra elements.
Typeface Used
The list of typefaces that I used are listed here:
The first thing I did was to make sure that the typefaces I selected matched with the main body text was kerned and spaced appropriately.
Afterwards, I did the logos. I made sure to adjust it as accurately as possible to the original logos presented through expanding the font and editing it as well as adding some symbols.
Final Web Replication 2:
4. Reflection
Experience:
It was slightly embarrassing on how long this exercise took me to do even if it was really simple and recreating the visuals of the first page. Screenshotting some pages was quite hard due to the system's screenshot not being able to capture the whole page initially and I had to manually screenshot every section due to every part being moving.
Observation:
I found that the design of the most of the pages follow the grid system in order to maintain consistency through the pages with emphasis on the images or main elements of the page through contrast and size. There was also use of the bilateral system for both websites and transitional system in Taiki Sato's portfolio that I cannot redesign.
Findings:
This exercise made me realize how much effort it takes in order to make sure that the material of a website such as the headers, body text and more have to be placed in order to be perceived in an easy and comfortable way to see for users. The choice of colors and contrast were really prominent in both websites.
Comments
Post a Comment