Skip to main content

Interactive Design - Lectures and Exercises

01.04.2019
Joseph (336620)
Interactive Design
Lectures and Exercises

LECTURES

 Week 1: Module Briefing and Web Evaluation.

For the first week, we were given a brief explanation on our modules for this semester, after that we proceeded with our first exercise in class which is giving our evaluation about websites that we chose. Mr. Shamsul gave us another website called Webby Awards and Thebestdesign for choosing. we were tasked to choose 6 good website designs and 6 bad website designs and present those websites in front of class. We were split into 6 groups, because some of us were taking way too long we were a bit late in terms of finishing the class. These are the websites that we chose as good.




Fig 1.1 A few websites that we think are good.






Fig 1.2 A few websites that we think are bad.

 Week 2 
 For this week we had lecture about UX DESIGN and USER EXPERIENCE DESIGN.We were told that we should always remember that the functionality always comes first and then the aesthetics comes next.



Week 4 

 Lectures : HTML Codes

 We had a lecture about basic HTML Codes that are used in a website for adding content. These are the codes that we learned :

- <html></html>

- <body></body>

- <header></header>

- <h1></h1> = h1 one continues up until h6 (h=heading)

- <p></p>= Paragraph

- <li></li>= List

- <ul></ul>= Unordered List

- <ol></ol>= Ordered List

- <a href> </a>= Hyperlink

- <img src=" ">= Insert Image




Week 5

 Lecture: CSS EXTRA MARKUP

 We had more lectures about HTML and this time the lecturers are adding CSS to the lecture.

Block-level Element: Has a new line break in between them.

<h1><h6><ol><ul><li>

In-line Element: A line that appears in block-level element.

<p><a><b><img>

Attribute: Gives extra information on an element.

<href>

ID/Class Attribute: states a certain element towards the html.
<id="">

Week 6 

 LECTURE : Working with CSS

For this week we had extra lectures on CSS

Linking online Fonts to CSS

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> 

Heading <h1> until <h6>

 Ordered List

 Nested List

 Highlighting a Text

 #aboutpara{


}

HTML Scrolling

html{

scroll-behavior: smooth
}

Background Image

 body{
background-image="browse"
}
INSTRUCTIONS

EXERCISE

 EXERCISE 3 : HTML EXERCISE.

 For this week, we were given an exercise to code on notepad using only html, contents for our html is about ourselves with a minimum of 3 paragraphs.
Fig 1.3 Codes in Notepad
This is the link to the result:

HTML PRACTICE


Exercise 4 : Layout Exercise

 For this exercise we were given contents for website that we are suppose to code, we were asked to organized a certain layout throughout the contents. Unfortunately, because I lost my files I can only show the final result. These are the contents.



and this is the final result :
Layout

Fig 1.4 Layout Exercise


Labels:

Comments

Post a Comment

Popular posts from this blog

Advanced Typography - Exercise and Lecture

Advanced Typography - Exercises 26.09.2019 Joseph (0332260) Advanced Typography Exercises  LECTURE (26.09.19) This is the start of what I can say a very stressful course to go through again but no worries its not Taylor's University or any University if it's not hard. For our first week, we start the course by being introduced to the MIB (Module Information Booklet). We were explained by Mr. Vinod what are the assignments going to be like and what are the projects going to be like. After that, we continued on by making presentations and explaining the lecture to the lecturers. We learned about the 8 Typographical Systems, we have :" Axial, Radial, Dilatational, Random, Grid, Modular, Transitional, and Bilateral. These are the slides of presentation that each of our group makes. INSTRUCTIONS EXERCISE Week 2 (02.09.2019) For our first exercise, we were asked to make 2 art designs based on the presentation that we did for the first week. The...
Post a Comment
Read more

Advanced Typography - Final Compilation and Reflection

Advanced Typography - Final Compilation and Reflection 25.11.2019 Joseph (0336620) Advanced Typography Final Compilation and Reflection SUBMISSIONS Exercise Project 1 - The Troublemakers Manifesto Colloqium (Key Artwork)   Project 2 - The Troublemakers Manifesto Colloqium (Collaterals) Final Project - Design, Exploration, and Application EXERCISE Typographic Systems Fig 1.1 Axial Design Fig 1.2 Bilateral Design Fig 1.3 Dilatiational Design Fig 1.4 Grid Design Fig 1.5 Modular Design Fig 1.6 Radial Design Fig 1.7 Random Design Fig 1.8 Transitional Design Type and Play 1 Fig 1.9 Extracted Picture. Fig 2.0 X (Final) Fig 2.1 M (Final) Fig 2.2 N (Final) Fig 2.3 V (Final) Fig 2.4 A (Final) Fig 2.5 Type and Play 1 (Final) Type and Play 2 Fig 2.6 Type and Play 2 (Final) PROJECT 1 - The Troublemakers Manifesto Colloqium (Key Artwork) Fig 2.7 Key Artw...
Post a Comment
Read more

Advanced Interactive Design - 202003

Advanced Interactive Design - 202003 04.16.2020 Joseph (0336620) Advanced Interactive Design Exercise Week 1 We started with the MIB briefing, and then we proceeded to learning the Adobe Animate. Unfortunately, I haven't got the software yet. So I proceeded to take notes based on what our lecturer said about the software. Mr.Lun then proceeded to explaining our project one, which is actually shocking because he said that its due week 5 and we were pretty much rushing things. Our project was that we have to create an animation flow for a certain online shop. So for this weeks objective we were told to update our blogs, and start working on what we wanna animate (online store or service). After that we are expected to make an animation workflow and a wireframe for the week. So for my wireframe, I didn't exactly know what sort of apps or services or online stores that I wanna do, we were told to gain inspiration from a website called  UI Movement  and sort go th...
Post a Comment
Read more