Interactive Design.pdf，作者 tian dong
WEEK 1
This week, our teacher explained the overall structure of the semester's course and outlined all the tasks we needed to complete. He emphasized the importance of user experience (UX) and performance evaluation in web design. For Task 1, he asked us to identify five excellent websites with potential for improvement and conduct in-depth analysis, advising us to avoid e-commerce or news websites. Mr. Shamsul also clearly explained the upcoming assignments and provided us with the necessary software.
WEEK 2—Usability: Designing Products for User Satisfaction
This week, the core theme of our class was Designing Products for User Satisfaction. The teacher emphasized that designs should allow users to intuitively understand how to operate without requiring additional instructions.
-Design Thinking:
The steps include: Empathize → Define → Ideate → Prototype → Test.
This is an iterative process, requiring continuous testing and improvement.
Then the teacher talked about what is usability?
The teacher focused on the five usability principles in class: Consistency, Simplicity, Visibility, Feedback, and Error Prevention. We divided into small groups to discuss these five usability principles. We focused on the fourth principle, feedback, so our group was labeled Group 4. We discussed what feedback is and the types of feedback (WhatsApp). We categorized the types into three: auditory feedback, tactile feedback, and textual feedback. We then created a PowerPoint presentation for class.
PPT
In class
Through each group's presentation, I also fully understood what the usability principles represent.
1. Consistency
The website's color, layout, and information architecture should be consistent to avoid disconnected styles across different pages.
Brand designs (such as Apple and Samsung) emphasize consistency.
2. Simplicity
Simplicity is not just about layout; it also includes simplifying user interfaces.
Example: Apple's official website emphasizes key products, allowing users to quickly find core information.
3. Visibility
Important buttons and features must be clearly visible and highlighted by color or placement.
For example, register/buy buttons are typically placed prominently in a contrasting color.
4. Feedback—we group 4
The system should provide users with timely feedback (visual, audible, vibration, etc.).
Examples: Tips for input errors, loading progress bars, and color changes after clicking a button.
5. Error Prevention
The design should minimize user errors and provide recovery mechanisms.
Examples: Gmail's "Undo Send," password strength reminders, and delete confirmation windows.
Afterwards, the teacher asked each of us to show him our work on Exercise 1 and gave him some feedback. Exercise 1
Teacher feedback
My professor felt that my overall approach was on track and the content was good, but the presentation and structure could be improved.
Suggestions for Improvement
Content Structure: Your "Visual Design" section is a bit mixed up. I suggest breaking it down into clearer sections, like I did in the previous website analysis, for example: color, typography, imagery, and motion.
Consistency: Maintain a consistent analysis approach and structure across different sections. You did a good job in this section, and you can apply the same approach to your analysis of other websites.
Details: In addition to an overall summary, you could break down the key points and explain them one by one for easier understanding.
Responsiveness: You mentioned "performance" and "responsiveness," which I think are good points, but you could expand on them and provide more specific information on how they perform on different devices.
Self-Reflection
This week's class gave me a deeper understanding of "PowerPoint topics." Using the Norman Door example, I realized that often the problem isn't that users "don't know how to use it," but rather that the design itself sends the wrong signals. Design should make it intuitive for users to understand how to operate, rather than relying on instructions or forced learning.
While learning the Design Thinking process (Empathize → Define → Ideate → Prototype → Test), I realized it's an iterative process. Failure and revision are inevitable, and the key is to gradually optimize and make the product more responsive to user needs.
The lectures and group discussions on the Five Usability Principles (consistency, simplicity, visibility, feedback, and error prevention) in class have taught me to apply these criteria to websites and apps. I've discovered that the success of many of my favorite apps stems from these principles.
Reflecting on this, I see two areas for improvement:
1. My case analysis wasn't clear enough. I need to better utilize structured methods (such as color, fonts, and animation) to illustrate my ideas. 2. During group presentations, I was somewhat reliant on others' input. In the future, I should be more proactive and try to explain design principles in my own words.
Overall, this week's learning has helped me begin to view design from a user's perspective. It has also made me realize that good design isn't just about aesthetics; it's about enabling users to complete tasks without any obstacles.
Week 3—The Web and Language
The teacher began the class with a discussion of the history of the internet.
The birth of the modern web can be traced back to 1989, with the invention of Tim Berners-Lee.
The earliest websites were very simple, displaying only text and low-quality images, due to the limited internet speeds and computer performance of the time.
In the early days of the internet, people could only use keyboards to input information; there were no touchscreens or voice controls.
The teacher also mentioned that most people now access information from television to mobile phones and the internet, making information dissemination more free and immediate.
Basic principles of web page access
When we open a webpage, our browser actually:
• Downloads the webpage's files (HTML, CSS, images, etc.) to its local cache;
• On subsequent visits, it directly accesses the cache, resulting in faster loading times.
Webpage processing involves two processes:
• Upload: transferring files to the server;
• Download: fetching webpage content from the server to the browser.
The development of web design
Around 2000, web design faced many limitations:
• Design needed to be tailored to different browsers (such as Internet Explorer and Firefox) and screen resolutions;
• There was no such thing as "responsive design";
• It wasn't until the advent of CSS (Cascading Style Sheets) that web pages could maintain consistent layouts across devices.
Web standards are set by the W3C (World Wide Web Consortium). an organization founded by Tim Berners-Lee that maintains internet language standards and compatibility.
The basic structure of a web page
An HTML web page consists of two core components:
1. <head>
This contains the title, page information, and style sheet.
2. <body>
This contains the main content, such as headings, paragraphs, images, lists, and hyperlinks.
A typical web page structure includes:
• Navigation
• Main Content
• Headings and Paragraphs
• Lists and References
My teacher said, "A good web page is like a well-laid newspaper—clearly structured, organized, and easy to read."
HTML Exercise
Create a basic HTML file and use the most basic HTML tag structure to complete an "About Me" profile page. Through this exercise, I learned the basic components of a web page, including structures such as <!DOCTYPE html>, <html>, <head>, and <body>, as well as how to use elements such as headings, paragraphs, lists, and hyperlinks to organize web page content.
My HTML file
Self-Reflection
This class helped me truly begin to understand the underlying structure of a web page.
I used to think of websites as mere finished products, but after the teacher explained HTML syntax and the divisions and hierarchical structure of web pages, I began to realize that web design is actually the art of organizing information.
During practice, I encountered some minor issues, such as incorrect file naming or improperly closing tags, which caused the web page to not display properly. While these were basic mistakes, they reminded me of the importance of maintaining focus and clear logic when writing code.
I also realized that HTML is more than just a language; it's a training in "structured thinking." It requires us to think beyond the visual level, considering the order, hierarchy, and connections of information.
This way of thinking aligns with the core of interaction design: enabling users to more efficiently understand and manipulate information.
Next, I hope to further develop my HTML structure to create a more visually layered design, so that the page better reflects my aesthetic and interactive concepts.
Week 4—From web page deployment to form creation
This week in our Interaction Design class, we delved deeper into the practical aspects of web design and deployment. We covered HTML basics, then moved on to uploading websites, setting up images and backgrounds, and even how to insert tables into web pages. The class was incredibly informative and gave me a deeper understanding of the practical process of front-end web development.
The teacher asked us to import our index.html in the netlify website and change the project name.
The teacher taught us how to use Adobe Dreamweaver (DW) to edit web pages, allowing us to experience the website design process from establishing the website structure, inserting pictures, to background setting and table creation.
My HTML file
At the end of the course, the instructor explained the requirements for Project 1:
We needed to select an existing website, analyze its design and user experience issues, and propose a redesign plan.
The focus was on developing a concept and design logic, rather than creating a complete website.
The report should include visual concepts, user experience optimization directions, and reference websites or sketches.
After listening to this, I felt that this assignment was very challenging and very close to a real website redesign project.
Week 5 — Deep Dive into HTML and CSS
This week, the teacher focused on the structure and usage of HTML and CSS, focusing on the following:
1.The difference between IDs and Classes in HTML
IDs: Uniquely identify an element (each page can only have one ID).
Classes: Used to set the same style for a group of elements and can be reused.
In CSS, IDs are referenced with a "#" sign, and classes are referenced with a "." sign.
2.The Concept of Block and Inline Elements
Block elements (such as <div>, <p>, and <section>) occupy a single line.
Inline elements (such as <span>, <a>, and <img>) do not wrap and appear side by side with other elements.
You can use the CSS display property to change their display behavior.
3.Semantic Elements of HTML
The teacher introduced semantic tags such as <section>, <article>, and <aside>.
Using semantic tags helps browsers and search engines understand the structure of web pages, making them more standardized and readable.
4.CSS Selectors and Declaration Structure
CSS consists of selectors and declarations.
5.Three Ways to Add CSS
External CSS: A separate .CSS file, included via the <link> tag.
Internal CSS: Scripted within the <style> tag.
Inline CSS: Scripted directly within the style attribute of an HTML element.
Teacher's Note: In actual design, it's recommended to use external style sheets for a clearer structure and easier maintenance.
6.Cascading and Precedence
When styles at different levels conflict, the browser determines the final style based on the cascading order:
Inline > Internal > External
If styles conflict at the same level, the later-appearing style overrides the earlier one.
The teacher showed us the practical application of today's learning content
Importing Google Fonts
The instructor demonstrated how to use Google Fonts to add web fonts.
- Steps:
Select the font → Click "Get embed code"
Copy the <link> tag into the <head> section of your HTML page.
Week 5 — Deep Dive into HTML and CSS
- Set the following in CSS:
body {
font-family: 'Roboto', sans-serif;
}
Text style attributes
Control background repetition, position, and fixation
Change title font style and color
Set the background color of a text
HTML code file
Finally, the teacher assigned an exercise:
Week 6 — HTML + CSS Integrated Exercises and Web Page Structure Practice
In class, the teacher explained the core concepts of HTML and CSS, website file structure management, and how to operate in Dreamweaver (DW).
Lecture PDF
Afterwards, following the teacher's guidance, we independently completed a full webpage including a navigation bar, content area, images, map, and contact form.
Website File Management and Dreamweaver Operation
The teacher emphasized the importance of "website definition."
In Dreamweaver, we first need to "Manage Site," and then create the folder structure locally, for example:
project-folder/
│
├── index.html
├── style.css
└── image/
All images and styles should be stored in the same website directory to avoid path errors.
File names must be lowercase and should not contain spaces or special characters.
In the exercise section, I wrote the following webpage code based on the teacher's demonstration.
The page includes a navigation bar, four main content areas (Home, About, Instruction, Contact), an embedded map, and forms.
🔹 HTML Structure-(File name: index.html)
The teacher emphasized in class:
"The structure of a webpage is like the skeleton of a building; each section should be semantically clear and logically distinct."
Following this approach, I created the following structure in the HTML:
In this structure, I followed the approach presented in class:
• Use `<nav>` + `<ul>` to build the navigation;
• Use `<div id="container">` as the main container;
• Use `<h1>` to distinguish each topic heading;
• Add a contact form (`<form>`) at the end to give the webpage basic interactive functionality.
🔹 CSS Styles-(File name: style.css)
The teacher explained in detail how to use CSS to control layout and visual effects, reminding us:
"Making the layout neat and the fonts harmonious is the most basic aesthetic training in front-end design."
I completed the following design in CSS:
Key visual features:
• A beige background creates a soft overall atmosphere;
• A light brown background for the navigation bar adds depth and visual interest to the content;
• Fonts from Google Fonts:
• Cinzel is used for headings to add a classic feel;
• Cormorant Garamond is used for body text to improve readability;
• Hover effects provide interactive feedback for navigation links;
• Rounded input boxes and purple buttons in forms create a visually consistent and user-friendly interface.
Webpage display video
Source file
Week 7-Box Model
This week's interaction design course is divided into two parts:
- CSS Layout and Web Page Structure Practice
- Project 2 "Website Redesign Prototype" Assignment Instructions
The instructor will first guide us through hands-on practice to grasp the logic of web page visual layout (such as Box Model and Flexbox),
and then explain how to apply this design and structural knowledge to the upcoming Project 2 prototype development.
🧩 Part 1: CSS and Web Page Structure Practice
1️⃣ Display and Element Types
- The instructor explained the different types of the CSS `display` property:
- `block`: Block-level element (occupies a single line, width and height can be set)
- `inline`: Inline element (on the same line as text, width and height cannot be set)
- `inline-block`: Combines the characteristics of the above two, can be displayed side-by-side and its size can be defined
- `flex`, `grid`: The main layout methods for modern web pages
Through the comparison of different types, we understood how to control the arrangement and hierarchy of elements on a web page.
2️⃣ Box Model
The instructor explained the structure of each element on a webpage in detail:
- Content: The text or image itself
- Padding: The space between the content and the border
- Border: The wireframe that surrounds the element
- Margin: The outer spacing between elements
💡 Key Concept: Using `box-sizing: border-box;` keeps the overall width of the box fixed, preventing the overall size from being affected by the border or padding.
The instructor also demonstrated how to visually see the differences between margin, padding, and border in the browser and explained their impact on webpage layout.
3️⃣ Creating a CSS File and Linking HTML
- The instructor demonstrated how to create an external stylesheet file in VS Code or Dreamweaver:
- Create a new `style.css` file.
- Add the following to the `<head>` tag in your HTML file:`<link rel="stylesheet" href="style.css">`
- Ensure the CSS file and HTML are in the same project folder. The teacher emphasized: Do not write styles directly into HTML; keep the structure and styles separate for better maintenance and reuse.
4️⃣ Flexbox Layout Practice
The teacher guided students to design two-column and three-column webpage structures using Flexbox.
Key properties include:
- display: flex
- flex-direction: row / column
- justify-content: space-around / center
- align-items: center
Through practice, we learned how to make elements adapt their arrangement within a container while maintaining visual balance.
5️⃣ Image and Content Ratio
The teacher pointed out that webpage images should use relative sizes (e.g., width: 100%) instead of fixed pixels,
otherwise, they will distort or become deformed on different devices.
Furthermore, if content overflows the container, you can use overflow: hidden or min-height to limit the area.
6️⃣ Page Structure Demonstration
The teacher finally demonstrated the basic webpage structure:
- Header: Includes logo and navigation bar
- Main: Main content area (can be divided into left and right columns)
- Footer: Copyright and contact information
He reminded us that in visual design, we must maintain consistent spacing between sections and uniform image sizes; otherwise, the webpage will have issues with misalignment or misalignment.
The practice code I did-HTML
The practice code I did-CSS
Webpage display video
🧱 Part Two: Project 2 Assignment Instructions
The teacher explained the requirements for Project 2 in detail during the second half of the class and posted the written assignment instructions on Google Classroom.
Week 8-CSS Position
This week, the instructor mainly explained the CSS `position` property and its application in web page layout. In the latter half, the instructor guided us through creating a dropdown menu. The course content included both conceptual explanations and practical exercises with demonstrations.
CSS Position Property Explanation
The instructor first introduced the role of the `position` property in CSS:
It controls how web page elements are positioned within a container, thus determining the spatial relationship between elements and other elements.
Five Position Types and Their Differences:
1. `static` (Default): The element follows the normal document flow and cannot be adjusted using `top`, `bottom`, `left`, or `right`.
2. `relative` (Relative Positioning): The element is offset relative to its original position. Its position can be moved using `top`, `left`, etc., but it still occupies its original space.
3. `absolute` (Absolute Positioning): The element is removed from the document flow and positioned relative to its nearest non-static parent element. Commonly used for floating components or background layers.
4. `fixed` (Fixed Positioning): The element is fixed relative to the browser viewport and does not move with page scrolling. Suitable for fixed navigation bars or back-to-top buttons.
5. `sticky` (Sticky Positioning): The element flows normally until it reaches the specified position, then remains fixed on the viewport. It is a combination of `relative` and `fixed`.
💡 Additional Concept: Z-index
The teacher also introduced the usage of z-index, which controls the display order of elements in three-dimensional space (front and back layers). The larger the value, the more prominent the element appears in front, and it is often used to adjust the layer relationship of overlapping elements.
💻 Practical part
The teacher demonstrated how to create a box with four different positioning methods (static, relative, absolute, and fixed). By setting different top, left, bottom, and right values, students could visually see the effects of each positioning type.
Also, when adding a video background to a webpage, `position: absolute` combined with `z-index: -1` can be used to place the video below the content layer.
Source file-HTML
Source file-CSS
In the second part, the teacher guides everyone to create a navigation menu with dropdown content.
HTML Structure:
Use `<ul>` and `<li>` to create navigation bar items. Nest a new `<div>` within the item that needs dropdown options as the dropdown content container.
Add `class="dropdown"` to the outer layer and `class="dropdown-content"` to the inner layer to differentiate the styles.
Source file-HTML
CSS Styles:
1. Set `.dropdown-content`'s `display: none;` to hide the dropdown content by default.
2. When the mouse hovers over `.dropdown:hover`, change `.dropdown-content`'s `display` to `block` to make the dropdown appear.
3. Use `position: absolute;` to make the dropdown content float below the main menu.
4. Add `z-index: 100;` to ensure the menu content is on top.
5. Adjust the background color, padding, and font style to make the dropdown menu clearer and more aesthetically pleasing.
✨ Teacher's Tip:
You can set different colors for the navigation buttons or menu content for differentiation.
If the dropdown menu's coverage is not obvious, you can use `z-index` to adjust the hierarchy.
Mouse hover is the most common interaction method.
Source file-HTML
Week 9
Exercise 3：The teacher checked my code and asked me questions.
He asked me what this piece of code meant. For a moment, I couldn't answer. In my third exercise, I used tutorial videos from various websites to do some of the code. I found the code very difficult, so I had to refer to tutorial videos from other websites again after each time I got out of class and during each exercise session.
Later, when I went back to review my previous code and watched some tutorial videos, I realized that this was a mobile-optimized response query. When I was doing this exercise, I wanted the webpage to be clearly visible on both computers and mobile phones.
This is the instructional video I watched back then.
The teacher then discussed avoiding e-commerce and online bookstores when choosing a website theme:
❌ Don't create an Online Book Store
❌ Don't create any e-commerce website
The reason is that the content of these websites is too complex and not suitable for practice at this stage.
The teacher suggested:
• Choose an informational website
• Or an introductory or service-oriented website
The goal is to help us focus on training information organization, logical structure, and page layout, without being distracted by numerous product categories and business logic.
The importance of reviewing Exercises must extend to Project 2. This reminds us that Exercise training isn't just about completing the exercises; it needs to be applied to Project 2.
This includes principles such as:
• Grid system
• Hierarchy
• Alignment
• Reading Flow
These principles are fundamental and must be applied to current web design. He wants us to move beyond simply pursuing "beauty" and prioritize ensuring that web content is understandable, logical, and meaningful.
The teacher will be reviewing each of our Project 2 projects next week（week 10）
Comments
Post a Comment