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 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

TYPOGRAPHY - EXERCISE

29.08.2019 Joseph (336620) Typography Exercises LECTURES Lecture 1 : Introduction to Typography We started the semester off with an introduction to the module and what to expect in the coming weeks. We are then expected to create a blogger account or an e-portfolio as people call it to insert or showcase our future projects and exercises throughout the semester, to make things easier for new semester students, a sample was given as a guideline for us to follow  Mr. Vinod has also inform us of the materials that is needed for the upcoming activities and task that is to be done before the next meeting or the next class - A4 graph papers and 3.0 Artline Drawing Pen. However before that, Mr. Vinod began with power pointed introduction to Typography. Due to my undersstanding, typography is a step or procedure of  arranging type or processing data and printing from it, a way to make writings readable and eligible for looking and writing. Due to its course and journey ...
Post a Comment
Read more