Class Notes & Exercises

October 04, 2024

Class Notes & Exercises

Week 2 - First class

Class note

Module Information Booklet:

Lecturer explain about module information booklet, brief us through what will we be doing in this class. Then we introduce ourselves one by one and we started our lecture class. We watched a video about Norman Door, it teach us about one simple lesson, that is, design should be human-centered, it should be easy to understand and use. It shouldn't confuse people.

Usability

1. Consistency

- consistency brings out the branding of the brand, once people see it, people can recognize it instantly

- people are able to use and learn it easily because the format, flow buttons and most of the design elements are consistent, it is easy to recognize and use

2. Simplicity

- Simple does not mean incomplete, empty, boring

- Simple enhance neatness, cleanliness, focus

- 'Less is more' by

- Simplicity helps with consistency, because of less colours differences, less different buttons, shapes and etc. This helps user to figure out their format, flow of the design.

3. Visibility

- It helps user to figure things easily as they can see everything in very clear and visible way.

- The design gives out very clear messages when the visibility is high.

4. Feedback

- Receive and accept feedback is important as it tells us which part we should improve and what can we do to make our design nicer and love by public

- It also tells us the needs of users and it helps to improve the usability of the product.

5. Error prevention

- Like when the system asking user whether they are human or not, whether they are sure to delete something or not, etc.

- It is very important especially when it is related to security, money, system should be able to prevent human to do any error.

- It should lead human/user to be in correct path.

Class activity

We need to create a kiosk ui/ux, low-fidelity design for Taylor's University wayfinding.

Click to view the product: Taylor's Rush

We created a simple yet very useful prototype. This can be used to find available parking, pay parking fees, showing routine to different restaurants in Taylor's University and help user to decide what food they want to eat if they cannot choose a restaurant. It also has different languages to ensure accessibility.

Week 3

Class Note

Understanding Website Structure

Why website structure matters?

- made user experience better

- easy to use, navigate, find the content they want

3 Key Elements

a) Header

- logo, mostly situated on the left, sometimes (very little) in the middle

- because user scan the website from left to right and top to bottom

- home button

- menu button, usually on the right

b) Body

- content

c) Footer

- copy right information

- contact information

- social media account

- usually, it is very short

- hamburger menu

- some websites hide their menu

- create clear menu

- some put the categories into the menu as they need it

Search button

- some buying websites like amazon, they put the search button on the upper middle location and made it big

- don't want user to look too long about the categories/products

Call to action button

- ask you to login / sign up / subscribe

- ask you to buy, to pay, etc.

Exercise 2

Web Replication

We need to replicate 2 of the given websites. By using Figma / Adobe Photoshop / Adobe Illustrator.

Week 5

Class Notes

Web

- first introduced in 1991

- the web is introduced to develop the internet

- the first satellite every send by Russian

- develop cold war and the US thinks Russian do this to watch them

- for html file, need to save as index.html only

- once close the file, can rename the file

- can include not only images but also gif and many more

- if want to change the image's size, just add another attribute --- width/height

Code:

<!doctype html>

<html>

<head>

<title>My First Website</title>

</head>

<body>

<h1>About Me</h1>

<h2>My Life in Taylor's</h2>

<p>Haloya, my name is Crystal. I am 22 years old already and I am currently studying in Taylor's University, majoring in Bachelor of Interactive Spatial Design. This is my second year of my university life.</p>

<p>My hobby is sleeping and eating. I love coffee, bread and katsu/tonkatsu.</p>

<hr/>

<h2>My List of Favourites</h2>

<h3>My Favourite Food</h3>

<ul>

<li>Tonkatsu</li>

<li>Crossaint</li>

<li>Carbonara Buldak</li>

</ul>

<h3>My Favourite Movies</h3>

<ol>

<li><b>Horror</b></li>

<ul>

<li>The Witch</li>

<li>Pearl</li>

<li>Incantation</li>

</ul>

