27/08/19 - 00/00/19 (Week 1-Week 14)
Piyaphon Inthavong (0337589)
Interactive Design
Exercises
LECTURE NOTES
Week 1:
August 27th, 2019
Today we had our introduction to the new class, Interactive Design. Mr. Shamsul firstly briefed us through the Module Information Booklet of the subject and gave us a short lecture regarding the programs to use for programming sessions of the class. Adobe Dreamweaver was the program suggested as it is user-friendly interface and unique features for new users. After the short introduction, the lecturers paired us together in a big group for the first class activity. We were to analyze different web pages and note down the values of good versus bad websites.
Good website values/attributes:
User friendly (Easy to use)
Fast loading
Interactive
Responsive
Recognisable artifact
Consistent
Bad websites:
Too much or no information
Unnecessary buttons
Overlapping menus/layout
Too many advertisements
Misalignments
Non functional features
Not responsive
Week 2:
September 3rd, 2019
This week we had a lecture mainly about UI/UX design. We learned the differences between UI and UX design, and although they may sound similar, both have different responsibilities and each of them works closely together as they are both crucial in contributing to a good outcome/product.
In short, User Experience is the process of development of particular service/product between people or buildings. User Interface on the other hand, is the process of enhancing UX visually through a product's interface.
Below is the slides of our lecture for the topic:
August 27th, 2019
The first activity began as we separate ourselves into different groups and to analyze three of good and bad websites to present that information in front of the class. The choices of websites to choose from are limited within these links:
https://www.thebestdesigns.com/
https://www.webbyawards.com/
Below are list of good and bad websites chosen by my group. Starting from the good ones:
Websites with bad design:
Kindly refer to the Google Sheets below for further details regarding the reasons we chose the following websites.
Week 2:
September 3rd, 2019
In this week's group activity, we were instructed to design a UI prototype for Taylor's University Interactive Information Kiosk using papers and pencils. Our group has chosen the scenario where a new visitor looks for the direction to Taylor's University library using our UI prototype for the Interactive Information Kiosk.
We first started off discussing the landing page of the Information Kiosk and how it will lead to the direction page which is the page. As easy as it may sound, it requires a little analytical thinking to carefully plan out the placement of each button to maximize the user experience of this product.
The UI is designed in a way that requires only 4 clicks for the user to get any information they needed regarding the application. The 4 clicks consists of:
1. Language of preference
2. Search bar / "Library" category
3. Library selection (College or University)
4. "Done" button (QR is provided)
Week 4:
September 17th, 2019
After being introduced to the basics of HTML, we started out structuring HTML in notepad as our first task. We were to make a site introducing ourselves in a minimum of 200 words, divide the site into 4 sections with interesting content about us.
Week 5:
September 24th, 2019
Once learned to understand the basic structure of a HTML site, this is the week to add some decorative elements to our site using the CSS language. This time we used Adobe Dreamweaver to code our local HTML site:
Things quickly got easier with the help of Adobe Dreamweaver, there were no longer needed for us to remember codes and correct them manually. I added attribute tags to most of my elements so that I can style them separately the way I want them to be.
To make the font selection more interesting, I went over to Google Fonts and embedded typefaces of my choice into the HTML using the <link> code. I then linked my contents into hypertext using the ID attribute so that it will direct the screen to the selected page once clicked on.
The width of the photos are easily adjusted with the code width="" to align the pictures uniformly in the same width. class="" attribute was the next to be added to multiple <li> listed items so I can later adjust their styles altogether in group.
To finalize the structure of a basic introduction HTML site, I added Scroll to top menu at the bottom most of the page to ease the use of users not having to scroll all the way up to the home page, this is also added in form of hypertext.
August 27th, 2019
August 27th, 2019
Today we had our introduction to the new class, Interactive Design. Mr. Shamsul firstly briefed us through the Module Information Booklet of the subject and gave us a short lecture regarding the programs to use for programming sessions of the class. Adobe Dreamweaver was the program suggested as it is user-friendly interface and unique features for new users. After the short introduction, the lecturers paired us together in a big group for the first class activity. We were to analyze different web pages and note down the values of good versus bad websites.
Good website values/attributes:
User friendly (Easy to use)
Fast loading
Interactive
Responsive
Recognisable artifact
Consistent
Bad websites:
Too much or no information
Unnecessary buttons
Overlapping menus/layout
Too many advertisements
Misalignments
Non functional features
Not responsive
Week 2:
September 3rd, 2019
This week we had a lecture mainly about UI/UX design. We learned the differences between UI and UX design, and although they may sound similar, both have different responsibilities and each of them works closely together as they are both crucial in contributing to a good outcome/product.
In short, User Experience is the process of development of particular service/product between people or buildings. User Interface on the other hand, is the process of enhancing UX visually through a product's interface.
Below is the slides of our lecture for the topic:
Week 5:
September 24th, 2019
September 24th, 2019
Lectures today focused on learning how to give identity to a single or more elements in a web page, allowing them to be customized in many possible ways provided by the Cascading Style Sheet language.
ID attribute: identify an element (give them a name) to enable its style, or can be created as an anchor so they can be used later as a link to another ID specifically. Names of the ID can only be used for one element.
Class attribute: specifies one or more class names for an element.
Block element: structure the main parts of the page by dividing the content in systematic blocks.
Inline elements: give the chosen part of a text a particular function or meaning.
CSS in HTML <style>
Create specify how the content of an element should appear.
Uses curly braces, they are made of 2 parts: the property and a value.
# refers to an ID attribute; A period “.” indicates a class(es).
Ex. p{font-family:arial, helvetica; color:blue;}
Line height: the vertical distance between lines of text.
Week 6:
October 1st, 2019
Wrapper & container
The wrapper holds a design within certain boundaries
The container is the area enclosed by the beginning and ending tags.
Limiting Width
Set min-width and max-width to ensure that the contents of pages are legible.
Achieved by using the code min-width and max-width property
Limiting Height
Control what happens when there is not enough space for the content of the box
Achieved by using the code min-width and max-width property
The overflow content [overflow] property specifies what should happen if content overflows an element's box.
Border separates the edge of one box from another
Margins sit outside the edge of the border.
Padding is the space between the border of a box and any content contained within it.
Division tag <div> acts as grouping block elements, they are use for creating layouts.
HTML codes for the navigation
ID attribute: identify an element (give them a name) to enable its style, or can be created as an anchor so they can be used later as a link to another ID specifically. Names of the ID can only be used for one element.
Class attribute: specifies one or more class names for an element.
Block element: structure the main parts of the page by dividing the content in systematic blocks.
Inline elements: give the chosen part of a text a particular function or meaning.
CSS in HTML <style>
Create specify how the content of an element should appear.
Uses curly braces, they are made of 2 parts: the property and a value.
# refers to an ID attribute; A period “.” indicates a class(es).
Ex. p{font-family:arial, helvetica; color:blue;}
Line height: the vertical distance between lines of text.
Week 6:
October 1st, 2019
Wrapper & container
The wrapper holds a design within certain boundaries
The container is the area enclosed by the beginning and ending tags.
Limiting Width
Set min-width and max-width to ensure that the contents of pages are legible.
Achieved by using the code min-width and max-width property
Limiting Height
Control what happens when there is not enough space for the content of the box
Achieved by using the code min-width and max-width property
The overflow content [overflow] property specifies what should happen if content overflows an element's box.
Border separates the edge of one box from another
Margins sit outside the edge of the border.
Padding is the space between the border of a box and any content contained within it.
Division tag <div> acts as grouping block elements, they are use for creating layouts.
HTML codes for the navigation
list-style: none; hides the bullet points
width: 100px; set width to 100px
padding: 20px; set padding to 20px
display: inline-block set the display of the ul to align horizontally
padding: 0 20px; set the padding to 0px (top and bottom) 20px (left and right)
float: left; set the element to align from left to right instead of vertically
Week 7:
October 8th, 2019
October 8th, 2019
--
--
--
Week 8:
October 15th, 2019
October 15th, 2019
Responsive Web Design
Responsive web design is an approach to web design that adjust the web content to fit various screen sizes and proportions appropriately. This prevents information from flowing out on small devices. A responsive web is achieved through the fluid grid concept. Different elements can display in certain screen size using media queries.
Bootstrap is the most well known responsive web design frameworks among the industry. Bootstrap deal with columns (and not rows) in order to allow different screen size to adapt to layouts correspondingly. The number 12 for the columns makes it flexible to work with as it is divisible to multiple range of numbers from 6, 4, 3, 2.
The slides below is the lecture we had for today.
Responsive web design is an approach to web design that adjust the web content to fit various screen sizes and proportions appropriately. This prevents information from flowing out on small devices. A responsive web is achieved through the fluid grid concept. Different elements can display in certain screen size using media queries.
Bootstrap is the most well known responsive web design frameworks among the industry. Bootstrap deal with columns (and not rows) in order to allow different screen size to adapt to layouts correspondingly. The number 12 for the columns makes it flexible to work with as it is divisible to multiple range of numbers from 6, 4, 3, 2.
The slides below is the lecture we had for today.
INSTRUCTIONS
EXERCISES
Week 1:August 27th, 2019
The first activity began as we separate ourselves into different groups and to analyze three of good and bad websites to present that information in front of the class. The choices of websites to choose from are limited within these links:
https://www.thebestdesigns.com/
https://www.webbyawards.com/
Below are list of good and bad websites chosen by my group. Starting from the good ones:
 |
