App Design II - Lectures & Exercises
23.9.2024 - (Week 1 - Week )
Chong Hui Yi / 0363195
Experiential
Design / BDCM
Lectures & Exercises
LECTURES
WEEK 2: (HTML/CSS Revisiting Exercise)
This week, Mr. Shamsul gave us a UI for a mobile app in Figma, and asked
us to recreate it using HTML and CSS, providing all the necessary images.
At first, I completely forgot how to start; most of what I learned in Sem
2 had almost disappeared. However, with the help of my old notes and
ChatGPT, I finally completed it and remembered most of the content.
Fig. 1.0 The original version in Figma
Fig. 1.1 Dreamweaver outcome
WEEK 3: DOM (Document Object Model)
- A tool browsers use that lets developers change and control web pages
using code like JavaScript.
How DOM Works:
When a web page loads, the browser turns the HTML into a DOM, which is
like a map of the page.
DOM Structure:
The DOM is a tree of nodes, with each part of the HTML (like elements,
attributes, and text) becoming a node in this tree.
Why the HTML DOM is important in website development:
- Dynamic Interactions: The DOM lets developers add, delete, or change elements and styles on a webpage, making it possible to update content when users interact with it.
- JavaScript Manipulation: JavaScript uses the DOM to respond to user actions, like clicking a button, allowing the page to update or change instantly.
- Event Handling: The DOM lets developers detect events like clicks or keyboard inputs and run code when these events happen, making pages interactive.
- CSS Manipulation: The DOM can be used to change CSS styles of elements, so the appearance of the webpage can update dynamically.
Common DOM Methods:
- document.getElementById(id): Selects an element by its ID.
- document.querySelector(selector): Selects the first element that matches a CSS selector.
- document.createElement(tagName): Creates a new HTML element.
- element.appendChild(newNode): Adds a new child node to an element.
- element.innerHTML: Gets or sets the HTML content of an element.
- element.textContent: Gets or sets the text content of an element.
# HTML: The base structure of the page.
# CSS: Changes how the HTML looks (styles like color and layout).
# JavaScript: Changes how the HTML and CSS behave (like animations or
interactions).
Fig. 2.0 To do list - HTML & CSS
Fig. 2.1 To do list - JavaScript
Fig. 2.3 To do list exercise
WEEK 5: Macro & Micro
4 Parts of a Micro-Interactions:
- Trigger: This is what starts an action. It could be something you do, like pressing a button, or something the app does automatically, such as sending you a notification when you receive a message.
- Rule: The rule acts like a set of instructions that determines what should happen after the trigger. For example, if you flick a light switch, the rule dictates that the light either turns on or off depending on its current state.
- Feedback: Feedback is how the app or device lets you know what’s happening. It could be visual (like a button changing colour), auditory (like a ping sound), or tactile (like a vibration from your phone).
- Loops & Modes
- Modes refer to different states the app or system can be in. For instance, a stopwatch can be in "running" mode or "paused" mode.
- Loops involve actions or processes that keep repeating, such as an app continuously showing progress while a file is being downloaded.
14 Micro-Interaction Examples:
- Progress Bars in Checklists (Attention Insight) – Encourages completion by visually showing progress.
- Password Error Feedback (Simplenote) – Highlights errors subtly, reducing user frustration.
- Tooltips in Onboarding (Talana) – Provides context-sensitive help to guide new users.
- Hotspots for Navigation (Grammarly) – Uses flashing icons to draw attention to features.
- Main Dashboard Preloader (Userpilot) – Keeps users informed with a friendly loading message.
- Dynamic Loading Page (Figma) – Offers visual cues and progressive loading.
- Gamified Animations (Kontentino) – Rewards users with fun visuals upon milestone completion.
- Lock Screen Branding (RememBear) – Uses character animations to make security checks engaging.
- Celebratory GIFs (Mailchimp) – Congratulates users for task completion with fun animations.
- System Feedback (Google Assistant) – Uses floating dots to show active listening.
- Tap-and-Hold Reactions (Facebook) – Offers a playful reaction menu for posts.
- Typing Indicator (HubSpot Chatbot) – Mimics real conversation by showing typing feedback.
- Mouse-Over Effect (Hootsuite) – Indicates clickable elements with a jumping effect.
- Creative Error 404 Pages (Dribble) – Uses animations to make error pages more appealing.
WEEK 6:
This week, Mr. Shamsul introduced us to two websites:
In class, we followed the instructions to add a script in HTML and successfully created animations, but I found it quite difficult to understand.
Fig. 3.0 Final Outcome Animation
FEEDBACK
-
Comments
Post a Comment