<li><b>SciFi</b></li>

<ul>

<li>Interstellar</li>

<li>Alien</li>

<li>StarWars</li>

</ul>

<li><b>Romcom</b></li>

<ul>

<li>My Best Friend's Wedding</li>

</ul>

<ul>

<li>Openheimer</li>

<li>Batman</li>

<li>Superman</li>

</ul>

</ol>

<a href="https://www.yourblog.com" target="new" title="My Website">Link To My Website</a>

</body>

</html>

Week 6

Class Notes

In today's class, we start to use Dreamweaver to learn about HTML coding. It is basically the same with the last week's lesson but we learn some new things like adding fonts, changing colour, adding images, adding links. We create a small and simple 'About Me' website about ourselves. Introducing our favourite foods and movies.

We have an exercise to do which is create a little form at the bottom of our website.

Product:

Code:

<!doctype html>

<html>

<head>

<title>My First Website</title>

body{

color:#490001;

font-family: "Moon Dance", serif;

font-weight: 1000;

font-style: normal;

padding: 0;

margin: 300px;

}

h1,h2{

color:#A40002;

font-family: "New Rocker", system-ui;

font-weight: 400;

font-style: normal;

}

h1{

text-align: center;

back

}

tr {

background:#D8A1A2;

}

#firstRow{

background-color:#AE7172;

text-transform: uppercase;

}

#secondRow{

background-color:#D7A8A9;

}

.bglight{

background-color:#E2C0C1;

}

.bgdark{

background-color:#B497BC;

}

color:#A27FA0;

text-decoration: none;

}

</style>

</head>

<body>

<h1>About Me</h1>

<h2>My Life in Taylor's University</h2>

<p>Hi everyone! My name is Crystal, a 22 years old student in Taylor's University, majoring in Bachelor of Interactive Spatial Design. This is my Year 2 Semester 1 in my university life.</p>

<p>My hobby is watching all kinds of movies and TV series. Coffee and bread are the things that heal me. </p>

<hr/>

<h2>My Class Schedule</h2>

<tbody>

<th colspan="5">September 2024</th>

</tr>

<th>Module</th>

<th>Venue</th>

<th>Lecturer</th>

</tr>

<td rowspan="2">Monday</td>

<td>Advanced Modelling and Animation</td>

<td>Online</td>

<td>Mr.Yusri Zamri</td>

</tr>

<td>Performative Media</td>

<td>Online</td>

<td>Mr.Yusri Zamri</td>

</tr>

<td>Tuesday</td>

<td>Game Development</td>

<td>Mr.Razif</td>

</tr>

<td rowspan="3">Wednesday</td>

<td>Performative Media</td>

<td>Mr.Yusri Zamri</td>

</tr>

<td>Interactive Design</td>

<td>Mr.Shamsul Hamimi</td>

</tr>

<td>Interactive Design</td>

<td>Teams</td>

<td>Mr.Shamsul Hamimi</td>

</tr>

<td rowspan="2">Thursday</td>

<td>Advanced Modelling and Animation</td>

<td>Mr.Yusri Zamri</td>

</tr>

<td>Sonic Design</td>

<td>Mr.Razif</td>

</tr>

<td>Friday</td>

<td colspan="4"> NO CLASS</td>

</tr>

</tbody>

</table>

<h2>My List of Favourites</h2>

<ul>

<li>Tonkatsu</li>

<li>Pastries</li>

<li>Cheeseburger</li>

</ul>

<h3>My Fav Movies</h3>

<ol>

<li>Horror</li>

<ul>

<li><a href="https://en.wikipedia.org/wiki/The_Witch_(2015_film)" title="The Witch">The Witch</a></li>

<li><a href="https://en.wikipedia.org/wiki/Pearl_(2022_film)" title="Pearl">Pearl</a></li>

<li><a href="https://en.wikipedia.org/wiki/Incantation_(film)" title="Incantation">Incantation</a></li>