| https://griflan.com/ |
 |
| https://volkfi.com/ |
 |
| https://www.ifly50.com/en_my/46 |
Websites with bad design:
 |
| https://50-jahre-hitparade.ch/ |
 |
| http://puttertje.mauritshuis.nl/en |
 |
| http://www.jeremyholmesstudio.com/ |
Kindly refer to the Google Sheets below for further details regarding the reasons we chose the following websites.
Week 2:
September 3rd, 2019
In this week's group activity, we were instructed to design a UI prototype for Taylor's University Interactive Information Kiosk using papers and pencils. Our group has chosen the scenario where a new visitor looks for the direction to Taylor's University library using our UI prototype for the Interactive Information Kiosk.
We first started off discussing the landing page of the Information Kiosk and how it will lead to the direction page which is the page. As easy as it may sound, it requires a little analytical thinking to carefully plan out the placement of each button to maximize the user experience of this product.
The UI is designed in a way that requires only 4 clicks for the user to get any information they needed regarding the application. The 4 clicks consists of:
1. Language of preference
2. Search bar / "Library" category
3. Library selection (College or University)
4. "Done" button (QR is provided)
Week 4:
September 17th, 2019
After being introduced to the basics of HTML, we started out structuring HTML in notepad as our first task. We were to make a site introducing ourselves in a minimum of 200 words, divide the site into 4 sections with interesting content about us.
 |
