Interactive Design/Exercises

Week 01-Week xx/28.08.2023-xx.xx.2023
Yap Guang You/0363730
Interactive Design/Bachelor of  Design(Hons)in Creative Media
Exercises 1&2/ Web Analysis&Web Replication
Exercise 3/HTML and CSS Document Development

---

Content

1. Lecture
2. Instruction
   1. Web Analysis
   2. Web Replication
   3. HTML and CSS Document Development 
3. Reflection

---

Lectures

Week02/Usability-Designing Products for User Satisfaction

In this lecture, we learn about the basic of product design, usability, and the 5 principles which is, consistency, simplicity, visibility, feedback, and error prevention. Consistency is talking about letting people recognize your style or your brand easily, and not confusing the user, example given was Apple, Samsung, and Sime Darby. Simplicity is talking about letting your product be user-friendly, not being too complex to confuse the users. Visibility most are talking about how we combine different elements together. Feedback is the move that lets the user know they have done some move, like sound effects after clicking or the receipt after making an online payment. Error prevention is to make users aware of making some minor mistakes, like the read wave line when we use Microsoft Word. Some common mistakes to avoid in usability were the complex interface, confusing navigation, poor feedback, and inadequate error handling.

Week02/Video sharing- It's not you. Bad door are everywhere

Week03/Understanding Website Structure

In this lecture, we learn about the structure of the website. Header, body and footer are the key elements of website. Header is the top section of the website that contains logo, contact information. Body contains the main content of the website, such as text and images. The Footer is the bottom of the website, havind the copyright information, links of other page.

Week03/Class note

Week06/Selectors in CSS

CSS selectors are a fundamental part of CSS that allows us to target and style HTML elements on a web page, it are used to define which elements should receive specific styles, such as colors, fonts, etc. They are a crucial part of web development because they enable us to control the presentation and layout of our web pages. A universal selector is selecting all elements on the page. Element selector is the simplest type of selector, it targets HTML elements by their tag name. An ID selector function as targets an element with a specific id attribute. The class selector, targets elements with a specific class attribute. It also shows more selectors in this lecture, CSS provides a variety of selectors to offer flexibility and granularity when targeting HTML elements for styling.

Week07/Box Model

A display property is the most important property for controlling layout in the CSS, each element has a default display value, most usually block or inline. A <div> element was a standard block-level element, and <span> was the standard inline element. There are others display properties, such as Inline-block, Flex and Grid. HTML elements are containers, and box was the container, they are three layers in each box, padding, border,  and margin. We have a short exercise to familiar with how it works.

Week07/Exercise web capture

---

Instruction

<iframe src="https://drive.google.com/file/d/1WDr6LjbPz7rzqeuoLSDc2fPzvQnd0KSu/preview" width="640" height="480" allow="autoplay"></iframe>

This task aimed at demonstrating proficiency in comprehending web development through prototyping and development procedures. We will learn fundamental skills in crafting and advancing websites.

Web analysis

In this exercise, we need to choose two webs from the link provided and observe the web design and content, function, and composition, then consider how they impact user experience, and summarize the pros and cons of the web. 500 words were required for the summary. 

https://www.csswinner.com/winners

I chose both websites, one is 'You can be anything' by The First The Last, which talks about Barbie. The next was Tim van Wolfswinkel, it was a portfolio page. I learned a lot from these two web, their layout and color use inspire me a lot, and I think it will help my assignments a lot.

Web analysis preview

---

Web Replication

In this task, we need to use Photoshop or Illustrator to replicate the websites given, we need to choose 2 websites among the 3 websites given. The websites I chose are Ocean Health Index and Morgan Stanley. 

Morgan Stanley:https://www.morganstanley.com/?authuser=0
Ocean Health Index:https://www.oceanhealthindex.org/?authuser=0

Progression

Progression-Morgan Stanley

Submission-Morgan Stanley

Progression-Ocean Health Index

Submission-Ocean Health Index

---

HTML and CSS Document Development: 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.

Visual study

I searched for some recipes web for my reference, and there are some similarities between them, most of them have a navigation bar and a logo. The content they included was ingredients and instructions, some of them provided some tips, and some of them explained the information about food.

• Banana Banana Bread Recipe (with Video) (allrecipes.com)/Reference
• Natasha's Kitchen – A Food Blog with Tried and True Recipes (natashaskitchen.com)/Reference

Sketch

I made a rough layout sketch so I could track I was on the composition that I wanted when I was coding.

Exercise3/Sketch

Progression

First, I make a basic layout for the section and list. I seperate the content to the food details, preparation, steps, tips and also some health stats. The heading section I decided to have a logo and a navigation bar as same as my reference. I use Adobe Dreamweaver for the coding, and I will use HTML and CSS for the web development.

Exercise3/Progression_1

Then, I started figuring out my content, I decided to make a recipe about how to cook an overnight oat, so I did some study about it. I manage my content element with <div> and <class> for my convenience of decoration in CSS.

Exercise3/Progression_2

Next, I make my logo by using Adobe Illustrator. The 'K' means kitchen, I just want it to be simple to save time. 

Exercise3/Progression_3

Last, I use the CSS to decorate my HTML file. It was very convenient and clear work because I managed the elements in my HTML file, but it was still a big job.  I do face some challenge when I was making the decoration, such as the boxing-size was incorrect or can't align the image and the content well, and the logo wasn't function well in the web.

Exercise3/Progression_4

Submission

After some minor adjustments, I uploaded my index file to netlify, and named my link.

Link submission: Exercise 3_0363730 (recipecardexercise0363730.netlify.app)

Exercise3/Submission_Jpeg

Exercise3/Submission_Pdf

Exercise3/Submission_HTML code

Exercise3/Submission_CSS code

---

Reflection

Exercise 1&2

Good websites have some similarities, they can let the user understand the content clearly and directly, the way they interact with users might be complex but they have a clear guide and are convenient to read. During the web replication task, I noticed that the balancing is important, if the pictures are not balanced, they will misdirect the user and cause some misunderstanding. 

Exercise 3

Organizing my code nicely does help a lot for me, it reduces my errors and also lets me have a clear mindset about the development progression. Doing research or studying the references before starting our work will have a huge impact on the progression speed, after having a clear image of the outcomes in our mind, everything will be on track during the progression. I found that using your boxing element well does help a lot when developing a web.