INTERACTIVE DESIGN - EXERCISE

Alicia Lee Hui Min ( 0331719 )

30/8/2018 - 11/10/2018 (week 1- week 7)

Interactive Design

Exercises

---

INSTRUCTIONS

---

LECTURE NOTES

 (Week 1) Briefing

In the first class, we were introduced to what this module is about and what we'll be learning and doing throughout the semester. As usual, we went through the MIB to have a look at the weekly and assessment plans. There was no lecture for the first day of class, instead we discussed on the differences between UI and UX. I learned that UI touches on the visual elements and design, while UX focuses on the interaction and usability. After that, he told us to search about the invention of the web. From there, I found out that the World Wide Web was invented in 1989 by Tim Berners-Lee, founding director of the World Wide Web Foundation.

 (Week 2) Web Evaluation

Before doing the web evaluation in class, Mr Shamsul provided us the slides for this exercise in google classroom so that we would know what we would be doing this week.

PDF of slides

 Mr Shamsul and Mr Lun gave us a task of filling up a spreadsheet of 6 good websites, and 6 bad websites and evaluate them. We had to use two different websites to choose the 12 websites which can be found from these two websites given by Mr Shamsul.  We were to do this in a group. My group members for this exercise were Suzy, Jessica, Megan, Adele and Farzana.

•  https://www.thebestdesigns.com/ 
•  https://www.webbyawards.com/

Fig 1.1 Template given by lecturer

Using the template above, we had to fill in the blanks and give specific explanations for each chosen website. After selecting the good and bad websites and evaluating them, we had to present them in front of the class. After class, Mr Lun also shared some traits of a good web design in Google Classroom which we discussed about in class during the presentations.

Traits of a good web design:

• Mobile compatibility 
• Fast load time 
• Browser consistency 
• Easily accessible to users 
• Well planned information architecture 
•  Well formatted content 
• Effective navigation 
• Good use of colour scheme 

 (Week 3) UI vs UX

In this class, Mr Shamsul gave a lecture on the difference between UX and UI, and what each of them are about.

UX
- Buttons should be physically pressed down when clicked
- UX designers focus on the structure as well as layout of the content, navigation and how     the user interact
- Site-maps, user flows, prototypes, wireframes

UI
- Series of buttons and how they look visually
- UI designers focus on anticipating what the users might need
- Ensure interface has elements that are easy to access
- Interaction design, visual design, information architecture
- Interface elements: input controls, navigational components, informational components, containers

Golden rules of interface design
- Ease of learning, efficiency of use, memorability, minimise errors, satisfy user

PDF of lecture slides

27/09/18 (Week 5)

This week, we learned about web standards. The central organisation who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C)World Wide Web Consortium (W3C) is the central organisation responsible for creating and maintaining web standards. W3C defined standard markup languages such as HTML & CSS. Web standards are essential in making sure the internet is a better place for both visitors and developers.

The difference between a static website and a dynamic website is that a static website has to be done from scratch if any changes are to be done. Dynamic websites on the other hand can be updated immediately for example blogger whereby the user is able to update their content instantly.

When it comes to the structure of the page, the use of heading and subheading is important as it reflects hierarchy of information. HTML describes the structure of the pages, whereby the HTML code is made up of characters that live inside angled brackets. After the lecture, we were given an exercise to try out HTML using Text edit.

PDF of lecture slides

04/10/18 (Week 6)

In this lecture, we learned about the initial planning phase when it comes to creating a good web design. Before we start the coding process, we should do some sketches. Having a structure of the website is beneficial in the development process as we would already have an idea of what it'll be like. A great design doesn't just revolve around the idea of the visuals, it's also about creating a website that has a comprehensive strategy.

Process

1. Gathering information

2. Planning - Sitemap and Wireframe Creation

3. Design - Page Layouts

4. Testing, Review and Launch

PDF of lecture slides

There were 2 sets of lecture slides presented this week. From the second lecture, we learned about ID attribute and class attribute, block elements and inline elements. The other part of the lecture discusses about CSS which is what we'll be doing to our resume. From my understanding, CSS is used to style how the contents/elements should appear which also includes the background colours, font size, type family and more.Besides that, we also learned about the two parts of a CSS rule which are selector and declaration.

PDF of slides

11/10/18 (Week 7)

In this week's lecture, we learned about CSS boxes model which could be set with several properties that will effect the visual appearance of the boxes. 

PDF of slides

