INTERACTIVE DESIGN - EXERCISES
Yeap Phay Min (0331073)
Interactive Design
Exercises
LECTURE NOTES
30/08/18 (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 module information booklet to have a look at the weekly and assessment plans. There was no lecture for the first day of class. Instead, Mr Shamsul asked questions about UI (user interface) and UX (user experience), and see if we understood the meaning and the difference. I learned that UI touches on the visual elements and the 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. Later in 1990, he wrote the foundation of today's web which are HTML (Hypertext Markup Language), URI (Uniform Resource Identifier) and HTTP (Hypertext Transfer Protocol).
06/09/18 (Week 2): Web Evaluation
Before we started on the group presentation to evaluate the good and bad websites, Mr Shamsul shared with us a set of slides, which gives us an overview of what we're learning and doing, the expected outcomes after this first exercise and some questions for us to think and discuss about while evaluating the websites.
PDF of slides
After class, Mr Lun also shared some points on Google Classroom, listing traits of a good web design in which we discussed about in class during the presentations.
Traits of a good web design:
1. Mobile compatibility
2. Fast load time
3. Browser consistency
4. Easily accessible to users
5. Well planned information architecture
6. Well formatted content
7. Effective navigation
8. Good use of colour scheme
8. Good use of colour scheme
13/09/18 (Week 3): UI vs UX
In this class, Mr Shamsul gave us a lecture on the difference between UX and UI, and what each of the are briefly 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 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): Web Standards
This week, we got to learn about web standards. Back in the days, people would access the web with keyboard, mouse and motion where as now there are many ways. Hardware and software issues include having variety of browsers, variety or operating systems and variety of screen resolutions. Since there are so many ways for people to access the web, theres a high chance that the website will appear differently to many of the users. It is also important to remember that the content is the most important part.
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.
When it comes to the structure of the page, it is important to have clear hierarchy of information by using headings and sub-headings to differentiate the content. HTML describes structure the structure of the pages, by having codes that are made up of characters within angled brackets. Then, we proceeded to learn more about HTML such as the body, head and title.
PDF of lecture slides
04/10/18 (Week 6): Website Development Process
In this lecture, I got to learn and understand about the initial planning phase when it comes to creating a good web design. Before we even go into the coding process, we should start by doing some sketches. Having a structure of the web site 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
- Purpose, main goals, target audience
2. Planning - Sitemap and Wireframe Creation
- Usually presented to a client
- Sitemap: relations between main areas of web to help understand how usable the final product will be
-Card sorting: method used to design, categorise and evaluate the information architecture
3. Design - Page Layouts
-Visual content: images, videos
-Website layout: graphic sketch / actual graphic design
- Represent information structure and visualise content
4. Testing, Review and Launch
- Most common area of a process
- To ensure there are no errors such as broken links
- FTP (File Transfer Protocol): software used to act as a final test to make sure files are installed without any errors
PDF of slides
04/10/18 (Week 6): Extra Markup / Cascading Style Sheet (CSS)
There were 2 sets of lecture slides presented for this week. From the second lecture, I got to learn about ID attribute and class attribute, block elements and inline elements. The other part of the lecture discusses about Cascading Style Sheet (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. This includes the background colours, font size, type family and more.
Besides that, I learned about the two parts of a CSS rule which are selector and declaration.
Selector: indication of which elements the rule applies to
Declaration: indication of the way elements should be styled based on elements in selector
Property: indication of aspects of elects to be changed (colour, font)
Values: specification of settings to be used for the chosen properties
 |
| Example |
PDF of slides
11/10/18 (Week 7)
From this week's lecture, I got to learn about CSS boxes model in which could be set with several properties that will effect the visual appearance of the boxes. This can be used to control the dimensions of the boxes and create borders. When it comes to the width and height. of the box dimensions, it is by default that the size of the box is just enough to contain the contents. Using the width and height properties will allow us to control the dimensions. To specify the size, it is either by pixels or percentage. Besides that, pages can be expanded and shrunk so the min-width as well as max-width should be adjusted to make sure all the contents are legible. Same goes to the height, min-height and max-height can be adjusted. As for the overflowing content (overflow), this property tells browser what to do when the content larger than the box itself.
 |
| Example of border, margin and padding |
As for the display property, it is said to be an essential property when it comes to controlling the layout. Each element consists of a default display value and it depends on the type of element it is, usually block or inline.
 |
| Example of block and inline element |
PDF of slides
INSTRUCTIONS
Exercise 1 - Web Evaluation
06/09/18 (Week 2)
In today's class, we learned how to evaluate and critic websites based on it's purpose, design and usability. We were split into groups and our task for this activity was to select 6 good websites and 6 bad websites from https://www.webbyawards.com and https://www.thebestdesigns.com , and present it's pros and cons, target audience and purpose. We were also given a template to fill out the necessary details based on each of the 12 chosen websites.
I teamed up with Adele, Farzana, Megan, Alicia and Suzy!
Here are the 6 good websites.
 |
| Fig1.1: Good Website #1 http://refugeeswelcometodinner.com |
 |
| Fig1.2: Good Website #2 https://panoraven.com/en |
 |
| Fig1.3: Good Website #3 https://drroebucks.com |
 |
| Fig1.4: Good Website #4 https://ester.co |
 |
| Fig1.5: Good Website #5 https://www.aesop.com/us/ |
 |
| Fig1.6: Good Website #6 https://icosyndicate.org |
& Here are the 6 bad websites.
 |
| Fig1.7: Bad Website #1 http://culture.basicagency.com/faq/ |
 |
| Fig1.8: Bad Website #2 http://vis.sciencemag.org/eggs/ |
 |
| Fig1.9: Bad Website #3 https://details.co.jp/tokyo/info/ |
 |
| Fig1.10: Bad Website #4 https://bloomscape.com |
 |
| Fig1.11: Bad Website #5 http://destroyer.la |
 |
| Fig1.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
13/09/18 (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 and consider what are their needs. 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 started to sketch out our ideas and decide on our target audience and scenario.
Target Audience: New students at Taylor's University
Scenario: A new student has joined Taylor's University and wants to find a place to relax and maybe do some work. The student ID isn't prepared yet so there is no access to the library. Therefore, the student plans to go to SLC (Student Life Centre), but needs help with the directions.
 |
| Fig2.1: Sketches of ideas |
 |
| Fig2.2: 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 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.
PDF of test report
27/09/18 (Week 5)
For this class, we were introduced to HTML. Mr Shamsul told us to use notepad/text edit and give HTML a try, to have a feel of what coding is like. We learned how to use the basic elements such as title, headings, paragraphs and lists. This was useful as I got to try out how to code, before doing our next exercise.
 |
| Fig3.1: Attempt at writing HTML codes |
 |
| Fig3.2: Outcome of the page |
Exercise 3 - HTML Document Development
27/09/18 (Week 5)
For the next exercise, we were told that we'll be creating a simple HTML page about ourselves. In google classroom, Mr Shamsul gave us the first set of instructions, and that is to prepare our resume. This should include our personal information, education information, work experience if any and our skills/interests.
 |
| Fig3.3: Instruction given on google classroom |
PDF of resume prepared (with additional content after receiving feedback that it was insufficient)
04/10/18 (Week 6)
This week, we got to learn about how Adobe Dreamweaver works, as we'll be creating a simple html file for our resume prepared.
 |
| Fig3.4: Process of coding in Adobe Dreamweaver #1 |
 |
| Fig3.5: Process of coding in Adobe Dreamweaver #2 |
PDF of html file
 |
| Fig3.6: Outcome of HTML file on browser - Part 1 |
 |
| Fig3.7: Outcome of HTML file on browser - Part 2 |
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 got to try out how CSS works and style our resume to make it look less boring. I tried changing the background colour, font families, letter-spacing, font colour, alignment, images, gifs, and some others.
 |
| Fig3.8: Using Google Fonts to embed the selected fonts (copied and pasted into html file) |
 |
| Fig3.9: Process of coding in Adobe Dreamweaver #1 |
 |
| Fig3.10: Process of coding in Adobe Dreamweaver #2 |
 |
| Fig3.11: Outcome of HTML file on browser - Part 1 |
 |
| Fig3.12: Outcome of HTML file on browser - Part 2 |
 |
| Fig3.13: Outcome of HTML file on browser - Part 3 |
 |
| Fig3.14: Process of coding in Adobe Dreamweaver #1 |
 |
| Fig3.15: How the page looks like on the browser #1 |
 |
| Fig3.15: How the page looks like on the browser #2 |
 |
| Fig3.16: Sample of the codes given on Google Classroom |
 |
| Fig3.17: Sample of the HTML file on browser |
 |
| Fig3.18: Process of adding logo and navigation in Adobe Dreamweaver |
 |
| Fig3.19: HTML Codes |
 |
| Fig3.20: CSS Codes |
 |
| Fig3.21: Outcome of the page with logo and navigation |
 |
| Fig3.22: Outcome of the page with logo and navigation (with hover effect) |
This week, we were given an exercise to do which requires html and css. Mr Shamsul uploaded a file which includes the instructions as well as the contents to include in the layout we'll be creating.
PDF of file given in Google Classroom
We were also told to start with some wireframe sketches to have a better idea of what type of layout we'll be creating in Adobe Dreamweaver.
 |
| Fig3.23: Wireframe Sketches |
I decided to go with the bottom right layout. To start off, I created a html file and typed out the necessary codes and content. Then I proceeded with adding the pictures that were given to us. Once I got the content written out, I moved on to creating a css file to change the style of the layout.
 |
| Fig3.24: Process of coding in Adobe Dreamweaver #1 |
 |
| Fig3.25: Process of coding in Adobe Dreamweaver #2 |
 |
| Fig3.26: Adding hyperlink |
 |
| Fig3.27: Part of the HTML Codes |
 |
| Fig3.28: Part of the CSS Codes |
 |
| Fig3.29: Outcome of layout - Part 1 |
 |
| Fig3.30: Outcome of layout - Part 2 |
 |
| Fig3.31: Outcome of layout - Part 3 |
FEEDBACK
08/09/18 (Week 2)
General feedback: During the presentations on evaluating websites, Mr Shamsul mentioned that we should be more specific when talking about the good and bad parts of a website as well as the target audience. We should also use proper terms, such as content formatting, parallax scrolling, hamburger menu and others.
13/09/18 (Week 3)
General feedback: For the exercise on designing a user interface for Taylor’s University Interactive Information Kiosk, 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. Target audience is also really important as we need to know what are their needs.
Specific feedback: As 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.
Specific feedback: As 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.
04/10/18 (Week 6)
General feedback: For the resume in word document, we should make sure there is sufficient amount of information. When using Adobe Dreamweaver, we should always save the file first, as index.html. A folder should also be create beforehand to store all the relating files inside.
Specific feedback: Mr Shamsul mentioned that I could add more content to my resume. As the for html file created in Dreamweaver, it was good that I managed to complete the basic form of it and I could try adding lines to the page using the code <hr>.
18/10/18 (Week 8)
Specific feedback: For the exercise, Mr Shamsul mentioned that the layout I’ve done looks clean and neat, and it’s good that I managed to finish most of it in class.
REFLECTION
EXPERIENCE
30/08/18 (Week 1)
Besides learning about UI and UX as well as the invention of the web, I got to have a look at an example of a website and all the codes that make up the website. In that moment I'm pretty sure my brain froze as I had no clue what all the codes meant.
08/09/18 (Week 2)
In today's class, I got to do a group exercise/presentation and learn how to evaluate and critic websites based on it design, purpose and usability. Through this, I got to browse through many different websites and gain inspiration from the good ones.
13/09/18 (Week 3)
This week, I got to learn more about UI & UX and do a group exercise. Through the group exercise, I got to have an experience on what's it like to design a user interface which was pretty fun to me.
27/09/18 (Week 5)
I got to learn about web standards as well as HTML. I had the experience of trying out simple codes which was interesting as I got to look at how the codes translate into the web. I also got to start preparing my resume.
04/10/18 (Week 6)
This week I got to learn how to code using Adobe Dreamweaver which I never used before. Using Dreamweaver, I got to create the html file for the resume that I prepared.
11/10/18 (Week 7)
In this class, I got to learn how to style a html file internally, as well as how to do the external css way by creating a different file while linking them together. It was pretty interesting to style the layout using codes.
18/10/18 (Week 8)
For this class 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
30/08/18 (Week 1)
I observed that there are many various codes for various things, which I currently do not know about but I'll be excited to learn.
08/09/18 (Week 2)
From this exercise, I observed that every website has it's own different traits, some in a good way, and some in a not-so-good way. I also noticed that this is a really useful exercise as I got to observe what a good website consists of.
13/09/18 (Week 3)
I observed through this exercise that while there are many information that can be put into the information kiosk, it is ideal to categorise them into different sections for easier and clearer navigation.
27/09/18 (Week 5)
While trying out the HTML codes, I observed that whatever we type in text edit, it has to be in a certain format for it to appear the way we want on the web.
04/10/18 (Week 6)
By creating the html file for our resume in Dreamweaver, I observed that it is much easier and convenient to get it done there rather than using notepad or text edit, as the codes are already there, and the closing element is automatically given.
11/10/18 (Week 7)
I observed that it is really different and new to me to design and style the layout of a page using Dreamweaver where its all codes and codes and codes, compared to using Illustrator/Photoshop where we just get to drag and place things wherever we want.
18/10/18 (Week 8)
From this exercise, I observed that I was more familiar with coding, but of course still a little confused with some of the codes, especially the navigation at the top as I couldn't get the words to be where I wanted them to be.
FINDINGS
30/08/18 (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 to create the website.
08/09/18 (Week 2)
Through today's class, I found that design isn't the only important part of creating a good website. It may be visually pleasing, but if it can't be navigated easily and doesn't showcase information clearly and effectively, it isn't a good website.
13/09/18 (Week 3)
While doing this exercise, I found that it is important to make sure the navigation is easy for the users to access. I also realised the importance of making sure the information kiosk satisfies our target audience's needs.
27/09/18 (Week 5)
Through trying out the simple HTML codes, I found that it is essential to make sure we add the closing element</> for the codes to work.
04/10/18 (Week 6)
From this exercise, I found and learned that HTML and CSS both have connections, as HTML is used for the content of the website while CSS can be used to change the style of HTML. Initially, I thought they were two separate things.
11/10/18 (Week 7)
Through this exercise done in class, I found that even though using codes to create and style a page might seem complicated, it does feel really rewarding to see how it looks like on the browser after typing some codes to change certain elements of the page.
18/10/18 (Week 8)
I found that all the different codes can be a little overwhelming for me, but I'm glad I managed to do the exercise even though I had problems with some of the areas along the way.
FURTHER READING
500 Simple Website: Hints, Tips, and Techniques by Jamie Freeman
 |
| Fig3.1: Book Cover |
As stated in the title, this book contains 500 tips and hints on planning your site, either for personal or professional purposes. This book serves as a guide to the basics of web design packed with essential advice. It also mentions how the functionality of a website is important, as a successful website needs to be accessible to as many users as possible.
Starting out with the basics, I learned that it is important to start with planning. Planning phase can account for 60% of the time requires, but it is time that's well spent. Planning by drawing a site map is great as it helps to plan the overall structure of a site by categorising related items together for easy navigation later on. Another thing to keep in mind is that users browse websites page to page, so all of the pages need to be clear no matter what order it is viewed as. It isn't like a book where one page logically follows on from another. Having a purpose for the website is essential as well. When planning and designing a website, remember to have easy and clear navigations back to the home page as some users may have followed a link that bypasses the home page. Having too many choices in the main menu is not ideal as it may appear cluttered. Therefore, organising content into section with hierarchy should be done. Identifying target audience is important aspect of creating a website as well, because without a clear idea of the audience it'll be harder to plan accordingly and your site may never quite hit the mark. I also learned understood that information architecture is the process of planning out where things should be on the site and how users will navigate around it. The other terminology is wireframes, which is basically the storyboards of web design. They are simple outlines and boxes (often drawn by hand), to lay out the main functions such as navigation, search boxes, forms and more.
Comments
Post a Comment