Interactive Design: Lectures & Exercises

on

Week 2- Week 
7/9/2022 - 
Leong Jiahui / 0353469
Bachelor of Design (Honours) in Creative Media
GCD 60904 / INTERACTIVE DESIGN
Lectures & Exercises
Content

Class Tutorials & Notes

WEEK 2 (6.9.2022) 
In this task, we are required to work in groups to select and analyze 6 websites from https://www.mwa.my/2021/ and  https://www.awwwards.com/. We are required to judge the website's design, usability, creativity and content. The following are our findings: 

WEEK 3 (13.9.2022) 
1) RGB (red,green & blue)
2)16 (HTML 4), 147 (HTML 5)
3)216 
4)No. Color blindness can occur if any of these types of photoreceptors is missing or functioning incorrectly. Usually,colour blindness makes certain colour combinations difficult to differentiate. Red-green deficiencies are the most common, meaning that certain shades of the colours red and green may appear very similar. They have difficulty distinguishing between some shades of reds and greens, but they can still differentiate between a light colour and a dark colour. 
However, there is a group called Rod monochromacy or achromatopsia, where they are truly "colour-blind" where they see the world in greyscale.
5)By annotating the image, using different styles or contrasts for each line, or by supplementing the image with text on the web page that conveys the same information.

WEEK 5 (28.9.2022) 
Notes/Cheat Sheet 
  • <!DOCTYPE HTML> <html>
  • <head><title>Title</title></head>
  • <body><h1>First Heading Title</h1>
  • <p> Paragraph text</p>
  • <i>itallic</i>
  • <b>Bold</b>
  • <ol><li>Numbered list item 1</li></ol>
  • <ul><li>Bullet point list item 1</li></ul>
  • <a href="link" title="link title" target="_blank">linked body text</a>
  • <img src="image url" alt="image caption" width="number" height="number">
fig 1.1 HTML coding in class tutorial (27/9/2022)

WEEK 7 (11/10/2022) 
CSS cheat sheet 
to stylize a HTML
  • attribute{property: value; property: value}
    • h1,h2,h3{font-family: Arial; color: yellow}
  • when selecting class name, must put "." before attribute 
    • .first-para{font-family: Arial; color: yellow}
  • when selecting id name (can be anything, but must be unique), must put "#" before ID. Insert ID in desired secions. 
    • #history{font-family: Arial; color: yellow} ,, <h1 id= "history"> 
  • to have 2 class values for class attribute, use spacing. 
    • <p class="first class" "second class">
  • id and class attributes must be in lowercase only
fig 1.2 CSS coding in class tutorial ( 11/10/2022)

WEEK 9 (25/10/2022) 
To select a child element from an id, use > 
ex: #navi > li { display : inline ; }

WEEK 10 (1/11/2022) 

fig 1.3 layout tutorial (1/11/2022)


fig 1.4 responsive layout(1/11/2022)


Exercises

Exercise 1

WEEK 5 (28.9.2022) 
In this exercise, we are required to create a web document based on the content given and upload the web document to a web hosting (Netlify) and submit the link in Google Classroom.
fig 2.1.1 exercise 1 process (29.9.2022)

HTML: 


Exercise 2

WEEK 7 (11/10/2022) 
In this exercise, we are required to create a single HTML page that contains the document and images from the link provided. In each main section, we need to include an id attribute that will be later used as an anchor to be linked from the navigation. We are also required to change the font accordingly and format the text and link as shown in class. Use the appropriate CSS style to style the page. We will also need to adjust the width of the page so the content doesn't fill up the entire screen and upload the completed web page to Netlify.

fig 2.1.2 exercise 2 progress (16.10.2022)

Netlify website link:https://exercise2-leongjiahui.netlify.app

Exercise 3

WEEK 8 (18/10/2022)
In this task, we are to choose one of the websites from the list in the link below and replicate the entire main page/landing page design. This task is to enable us to look at the nuances of website design and to have a better understanding of the layout. All the website listed is the current trend in web design. We are to use any images from any stock image website to replace the original image. Submit the jpeg file once you've completed the task.

The website I have selected is https://www.jadesheng.studio/
I started off the process by building the layout in Miro. 
fig 2.3.1 progress on Miro (20.10.2022)
Now that's done, I will move on to looking up 28 photos to slap onto this template.  
Here's how it turned out:
fig 2.3.2 exercise 3 final outcome (21.10.2022)
After the feedback session, I revised the layout so the margins are a bit more balanced and lose.
fig 2.3.3 exercise 3 final outcome revised (4/12/2022)


Exercise 4

WEEK 10 (1/112022)
In this task, we are required to create another layout based on what we have learned in class (creating rows and columns). I struggled a lot with it. 
fig 2.4.1 exercise 4 coding process (6/11/2022)

Final Outcome Netlify Link:exercise4-leongjiahui.netlify.app

Comments

Post a Comment