---

EXERCISE 1 - WEB EVALUATION (WEEK 2)

Mr Shamsul and Mr Lun gave us a task of filling up a spreadsheet of 6 good websites, and 6 bad websites and evaluate them. We had to use two different websites to choose the 12 websites which can be found from these two websites given by Mr Shamsul.  We were to do this in a group. My group members for this exercise were Suzy, Jessica, Megan, Adele and Farzana.

•  https://www.thebestdesigns.com/ 
•  https://www.webbyawards.com/

6 good websites

Fig2.1: Good Website #1 http://refugeeswelcometodinner.com

Fig2.2: Good Website #2 https://panoraven.com/en

Fig2.3: Good Website #3 https://drroebucks.com

Fig2.4: Good Website #4 https://ester.co

Fig2.5: Good Website #5 https://www.aesop.com/us/

Fig2.6: Good Website #6 https://icosyndicate.org

 6 bad websites

Fig2.7: Bad Website #1 http://culture.basicagency.com/faq/

Fig2.8: Bad Website #2 http://vis.sciencemag.org/eggs/

Fig2.9: Bad Website #3 https://details.co.jp/tokyo/info/

Fig2.10: Bad Website #4 https://bloomscape.com

Fig2.11: Bad Website #5 http://destroyer.la

Fig2.12: Bad Website #6 https://www.webbyawards.com

Here is the link to our Google Sheets, showing our evaluation of the 12 websites.
https://docs.google.com/spreadsheets/d/1munR9GFlhhUlydgALYsMBB9TZ9z513jHQY1TbK7BxR8/edit?usp=sharing

PDF of my group's web evaluation

EXERCISE 2 - BASIC INTERFACE DESIGN (WEEK 3)


After the lecture, we were given the brief on our next exercise, which is to design a user interface for Taylor's University Information Kiosk. We need to select a specific target audience. The goal of this interactive information kiosk is to inform users on how to access Taylor’s University. I teamed up with Adele, Farzana, Megan, Alicia and Suzy for this exercise. Before designing it on Adobe Illustrator, we sketched out our ideas and decidde on our target audience and scenario.

Target Audience: New students at Taylor's University

Scenario: A new student wants to kill some time somewhere but has no access to the library due to the fact that their student ID has not been made. Therefore, the student plans to go to SLC (Student Life Centre), but needs help with the directions.

Fig2.13: Sketches of ideas

Fig2.14: Screenshot of the process in Adobe Illustrator

Here is the final outcome of my group's interface design!

PDF of final outcome for exercise 2

Each group got to test out the other group's interface design and have another group test ours in return. Then, we were given a test report format to fill in, regarding the group's design we tested out where we critic based on the usability.

27/09/18 (Week 5)

For this class, Mr Shamsul told us to use Text edit to try out HTML. We learned the basic elements such as title, headings, paragraphs and lists. 

Fig3.0 HTML on Text Edit

Fig3.1 Open in Web

Exercise 3 - HTML Document Development

27/09/18 (Week 5)

For the next exercise, we'll be creating a simple HTML page about ourselves. In google classroom, Mr Shamsul provided the first set of instructions for us, and that is to prepare our resume. The necessary content to include was written in the instructions and we could also refer to some examples online.

Fig3.2: Instruction given on google classroom

PDF of resume

04/10/18 (Week 6)

This week, we learned about how Adobe Dreamweaver works, as we'll be creating a simple html file for the resume that we've prepared.

Fig 3.3 Process

Fig 3.4 Process

11/10/18 (Week 7)

We continued where we left off in the previous week, which was creating a simple html file for our resume. This week, we tried out how CSS works and styled our resume to make it look less boring. I tried changing the background colour, font families, letter-spacing, font colour, alignment, images, and some others.

Fig 3.5 Process

Fig 3.6 HTML Code

Fig 3.7 Process

Fig 3.8 Final Outcome on Web

Fig 3.9 Final Outcome on Web

Fig 3.10 Final Outcome on Web

After we receive the lecture for the week, we tried out how to use CSS by creating an external css file, and link it to the html. From there, we got to try out how to create borders and control the height, width, overflow, padding, float, display, margin and some others with the guide of Mr Shamsul.

Fig 3.11 Process

Fig 3.12 Process

Fig 3.13 Process

Fig 3.14 Outcome on Web

Fig 3.15 Outcome on Web

---

FEEDBACK

