Interactive Design: Exercises

29.8.2023- 17.9.2023/ Week 1- Week 8
Kelly Lau Jie Ning/ 0354839
Interactive Design/ Bachelor of Design(Honours) In Creative Media
Exercises
INSTRUCTION


Exercises 1: Web Analysis
We are provided a website that has several other high-quality websites in this exercise, and we must pick two websites to analyze. We must pay attention to the analysis's design, layout, information, and functionality. Additionally, we must note the website's advantages and disadvantages and take into account how they affect the user experience.  For both analyses, we must write no more than 250 words.



Exercise 2: Website Replication
It is our responsibility to duplicate TWO (2) of the three websites' current home pages. Any picture from a stock photo or a free stock icon can be used. It is not necessary for the image we use to be an exact copy of the one from the source website. The arrangement, typeface, and color scheme ought to be our main concerns.

Website 1 Progress

I'm using Acumin Variable Concept and Epilogue for the fonts. I went with medium, semibold, and bold for the typeface. In this exercise, I also utilized the pen tool to draw the logo.

Fig 1.1 Progress screenshot

Final Web Replication 1
Figure 1.2 Comparing between the original website and the replicated one 

Fullscreen view
Fig 1.3 Fullscreen view of the website-jpg

Fig 1.4 Fullscreen view of the website-pdf

Website 2 Progress

https://www.oceanhealthindex.org/?authuser=0

For this website, I am using Poppins Black, Univers LT Std, and Epilogue as the fonts. The typefaces I have chosen are Regular, 75 Black, Medium, and 55 Roman.
Figure 1.5 Progress screenshot

Final Web Replication 2
Figure 1.6 Comparing between the original website and the replicated one 

Fullscreen view
Fig 1.7 Fullscreen view of the website-jpg

Fig 1.8 Fullscreen view of the website-pdf


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

Progress:
First of all, I tried to find want food recipe that I wanted to do. I tried to find the recipe using the link that Mr Rahman provided in the WhatsApp group chat.

Fig 2.1 Screenshot of the website that Mr Rahman provided


Then, I chose Spaghetti Bolognese for my recipe card.

Fig 2.2 Screenshot of  the Spaghetti Bolognese recipe website

Here are my HTML and CSS coding screenshots:
Fig 2.3 Screenshot of HTML coding #1

Fig 2.4 Screenshot of HTML coding #2

Fig 2.5 Screenshot of HTML coding #3

Fig 2.6 Screenshot of CSS coding #3
Outcome
Fig 2.7 Outcome of the recipe-jpg
https://recipe-exercise-kelly.netlify.app/

After feedback
After getting Mr Rahman's feedback, I deleted my underline for the subtopic and added the padding between ol and li.
Fig 2.8 Screenshot of CSS coding after feedback
Final outcome
Fig 2.9 Final outcome of the recipe card

Final Website link:
https://exercise-3-kelly.netlify.app/

FEEDBACK
Week 7
-delete the underline of the subtopic
-add the padding in ol and li

REFLECTION
The exercises helped me simply know how a good website looks and also how to code by doing a simple recipe website. The exercises are fun. I feel enjoy when doing those exercises. After doing those exercises, I can do my project quickly and smoothly.

Comments

Post a Comment

Popular posts from this blog

Intercultural Design - Projects 1,2&3: Proposal, Data Collection and Visual Design

Image
05.02.2024- 22.03.2024/ Week 1-Week 7 Kelly Lau Jie Ning/ 0354839 Intercultural Design/  Bachelor of Design (Honors) in Creative Media Project 1,2&3- Proposal, Data Collection and Visual Design INSTRUCTION Lecture Week 1 First of all, our lecturer took us through the MIB to let us have a basic knowledge of our projects. During briefing time, we know about what we going to do for our current project and our future projects. Visuals are powerful persuasive mediums to provide most of our information about the world.  Visual Communicate What are Visuals? Visuals are... The first design has no meaning. It just appears as a tree. Another design aspect an visuals is that visual that represents something. It comes with meaning and cultural...
Read more

Animation Fundamentals- Exercises

Image
30.04.2024-/Week 2-Week  Kelly Lau Jie Ning/ 0354839 Animation Fundamentals/ Bachelor of Design (Honors) in Creative Media Exercises INSTRUCTION Exercise 1-Bouncing Ball Animation We do this exercise in class. We must draw a short bouncing ball animation using Adobe Animate. In week 2 class, we try to use Adobe Animate by creating a bouncing ball animation. In this class, we learn frame rate, timing & spacing, slow in & slow out, timing chart and arcs. First, we create 3 layers: ball, arc, and floor.  Fig 1.1 Layers Next, we draw the floor and the arc. Fig 1.2 The arc and the floor After that, we add the ball frame by frame. Fig 1.3 The ball frame-by-frame Fig 1.4 Timing & Spacing The animation that I did in class   Fig 1.5 Bouncing ball animation done in the class After I go back home, I have done a second version of the boun...
Read more