Interactive Design - Exercise 2: Website Replication
29/04/24 - 06/05/24 / Week 2 - Week 3
Brendan Fedya / 0376283
Interactive Design / Bachelor of Design
(Hons) in Creative Media / Taylor's University
Exercise 2
TABLE OF CONTENTS
I. Instructions
II. Feedbacks
III. Reflections
I. INSTRUCTIONS
Task Brief:
Choose TWO (2) websites from exercise 1. Replicate it through Adobe Illustrator or
Adobe Photoshop to gain insight into web designs.
Key Considerations:
Images used can be stock images from websites like Pexels and doesn't have
to be the exact same thing in the original website.
First thing I did is to find a font that is similar to the exclusive
font for Cartier. I searched through ChatGPT and it gave me a list of
options that I could find in Google Fonts. The font I found the most
similar is Great Vibes designed by Robert Leuschke.
|
|
Figure 1.1: Great Vibes by Robert Leuschke Source: Google Fonts |
For the first step, I replicate the title on the top of the website first.
It has different fonts so I will be using different textboxes.
Figure 1.2: Replicating 'Cartier – 365' title
Next, I will replace all the texts with similar font styles, I could
only proceed after doing this or else the images will overlap the texts.
The fonts I used are ITC New Baskerville Std (Roman and Italic) and
Helvetica Light (Regular) because they look really alike.
|
|
Figure 1.3: Replicating text from layout 'Cartier –
365'
|
|
|
Figure 1.4: Replicating images from layout 'Cartier –
365'
|
Here are the images that I use besides those in the original website:
|
|
Image #1 Source: Pinterest |
Same as the first website I replicated, I chose a font that is quite
similar to the website, because it's impossible to find as the original
font is only exclusive for that particular brand.
|
|
Figure 1.5: Poppins by Indian Type Foundry, Jonny Pinhorn,
Ninad Kale Source: Google Fonts |
Because this website has its own logo, I started tracing it with pen tool in Adobe Illustrator, then I could put all the texts in. Distortion of the fonts are widely used so that it can be as identical as the original font.
Since all images in the website have curved edges, I decided to try the
other way rather than creating clipping masks for the images. In this
case, I tried using pen tool to make the sharp edges curved and it works
quite well.
 |
| Figure 1.6: Website replicating process 'Zaneffi' |
The texts was the most time consuming part, as the font is different so I have to manually adjust the kerning and paragraph spacings for sentences that are very off track. After that, I just matched the text colors in their original colors with the eyedropper tool.
 | |
|
Here are the images that I use besides those in the original website:
Final Result 2:
As the files are too long in dimensions and it's unable to preview the task directly as images on this website, I compiled all my files for this task inside a Google Drive folder that could be accessed by clicking this link below:
HTML = < > come in pairs, opening and closing.
ex. <p lang="eng-us">Paragraph in English</p>
footer is a part of <body> </body>
<br></br> to force line break in a paragraph. paragraph is <p></p>
heading is h1 - h6 respectively in websites.
<ol> or <ul> must include <li> inside.
<a href="anylink"> is for link, everything inside this is clickable.
Macbook essentials
Press format, then make plain text for macbook, IF NOT CANNOT USE HTML
Save file name = index.html, then save hit the use html option.
Format, then wrap to page
Windows
save index.html named file as all files DONT USE TXT FILE.
W5
Class attribute can be applied to several elements, normal CSS can only be unique to one HTML.
div = to divide a layout into separate layouts which have the same characteristics. If you put CSS for the div, then all separate layouts will have the same characteristics.
div will appear top to bottom if i havent add any styles, if add styles it could be side by side.'
block elements will appear from top to bottom, for example div is .
inline elements appear to continue on the same line, for example <img> if the pixels are not wide enough it will appear side by side rather than top to bottom
CSS
selector is all the html elements, and that put curly brackets {} after for CSS, then it will change all the characteristics. TERMINATE A STYLE DECLARATION WITH ; if you want to add more style declaration.
color, font-family, etc is called property.
blue, helvetica, arial, etc. is called value.
for web project better get embed code for font so that all the viewers can see even though not downloaded
II. FEEDBACKS
It's ok if the image is not exactly the same, the thing that is important is to know in detail how website layouts are arranged.
III. REFLECTIONS
I thought that this exercise was easy at first, so I kind of underestimated it. In reality, the screengrab of every website is unbearably long, and we have to follow the details for all of it which is quite detailed. After doing it entirely, It's actually interesting to know more of the design decisions made by the designers, we can learn more about how they think which is important for us to improve our own design thinking process.
Comments
Post a Comment