INTERACTIVE DESIGN // Lectures & Exercises
Week 1 - Week 10 (01/04/2021 - 02/06/2021)
Fann Man Ling - 0344623 (BDCM)
Interactive Design // Mr. Shamsul & Mr. Lun
Lectures & Exercises
LECTURES
WEEK 1 // 31.03.2021
INTRODUCTION
Today, Mr. Shamsul briefed us about the module and the assignments. He also briefed us about the software (Adobe Dreamweaver) and the framework that we are going to use for this module. He then asked us to sign up to Netlify.com to upload our exercises and projects.
WEEK 2 // 07.04.2021
WEBSITE
a set of related web pages (information) located under a single domain name (URL), typically produced by a single person or organization.
Lecture 1
Good Website Design:
CLEAR INFORMATION ARCHITECTURE
- hierarchy of information.
- alignment.
- flow.
- clear purpose.
- separated information (e.g: Hamburger menu, header).
USER-FRIENDLY
- good navigation.
- load quickly. (highly accessible)
- readable.
- responsive (viewable with any devices) (able to scale to different screen sizes).
- interaction between site and user.
- functional.
- up-to-date.
GOOD FORMATTING
- clear colour palette, colour work well together.
- font choice (not more than 3).
- images are related and of good quality.
- balance.
- good use of space.
- good layout and composition.
- call-to-action button is on top (obvious).
CONTENT NOT TOO MUCH
- not too much information in one place (no need to scroll too much).
- not clutter.
- attractive and creative.
WEEK 3 // 14.04.2021
1. UX & UI
Lecture 2
UX & UI (Source: Mockplus)
UX (User Experience) - How things work (process)
Process of reaching, developing, and improving all aspects of user interaction with a company's product to satisfy its users.
Includes: Wireframing / Prototyping, Interaction design, User testing
Focus on: Structure, Layout, Navigation.
Goal: Improve the user's experience with the product through test results, ultimately creating a product that is useful and valuable, easy to obtain, and pleasing to use.
UI (User Interface) - How things look (deliverable)
Visual appearance of a product.
UI designers (good sense of aesthetics & technical skill) decide how to visually design the product for effective user experience. (attract users, ensures a pleasant product experience)
Elements: content (documents, text, images, videos), forms (buttons, tags, text fields, checkboxes, drop-down lists, graphic designs, behaviors- what will happen when the user's click/ drag/ enter).
Includes: Visual design, Interaction design.
Goal: Elicits an emotional response from the user (first saw a website and marveled at its visual appeal)
UX & UI complement each other.
UX makes interfaces useful ; UI makes interfaces beautiful.
UX helps users accomplish goals ; UI makes emotional connections (like / dislike)
UX designs occur throughout products, interfaces, services ; UI only pertains to interfaces
FURTHER READING:
Lecture 3
ANATOMY OF A WEB PAGE:
- Container
- Header
- Logo & Navigation
- Main Content & Sidebar
- Footer
- Whitespace
FURTHER READING:
WEEK 4 // 21.04.2021
WEB STANDARD
Lecture 4
WEEK 5 // 28.04.2021 (Public Holiday)
No lecture.
WEEK 6 // 05.05.2021
ADDING IMAGE IN HTML
Lecture 5
FURTHER READING:
WEEK 7 // 12.05.2021
INTRODUCTION TO CSS
Lecture 6
CSS (Cascading Style Sheets)
the language we use to style an HTML document.
describe how HTML elements should be displayed.
use <style>
Selector selects the HTML element you want to style.
Have 3 ways to add CSS:
1. Inline CSS [Apply to a unique style of a single element (<p style= "color:red;">)]
2. Internal CSS [Add style to the entire page inside the head section.]
3. External CSS [Include a Style Sheet. (link it in index.html.)]
FURTHER READING:
WEEK 8 // 19.05.2021
No lecture. (ILW)
WEEK 9 // 26.05.2021
BOXES IN CSS
Lecture 7
We don't have a class for today as it is a public holiday. However, we can refer back to the lecture session of Thursday's class through YouTube live.
BORDER, MARGIN, PADDING
Margin:
sit outside the edge of the border.
set the width of a margin to create a gap between the borders of 2 adjacent boxes.
Border:
every box has a border (even if it is not visible / is specified to be 0px wide)
separates the edge of one box from another.
Padding:
the space between the border of a box, and any content contained within it.
adding padding can increase the readability of its content.
FURTHER READING:
WEEK 10 // 02.06.2021
RESPONSIVE WEB DESIGN (BOOTSTRAP)
Lecture 8
RESPONSIVE WEB DESIGN
a method that makes webpages render well on different devices and screen sizes.
adjust its content to fit on the screen based on screen size (different devices), platform, orientation.
RESPONSIVE WEB DESIGN FRAMEWORK
Boostrap: a collection of CSS and JS frameworks to make the process of layout faster, easier, and responsive.
INSTRUCTION
Module Information Booklet
EXERCISES // PRACTICAL
WEEK 2 // 07.04.2021
For our first exercise, we were separated into groups and were assigned to look for 4 good websites and 4 bad websites with the sources given, which are https://www.webbyawards.com and https://www.thebestdesigns.com. We also needed to analyze why the web design is good or bad, the purpose served by the website, and also its target audience.
Below is the excel sheet that stated the websites we chosen and analyzed.
Fig 1: Websites chosen and analyzed (07/04/2021)
We then presented it in the class.
4 Good Websites Design:
Fig 3.1: Space 10
Fig 2.2: Hello Monday
Fig 2.3: Prevint
4 Bad Websites Design:
Fig 3.1: Systemax Software
Fig 3.2: Arngren
Fig 3.3: Mednat News
Fig 3.4: Ling's Cars
WEEK 3 // 14.04.2021
We were tasked to do a wireframe draft for our Project 1. (Project 1)
WEEK 4 // 21.04.2021
We were given a small exercise on creating a simple web document that includes the content about ourselves. For the exercise, we need to ensure there is two Heading/ Title <h1>, and three Paragraph <p> in each Headline with ordered <ol> list <li> and unordered <ul> list <li>, as well as Bold <b> / <strong> and Italic <i> / <em>.
To create an HTML file in Notepad, firstly, open Notepad, save the file, rename the file's extension from ".txt" to ".html". Then, right-click it and choose "Properties" - "Opens With" - "Change" - "Google Chrome" to make Chrome the default browser. After that, we can type our HTML code in the Notepad, save it, and refresh the browser to see the result.
* To see the HTML file in Notepad (to edit), right-click it and choose "Open with" - "Notepad".
* To see the extension showing behind the name of the file, click on the home tab "View" - "File name extensions"
Fig 4.1: Notepad_Html (21/04/2021)
Final Result:
Fig 4.2: Google Chrome_Html (web document) (21/04/2021)
WEEK 5 // 28.04.2021 (No class_Public Holiday)
No practical.
WEEK 6 // 05.05.2021
The practical exercise for this week is to create an HTML document with the given content posted in Google Classroom. We need to format the document content using HTML header, list, image tag, and add an internal link within the page (by using Id attribute and put the id name in 'Link' of Properties) as shown in class.
Fig 5.1: Creating HTML file in Adobe Dreamweaver (05/05/2021)
Next, I saved all the files in the same folder, and rename the first HTML file that I have done in Dreamweaver as 'index.html' to deploy it in Netlify later on.
Fig 5.2: Folder
Then, I uploaded the folder in "Netlify - Sites - Drag and drop your site output folder."
WEEK 7 // 13.05.2021
We were tasked to amend the HTML file that we did in Week 6 by adding CSS into it (using <style>): changing colour for font, background, and link, changing the font size, typeface, and line-height, as well as changing the margin and padding.
Fig 6: Adding basic CSS rules into HTML file (27/05/2021)
WEEK 9 // 26.05.2021
As today has no class due to public holidays, we were advised to watch the lecture session of Thursday's class on YouTube. In the class, we were tasked to do an exercise after we learned about box model layouts, such as header, container, asides, and footer.
Fig 7.1: Progress
Fig 7: Exercise_Box Model Layout (27/05/2021)
WEEK 10 // 02.06.2021
After we learned HTML, CSS, and Bootstrap, we were tasked to do our Exercise 2 (Layout exercise) with the footage given by Mr. Shamsul in Google Classroom. We don't have to make it responsive so far.
Attempt #1:
After consulting with Mr. Lun personally in Discord and getting guidance from him, I revised the work.
Fig 8: Progress_preview_final result
📍Final Work:
FEEDBACK
WEEK 2 // In-Class Exercise (Good & Bad Web Design)
Our group's presentation was not really explicit and clear, so Mr. Shamsul added some explanation to our context.
REFLECTION
It's not difficult for me to understand HTML and CSS at first as I have learned the basics of them before through an app. However, it becomes rough when I actually working on it. Practical is different from theory, but I am looking forward to practically work on a real HTML website later on.
Comments
Post a Comment