</ul>

<li>SciFi</li>

<ul>

<li><a href="https://en.wikipedia.org/wiki/Alien:_Romulus" title="Alien Romulus">Alien Romulus</a></li>

<li><a href="https://en.wikipedia.org/wiki/Alita:_Battle_Angel" title="Alita: Battle Angel">Alita: Battle Angel</a></li>

</ul>

<li>RomCom</li>

<ul>

<li><a href="https://en.wikipedia.org/wiki/The_Holiday" title="The Holiday">The Holiday</a></li>

<li><a href="https://en.wikipedia.org/wiki/Crazy_Rich_Asians" title="Crazy Rich Asians">Crazy Rich Asians</a></li>

<li><a href="https://en.wikipedia.org/wiki/Mamma_Mia!_(film)" title="Mamma Mia!">Mamma Mia!</a></li>

</ul>

<ul>

<li><a href="https://en.wikipedia.org/wiki/The_Theory_of_Everything_(2014_film)" title="The Theory of Everything">The Theory of Everything</a></li>

<li><a href="https://en.wikipedia.org/wiki/Julie_%26_Julia" title="Julie & Julia">Julie&Julia</a></li>

<li><a href="https://en.wikipedia.org/wiki/Schindler%27s_List" title="Schindler's List">Schindler's List</a></li>

</ul>

</ol>

<a href="https://crystalkang.blogspot.com/" target="new" title="My Website">Link To My Website</a>

</body>

<title>Contact Form</title>

<style>

label {

display: block;

margin-bottom: 5px;

font-weight: bold;

}

input[type="text"], input[type="email"], textarea {

width: 50%;

padding: 8px;

margin-bottom: 10px;

border: 1px solid #ccc;

border-radius: 4px;

font-size: 14px;

}

textarea {

resize: vertical;

}

.button-container {

display: flex;

justify-content: space-between;

}

.reset-btn, .submit-btn {

padding: 10px 20px;

border: none;

border-radius: 4px;

font-size: 14px;

cursor: pointer;

}

.reset-btn {

background-color: #aaa;

color: white;

}

.submit-btn {

background-color: #4CAF50;

color: white;

}

</style>

<h2>Contact Me</h2>

<label for="email">Email:</label>

<label for="comments">Comments:</label>

<button type="reset" class="reset-btn">Reset</button>

<button type="submit" class="submit-btn">Submit</button>

</div>

</form>

</div>

</html>

Week 7

Class Notes

CSS Selectors

- ID is important to give an unique name to the element, this is to differentiate the element with others and allow us to select the attribute smoothly.

- Descendant and Child Selector are almost the same, they are both for choosing a descendant of an element (which is inside a <div>) and edit it.

- Element, ID, Class, Descendant, Pseudo-class Selector are commonly uses for our level now.

- These selectors allow us to target the element precisely to edit without affecting other elements

List of CSS Selectors examples:

Universal Selector: *

Element Selector: p

ID Selector: #my-element

Class Selector: .my-class

Descendant Selector: .container a

Attribute Selector: input[type="text"]

Child Selector: ul>li

Pseudo-class Selector: a:hover / a:visited / a:link / a:focus / a:nth-child(n) / a:active

Pseudo-element Selector: p::first-line

Adjacent Sibling Selector: h1 + p

General Sibling Selector: h1~p

Complex Selectors: ul li:nth-child(odd) / p:nth-of-type(2)

Upload to Netlify

- must have a folder

- must have a image folder

- browse and upload

- site configuration

- rename the site name

- embed the website link into the e-portfolio for submission

Class Exercise

Perfect the last exercise by adding and using CSS.

Product:

Code:

<!doctype html>

<html>

<head>

<title>My First Website</title>

body{

color:#490001;

font-family: "Moon Dance", serif;

font-weight: 1000;

font-style: normal;

padding: 0;

margin: 300px;

}

