Interactive Design / Bachelor of Design (Hons) in Creative Media
TABLE OF CONTENTS
2. Exercise
4. Reflection
INSTRUCTIONS
For the second task of this module, we had to replicate the design of 2 different websites to further understand the structure of websites. The chosen website should be taken from the following sites:
EXERCISE
Week 2 / Web Replication
In my previous task, the websites I chose all had videos and animations in them. This posed as a problem as taking full screenshots with such websites won't work. To avoid further hassles, I decided to look for alternatives and chose the following websites:
For this website, the main font is this 8-bit-like font. When I looked for fonts on the internet, the most similar one I found was Mozart NBP. The dimensions of the letters are the same with some difference in its structure.
|
| Fig 1.1 Font Difference |
There are also several icons throughout the website that I had to recreate. Some I did them as close to the original, while some I took more liberty with. However, like for the companies list icons, since there were lots of them, I just decided to put the name of the company using the Futura font.
|
| Fig 1.2 Icons Difference |
Lastly, I put in images in places that originally had them using free stock images that had a similar enough theme.
|
| Fig 1.3 Used Images |
Final Replication
For this website, the mainly used font Helvetica, which I then used for the replication. However, one I'd like to mention was the multiple differences in tracking, even between words in the same line. Although I couldn't perfectly mimic it due to time constraints, this process took a lot of time.
The icons used in this website wasn't as much as the previous one, but it had one more complex icon at the end which I replicated. I couldn't recognize which font was used though, so I went with the Eras font.
|
| Fig 1.4 Logo Recreation |
|
| Fig 1.5 Used Images |
Final Replication
For the original PDF and Illustrator files, you can refer to this link - Google Drive
FEEDBACK
REFLECTION