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

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

Application Design - 202003

Application Design - 202003 04.16.2020 Joseph (0336620) Application Design Exercises and Projects Exercises HTML AND CSS RECAP Our first exercise was recapping on our HTML and CSS skills, this was too get us to warm up on what is to be expected from the upcoming exercises. For this exercise I made a very mini personal website, nothing to crazy. Fig 1.1 Page 1 Fig 1.2 Page 2 Jquery Mobile For this exercise we are to learn jquery mobile codes and minor gsap animation to build this website,  we also learn some minor Javascript coding for this exercise. Project 1-2-Final Project This is a continuous project, for this project we are to make our app that we designed during our last semester. For my app, I decided to make an News Reading with an alarm clock in it. However that idea was cut short and I only made a News Reading App, and its called ReadMeUp. This idea was made with the idea of having a less complicated UI and focused more on Minimalism. Other applications such as ...
Post a Comment
Read more