Interactive Design - Exercises
Kitty Lai Yung Syn (0331933)
Interactive Design
LECTURE 1
30/08/2018
Today, Mr Shamsul briefly talk about our module outline and the differences between UI and UX. So basically, Tim Berners Lee invented the World Wide Web. Initially, Berners Lee's innovation was intended to help scientists share data across a then obscure platform called the internet, a version of which the U.S. government had been using since the 1960s. Ux Design stands for User Experience Design, while UI design stands for User Interface Design. Both elements are crucial to a product and work closely together. But despite their professional relationship, the roles themselves are quite different, referring to very different parts of the process and the design discipline. Where UX Design is a more analytical and technical field, UI Design is closer to what we refer to as graphic design, though the responsibilities are somewhat more complex.
LECTURE 2
06/09/2018
In this week, we did a presentation. By forming a group, we were to pick 6 good and 6 bad websites. Stephanie and I looked for the 6 good websites and the others worked on the bad websites. I found that most of the slides are having layout issues, typefaces issues and readability issues. Below is our embedded lecture slides.
PDF Flie - Lecture Slides
LECTURE 3
13/09/2018
Today, Mr Shamsul lectured UI and UX again with examples since we were not very understand the difference between them. In addition, we learned about some interface elements which used in UI design, such as: call to action, pagination, progress bar, breadcrumb, modal windows, accordion, radio buttons and check buttons.
LECTURE 4
20/09/2018
In week 4, we were given a lecture on 'Type for Screen'. The fonts we chose and the size we used on website affect readability ad legibility. In the old days, people were limited to fonts, such as: Arial, Verdana, Helvetica, Georgia and Times New Roman. Looking at the fonts we have now, we have more selections of various type to express and more choices to use. However, some fonts nowadays do not showed as it is. Thus, Mr Shamsul suggested to use web safe fonts, which are total in 15: Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Bookman, Comic Sans Ms, Trebuchet Ms, Arial Black and Impact.
PDF File - Lecture Slides
LECTURE 5
27/09/2018
For this week, we learned about coding (HTML) and World Wide Web Consortium (W3C). Below are the slides we had in class.
For this week, we learned about coding (HTML) and World Wide Web Consortium (W3C). Below are the slides we had in class.
PDF File - Lecture Slides
LECTURE 6
04/10/2018
This week, Mr Shamsul lectured on the development process before publishing a website. From sketch out our design until testing and launching. Creating a website needs to be planned out beforehand. Even gathering information, such as: purpose, main goals, target audience, has to be clearly stated out. After that, he showed us the examples go using dreamweaver to code out and how to use CSS to add colours and adjusting font size and typefaces.
INSTRUCTION
PDF File
EXERCISE
Week 2
This week we were asked to evaluate 6 good websites and 6 bad websites. We had to accomplish the excel sheet given to state out all the good or bad of the particular website. Mr Shamsul instructed us to choose websites from http://www.thebestdesigns.com and http://www.webbyawards.com .
Although we did not get to present all the slides we chose, we did all the evaluation on Google Excel Sheet.
Week 6
This week, Mr Shamsul checked what we have written down the details and content for our resume, which is our homework from last week. After that we were taught to type in html.
Week 7
Today, we proceeded our work from last week, resume. After that, I tried to add CSS into my html to make it more website-look. I foudn it a bit hard to make an accurate measurement for padding and margin, but overall I was very enjoyed!
After that, Mr Shamsul taught us how to create layout for website. We learned how to create navigation bar, boxes and sections.
Week 8
This week we did a basic website design by using the informations Mr Shamsul uploaded on Google Classroom.
Images given:
This week, Mr Shamsul lectured on the development process before publishing a website. From sketch out our design until testing and launching. Creating a website needs to be planned out beforehand. Even gathering information, such as: purpose, main goals, target audience, has to be clearly stated out. After that, he showed us the examples go using dreamweaver to code out and how to use CSS to add colours and adjusting font size and typefaces.
PDF File - Lecture Slides
LECTURE 7
11/10/2018
Today, the lecture was about styling web with CSS (Cascading Style Sheets). Basically, CSS boxes model can set several properties that affect the appearance of the boxes, control the dimensions of the boxes, create border around the boxes and also can show ad hide boxes. 'Display' is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually blocked or inline.
PDF File - Lecture Slides
INSTRUCTION
PDF File
EXERCISE
Week 2
This week we were asked to evaluate 6 good websites and 6 bad websites. We had to accomplish the excel sheet given to state out all the good or bad of the particular website. Mr Shamsul instructed us to choose websites from http://www.thebestdesigns.com and http://www.webbyawards.com .
Although we did not get to present all the slides we chose, we did all the evaluation on Google Excel Sheet.
PDF Excel Sheet
Link to Google Sheet:
https://docs.google.com/spreadsheets/d/1jDUm1pUo6hfqFx7xLUu76m782hv-iAWO0MCPIBv3698/edit?usp=sharing
These are the good websites we presented:
These are the bad websites we presented:
Week 3
Today we did user interface (UI) for Taylor's University information kiosk. I teamed up with Xiao Shi, Afsah, Irfan and JQ. Our target audiences are parents, visitors and new students. Base on that, we designed an informative kiosk with clear navigation. The requirement of the exercise is that we are designing a tablet-size kiosk. We used AI to create our layout. After that, we printed it out and created a scenario for one of the groups to 'use' it as a new comer. Below are our rough sketches and a PDF of our final look.https://docs.google.com/spreadsheets/d/1jDUm1pUo6hfqFx7xLUu76m782hv-iAWO0MCPIBv3698/edit?usp=sharing
These are the good websites we presented:
 |
