25/09/2024 - 01/01/2025 / Week 1 - Week 14
Joey Lok Wai San / 0350857
Application Design II / Bachelor of Design (Hons) in Creative Media
Lectures & Exercises
TABLE OF CONTENTS
LECTURES
WEEK 1
There was no class during the first week. We were given the module MIB to go through on our own and briefed ourselves on the assignments we would have.
WEEK 2
Create a New Input Field/ Form
CSS Code
WEEK 3
For the third week of class, Mr. Shamsul introduced us to the basics of DOM and Javascript. He recommended using Bootstrap so that we would not have to code everything ourselves. We can learn more about Javascript from W3Schools.
Javascript
Nodes in DOM
Fig. 1.1 Creating element only in JavaScript, Week 3 (09/10/2024)
Fig. 1.2 Used to clear the input field, Week 3 (09/10/2024)
Usability Principles
WEEK 2
In the second week, we reviewed the basics of HTML and CSS (because most of us had definitely forgotten about them). We then recreated a layout using HTML and CSS for our class exercise. These are some of the notes I took down.
HTML Code
The width should be in %, not px
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class = "">
<div id = "">
display: flex - put on parent element
Responsive Design<meta name="viewport" content="width=device-width, initial-scale=1.0">
Create a New Input Field/ Form
<input type="text" id="taskInput" placeholder="New Task">
<button class="done">Done</button>
CSS Code
#id
.class
#id { width, background, color }
Clickable Elements
Use cursor: pointer for clickable elements
Draggable Elements
Use cursor: grab for draggable elements.
For the third week of class, Mr. Shamsul introduced us to the basics of DOM and Javascript. He recommended using Bootstrap so that we would not have to code everything ourselves. We can learn more about Javascript from W3Schools.
Javascript
- Most websites have Javascript and are automatically run by the browser
- Scrollspy: the highlight changes according to the heading/ section
- Always place JavaScript <script> tags at the bottom of the <body> section.
- To link a JavaScript at the bottom of the <body> section:
- <script type="text/javascript" src="todolist.js"></script>
DOM (Document Object Model)
- An interface used to interact and manipulate HTML documents
- Change the behaviour of HTML and CSS elements to be more interactive
Relationships
Relationships
- HTML: Structure/ base
- CSS: Changes characteristic of HTML element (a.k.a adding style)
- Javascript: Changes the behaviour of HTML and CSS. It can change or manipulate CSS without having to type a new CSS file. It can add elements (e.g. button, list, etc) into HTML without having to edit the HTML code
- H1, H2, H3, p will be converted to document object model
- Events: click, hover, etc. The browser is listening to what event you want to have (click, press, mouse over)
- Events: click, hover, etc. The browser is listening to what event you want to have (click, press, mouse over)
- Javascript can interact and manipulate the DOM
- Javascript can respond by modifying and updating the page content in real-time
- Javascript can interact with your source file, add delete modify, interact
- Javascript selector has the same features as CSS or you can use the code <get id from 'id name'>
Common DOM Methods
- document.getElementById(id)
- Selects an element by its ID
- Manipulate that id with whatever you want (move from top to bottom, change display, disappear)
- document.querySelector(selector)
- Selects the first element that matches a CSS selector
- class or id, selector name (in bracket: value of id or selector). Call then select
- document.createElement(tagName)
- Creates a new HTML element.
- element.appendChild(newNode)
- Adds a new child node to an element.
- Add new child element node (e.g. li is a child element)
- element.innerHTML
- Gets or sets the HTML content of an element.
- element.textContent
- Gets or sets the text content of an element.
Selecting Elements
Use document.getElementById("id") to target elements by ID.
IDs are referenced in double quotation (e.g., #id).
Nodes in DOM
Each element corresponds as a node, you can add or delete nodes using JavaScript and certain functions
Example:
Display: none - the <div> or <container> won't be seen but we can use JavaScript to call back the <div> to appear after a function is done.
Changing the style of a parent element affects its child and sibling elements.
Example:
Display: none - the <div> or <container> won't be seen but we can use JavaScript to call back the <div> to appear after a function is done.
- document.getElementById("myDiv").style.display = "none"; // Hides the element
- document.getElementById("myDiv").style.display = "block"; // Shows the element
Changing the style of a parent element affects its child and sibling elements.
Fig. 1.1 Creating element only in JavaScript, Week 3 (09/10/2024)
Fig. 1.2 Used to clear the input field, Week 3 (09/10/2024)
Usability Principles
- Simplicity - UI design and steps for an action
- Consistency
- Visibility - Don't hide the elements
- Feedback - Notification to inform and get closure, whether it is successful or not
- Error Prevention - Alert when making an error or mistake
Example: Interactive Card Element
A card design should include the following:
- Thumbnail image
- "Add to Favorites" icon.
- Brief product description.
- A clickable link that directs users to the product page.
Fig. 1.1 Introduction to DOM - Lecture Slides, Week 3 (09/10/2024)
WEEK 4
No class. We will continue our lesson next week.
WEEK 5
This week we were briefed on our Task 2 project as well as taught what we needed to include in our prototype such as micro and macro interactions. We then did a few basic tutorials on how to create components for animations in Figma, as shown below in this blog.
No class. We will continue our lesson next week.
WEEK 5
This week we were briefed on our Task 2 project as well as taught what we needed to include in our prototype such as micro and macro interactions. We then did a few basic tutorials on how to create components for animations in Figma, as shown below in this blog.
Micro-interactions: Small, functional responses (e.g., hover effects).
Macro-interactions: Larger workflows or processes.
These are some examples micro-interactions for web and web-app design:
WEEK 6
In the sixth week of the semester, we learned how to create animations using GSAP, which is a JavaScript animation library. Another website we can use for JavaScript animations is DaisyUI.
Tooltips
- Helps you how to use certain software (e.g. when you update or are a new user)
In the sixth week of the semester, we learned how to create animations using GSAP, which is a JavaScript animation library. Another website we can use for JavaScript animations is DaisyUI.
Tooltips
- Helps you how to use certain software (e.g. when you update or are a new user)
- Provide hints or instructions for using the software.
- Useful for onboarding or when introducing new features.
Hiding an Element
document.getElementById("profilePanel").style.display = "none"
Functions
Always wrap code inside {} for better organization and reusability. For example:
function hideElement() {
// Your code here }
WEEK 7
In Week 7, we had consultations with Mr. Shamsul about our progress in Task 2: Interaction Design Proposal and Planning. The feedback can be seen in the link.
WEEK 8
No class - Independent Learning Week (ILW)
WEEK 9
This week we were briefed on the third task of the module. We found interactive components in our app that we would like to develop and started creating them using HTML, CSS and JavaScript.
INSTRUCTIONS
https://drive.google.com/file/d/159_U4ajXP-Km8y8h6Gh64JjTjVKQ6xEX/preview
EXERCISES
WEEK 2 | HTML & CSS
During our class in Week 2, we were tasked with an HTML/CSS recreation exercise. This is the reference we are supposed to follow in Figma:
https://www.figma.com/design/29z0ulyOHONEK77cJUNUkf/App-Design-Exercise?node-id=1269-2&node-type=frame&t=dUDS2FR7ldx9e01c-0
Fig. 2.1 Figma Reference, Week 2 (02/10/2024)
During our class in Week 2, we were tasked with an HTML/CSS recreation exercise. This is the reference we are supposed to follow in Figma:
https://www.figma.com/design/29z0ulyOHONEK77cJUNUkf/App-Design-Exercise?node-id=1269-2&node-type=frame&t=dUDS2FR7ldx9e01c-0
Fig. 2.1 Figma Reference, Week 2 (02/10/2024)
Fig. 2.2 Figma Reference, Week 2 (02/10/2024)
To start off this exercise, I had to watch some tutorials on how to use Adobe Dreamweaver because that completely left my mind the moment Interactive Design was finished. When the basics were all set up, I inspected the page in Google Chrome so I could view and edit the HTML/CSS according to a mobile screen (iPhone 12).
I sectioned the HTML code into navigation bar, introduction, album and footer. I struggled a lot with making the navigation bar work, trying 5 separate codes and even asking the AI to help. Whenever I placed the icons in the navigation, they would not align to the left and right but instead they would stay in the center. This went on to the point that Mr. Shamsul said I could close my laptop lmao.
Fig. 2.3 Initial Code (Did Not Work), Week 2 (02/10/2024)
I redid my entire code back home. First, I embedded the font 'Inter' from Google Fonts and changed the font sizes and font weight to match the Figma reference given to us.
For the navigation bar, I used 'justify-content: space-between' to distribute the child elements evenly across the width of the container, with equal space between them.
Fig. 2.5 Problem Solving using Blackbox AI, Week 2 (06/10/2024)
Fig. 2.6 Navigation - HTML & CSS, Week 2 (06/10/2024)
For the text overlaying the image, I placed the text in a div and placed that div inside the image div. I used 'position: absolute' to adjust the placement of the text. Then I overlayed it using 'z-index' as well as created the green box surrounding the text.
Fig. 2.7 Text Overlaying Image, Week 2 (06/10/2024)
Fig. 2.7 Text Overlaying Image, Week 2 (06/10/2024)
The overlay box kept sticking out of the image div. When I inspected the page in Google, it wasn't the padding or margins. The only way I managed to fix it was to adjust the top element, and not set the bottom to 0 when using 'position: absolute'.
For the album gallery, I placed everything in one div as suggested by Mr. Shamsul in class then put all the images inside. I used 'display: flex', centered aligned the content and adjusted the size of the images. I also put some bottom padding so it wouldn't be overlapped by the footer.
Lastly, for the footer, I added a top and bottom padding so it would not look so squashed. I set the position of the footer to sticky.
Final Outcome
This is the final outcome of the website replication using HTML & CSS when displayed using iPhone 12 Pro on Google Chrome.
.png)
WEEK 3 | Introduction to DOM
In the third week, we were given an introduction to JavaScript. We made a "To Do List" webpage following the tutorial provided by Mr. Shamsul. This "To Do List" consists of letting users create tasks, mark them as done and delete items.
We started the exercise by creating an HTML structure and then styling it with CSS. Once that was done, we made a JavaScript file to make the actions such as creating the items in the list, the buttons and click functions using event listeners.
Fig. 3.1 "To Do List" Page, Week 3 (09/10/2024)
Fig. 3.2 Input box selected, Week 3 (09/10/2024)
Fig. 3.3 Add a new task, Week 3 (09/10/2024)
Fig. 3.4 Task marked as "Done", Week 3 (09/10/2024)
Fig. 3.5 "To Do List" - HTML, CSS & JavaScript, Week 3 (09/10/2024)
We started the exercise by creating an HTML structure and then styling it with CSS. Once that was done, we made a JavaScript file to make the actions such as creating the items in the list, the buttons and click functions using event listeners.
Fig. 3.2 Input box selected, Week 3 (09/10/2024)
Fig. 3.4 Task marked as "Done", Week 3 (09/10/2024)
This is the code for the "To Do List" webpage exercise, including the HTML, CSS and JavaScript files.
Fig. 3.5 "To Do List" - HTML, CSS & JavaScript, Week 3 (09/10/2024)
WEEK 5 | Micro and Macro Interactions
This week we were taught how to make simple and basic animations in Figma to help with our Task 2. This included making component sets that will animate things and make our app more interactive.
WEEK 6 | GSAP Tutorial
We learned how to create animations using GSAP. For this tutorial, we used the source file provided by Mr. Shamsul which consists of the HTML and CSS code. We then entered the JavaScript in order to make animations work.
The animations we did were for the logo, hamburger menu, and panels. On top of this, we applied to play/ stop functions in the "Featured Release" section.
FEEDBACK
WEEK 2
The code is correct but somehow not working. Maybe try again at home or start a new file from scratch.
The code is correct but somehow not working. Maybe try again at home or start a new file from scratch.
REFLECTION
It was an interesting experience learning about JavaScript and integrating GSAP into our work, which I found made it much easier to code animations that we otherwise would have spent hours on. The tutorials in class were helpful in giving us a basic understanding of how to execute our assignments. However, I am still really confused on how to code with JavaScript because it's all so new to me and honestly it's way to complex to learn bit by bit and memorise what code does what.
Comments
Post a Comment