Week 2
General feedback: During the presentation, Mr Shamsul mentioned that we should be more specific when talking about the good and bad parts of a website by using terms like parallax scrolling, minimum scrolling, originality, and more.

Week 3

General feedback: Mr Shamsul mentioned that images should have labels stated and placed clearly so users will know what it is about. If icons are used, it is ideal to use the ones that are globally recognised but if not labels should be placed. He also said that we need to have a clear target audience so that we can design specifically catered to them.

Specific feedback: For my group’s design, we should’ve given an option for users to go back to the home page straight away rather than clicking back multiple times, by having both back and home button on the page. Overall, Mr Shamsul said that it was good. 

Week 5
Specific Feedback: The design is between average and good. Colour choice is quite dull. Navigation clear and placement of element is okay.

Week 6

General feedback: When using Adobe Dreamweaver, we should always save the file first and save it as index.html. A folder should also be create beforehand to store all the relating files inside so that it would be easier to locate them later on. 

Week 7
No feedback was given this week

Week 8

No feedback was given this week

---

REFLECTION

Experience

Week 1;We learned about UX and UI and also when and who made the web which was interesting to know. Besides that we were also given a glimpse of what this subject would be like and also we got to see a preview of what we would need to do which is coding.Week 2;We did a group presentation and learned  how to evaluate and critic websites based on it design and usability. Week 3; We dove deeper into UX and UI as we did a group exercise on designing a information kiosk for Taylor's University which was quite fun.Week 5; This week we tried out HTML, at first it was a bit confusing and i would forget to close them but it was quite fun once i got the hang of it.Week6; I got to learn how to code using Adobe Dreamweaver and create a html file for the resume that I had prepared. Week 7; I got to learn how to style a html file internally, as well as how to do the external css way. Week 8, I got to do an exercise whereby the information is given to us on word document and we need to create a layout for it through html and css codes.

Observation

Week 1;I observed that this subject requires a lot of coding and also understanding how people interact with websites and with that knowledge using it to create a purposeful website that has a good design and great usability. Week 2; I observed that every website has its own unique design which caters to their purpose such as how a property company would have a website that looks more professional and gives the feel of a property company.Week 3; I observed that the information should be categorised neatly and orderly in an information kiosk and also that it should be self explanatory so that a user would be able to use it without questioning what to press.Week 5; I observe that doing HTML isn't that easy and once a small piece is missing an error can occur.Week 6; I observed that it is much easier and convenient to do coding on Dreamweaver rather than using notepad or text edit, as the codes are already there, and the closing element is automatically given. Week7; I observed that it is really different to design and style the layout of a page using Dreamweaver where its all and only with the usage of codes, compared to using Illustrator/Photoshop where we would just get to drag and place things wherever we want. Week8;I observed that I was more familiar with coding, but of course still a little confused with some of the codes.

Findings

Week 1;Looking at some examples shown, I realised that creating a website using all these codes isn't going to be simple, and it looked like it would take a lot of time and patience to create the website as we were told that in the process there would be some malfunctions that we would experience.
Week 2; I realised that design plays a part in a website and instead there are other things to consider such as usability and how everything is placed which made me realised that a lot of work and thought goes into creating a website and made it have a new level of appreciation for web designers. Week 3; I found that it is essential that the information kiosk is easy for user to navigate around it and also understandable which made me understand what Mr Shamsul said which is that functionality comes first while aesthetics comes second.Week 5; I found it easier to do HTML once i got the hang of it and also after making some mistakes. Week6; I found that HTML is used for the content of the website while CSS can be used to change the style of HTML. Week7; I found that it was pretty easy to use CSS once I got the hang of it. Week 8; I found out that one small mistake or missing elementcin coding could cause the whole thing to go wrong.

---

FURTHER READING

The Web Designer's 101 Most Important Decisions by Scott Parker 

13/09/18 (Week 3)

Figure 3.1 Front Cover

I decided to read up on layouts as it would help me in the first assignment. In the section layout, the author talked about keeping it in proportion. The golden ratio can be applied to set height relative  to the width of an element, so a box that is 300px wide should be 185px high to follow the rules of this divine proportion. Another rule many artist will stick to is the rule of thirds, which is where a composition is split into nine equal parts to form a three by three grid. Rather than place the main elements in the centre of the picture, you would position them at one of the four intersections of the grid. This principle can also be used in your web page to focus attention on the key content. You can also use grids to give your layouts more balance and structure.