Interactive Design - Exercises

-

Interactive Design
28.8.2023 - 1.12.2023
Johnny Lam Wee Zhe (0363436)
Bachelor of Design in Creative Media

 INSTRUCTION

   

 

EXERCISES

Week 1 - Web Analysis

For our first exercise, we are tasked with giving a review of two websites from the given link:

From there, we will start exploring the website and review as a user and determine what is good about the website and what can be improved on google slides in not more that 500 words. For this exercise, I pick Makhno store website and Ekos Genesis for my review.

 
 Fig 1. Web Review Slides (5/9/2023)

Week 2 - Web Replication

For our second semester, we are tasked with replicating two websites from a selection of three websites in Adobe Illustrator; Morgan Stanley, Bandit Running and Ocean Health Index. I pick the first two for this week's assignment. Here are the finished exercise:

 
Fig 2.1 Morgan Stanley Replication (9/9/2023)
 
Fig 2.2 Morgan Stanley Original (9/9/2023) 


 
Fig 3.1 Bandit Running Replication (9/9/2023)

Fig 3.2 Bandit Running Original (9/9/2023)


Fig 2.3 Bandit Running Replication (Outline) (12/9/2023)
 
Fig 2.4 Morgan Stanley Replication (Outline) (12/9/2023)

Week 6 - Creating a Recipe Card

For the third exercise of this semester in interactive design module. We are tasked with creating a food recipe card using HTML and CSS. Here are there instructions given for this exercise:

- Create an HTML file named "recipe.html." "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.

Before I start coding recipe cards, I first look for recipes online and pick this bolognese spaghetti recipe found here. I copy the image and save them in an image file and copy the recipes and paste them onto a notepad.

 
Fig 3.1 Pasted Bolognese Spaghetti Recipe (7/10/2023 Week 6)

Then using what I have learnt from previous class, I start to code in the content onto a notepad converted into a HTML file. Here is the result before applying CSS.


Fig 3.2 Recipe Card without the CSS (7/10/2023 Week 6)

Then, I open up this HTML file in Adobe Dreamweaver and start to apply CSS on to the HTML files. For some reference, I use this recipe card as the approximate layout to go for as base and do some experiment until I am satisfied with the overall design.


Fig 3.3 Recipe Card Reference (7/10/2023 Week 6)
 
 
Fig 3.4 Screenshot of CSS file in Adobe Dreamweaver(7/10/2023 Week 6)
 
 
Here is the final result:
 
Fig 3.5 Final Recipe Card (7/10/2023 Week 6)

In case this image can't be loaded, you can also view the website here:


REFLECTION

When I first started interactive design module, I find it rather intimidating at first especially knowing how complex the code looks from previous experience or encounter with codes (or rather the lack thereof). However, the way Mr. Shamsul explains how to do HTML and CSS makes it a lot more digestible than I thought and I can understand how the tags work. Of course, I would still need to refer back to the code and I have yet to code thing from scratch without any references. However, the prospect of knowing how code works and the potential website I can create after understanding how basic coding works makes me look forward to what I can do.

Comments

Post a Comment

Popular posts from this blog

Minor Project Compilation

-
Minor Project 23.9.2024 - 5.11.2024 Johnny Lam Wee Zhe (0363436) Bachelor of Design in Creative Media  INSTRUCTIONS   TASK 1      TASK 2      TASK 3 INDIVIDUAL TASK PROCESS     REFLECTIONS Week 1 D – Describe objectively what happened On the very first week, I wasn’t really there with the rest of the group as my class takes place in the morning. I was initially joining another group from the morning class. Since Mr. Mike has mentioned that he has no problem with students joining the group of another class. I decided to join this group since there are people I am familiar with here. On the group chat, that is when we get to select our first role which is the first research. I choose technology for my part and to get research about the AR glasses this company uses. I – Interpret the events The reason why I decided to move is because my first group does not ...
Read more

Creative Writing Compilation

-
Image
Creative Writing 23/7/2024 - 3/1/2025 Johnny Lam Wee Zhe (0363436) Minor in Performing Arts INSTRUCTIONS ASSIGNMENT ONE - SHORT STORY ASSIGNMENT TWO - MONOLOGUE   ASSIGNMENT THREE - POEM WRITING ASSIGNMENT FOUR - PEER REVIEW MISCELLANEOUS  Book Cover for Short Story Fig 1. Wilted Yellow Flower Cover Monologue Character Background REFLECTION I have numerous thoughts about this module. I must admit that this module is actually a lot more fun than I have anticipated. All of the projects are something I found pretty interesting and I personally find the short story to be the most interesting of the four. This module not only taught me about creative writing but I also learn also learn more about myself in the process. One of the most challenging project I find in this module is Assignment Four. I have a difficult time giving critique about other people's work especia...
Read more

Portfolio

-
Image
JOHNNY LAM'S PORTFOLIO Navigational Link: 3D Animation Motion Graphics Animation Stop Motion Animation Animatic Video Editing Audio Editing Environmental Design Illustration    3D Animation   Fig 1. 3D Animation Motion Graphics Animation Fig 2.1 Motion Graphics   Fig 2.2 Motion Graphics 2   Fig 2.3 Motion Graphics 3   Fig 2.4 Motion Graphics 4 Stop Motion Animation Fig 3. Stop Motion Animation Animatic   Fig 4. Animatic   Video Editing Fig 5.1 Video Editing      Fig 5.2 Video Editing 2     Audio Editing Fig 6.1 Audio Editing 1   Fig 6.2 Audio Editing 2    Environmental Design   Fig 7.1 Environmental Design 1     Fig 7.2 Environmental Design 2     Fig 7.3 Environmental Design 3   Illustration   Fig 8.1 Illustrati...
Read more