h1,h2,h3,h4{

color:#A40002;

font-family: "New Rocker", system-ui;

font-weight: 400;

font-style: normal;

clear:right;

}

h1{

text-align: center;

back

clear:both;

}

h2{

text-align: center;

back

clear:left;

}

h3{

text-align: right;

clear: right;

}

h4{

text-align: left;

clear: left;

}

tr {

background:#D8A1A2;

}

#firstRow{

background-color:#AE7172;

text-transform: uppercase;

}

#secondRow{

background-color:#D7A8A9;

}

.bglight{

background-color:#E2C0C1;

}

.bgdark{

background-color:#B497BC;

}

li a:link, a:visited{

color:#A27FA0;

text-decoration: none;

}

li a:hover. a:active{

color:#973C7C;

text-decoration: underline;

}

p::first-letter{

colour: #D94C4F;

text-transform: uppercase;

}

.img-left{

float:left;

margin: 0 60px 20px 0;

}

.img-right{

float:right;

margin-left: 20px;

}

.img-center{

display:block;

margin:auto;

}

img{

border: 5px #490001 solid;

border-radius: 400px;

}

</style>

</head>

<body>

<h1>About Me</h1>

<h2>My Life in Taylor's University</h2>

<p>Hi everyone! My name is Crystal, a 22 years old student in Taylor's University, majoring in Bachelor of Interactive Spatial Design. This is my Year 2 Semester 1 in my university life.</p>

<p>My hobby is watching all kinds of movies and TV series. Coffee and bread are the things that heal me. </p>

<hr/>

<h2>My Class Schedule</h2>

<tbody>

<th colspan="5">September 2024</th>

</tr>

<th>Module</th>

<th>Venue</th>

<th>Lecturer</th>

</tr>

<td rowspan="2">Monday</td>

<td>Advanced Modelling and Animation</td>

<td>Online</td>

<td>Mr.Yusri Zamri</td>

</tr>

<td>Performative Media</td>

<td>Online</td>

<td>Mr.Yusri Zamri</td>

</tr>

<td>Tuesday</td>

<td>Game Development</td>

<td>Mr.Razif</td>

</tr>

<td rowspan="3">Wednesday</td>

<td>Performative Media</td>

<td>Mr.Yusri Zamri</td>

</tr>

<td>Interactive Design</td>

<td>Mr.Shamsul Hamimi</td>

</tr>

<td>Interactive Design</td>

<td>Teams</td>

<td>Mr.Shamsul Hamimi</td>

</tr>

<td rowspan="2">Thursday</td>

<td>Advanced Modelling and Animation</td>

<td>Mr.Yusri Zamri</td>

</tr>

<td>Sonic Design</td>

<td>Mr.Razif</td>

</tr>

<td>Friday</td>

<td colspan="4"> NO CLASS</td>

</tr>

</tbody>

</table>

<h2>My List of Favourites</h2>

<ul>

<li>Tonkatsu</li>

<li>Pastries</li>

<li>Cheeseburger</li>

</ul>

<h4>My Fav Movies</h4>

<ol>

<li>Horror</li>

<ul>

<li><a href="https://en.wikipedia.org/wiki/The_Witch_(2015_film)" title="The Witch">The Witch</a></li>

<li><a href="https://en.wikipedia.org/wiki/Pearl_(2022_film)" title="Pearl">Pearl</a></li>

<li><a href="https://en.wikipedia.org/wiki/Incantation_(film)" title="Incantation">Incantation</a></li>

</ul>

<li>SciFi</li>

<ul>

<li><a href="https://en.wikipedia.org/wiki/Alien:_Romulus" title="Alien Romulus">Alien Romulus</a></li>

<li><a href="https://en.wikipedia.org/wiki/Alita:_Battle_Angel" title="Alita: Battle Angel">Alita: Battle Angel</a></li>

</ul>

<li>RomCom</li>

<ul>

<li><a href="https://en.wikipedia.org/wiki/The_Holiday" title="The Holiday">The Holiday</a></li>

