Interactive Design - Exercises

04.04.2019 - .2019 | Week 1 - Week
Kang Jiet Yee | 0336776
Interactive Design
Exercise

---

Lectures

Week 1 | Web Design & New Media

04.04.2019

After briefing of MIB, we are assigned into groups and start to work on our exercise, which is to determine the good and bad web design.

Lecture Slides :

Week 2 | UI vs UX

11.04.2019

Lecture Slides :

Week 3 | Web Standards 

18.04.2019

Lecture Slides:

After lecture, Mr. Shamsul Brief us about project 1, and we started to sketch our idea out.

Week 4 

Coding Exercise using TextEdit, develop a website using html

Week 5

Lecture Slides :

Week 6

Lecture Slides :

---

Instructions

---

Exercises 

Week 1 : Good & Bad Websites

Good Websites Examples :

1. Hobes

Screenshot of Website

2. All That Grows

Screenshot of Website

3. Twenty Twenty Two

Screenshot of Website

4. Jonathan Patterson

Screenshot of Website

5. Dr Roebucks

Screenshot of Website

6. Smash Mallow

Screenshot of Website

Bad Websites Example :

1. Marcus Eriksson

Screenshot of Website

2. Creep Fest

Screenshot of Website

3. Merch Gunsberg

Screenshot of Website

4. Outline

5. Oust

6. Made by Few

Final Outcome : Embedded PDF -  Good and Bad Webpage Design

Week 2 : User Interface Design 

Design an user interface for Syopz in a group.

Process of design in group:

Process of design

Process of design 

Final Outcome:

Final Outcome : Sketch of User Interface

Week 4 : Simple HTML

Screenshot of Code : Link to HTML File

Screenshot of Webpage :

Week 5 : HTML Exercise 

After learning the basic of html, we are assigned to create a simple website coding using textedit, which containt 4 different sections and navigation. Also practice and explore differnt functions of code in html.

Final Outcome : HTML exercise

Final Outcome : HTML exercise
Screenshot of Webpage :

Week 7 : Layout Exercise

Layout Exercise - Practice

We pratice to create layout and style formatting using dream weaver before we start to work on our layout exercise.

Screeenshot of HTML in Dreamweaver 

Screeenshot of CSS in Dreamweaver 

Ouctome of Practice : Layout Exercise

Instructions :

Design & Coding Process:

Screeenshot of HTML in Dreamweaver 

Screeenshot of HTML in Dreamweaver 

Final Outcome : Layout Exercise

Final Outcome : Layout Exercise

Final Outcome : Layout Exercise

---

Feedback

Week 1

General Feedback :
Mr Shamsul commented that the overall presentation and our result are well done.

Week 2

Specific feedback (Group) :

Mr Shamsul advice us to always aware about some small part in our user interface design, sometimes we might missed some important parts. Besides, a navigation platform must alway use either icon or names for buttons, since we must consider about our user needs and also limitations.

Week 3

Specific Feedback:

For my project one idea, Mr Shamsul advice me to be more specific about my , refer to some good webpage for reference and sketch the layout before working on digitise 

Week 4

Specific Feedback (Project 1):
Mr Shamsul commented that the first part of my landing page was overwhelm, the information was too much in a place
The purpose of website still unclear
the width and distance should be same between properties
need to include call to action

Week 5

Specific Feedback:
Mr Shamsul commented that my website overall done a good job, but lack of the "back to top" navigation, and advice me to add it into my webpage before I submit my final outcome of it.

Week 6

General Feedback:
Mr Shamsul advised us no to fully rely on class information, we should do more readings related to things we learned and explore more by utilising the Internet well.

Specific Feedback:
Mr Shamsul said my css overall working well, can explore more functions in order to improve our skills.

Week 7

General Feedback:

Week 8

Specific Feedback:
Mr Shamsul said my work is well done which having a very nice layout, but the footer size need to be increase and the font colour of heading article need to change to a more readable colour. The outcome was overall looking good which i need to proceed to sketch out my idea for Project 2.

Week 9

Specific Feedback:
Mr Shamsul commented that my layout exercise was overall a very well done work, which i need to keep it up. Besides, he advise me try to adjust adjust the line lenght and change the colour of section to more contrast colour.