weekly learning

week 1

This week marks the official start of the Interaction Design course. The instructor clearly explained the core framework of the course, covering course requirements, project rules, design principles, tools, and topic selection.

The course grade is composed of both regular practice and the final project, with clearly defined weightings:

• Complete 3 in-class exercises during the semester, which will be counted towards your participation grade.

• The final project carries the highest weight; failure to submit it will result in automatic failure, so it must be taken seriously.

• The overall passing score is 60%, and both exercises and the project must be completed simultaneously.

• All assignments, materials, and reports must be submitted on time; unexcused late submissions will not be accepted.

Our core task this semester: Independently complete a website design project.

The core task this semester is to create a complete website from scratch, with very specific requirements:

• Choose your own theme; options include banking, education, culture, food, sports, etc.

• You must complete the Information Architecture (IA), visual design, interaction flow, and page construction.

• Dynamic interactions, animations, and usability guidance are encouraged; avoid purely static pages.

• Designs must have a benchmark; they cannot be created out of thin air.

• Project Requirements: Reason for Topic Selection, Design Concept, Design System, Site Architecture

The instructor emphasized the underlying logic of interaction design:

• Aesthetics directly impact user perception of usability; good-looking = better-usable

• Follow usability principles: clear interface, intuitive operation, and reduced learning curve.

• Avoid overly complex decorations; maintain structural stability and logical flow.

• Focus on page sequence and flow; ensure a reasonable user path.

Tool Preparation and Class Requirements

• Adobe software must be installed; practical training begins next week.

• Eating in class is prohibited; bring your own water bottle.

• Preview module content before class; advanced knowledge points will be covered in class.

• Relevant materials and textbooks have been uploaded; please review them in advance.

Instructor Suggestions for Topic Selection

The instructor provided high-scoring and friendly topic directions to facilitate quick theme selection:

• Regional Culture: Showcasing local characteristics of Chongqing, Jiangxi, etc.

• Education and Popular Science: Food science, knowledge learning

• Sports and Health: Interactive websites for basketball, fitness, etc.

• Cultural Innovation: Traditional + Modern Interactive Experiences

• Requirements: Clear theme, relatively recent (within 5 years), and available reference materials.

Next week's tasks include installing the design software, determining and submitting the project theme, starting to find reference websites, and organizing the design ideas.

Week 2: Public holidays

Week 3

This week's third week of interaction design courses focused on the basic operation of Adobe Animate software and vector drawing. The instructor explained in detail the software's history, interface layout, core tool usage, and key drawing modes. We also completed two classroom case studies: a beach ball and a small boat. Finally, we assigned Exercise 1 comprehensive exercises for after-class practice.

I. Basic Software Understanding

Adobe Animate, formerly known as Macromedia Flash, was initially used primarily for creating web animations and online games. It only supported SWF format publishing, required browser plugins to run, and had poor compatibility.

The upgraded Adobe Animate now supports the HTML5 Canvas platform and can be played directly in mainstream browsers without additional plugins. It is a core tool for creating interactive animations and dynamic web pages.

II. Core Settings for Creating a New File

1. When creating a new document, you must select the Web→HTML5 Canvas platform. This is crucial for adapting to web page display; selecting the wrong platform will prevent the file from being published correctly.

2. Set the frame rate to 24-30fps. This range ensures smooth animation playback and meets visual smoothness standards.

3. We can customize the high-resolution canvas size to meet your drawing and presentation needs.

The teacher then introduced the functions and usage of the core tools in the toolbar one by one, including the selection tool, partial selection tool, free transform tool, rectangle tool, ellipse tool, line tool, brush tool, fluid brush tool, eraser tool, paint bucket tool, and ink bottle tool. The teacher also emphasized that after selecting any tool, parameters such as brush size, smoothness, shape and color, and stroke thickness can be adjusted in the properties panel on the right.

This is the most important knowledge point of this lesson and the basic drawing standard:

1. Object drawing mode must be enabled before drawing. When enabled, each shape is an independent entity; overlapping shapes will not automatically merge. They can be selected, moved, and edited individually, and are marked with a blue border for easy operation.

2. If this mode is disabled, the drawn lines and shapes will automatically merge into a single unit, making individual modification impossible and easily leading to drawing errors.

3. After drawing a shape, if you need to fill different areas with color, you must break it up before using the paint bucket to fill with different colors.

4. The eraser tool supports multiple modes, including erasing only the fill color, erasing only lines, and standard erasure, adapting to different drawing needs.

During the drawing process, alignment tools can be used to center multiple graphics horizontally, vertically, or at equal intervals, improving the neatness of the image. After drawing and coloring the graphics, select all graphics and press Ctrl+G to group them for easy movement and management, keeping the image clean.

Classroom Exercises

Exercise 1: Drawing a Beach Ball

1. Enable object drawing mode. Use the Ellipse Tool while holding down the Shift key to draw a perfect circle as the outer outline of the beach ball.

2. Copy the circle and scale it down proportionally. Use the Align Tool to center the inner and outer circles horizontally and vertically.

3. Use the Line Tool to draw intersecting stripes. The lines should completely cover the beach ball, ensuring even coverage.

4. Select all the shapes and break them apart. Use the Paint Bucket tool to fill each stripe area with a different color.

5. After filling, select all and group them. The final product will have smooth lines, distinct colors, and a well-proportioned shape.

Exercise 2: Drawing a Small Boat

1. Using the object-oriented drawing mode, combine basic shapes such as rectangles, lines, and ellipses to build the hull, bottom, deck, and gunwales.

2. Draw each component independently, keeping it editable, and set the fill and stroke colors to your liking.

3. Adjust the proportions and positions of each part to ensure the boat's shape is simple, its structure is reasonable, and it conforms to the vector drawing style.