INTERACTIVE DESIGN / EXERCISE 2

╎Gwendalyn Firly Bong / 0374580

╎Bachelor of Design (Honours) in Creative Media

╎Exercise 2

---

TABLE OF CONTENTS

I. Instructions

II. Lectures

III. Exercises

---

I. INSTRUCTIONS 

---

II. LECTURES

---

III. EXERCISES

Exercise 2

Website 1: Yellow Fellow (link)

Process

First, I screenshotted the entire website using the inspect tool. However, the bottom part of the website isn't shown, so I screenshotted it separately. 

Figure 1.1: Screenshot 1

Figure 1.2: Screenshot 2

To start, I looked for fonts I could use for the page. For the main title, the designer used multiple fonts to make the title look more dynamic and unique, matching the funky theme of the website. I used Google Fonts to find similar fonts.

Figure 1.3: Fonts used for the title

The rest of the website uses a Sans-Serif font, and I settled on Calibri

Figure 1.4: Fonts used for body text

I then started recreating the website.

Figure 1.5: Using the tabs tool

Figure 1.6: Process

Figure 1.7: Recreating the Graphics

Figure 1.8: Recoloring the logos

Final Work

Figure 1.9: Final Outcome JPEG

Drive Link: https://drive.google.com/file/d/1yVTGyrqVclu0hBXWl5o5QjgsJw94FSoh/view?usp=sharing

Website 2: OH Architecture (link)

Process

Figure 2.1: Full Screenshot

Same with the first website, I went to look for fonts first. The entire website uses a Sans-Serif font, so it was much easier to find. I ended up only using one font, but I played around with the stroke widths. 

Figure 2.2: Font used

Figure 2.3: Grids

Figure 2.4: Process

Figure 2.5: Process

Final Work

Figure 2.6: Final Outcome JPEG

Drive Link: https://drive.google.com/file/d/1LZJ9zXFUaX_Pkhp7PnmFDMRLZWGBpE_4/view?usp=sharing