Interactive Design - Exercise 1 & 2 & 3

on

28.8.2023 - 10.10.2023 ( Week 1- Week 7)
Gam Jze Shin / 0353154
Interactive Design / Bachelor of Design in Creative Media
Exercises 1 & 2 & 3
Index
1. Instructions

Instructions

Exercises 1

Exercise 1: Web Analysis
Choose TWO (2) websites from the link given. Review the website that we've selected carefully. Write a brief report summarizing in not more than 500 words. We can include a screen capture of each section or page of the website to explain and make sure that the formatting of the report is clear (heading/subheadings).

What To Have in The Analysis:

  • Purpose and goals - Are they effectively communicated to the user?
  • Visual design and layout - What use of color, typography, and imagery? 
  • Functionality and usability - Navigation, forms, and interactive elements? 
  • Quality and relevance of content - Accuracy, clarity, and organization? 
  • Website's performance - Load times, responsiveness, and compatibility with different devices and browsers?


Exercise 2

Exercise 2: Web Replication
Choose and replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. We need to follow the dimensions of the existing website from the width and height.

Suggestions:


1. Ocean Health Index https://www.oceanhealthindex.org/?authuser=0


Fig 1.1  Comparison of Website 1

Fig 1.2 Layout of comparison of Website 1

Final Replicated Website:

Fig 1.3 Final Replicated Website 1


2. Bandit https://banditrunning.com/

Fig 1.4  Comparison of Website 2

Fig 1.5 Layout of comparison of Website 2
Final Replicated Website:

Fig 1.6 Final Replicated Website 2

Exercise 3

Exercise 3: Creating a Recipe Card
In this exercise, we should 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. 

Steps:
  • 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.
Choose recipe from:

Chosen recipe:

Progress in html
At first, I choose the recipe from the above link given. The recipe that I choose is BuburChacha. Then, I create a folder that named 'Recipe' in my desktop. I found a related image via online and saved in the folder.
Fig 2.1  Desktop Folder

Then, I started my html progress in Adobe Dreamweaver. Before I started doing it, I created css designer and link it to the html. 

Fig 2.2  Html and Css linked

I include all of the content provided in the BuburChacha's website. For the listed ingredients, I used unordered list (ul) to arrange it. 

Fig 2.4 Progress in html

However, I used ordered list (ol) to list down the cooking steps.

Fig 2.5 Progress in html

Besides, I decided to use 'Lato' typeface for my recipe. I selected it in google fonts and copy the embedded link from google fonts to Adobe Dreamweaver.

Fig 2.6 Font chosen

Fig 2.7 Progress in html (Font)

Progress in Css
For css, I changed the font and colour of h1, h2, h3, h4, p, ol, ul ...

Fig 2.8 Progress in css

In order to make the overall layout did not align to the left part, I used container to adjust it.

Fig 2.9 Progress in css

Final Html and Css (Recipe)
https://exercise3-gamjzeshin.netlify.app/

Fig 2.10 Final html & css (Recipe)

Reflection

From exercise 1, I studied on how to analyze a website by understanding the organization and structure of web pages. There are a lot of details should be aware of. Besides, designers must consider the practicality of web pages from the user's perspective.

In exercise 2, the most challenging things for me is finding the suitable icons and images that can be used in the web page. In the other hands, the spacing and size of fonts also need to be noticed carefully.

When doing exercise 3, I need to step by step follow the instructions that taught by Mr. Shamsul in class. As this is my first time to complete a website by writing html and css myself, I noticed that I faced some problems such as unfunctional code. Luckily, after I checked it carefully, I had found the problem and I redo it and it works. The largest challenge for me in this exercise is to test our attentiveness.

Comments

Post a Comment