<li><a href="https://en.wikipedia.org/wiki/Crazy_Rich_Asians" title="Crazy Rich Asians">Crazy Rich Asians</a></li>

<li><a href="https://en.wikipedia.org/wiki/Mamma_Mia!_(film)" title="Mamma Mia!">Mamma Mia!</a></li>

</ul>

<ul>

<li><a href="https://en.wikipedia.org/wiki/The_Theory_of_Everything_(2014_film)" title="The Theory of Everything">The Theory of Everything</a></li>

<li><a href="https://en.wikipedia.org/wiki/Julie_%26_Julia" title="Julie & Julia">Julie&Julia</a></li>

<li><a href="https://en.wikipedia.org/wiki/Schindler%27s_List" title="Schindler's List">Schindler's List</a></li>

</ul>

</ol>

<a href="https://crystalkang.blogspot.com/" target="new" title="My Website">Link To My Website</a>

</body>

<title>Contact Form</title>

<style>

label {

display: block;

margin-bottom: 5px;

font-weight: bold;

}

input[type="text"], input[type="email"], textarea {

width: 50%;

padding: 8px;

margin-bottom: 10px;

border: 1px solid #ccc;

background-color:beige;

border-radius: 4px;

font-size: 14px;

}

textarea {

resize: vertical;

}

.button-container {

display: flex;

justify-content: space-between;

}

.reset-btn, .submit-btn {

padding: 10px 20px;

border: none;

border-radius: 4px;

font-size: 14px;

cursor: pointer;

}

.reset-btn {

background-color: #aaa;

color: white;

}

.submit-btn {

background-color: #4CAF50;

color: white;

}

</style>

<h2>Contact Me</h2>

<label for="email">Email:</label>

<label for="comments">Comments:</label>

<button type="reset" class="reset-btn">Reset</button>

<button type="submit" class="submit-btn">Submit</button>

</div>

</form>

</div>

</html>

Week 8

Independant Learning Week

Week 9

Class Note

We have a short assignment brief today. Our assignment 2 requires us to produce a prototype using Figma or Adobe XR for the proposal we have done in the first assignment. We need to come out with a very clear and usable wireframe first. Then, we can start to apply our proposal and the knowledges we learned in class to redesign the whole website. The website

WSVS STUDIO

This is the website our lecturer shown in class for us to refer. This is one of his students' works. The website design is very consistent throughout the webpage. There is no fancy type font as it is hard to control and design to look professional enough.

We then have a short tutorial on using Figma.

Next, we have a lecture about the display property and box model.

https://drive.google.com/file/d/1thQzViFIzB6yhTv9ExOf81Hsx81H7Kpi/view?usp=sharing

We then continue to create a simple website about food using <div> and box models

Product:

Week 10

Class Notes

Position Property

1.Position static

- the position will not be affected by top, bottom, left and right properties.

2. Position: relative

- the position

- the position will not be affected by margin and padding will not be affected too

3.Position: absolute

- the position will not be affected by other properties at all

- no matter the size of the viewport, the position will always be there

A card is a content container, a container, with or without border, contains information.

Lecturer also introduce us a website - Bootstrap · The most popular HTML, CSS, and JS library in the world. which helps with coding.

We can always use open source to help with our project but we shouldn't use any template ready by others.

Class Activity

We continue last week's activity to complete the whole webpage. We first have a challenge to separate our column into three equally divided column. Then, we stick our menu to stick on top even when scrolling.

We then need to add a back button (bottom right arrow) to guide user back to top. For the column, we made it to be able to hover and we then add in content.

Class Activity product:

Week 11

Class Notes

In today's class, we have a short briefing on our final assignment. We then have a tutorial session learning bootstrap.

Search This Blog

Crystal's Blog

Class Notes & Exercises

Comments

Post a Comment

Popular Posts

Class Notes & Exercises

Project 1: Character Design