| How it all started. HTML structure written on notepad. |
 |
| First attempt. A local HTML file opened in a browser. |
 |
| Continued screenshot from the local HTML file. |
Week 5:
September 24th, 2019
Once learned to understand the basic structure of a HTML site, this is the week to add some decorative elements to our site using the CSS language. This time we used Adobe Dreamweaver to code our local HTML site:
 |
| Using a wysiwyg html editor (Adobe Dreamweaver) |
Things quickly got easier with the help of Adobe Dreamweaver, there were no longer needed for us to remember codes and correct them manually. I added attribute tags to most of my elements so that I can style them separately the way I want them to be.
 |
| Final HTML 1/3 |
To make the font selection more interesting, I went over to Google Fonts and embedded typefaces of my choice into the HTML using the <link> code. I then linked my contents into hypertext using the ID attribute so that it will direct the screen to the selected page once clicked on.
 |
| Final HTML 2/3 |
The width of the photos are easily adjusted with the code width="" to align the pictures uniformly in the same width. class="" attribute was the next to be added to multiple <li> listed items so I can later adjust their styles altogether in group.
 |
| Final HTML 3/3 |
To finalize the structure of a basic introduction HTML site, I added Scroll to top menu at the bottom most of the page to ease the use of users not having to scroll all the way up to the home page, this is also added in form of hypertext.
 |
| CSS 1/2 |
 |
| CSS 2/2 |
Below is the final outcome of the edited HTML and CSS for this exercise:
 |
| Final HTML (1 out 5) |
 |
| Final HTML (2 out 5) |
 |
| Final HTML (3 out 5) |
 |
| Final HTML (4 out 5) |
 |
| Final HTML (5 out 5) |
FEEDBACK
Week 1:August 27th, 2019
There are no feedback today.
Week 2:
September 3rd, 2019
The group activity of creating a UI prototype for Taylor's University Interactive Information Kiosk went well as all the members fully understand the topic. The experience of the user for the product was fairly smooth and there was no need for anyone to guide the user to use the UI because the interface itself was self-explanatory.
Week 5:
September 24th, 2019
September 24th, 2019
Everything was fine for the HTML website, although Mr. Shamsul told me to limit the file size of the photos when working with a website because it takes longer than usual to load; A picture with file size lesser than 1 mb was the suggested number for this exercise. Mr. Shamsul liked the navigation bar of the html site.
FURTHER READING
 |
| The Difference Between UX and UI Design. |
Although we have learned about this during the class lecture, the differences between UI and UX design seems almost obvious enough to understand them individually, but most people and even the industry have yet still misused these terms without knowing in their daily basis. I have to be honest, before reading into this articles, I'd thought I've fully understood both UI/UX design, and I am more than happy to even be landing into and to read this well-written article by Emil Lamprecht.
User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.
To get started, we'll define UX. User Experience design is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.
As vague as it sounds, the definition did not mention a little about tech nor digital because it incorporates all aspects of the end-users interaction with the company, its services, and its products. By this, it means that UX is not limited to any medium, as the theory can be applied to anything such as strategy & content, wireframing & prototyping, execution & analytics...
On the contrary, User Interface is a process in which the user is visually guided over a product’s interface using interactive elements. UI is responsible to communicate a brand's strength and visual assets to a product’s interface to best enhance the user’s experience. As a field that requires interaction between the user and computer system, UI works within digitally, unlike UX.
After learning thoroughly the true definition of both terms, most people may be questioning: is UI design more important than UX design?
Knowing that UI design requires UX design knowledge to design the interface visually already made it sound more complex than UX, which is, in theory, a non-digital practice recently adapted to use primarily on design industries. To me, the perfect answer lies within between.
“Something that looks great but is difficult to use is exemplary of great UI and poor UX. While Something very usable that looks terrible is exemplary of great UX and poor UI.”
It is not the matter of "which profession is better paid" but "which profession is right for you."
Here is the link to the article:
https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/