| Good Website 1 |
 |
| Good Website 2 |
 |
| Good Website 3 |
 |
| Good Website 4 |
 |
| Good Website 5 |
 |
| Good Website 6 |
These are the bad websites we presented:
 |
| Bad Website 1 |
 |
| Bad Website 2 |
 |
| Bad Website 3 |
 |
| Bad Website 4 |
 |
| Bad Website 5 |
 |
| Bad Website 6 |
Week 3
PDF File
Week 6
This week, Mr Shamsul checked what we have written down the details and content for our resume, which is our homework from last week. After that we were taught to type in html.
 |
| Process 1 |
 |
| Process 2 |
Today, we proceeded our work from last week, resume. After that, I tried to add CSS into my html to make it more website-look. I foudn it a bit hard to make an accurate measurement for padding and margin, but overall I was very enjoyed!
 |
| Process 1 |
 |
| Process 2 |
After that, Mr Shamsul taught us how to create layout for website. We learned how to create navigation bar, boxes and sections.
 |
| Layout process 1 |
 |
| Layout process 2 |
This week we did a basic website design by using the informations Mr Shamsul uploaded on Google Classroom.
PDF File - Exercise uploaded on Google Classroom
Images given:
 |
| Process 1 |
 |
| Process 2 |
 |
| Process 3 |
FEEDBACK
Week 2: There is no perfect website. Every website has pros and cons. We also have to understand the terminologies, such as, parallax scrolling, misleading information, overlapping text, lack of information and etc, when evaluating websites.
Week 3: Mr Shamsul said that we did a great job in designing the campus kiosk. He said that we have all the necessary buttons and the navigation is clear.
Week 4: The layout should be clean but we have to manage the white space and do not go too much boxes because it will look complicated and messy. For specific feedback, the design look fine but try not to go boxes on boxes, which makes the website visually complicated and he also said that the arrangement and the idea of 'tour tickets' in my reference website is a good example.
Week 5: For my project 1, I was told that, my design look clean but the separation of sections is not very clear. Good choice of fonts. Too much white space.
Week 6: While we are saving html file, we have to name the first main page as index.html. This is because it is for website to identify the first main page. For specific feedback, Mr Shamsul asked me to add more information, it could also be my hobby.
Week 7: This week, we were taught to design and style our resume with internal and external style sheet.
REFLECTION
Experience
Week 3: I like working in groups because from what I thought designers working together enable to widen our perspective and views.
Week 4: After the consultation from the lecturer, I thought there are so much to learn in designing a layout. Personally, I think my ideas are too narrow, should be working more in this part by doing more exploration and look for more references, in order to get inspired.
Week 5: I was so enjoyed in learning codes. It was fun and fresh to me as this is a whole new thing from graphics.
Week 6: Coding is a fun thing to learn. It is a new language to me and at the same time, I was quite enjoying the process of coding.
Week 7: Today, we were taught creating website layout by using html and css. Mr Shamsul asked us to try explore how to create a navigation bar.
Week 8: I was creating layouts for 'photoshop' exercise, which the information is uploaded in Google Classroom. I experienced that adjusting CSS sometimes is not that easy and the number I put has to be precise in order to align the images and boxes.
Observations
Week 3: I have seen the importance of communication in a group. Even though we had lots of different ideas and opinions throughout the discussion but we managed well to have a peaceful conversation. Therefore well-communicated is the key to have a better outcome.
Week 4: When we are designing layouts, there are lots of small adjustments have to pay more attention as it affects readers' emotion.
Week 5: I have observed how the differences of elements in html affect the outcome and how html works.
Week 6: I observed how to link CSS to html file in Dreamweaver. Though it was a bit confusing, after taking some time to try out and practice, it was not that difficult.
Week 7: I observed that how html and css work together in Dreamweaver.
Week 8: I observed many examples of the code on the internet and I changed the code slightly and apply to my Dreamweaver.
Findings
Week 3: I found that our kiosk although it was said well done, I think we still have to improve the design of layouts after looking at other groups outcome.
Week 4: Every font we choose and the arrangement of layout affects readers' emotion.
Week 5: I found that I am very interested in coding and am looking up more about coding myself at home.
Week 6: I found that I am quite into coding, especially the process going through.
Week 7: I was exploring in class and I found CSS codes are very interesting and tried various changes to my 'resume'.
Week 8: I found that even though taking codes from internet examples is easy, it is easy to confuse ourselves if we did not organize well or copy the html properly.
FURTHER READING
TYPE ON SCREEN by Ellen Lupton
Typographic HTML Tags
- Designers use simple HTML tags to style text inline - marketing differences inside a larger element such as a paragraph.
- Physical tags simply tell the browser to make changes in the display of text, such as bold, italic, or underline.
- Logical tags, may display similarly, but they are used to impart meaning to the text they enclose.
- Logical tags greatly improve the accessibility of a website, extending the reach of your content.
Comments
Post a Comment