Interactive Design - EXERCISE

Week 1 - Week 4
Qaezie Ayeman Ramlan (0332981)
Interactive Design -
Exercise

---

Instruction

---

Lecture Notes 

Lecture 1 _ Introduction to the module

Week 2
On our first class, Mr. Shamsul briefed us about the module and the software that we will be using are Adobe Dreamweaver and Brackets. Through this module, we will learn on how to do web design with coding and learn about HTML and CSS.

Lecture 2 _ 
Week 2
Mr. Shamsul introduced us to user experience (UX) and user interface (UI) design. He explained the difference between UX design and UI design.

Lecture 3 _
Week 3
Mr. Shamsul gave us a lecture about web standards. He also assigned us and explained about our first project. We have to design a landing page and we have to choose our own topic. The size have to be 1920 x 1080 (web large) on Adobe Illustrator.




Lecture 4 _
Week 4

Mr. Shamsul taught us on how to use HTML using TextEdit (Mac)/ Notepad (Windows).

Lecture  _
Week 5

Mr. Shamsul taught us on how to use HTML using TextEdit (Mac)/ Notepad (Windows).

Lecture 6_CSS Boxes Model
Week 6

We learned on how to create containers and boxes from css for a website layout.


Lecture 7_No lecture
Week 7
No lecture today as we were focused on our Adobe Photoshop website layout exercise.

Lecture 8_Responsive Website
Week 8
We learned about on how to create a responsive website with Bootstrap. 

---

Exercise

Week 1_Good & Bad Websites
Our task of the day was to do a presentation on 'Good and Bad Websites' from https://www.webbyawards.com/ and https://www.thebestdesigns.com/. We were split into 4 groups among the class. The judgment must be made based on the usability, accessibility, layout as well as the visual aesthetic of it. The following are the good and bad websites that my group has decided on.

Good Websites

Fig 1 : https://wpengine.com/

Fig 2 : https://www.hopewellbrewing.com/beer

Fig 3 : https://clothandcompany.com/

Fig 4 : https://airtifact.heythemers.com/

Bad Websites

Fig 5 : https://www.netted.net/guides/

Fig 6 : https://airnauts.com/

Surveying the Possibilities

Week 2_Basic Interface Design

For this week's exercise, we were again divided into 5 groups. I was in group 3, we were assigned to design an interface for an information kiosk for Taylor's University with a scenario in mind. Our group's scenario was for new students to find the Taylor's University library.

Below is the paper prototype of our interface :-

Week 4_HTML Document Development

In this week's exercise, we were introduced into the basic of HTML. Mr Shamsul guided us on how to make a website using HTML on TextEdit ( Notepad for Windows user). The exercise aims to familiarise us with HTML basic structure and code tags.

We were then asked to write 4 sections about ourselves or something we liked , and the 4 sections should include two paragraphs, lists, images and links.

Week 5_HTML and CSS Development

We start to decorate our blog with colours, set margins, and learn the basics of html in general. We practice using the html we've created on the textedit / notepad, paste it all to Adobe Dreamweaver. We had to add additional HTML and CSS elements that we learned from the lecture from there.

Fig 5.1 CSS elements in Dreamweaver

Fig 5.3 HTML elements in Dreamweaver

Fig 5.5 HTML elements in Dreamweaver

Week 6_Layout Exercise

Today we were guided by our lecturers on how to create a website layout.
Unfortunately, i tried using the same index file for my final project, but i ended up saving it and because of it its gone.

Website Layout Exercise
09.10.19 (Week 7)

We had to design a Adobe Photoshop website layout this week using the CSS that we learned last week with HTML. Then we had our lecturers come around and take a look at our coding and layout.

Fig 7.1 HTML codes

Fig 7.2 HTML codes

Fig 7.3 HTML codes

Fig 7.4 HTML codes

Fig 7.5 HTML codes

Fig 7.6 CSS codes

Fig 7.7 CSS codes

Fig 7.7 CSS codes

Fig 7.8 CSS codes

Fig 7.9 CSS codes

Fig 7.10 CSS codes

Fig 7.11 CSS codes

The link to the website : https://qaezielayoutexercise.000webhostapp.com

Responsive Website
15.10.19 (Week 8)
We learned on how to use the example codes on Bootstrap. We downloaded the source and applied it into our Adobe Dreamweaver and also linked the CSS source. We used an example layout called "Carousel". This exercise will help us in our upcoming Project 2 which is a microsite for our "The Troublemakers Manifesto : A Design Colloquium" collateral.