Interactive Design - Exercises

3 April 2023 - 24 April 2023 / Week 1 - Week 8
Sim Jia Min 0349784
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Exercises: Web Analysis, Replicate a website, HTML & CSS Document Development, CSS Layout

---

INSTRUCTIONS (MIB)

---

Exercise 1: Web Analysis

Instructions:

Choose TWO (2) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
Write a brief report summarizing your findings and recommendations. (not more than 500 words)

Chosen websites:

Figure 1.1: Website 1 landing page - One Museum Two Locations 

It is an official website about Frans Hals Museum, located in Haarlem, Netherlands.

Figure 1.2: Website 2 landing page - FPP

It is the official website of a marketing consulting and services company called FPP, which

offers marketing solutions for businesses and organizations.

The reason why I chose these two websites is because their visuals caught my eye at first glance, so I decided to proceed my analysis writing on these two websites.

Submission:

Figure 1.3: Final submission - web analysis 

---

Exercise 2: Web Replication

Instructions:
- Replicate TWO (2) existing websites given in the link to gain a better understanding of their structure, follow the dimension of the existing website from the width and height.
- Can use any image from stock image or free stock icon, may replace it with a similar image
- Focus on the layout, type style, and color style, find similar typefaces/fonts from Google Fonts.

Chosen websites:

Figure 1.4: Website #1 landing page - https://www.wozber.com/en-us

Figure 1.5: Website #2 landing page - https://www.morganstanley.com/

Progress in Illustrator:

Figure 1.6: Using guidelines to make the texts align

Figure 1.7: Comparison of original website body text font and my chosen font

Font used(for both website 1 & 2): Open Sans (bold, regular, medium, semibold)

Figure 1.8: Comparison of website #1 title font and my chosen font

Font used: Montserrat (medium)

Figure 1.9: Comparison of website #2 title font and my chosen font

Font used: Bahnschrift (regular)

Figure 2.1: Replicate layers of website #1

Figure 2.2: Replicate layers of website #2

Submission:

Figure 2.3: Final submission - web replication #1

Figure 2.4: Final submission - web replication #2

---

Exercise 3: HTML Personal Profile Page

Instructions:
- Think about what you want to include on your profile page. You should include your name, a photo, a brief bio, and some personal interests.
- Use HTML tags to structure your content. You should use headings (h1, h2, etc.) and paragraphs (p) to make your content more readable.
- Add lists (ul or ol) to showcase your personal interests. For example, you could create a list of your favorite books, movies, or hobbies.
- Add links (a) to your profile page. You could link to your social media profiles or to other websites that you find interesting.
- Include an image (img) on your profile page. This could be a picture of yourself or something that represents your interests.

Figure 2.5: Trying out HTML on Adobe Dreamweaver

By following the demo from the recorded lecture, I learned some basics of using HTML tags to make simple content.

Figure 2.6: Progress on Dreamweaver

I added some links, images, and short paragraphs as the content of my profile page.

Figure 2.7: Final code

SUBMISSION

Profile page link: https://jasminesim12.github.io/simjiamin-exercise-3/

---

Exercise 4: Layout Exercise

Instructions:

- Create a responsive grid layout for a website based on the content provided

- The design and alignment should be visually appealing and functional across different screen sizes, allowing for optimal viewing on both desktop and mobile devices

- Upload files on Netlify/Github and submit the link

Figure 2.8: CSS Exercise Demo

From the two demos posted on google classroom, I learned the basic of applying CSS style rules with HTML elements, and using it to arrange the content of the website.

Figure 2.9: HTML - Heading/subheading/body

Figure 3.1: CSS - external link settings code

Different colours will be shown on unvisited/visited/mouse over/selected links.

Figure 3.2: CSS - body text & image settings code

Figure 3.3: CSS - container/header/content/footer settings code

Figure 3.4: CSS - header & footer navigation settings code

Figure 3.5: Exercise 4 - Grid layout website

Mr Shamsul has given feedback that the layout is too bland and simple by only centralising everything, and should change the font. So I did some changes after.

SUBMISSION

 Link: https://jasminesim12.github.io/SimJiaMin_layoutexercise/

Figure 3.5: Exercise 4 - Grid layout website

REFLECTION

These exercises have helped me to acquire the basic knowledge of website layout and the basic of using HTML and CSS to build a webpage. By learning to organise a website layout, I gained a deeper understanding of how to structure and organise content effectively. The process of diving into the fundamentals of HTML and CSS has been both challenging and rewarding for me.