Interactive Design - Exercises

29/8/2023 - 10/10/2023 : (Week 1- Week 7)
Ting Wen Yi / 0361799
Interactive Design/Bachelor of Design (Hons) in Creative Media
Exercises

---

INSTRUCTIONS

---

EXERCISES

Exercise 1 - Analyzing 2 Websites

In this exercise, we have asked for a brief report that includes the following elements for two selected websites:

1. Evaluate the purpose and goals of the website and assess whether they are effectively communicated to the user.
2. Analyze the visual design and layout of the website, including its use of color, typography, and imagery.
3. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
4. Assess the quality and relevance of the website's content, including its accuracy, clarity, and organization.
5. Evaluate the website's performance, including load times, responsiveness, and compatibility with different devices and browsers.

Website:

Website 1: Boba X Ice Cream

Website 2: Patty Tommy 

Figure 1.1 Analyzing 2 Websites - PDF slides, Week 1 (2/9/2023)

Exercise 2 - Web Replication

1. Choose two websites.
2. Capture screenshots.
3. Set canvas dimensions.
4. Replicate layout, menus, and content.
5. Match typography, fonts, and colors.
6. Replace images with similar stock images.
7. Fine-tune details.

In this task, we have been assigned to replicate two given websites. Our goal is to identify similar fonts and locate similar images.

Original Website:

Website 1: Ocean Health Index

Website 2: Morgan Stanley 

Figure 2.1 Using Similar Fonts - Week 2 (9/9/2023)

Figure 2.2 Comparing Side by Side - Week 2 (9/9/2023)

I positioned the original website right beside my artboard to allow for a side-by-side comparison. This setup enables me to meticulously examine every aspect and detail, including the gradient colors, and ensure that my replication closely matches the original site. 

Figure 2.3 Gradient Colors - Week 2 (9/9/2023)

The original website features gradient colors, and I am carefully comparing the details to replicate them as closely as possible.

Figure 2.4 Outline View - Week 2 (9/9/2023)

The lecturer requires us to show the outline view of our work. It also makes it easier to select and precisely edit specific anchor points, paths, or objects. 

Figure 2.5 - Week 2 (9/9/2023)

After comparing it to the original website and finding no mistakes, I proceeded to export the work.

Figure 2.6 Website 1 Replication - Week 2 (9/9/2023)

Figure 2.7 Website 2 Replication - Week 2 (9/9/2023)

Exercise 3 - Creating a Recipe Card

In this exercise, we will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.

• Create an HTML file named "index.html."
• Create a section that displays the following information:
• Recipe title
• Include necessary images for the page
• List of ingredients
• Step-by-step cooking instructions
• Create an external CSS file named "style.css."
• Apply CSS rules to style your recipe card.
• Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.

Figure 3.1 Navigation Bar - Week 6 (8/10/2023)

I want to create a navigation bar at the top with jump links that allow users to scroll to different sections of the page. However, I'm not sure how to make a navigation bar that stays fixed as the page scrolls. Nevertheless, I would like to implement it on my recipe card.

Figure 3.2 Headings - Week 6 (8/10/2023)

I have sectioned my content with jump break into the following categories: introduction, ingredients, cooking instructions for the cheesecake, making cherry sauce, recipe variations, and serving instructions.

Figure 3.3 Text Box using CSS - Week 6 (8/10/2023)

I made a text box like sticky notes using CSS. 

Figure 3.3 Rounded Corner Pictures - Week 6 (8/10/2023)

I used CSS to round all my picture corners and also added colors and font styles to my content.

Website Link: Click Here!

Figure 3.5 Recipe Card PDF- Week 6 (8/10/2023)

Figure 3.6 HTML Code - Week 6 (8/10/2023)

Figure 3.7 CSS Code - Week 6 (8/10/2023)

Mr. Shamsul said, 'I don't need to include navigation links.' Therefore, I have deleted the navigation links.

Final Recipe Card

Final Website Link: Click Here!

Figure 3.8 Recipe Card PDF- Week 7 (10/10/2023)

Figure 3.9 HTML Code - Week  (10/10/2023)

Figure 3.10 CSS Code - Week 7 (10/10/2023)

---

FEEDBACK

Week 7: Don't need to include navigation links.

---

REFLECTION

Reflecting on my experience of undertaking web replication using Adobe Illustrator, I can say that it was a task that required patience, and attention to detail. While not challenging in complexity, the project emphasized the importance of patience and precision. It wasn't tough, but it underscored the value of dedicating time to perfecting even the smallest design elements. One aspect that stood out during this journey was the process of finding similar fonts and images. This element, though not particularly difficult, was undeniably time-consuming. In my case, it was not a matter of struggling to identify the right fonts or images, but rather the meticulous nature of ensuring they were an accurate match to the original web content. For exercise 3, creating a recipe card using HTML and CSS is fun for me. I enjoy coding in HTML, and this exercise requires patience to ensure that the code reflects how I want my web page to look. Although  I have only learn the tip of the iceberg of HTML, I will continue to do more research and learn more.