Interactive Design - Exercises
30/08/18 - 20/09/18 (Week 1 - Week 4)
Mohamad Irfan Mohamad Zaim (0326620)
Interactive Design
Exercises
LECTURES
Week 1 (28/7/18)
Lecture 1 - Introduction to Interactive Design
In our first class we went through the module outline with Mr Shamsul. We were told the details of future exercises, projects, and final project we had to do. We are expected to design a website by the end of the semester. We will be studying web design and the User Experience and User Interface along with it. During the lecture we also looked at what UX and UI is and the difference between them.
From what I understood, UX is the optimization of a product for the user. It focuses on the ease of use of the user and enhancing customer satisfaction. It is the analytical and technical field. UI is the part of the product that the user is faced with when they look it. It is the outward appearance, the cosmetic, presentation, its senses and reactions. UX and UI are not only for websites or screens, but also everyday things you use, such as vending machines or parking meters. They are all designed with UX and UI in mind.
We then looked at the history of the World Wide Web. While the internet has been around longer than that, WWW was invented in 1989 by Time Berners-Lee, a british scientist in CERN. The web was originally developed as a means to transfer information between scientists from universities and institutes around the world. On April 30, 1993, CERN put the World Wide Web software in the public domain, which allowed the web to flourish to what it is today.
Week 2 (06/09/18)
Lecture 2 - Surveying the Possibilities (Basic Site Evaluation)
During this class we were tasked to look at websites from https://www.webbyawards.com/ and https://www.thebestdesigns.com/. In groups we had to analyze and evaluate good and bad website designs and find their pro's and con's. From this exercise I learnt many web design terms, keywords, and what good and bad web design looks like.
Week 3 (13/09/18)
Lecture 3 - UI/UX
After reviewing the difference between UI and UX, we then learnt of the many components and controls a website can have.
Call to Action - The main objective of the website, usually to click a button. Ex: Facebook - Sign up now! Amazon - Add to shopping cart.
Breadcrumb - Navigational component which helps organize large quantities of items. Online shopping sites will have breadcrumbs. Ex: Computer & Laptops > Computer Components > Graphic Cards > GTX 1080.
Low Fidelity - A prototype which is sketchy and incomplete. It is simple.
Radio Button - Gives the option to check more than one option.
Input Controls:
Informational Components:
Mr Shamsul then mentioned courseware which are educational materials packaged for the computer. He talked about the process of designing the courseware and how the person with the knowledge of the content should be there with the web designer. He also mentioned wire-framing which is prototyping for websites and that functionality comes before aesthetics always.
Designing for the user:
INSTRUCTIONS
EXERCISES
Week 1
No exercise this week.
Week 2
We were tasked as a group to find and analyze 6 good and 6 bad web designs. We then presented our analysis in front of the class. Below is the spreadsheet my group made explaining the pros and cons of the websites and identifying the target audience.
Week 3
For this weeks exercise we were tasked with wire-framing a low-fidelity interactive kiosk for a chosen target audience to access Taylor's University. The scenario that we chose is for new students, parents, or visitors who want to look up the upcoming events in Taylor's. In a group of 5 we started off by listing the possible contents which should be included. We then drew sketches on paper of the landing page and the following pages. We decided to have a home button, back button, search bar, and breadcrumb. The content boxes were labelled clearly. We then started to design it in Adobe Illustrator.
The icons for the home and back button were templates from the internet and the search bar was traced. The style of the icons and search bar should be consistent.
Week 5 - HTML Document Development
For this exercise we were tasked with doing some basic html coding on notepad, and then viewing it on a web browser by saying the notepad document as .html. We learned how to use basic elements such as title, heading, subheadings, ordered and ordered lists, and line break.
Week 6 - HTML and CSS Document Development
For this week we were tasked with implementing our resume (which we have done for homework) into HTML using Dreamweaver.
Week 7 - CSS Box Model
Week 8 - Layout Exercise Content
This week we were required to create a web-page using the content given to us for the exercise using html and CSS. The content included navigation, images, information, headings and more. We cannot remove content but we can add content to the web-page.
FEEDBACK
Week 1 - No feedback, no exercise.
Week 2
General Feedback - When analyzing and evaluating websites, we should use the appropriate terminology, such as content formatting, transitions, parallax scrolling, hamburger menu etc. We should also identify the main target audience and if there is a call to action on the landing page. Do not use too high resolution images as on a website as it can result in longer loading times. There should not be too much content on one page, divide it to different pages.
Specific Feedback - Overall my group was able to identify the good and bad elements from good and bad website designs.
Week 3
General Feedback - Do not use icons that are not universally recognized. It can confuse the user so it is best just to just label it clearly. We should have a homepage button for easier navigation. When dealing with a lot of content and products such as online shops a breadcrumb should be used.
Specific Feedback - Mr Shamsul commented that our interface design was simple and straight to the point. It was not confusing and there was a good navigation with the home button.
Week 5
General Feedback - When working with code, it is normal to make a lot of mistakes, running into problems is inevitable. Dreamweaver can help see what the code does in realtime, while in notepad for example, you will have to open the file in a browser to see changes.
Specific Feedback - The overall design of my landing page is decent. The colour choice could have been better.
Week 6
REFLECTION
Experiences
Week 1 - This module seemed interesting, it is different than the other modules from the previous semester. I was excited.
Week 2 - It was somewhat difficult to find bad website designs from an award and best design website.
Week 5 - It was overall an enjoyable exercise. It is not too difficult to pick up and you can see where you made your mistakes easily.
Week 6 - Transitioning to CSS was a little scary at first but after understanding the concept it seems to be super useful alongside HTML.
Observations
Week 1 - This seemed to be something new to many of my classmates and myself included. I wish I had done web design earlier.
Week 2 - When watching my classmates present their analysis I noticed they had a lot of good points. There is a lot to talk about when looking at website designs.
Week 5 - I noticed it got messy when there was several child elements within a parent element. So whenever there was a new element within an element I pressed tab and made sure the opening and closing tags were aligned.
Week 6 - I observed with CSS that it is basically the editor for HTML. HTML is the base code, and CSS is used to change the colour, size, margin, and more.
Findings
Week 1 - This module is focused on web design and UX and UI. We will have to learn basic programming which may be difficult to pick up.
Week 2 - There are many different types of websites with different 'call to actions' and different target audiences. Business related websites should look professional and formal for example.
Week 5 - Elements such as paragraph, headings, ordered and un-ordered lists are block elements. This means if you want to add any one of these elements it will always do so on a new line.
Week 6 - I don't need to necessarily memorize all the code, but some are important such as margin, font-colour, etc. What I also need to remember is the unit or units that can be used to change the values in CSS. Simply using margin will trigger for all 4 sides of the element. If you want to change the margin of just the top you use margin-top followed by a numerical value and px.
Mohamad Irfan Mohamad Zaim (0326620)
Interactive Design
Exercises
LECTURES
Week 1 (28/7/18)
Lecture 1 - Introduction to Interactive Design
In our first class we went through the module outline with Mr Shamsul. We were told the details of future exercises, projects, and final project we had to do. We are expected to design a website by the end of the semester. We will be studying web design and the User Experience and User Interface along with it. During the lecture we also looked at what UX and UI is and the difference between them.
From what I understood, UX is the optimization of a product for the user. It focuses on the ease of use of the user and enhancing customer satisfaction. It is the analytical and technical field. UI is the part of the product that the user is faced with when they look it. It is the outward appearance, the cosmetic, presentation, its senses and reactions. UX and UI are not only for websites or screens, but also everyday things you use, such as vending machines or parking meters. They are all designed with UX and UI in mind.
We then looked at the history of the World Wide Web. While the internet has been around longer than that, WWW was invented in 1989 by Time Berners-Lee, a british scientist in CERN. The web was originally developed as a means to transfer information between scientists from universities and institutes around the world. On April 30, 1993, CERN put the World Wide Web software in the public domain, which allowed the web to flourish to what it is today.
Week 2 (06/09/18)
Lecture 2 - Surveying the Possibilities (Basic Site Evaluation)
During this class we were tasked to look at websites from https://www.webbyawards.com/ and https://www.thebestdesigns.com/. In groups we had to analyze and evaluate good and bad website designs and find their pro's and con's. From this exercise I learnt many web design terms, keywords, and what good and bad web design looks like.
- Content formatting
- Usability
- Crawling text
- Transitions
- Parallax Scrolling
- Minimum scrolling required
- Who is the target audience of the website?
- Don't use too high-res images, more loading time.
- On landing page have indicator to scroll down, makes the user want to find out more.
- Use related and appropriate images
- Divide content to different pages, less scrolling
- Hamburger menu
- Call for action
Week 3 (13/09/18)
Lecture 3 - UI/UX
After reviewing the difference between UI and UX, we then learnt of the many components and controls a website can have.
Call to Action - The main objective of the website, usually to click a button. Ex: Facebook - Sign up now! Amazon - Add to shopping cart.
Breadcrumb - Navigational component which helps organize large quantities of items. Online shopping sites will have breadcrumbs. Ex: Computer & Laptops > Computer Components > Graphic Cards > GTX 1080.
Low Fidelity - A prototype which is sketchy and incomplete. It is simple.
Radio Button - Gives the option to check more than one option.
Input Controls:
- Buttons
- Text Fields
- Check boxes
- Radio buttons
- Dropdown lists
- List boxes
- Toggles
- Date field
Navigational Components:
- Breadcrumbs
- Slider
- Search Field
- Pagination
- Slider
- Tags
- Icon
Informational Components:
- Tool tips
- Icons
- Progress bar
- Notificatoins
- Message boxes
- Modal windows
Mr Shamsul then mentioned courseware which are educational materials packaged for the computer. He talked about the process of designing the courseware and how the person with the knowledge of the content should be there with the web designer. He also mentioned wire-framing which is prototyping for websites and that functionality comes before aesthetics always.
Designing for the user:
- Determine who the user is.
- Design must be broad or narrow as necessary to accommodate the intended user.
- Listen to users and observe.
- Who will be using your product?
Week 5 (27/09/18)
Lecture 5 - HTML Document Development
Dynamic Website - content management, easy to edit, requires no coding such as Blogspot or WordPress.
Inline vs Block Element
Lecture 5 - HTML Document Development
- People access the web through many different devices
- Variety of screen resolutions
- Websites look different to many of its visitors
- Using web standards ensures all browsers display your website properly
Static Website - hard to change/update, have to do coding in HTML
Dynamic Website - content management, easy to edit, requires no coding such as Blogspot or WordPress.
How the Web Works
1. Connect to web via ISP
2. Computer contacts a network of servers called DNS. Every device on the web has unique IP address.
3. Web server is a computer that is constantly connected to the web.
4. Web server sends page you requested back to web browser.
- Page should have hierarchy
- For long text like newspaper, split it up with subheadings
- Use character and paragraph styles
- HTML describes the structure of pages
- HTML code line inside <>
- Has 2 tags, opening and closing
- Attributes provide additional information about the contents of an element.
- Different document have different element which has to be used
- There can be a child element within a parent element
- Ordered list (ol) is numbered list (1. 2. 3. etc)
- Unordered list (ul) is bullet points
Inline vs Block Element
- Blocks take up with width available on the page, no room for OTHER elements
- Inline takes up as much as they need to, so other elements can be inline with the inline element
Week 6 (4/10/18)
Lecture 6 - HTML and CSS Document Development
Lecture 6 - HTML and CSS Document Development
Gather info: purpose, main goal, and target audience
- News portal differs from entertainment websites
- Purpose? E-commerce, making money, or share info
- Goals? provide info, promote service, sell a product
- Target Audience - pictures the ideal person to visit your website
- Content? specific information, particular product or service, online ordering
Planning: Sitemap and Wire-framing
- Data that shows what the entire website will look like
- Sitemap describes the relation between the main areas of your website
- Helps understand what the final product will be
- Sitemap creation is to build a user-friendly and easy to navigate website
- Sitemap does not describe the user interface, that is what wireframe is for.
- Wireframe does not contain any design elements such as colour, typeface, logos, etc.
Design: Page layouts
- Represent the information structure
- Visualize the content
- Layouts contain colours, logo, images
Testing, Review and Launch
- Test all links, check for typos
- Upload to server using FTP (File Transfer Protocol)
- Then test to be sure all files have been installed correctly
Semantic Elements - clearly defines its contents such as <form> <table> <article>
Non-Semantic - not so clear such as <div> <span>
charset-UTF-8 is used in Dreamweaver, it covers almost all of the characters and symbols in the world.
Different pages of the website such as menu and images should be in the same folder as index.html. The name of the folder should use only lowercase and may contain _ - ~.
Extra Markup
ID Attribute
Type Size
Non-Semantic - not so clear such as <div> <span>
charset-UTF-8 is used in Dreamweaver, it covers almost all of the characters and symbols in the world.
Different pages of the website such as menu and images should be in the same folder as index.html. The name of the folder should use only lowercase and may contain _ - ~.
Extra Markup
ID Attribute
- Every HTML element can carry
- Used to uniquely identify the element from other elements
- No two elements should have the same value for their ID attribute (value no longer unique)
Class Attribute
- Every HTML element can also carry a class attribute
- If you want to identify several elements as being different from other elements on the page
- For example if you have a paragraph with more important information and want to distinguish between these elements
- Class attribute can share the same value or name
ID and Class Attribute
- By default the attributes does not affect the presentation of the element
- It will change only of these is a CSS rule that indicates it should be displayed differently
CSS (Cascading Style Sheet)
- Allows you to create rules of how an element should appear
- CSS rule contains 2 parts: selector and declaration
- CSS declaration sits inside curly brackets { }and is made up of a property and a value
- P {fontfamily: Arial; }
- Several properties can be specified in one declaration by a semi-colon (;).
- Using Internal CSS - <style>
- Using External CSS - <link>
- Style precedence will occur if you have internal css and external css. Internal will always take priority over external.
Week 7 (11/10/17)
Lecture 7 - CSS Box Model
Lecture 7 - CSS Box Model
Type Size
- The font-size property enables you to specify a size for the font
- There are several ways to specify the font: Pixels (px), Percentage (%), and em (equivalent to the width of the letter 'm'.
- Pixels are relative to the resolution of the screen, so the type size will look larger on smaller resolutions.
- The default size of text in a web browser is 16px
Bold [font-weight]
- The font-weight property allows you to create bold text
- 2 values: Normal-text to appear at a normal weight and bold-text to appear bold
Italic [font-style]
- Create italic text
- 3 values: normal-text to appear in normal style, italic-text to appear italic, and oblique-text to appear oblique.
UPPERCASE and lowercase [text-transform]
- Text-transform is used to change the case of the text giving it one of the following values:
- uppercase-text to appear uppercase
- lowercase-text to appear lowercase
- capitalise - first letter of each word to appear capitalised
Underline and Strike [text-decoration]
- text-decoration property allows you to specify the following rules:
- none - removes any decoration already applied to the text
- underline - adds a line undernath
- overline - adds a line over the top of the text
- line-through - adds a line through words
Indenting Text [text-indent]
- Allows you to indent the first line of text within an element
- Can be specified by px or em
- can take negative value (eg:-10px)
CSS3: Drop shadow [text-shadow]
- Used to create a drop shadow, which is a dark version of the word just behind it and slightly offset
- Can take 3 lengths and a color for the drop shadow
- First value indicates how far to the left or right the shadow falls
- Second value indicates the distance to the top or bottom the shadow falls
- Third value is optional and specifies the amount of blur that is applied to the drop shadow
- Fourth value is the color of the drop shadow
CSS Boxes Model
- Control the dimensions of the boxes, create borders, or hide boxes.
- Width and height can be specified by pixels (px) or percentage (%)
- Some pages expand and shrink to fit the user's screen, the min width specifies the smallest size a box can be displayed at when the browser window is narrow, and the max-width property indicates the maximum width a box can stretch to when the browser window is wide
- The max/min height and width can be specified with [min-height] and [max-width]
- When there is not enough space for the content in the box, overflow property can be used.
- overflow has two values: hidden - hides any extra content that does not fit in the box, scroll - adds a scrollbar to the box so that users can scroll to see the missing content
- Border, Margin, and Padding can be specified
Week 8 (18/10/17)
No lecture this week.
INSTRUCTIONS
EXERCISES
Week 1
No exercise this week.
Week 2
We were tasked as a group to find and analyze 6 good and 6 bad web designs. We then presented our analysis in front of the class. Below is the spreadsheet my group made explaining the pros and cons of the websites and identifying the target audience.
Week 3
For this weeks exercise we were tasked with wire-framing a low-fidelity interactive kiosk for a chosen target audience to access Taylor's University. The scenario that we chose is for new students, parents, or visitors who want to look up the upcoming events in Taylor's. In a group of 5 we started off by listing the possible contents which should be included. We then drew sketches on paper of the landing page and the following pages. We decided to have a home button, back button, search bar, and breadcrumb. The content boxes were labelled clearly. We then started to design it in Adobe Illustrator.
 |
| Fig 1.1 - Designing Interactive Kiosk in Illustrator |
The icons for the home and back button were templates from the internet and the search bar was traced. The style of the icons and search bar should be consistent.
Embedded PDF
Week 5 - HTML Document Development
For this exercise we were tasked with doing some basic html coding on notepad, and then viewing it on a web browser by saying the notepad document as .html. We learned how to use basic elements such as title, heading, subheadings, ordered and ordered lists, and line break.
 |
| Fig 2.1 - HTML on browser |
 |
| Fig 2.2 - HTML on notepad |
Week 6 - HTML and CSS Document Development
For this week we were tasked with implementing our resume (which we have done for homework) into HTML using Dreamweaver.
 |
| Fig 3.2 - HTML in Dreamweaver |
 |
| Fig 3.3 - Resume with HTML and CSS |
Week 7 - CSS Box Model
 |
| Fig 4.1 - HTML and embedded CSS |
 |
| Fig 4.2 - Website with logo and navigation on chrome |
Week 8 - Layout Exercise Content
This week we were required to create a web-page using the content given to us for the exercise using html and CSS. The content included navigation, images, information, headings and more. We cannot remove content but we can add content to the web-page.
Intructions for Layout Exercise Content
 |
| Fig 5.1 - HTML code |
 |
| Fig 5.2 - CSS code |
 |
| Fig 5.3 - Real time web preview (1/3) |
 |
| Fig 5.4 - Real time web preview (2/3) |
 |
| Fig 5.5 - Real time web preview (3/3) |
FEEDBACK
Week 1 - No feedback, no exercise.
Week 2
General Feedback - When analyzing and evaluating websites, we should use the appropriate terminology, such as content formatting, transitions, parallax scrolling, hamburger menu etc. We should also identify the main target audience and if there is a call to action on the landing page. Do not use too high resolution images as on a website as it can result in longer loading times. There should not be too much content on one page, divide it to different pages.
Specific Feedback - Overall my group was able to identify the good and bad elements from good and bad website designs.
Week 3
General Feedback - Do not use icons that are not universally recognized. It can confuse the user so it is best just to just label it clearly. We should have a homepage button for easier navigation. When dealing with a lot of content and products such as online shops a breadcrumb should be used.
Specific Feedback - Mr Shamsul commented that our interface design was simple and straight to the point. It was not confusing and there was a good navigation with the home button.
Week 5
General Feedback - When working with code, it is normal to make a lot of mistakes, running into problems is inevitable. Dreamweaver can help see what the code does in realtime, while in notepad for example, you will have to open the file in a browser to see changes.
Specific Feedback - The overall design of my landing page is decent. The colour choice could have been better.
Week 6
General Feedback: index.html is called what it is because it is the homepage of your website. It should be saved in the same folder as the content on your website such as images and external css. A HTML page can use more than one CSS style sheet, and can usee it externally using <link>. You can use <style> to include CSS rules in a HTML page. Style precedence will occur if a rule is in the CSS and HTML. It will prioritize the rules in HTML over CSS.
Specific Feedback: The content on my resume was good except I should include a profile about myself at the top of the resume.
REFLECTION
Experiences
Week 1 - This module seemed interesting, it is different than the other modules from the previous semester. I was excited.
Week 2 - It was somewhat difficult to find bad website designs from an award and best design website.
Week 5 - It was overall an enjoyable exercise. It is not too difficult to pick up and you can see where you made your mistakes easily.
Week 6 - Transitioning to CSS was a little scary at first but after understanding the concept it seems to be super useful alongside HTML.
Observations
Week 1 - This seemed to be something new to many of my classmates and myself included. I wish I had done web design earlier.
Week 2 - When watching my classmates present their analysis I noticed they had a lot of good points. There is a lot to talk about when looking at website designs.
Week 5 - I noticed it got messy when there was several child elements within a parent element. So whenever there was a new element within an element I pressed tab and made sure the opening and closing tags were aligned.
Week 6 - I observed with CSS that it is basically the editor for HTML. HTML is the base code, and CSS is used to change the colour, size, margin, and more.
Findings
Week 1 - This module is focused on web design and UX and UI. We will have to learn basic programming which may be difficult to pick up.
Week 2 - There are many different types of websites with different 'call to actions' and different target audiences. Business related websites should look professional and formal for example.
Week 5 - Elements such as paragraph, headings, ordered and un-ordered lists are block elements. This means if you want to add any one of these elements it will always do so on a new line.
Week 6 - I don't need to necessarily memorize all the code, but some are important such as margin, font-colour, etc. What I also need to remember is the unit or units that can be used to change the values in CSS. Simply using margin will trigger for all 4 sides of the element. If you want to change the margin of just the top you use margin-top followed by a numerical value and px.
Please complete the post
ReplyDelete