-> Projects
→ Activities
-> Publications
→ Team
→ Gallery



This is the Sound Studies Group at the SUSTech School of Design, Shenzhen. It is led by Dr. Qiushi Xu and Dr. Marcel Zaes Sagesser. Our research focuses on sound in relationship with technology, the environment, and human listening. It includes sound technology, sound studies, Human Computer Interaction (HCI), sound design, philosophy of science and technology, spatial audio, interactive audio, and creative media. The output of this team is published in prestigious international journals, at domestic and international conferences, and at international exhibitions and concert halls.

We are continuously looking for exceptional students for short-term or long-term internships and visiting student positions in our group. Please send us your CV and your portfolio if you are interested.

SUSTech School of Design ● Sound Studies Group
南方科技大学创新创意设计学院 ● 声音研究科研组

#Sound Studies
#Creative Media
#Digital Media Arts
#VR + Sonic Architectures
#Interaction Design
#Sound Design
#Auditory Interaction
#Human Computer Interaction HCI

DS366 Composing Experience 体验建构

Spring 2025


Prof. Marcel Zaes SAGESSER
Office hours Marcel: Monday, 1-3pm, or other times: sign up 24 hours in advance
TA: QiuChan邱婵 (Murmur)

64 hours (32 lecture hours, 32 practice hours)

Class List
Week 1 Survey: wishes
Class folder
Schedule for Student Presentations

Software Resources
Illustrator Tutorials EN
Illustrator Tutorials CN
After Effects Tutorials


Course Summary

A practice-based studio course in experience design that focuses on planning, analyzing, combining, communicating, and fluidly translating across materials and media the individual parts that make an intangible experience.

Course Description

The course invites students to consider experiences as constructed from many individual parts. Students learn to analyze and construct time-based and often intangible experiences across various materials and media. By combining and recombining single components of experiences, students practice translating ideas fluidly between means, media, formats, and technologies to support the planning, realizing, analyzing, and communication of their ideas. A variety of visual and language means is used to render visible that which normally is invisible or intangible. Formats from different fields, such as plans, maps, models, diagrams, storyboards, musical scores, animated plans and others are studied in detail. At the end of this course, students are able to compose and communicate experience design at an advanced level. They will demonstrate competence in moving from planning to implementing, communicating, and back; and they will develop fluency in multimodal representation as well as critical thinking.

Learning Outcomes

  1. Name and explain a variety of tools that are available to experience designers for communicating their ideas
  2. Demonstrate experimentation in visual expression as compositional device
  3. Demonstrate critical thinking and precise communication skills 
  4. Develop, realize, and present a composed experience that successfully communicates your idea to a potential audience

Course Project Assignment

Each individual plans, realizes, presents and submits a large-scale design project: a larger ‘plan’ of a design project chosen by the individual, which involves different digital media, formats, forms, and styles to communicate the design to a public. The most common deliverables will be a video presenting, or being, the plan, along with a written report. Alternative deliverables are accepted if they are discussed ahead of time with the instructor (potentially VR projects, apps, series of drawings, and many others are accepted if there is a strong reason why the idea cannot be presented in a video). Submit: video, or alternative format that is similar in scale. 20 images (professional portfolio-style images in high-resolution). Project title, slogan, and abstract. The course project will be developed through weekly uploads (w1-3), in a first classroom presentation with expert feedback (w7), in a classroom exhibition/discussion (w14), and in a final course submission (w16).

Course Outcomes

  • Video (professional, portfolio-style concept design video)
  • 20 project images (portfolio-style, high-resolution, professional design images)
  • Text: project title, slogan, and abstract (professional EN+CN portfolio language)

Guest Speakers (Pending Confirmation)

  • Shuhan Yang (Designer, Digital Design, 3d Modelling) - Feb 19
  • Xiao Kui (Designer, Urban Planner) - March 12
  • Lia Sáile (Designer, Digital Artist)
  • Gottfried Haider (Artist, Software Tool Builder, Interactive Media Arts) - April 30
  • Weiwei Zhang (Designer, Health and Well-Being, Innovation, Aging & Accessibility)



Weekly Plan


Week 1

L: Course Introduction: meaning of “composing” (Lecture)
P: Exercise in composing (Practice)

  1. Welcome: what is this course? What is the outcome?
  2. Course logistics: overview, content, final project, academic rigor, ethics, creative rigor, AI policy, late policy, food, cleaning
  3. Lecture “experience” / “composing” (Read textbook chapter 1, workbook chapter 1.1)
  4. Exercise in composing: relationship between the design and its plan? Take one single object or component of your project, and sketch it up very roughly
  5. Practice: module in Illustrator (QiuChan)
  6. Practice: module in Blender (Yang Shuhan)
  7. Discussion + preview + heads-up for “Design Project Diary”
  8. Assignment of Student Theory Presentations


All works shown are made by the instructor.


Homework:
Upload:
  1. Scan of hand-made sketch on paper
  2. Illustrator file with traced sketch (lines need to be vector-paths)
  3. Exported image of the traced sketch (can be jpg, tiff, png, pdf)
  4. Blender file of 3d model that you have made by yourself using Rodin
  5. Exported image of 3d model (show it in a nice view), can be jpg, tiff, png, pdf)
  6. One text sentence explaining how all these materials relate to your project (which part of your project are they?)

Note:
ideally, your sketch, your line-tracing, and your 3d model should relate to your course project (which is in most cases your FYP).



Week 2

Components of an experience
Splitting a whole in its individual parts

  • Student Presentation: A “Design Plan” of an Experience (Ziye)
  • Repetition: what is “composing an experience”
  • Reading: Design, Experience, Sketching
    What is Sketching? What is a Sketchbook? Why do we sketch?
  • Media Literacy: 3d, traces, vectors, animations, elements
  • Studio Worktime


All works shown are made by students in the class.


Homework Week 2 Progress Upload:
  1. scans from your new sketchbook that show at least 10 sketches or thumbnail sketches (at least two every day)
  2. One (1) digital 3d shape made from one of the 10 sketches (saved as png or jpg in high resolution)
  3. One (1) digital 2d shape that contains vectors made from one of the 6 sketches (saved as png or jpg in high resolution)
  4. Both 3d and 2d shape: print them out in small, glue them into your sketch book, add hand-written annotations -> scan the result again and upload it (saved as png or jpg or pdf in high resolution) 
Upload to Blackboard before 1:55pm next Wednesday (auditors: email to teacher before that time)



Week 3

Sketching across materials
Material exploration

  • Student Presentation: A “Design Plan” of an Experience (Lina, Xiaoxiao)
  • Case studies: more sketches across materials (Murmur)
  • Theory: Workbook, sketching across different materials, 2.1 / 2.2 / 2.3: Reading, and adding “scribble” and “photo sampling” to our vocabulary as designers
  • Media Literacy (Marcel)
  • Studio Worktime

All works shown are made by students in the class.

Homework Week 3 Progress Upload:
  1. Every day, take at least one photo (on your phone, on a camera, or sometimes you can also collect one from the internet, but add the source). This is to collect inspiration for your project (FYP or other project), and to “photo sample” the world around you. A great way of using this is to utilize photo sampling to create background situations for usage scenario (example: an empty building or empty street or park, and later you add a 2d or 3d drawing onto the photo)
  2. Print all the 7 photos out, cut them, and glue them into the notebook
  3. Annotate your photos (this means, add text inside and outside the photos, with lines, arrows, and other icons). This helps the reader to understand your idea better.
  4. Add scribbles + sketches next to photos to show a single detail of your idea. The idea is to integrate all the designer tools that you have learned in this course, so as to produce a collage with different styles/materials. 
  5. Scan all these 7 “multi-media” collages made with photo/text/annotations/lines/scribbles, and upload the result as a pdf to Balckboard (make sure it is scanned at high-resolution)!

Upload to Blackboard before 1:55pm next Wednesday.


Week 4

Sketching across media
Media exploration

    • Student Presentation: A “Design Plan” of an Experience (Calandra)
    • Media Literacy: What is Animation? Start AE. Layers, import, draw shapes, animate, move, scale, rotate, ease, blur
    • Case Studies: analyize existing animations, then make our own
    • Studio Worktime



    Homework Week 4 Progress Upload:
    1. Each student is assigned one of the six animation case studies. From this case study, choose one moment that is interesting for you (no more than 5 or 10 seconds). 
    2. Then, recreate this moment in AE with simple shapes, vector paths, text elements, and color backgrounds. Recreate especially the motion/animation. However, switch all elements, replace them with your own project materials, so that you make this animation your own.
    3. Create an animation that is roughly ~10 - ~30 seconds in length, export it as an mp4 from AE
    4. Upload to BlackBoard:
      - mp4 animation video
      - 3 screenshots (png or jpg) of the original moment of the case study that you selected, which show the movement

    Upload to Blackboard before 1:55pm next Wednesday.




    Week 5

    Translating ideas
    Develop fluency

    -> from a sketch to a plan to a design, but also, from a design, back to a plan, back to a sketch, to understand that the plan/sketch is the design

    • Guest Talk #1: Yan Yan / Presenting Ideas and Skills for Design Project Proposals
    • Student Presentations: A “Design Plan” of an Experience (Coral & Calvin)
    • Workbook 3.3
    • Studio Worktime (rules are: work on your chosen project for this class, stay inside the classroom during class hours)



    Homework Week 5 Progress Upload:
    1. Develop a “shape vocabulary” as suggested by the workbook 3.3: In your notebook, develop and iterate 6 simple shapes, made with circles, rectangles, and lines. Scan these (including the process), and upload as a pdf to BB.
    2. Then, in the digital space (Illustrator, Figma, After Effects), recreate the 6 shapes. Upload these as jpg/png to BB.
    3. From these 6 digital ojbects, choose 3, animate them (add motion), and ideally add them to your composition from last week (if it makes sense). Or start a new video. Upload an mp4 to BB.
    4. This exercise should relate to your FYP or course project.

    Upload to Blackboard before 1:55pm next Wednesday.







    Week 6

    Overview of tools for experience designers
    Naming, understanding, and using tools

    • Student Presentation: A “Design Plan” of an Experience (Jojo & Lance)
    • Reading: Textbook 4, Clarity and Design Tools (p. 115-123)
    • Reading: Workbook 3.4 / 3.5 / 3.6 (vanilla sketch / collaborative sketch / slideware)
    • Reading: Workbook 3.9 / 3.10 (tracing + hybrid sketching)
    • Reading: Workbook 3.11 (sketching with foam core)
    • Studio Worktime (rules are: work on your chosen project for this class, stay inside the classroom during class hours)


    Photo Traces
    trace/draw the outlines on a real photo
    -> show that we design some change/innovation for something real that already exists

    Foam Core Sketching
    using traces, showing them on foam board, printing, cutting, putting as object in exhibition
    -> Show our UI on several thick cardboard panels showing stages

    Collaborative Sketch
    collaborative method for drawing, participants interact on the same piece of paper
    -> used for brainstorming and expressing everyone’s own thoughts, and for interactingA

    Hybrid Sketch
    combination of sketching and photo
    -> show something that is hard to draw, but also, you can show your design idea inside a realistic real-world situation

    Ambiguity of the Sketch
    A sketch that is not very accurate, can leave open several possibilities and ways of interpretation
    -> this sketch can help people gain more ideas, especially in collaborative situations

    Slideware for Drawing (Digital Sketching)
    Using digital software for sketching, which have predefined shapes that can be modified 
    -> it can be created fast, and modified easily, and can be animated or linked easily
     
    Memory Drawing
    Handmade rendering of an exploded view that shows something abstract (like a techical detail of the design)
    -> to capture ideas, to come with ideas, and functions, very quickly, as an extension to our own memory

    Description Drawing (Instructions)
    It shows to the user how to use the product, it’s an instruction diagram, very similar to a technical diagram, but made for the user
    -> made for the user, explains the use of the product, uses also red arrows, text annotations, etc.

    Using real photos together with foam board
    make an interactive foam board prototype
    -> used to show physical interaction of your design idea

    Technical Drawing
    shows more detail, we can build the product based on the technical drawing
    -> helps us to think the things in deep detail



    Homework Week 6 Progress Upload:
    1. Present your project in a video (film, animation, hybrid, animated sketch, annotations, ...)
    2. Choose one example video that you find online and that can serve you as a related example
    3. Plan your video first in your paper notebook
    4. Apply 3 design tools from the list in Week 6. One is “annotations” for everyone, and 2 you can freely choose.
    5. Upload: (1) your video draft as mp4, (2) found example video as mp4, (3) scan of your paper notebook plan, (4) a text document where you say which two tools you have picked.



    Week 7

    Preparing for Interim
    Overview, Repetition, Deepening Skills, Finishing Materials

    • Guest Talk #2: Zhang Weiwei / The Power of Co-Creation: Unlocking Hidden Narratives through Artistic Tools
    • Student Presentation: A “Design Plan” of an Experience (Murmur)
    • Expectations for Interim
    • Studio Worktime (rules are: work on your chosen project for this class, stay inside the classroom during class hours)










    Week 8

    Student presentations, with feedback by reviewers
    Exhibition-style showcase of your course project: you are not allowed to talk, rather you are required to show a video and a series of visual materials that can speak for themselves. 

    Each student has 1 desk (tabletop) and 1 video screen. Exhibition setup. Each student shows:

    1. Video: Bring a personal device to show your video in loop. Duration: 30 seconds and 2 minutes. Resolution: HD 1080p (16:9). With or without sound is your choice. The video should include, and combine, many elements of the following: title of project, student name, project field (example: product design, UX design), text, text annotations, keywords, drawing, animation, photo elements, etc. Use and apply all the skills learned in this class.

    2. “Title Page”: One printed A4 (black+white) with your name, project name, project field/category, slogan or short abstract, keywords, year

    3. 10 Images: A series of 10 printed images on A4 or A3 (can include sketches, graphics, diagrams, etc.)

    4. Notebook: Your course notebook, openly presented on the table

    Homework: Progress Upload Week 7: Upload all interim materials to Blackboard by 6:10pm on April 9, 2025.





    Photos: interim presentations, School of Design, all works by students in the class (Photos by Yiyuan Bai, 2025)




    Week 9

    Analyzing experiences
    In-depth analysis of case studies

    • Student Presentations: A “Design Plan” of an Experience (Anges + JaNice)
    • Case Studies, in-depth: read Workbook chapters 4.1 - 5.5 (discovering digital techniques for design)
    • Studio Worktime (rules are: work on your chosen project for this class, stay inside the classroom during class hours)

    Homework Week 9 Progress Upload:
    1. From the theory workbook (chapters 4.1 - 5.5) choose one example/technique, and apply it in your paper notebook to your own project
    2. In your video, add one component / element / scene, and ideally incorporate this new techniqe
    3. upolad: a scan of your notebook, and the new video component / element / scene (no need to upload the full video)

    Upload to Blackboard before 1:55pm next Wednesday.



    Week 10

    Planning, combining, recombining, remixing
    Moving back and forth between plan and “thing”

      • Student Presentations: A “Design Plan” of an Experience (Kane)
      • Review of student needs (through survey)
      • Case Study: analysis of ads, design concept films, multimedia design website presentations (5 examples, each student analyses 1)
      • Think about: what is the “plan”, what is the “design”
      • Make an short elevator pitch for your project, and list the “plan” and the “design” elements
      • Studio Worktime (rules are: work on your chosen project for this class, stay inside the classroom during class hours)

      Criteria for case study analysis
      1. what is the design
      2. which are the plan elements that show the design
      3. which video editing technique can we learn from this case study?

      Task 
      Write an elevator pitch and list design and plan elements following this example here:


      Homework  Week 10 Progress Upload:

      Task 1 Write an elevator pitch and list "design" and "plan" elements following this example here:

      Nikola [Title]
      A dynamic sound design for electric trucks [short elevator pitch]
      • Design elements: 1) 2) 3)
      • Plan elements: 1) 2) 3)

      Task 2 Add one new scene to your video (then upload either the full video, or just the new scene)

      Upload:
      • Text document with elevator pitch
      • Your video (or the new video scene)

      Upload to Blackboard before 1:55pm next Wednesday.




      All sketches and digital prototypes shown are made by students in this class (copyright by students, 2025)




      Week 11

      Communication skill: imagine your audience
      Present your work

      • Guest Talk #3: Gottfried Haider / Creating in Dialog with Technical Media
      • Content input requested by class: graphic design / poster design / colors / selecting information / selecting content 
      • Studio Worktime (rules are: work on your chosen project for this class, stay inside the classroom during class hours)





      Homework Week 11 Progress Upload:
      1. Create 1 more graphical element for your FYP/project which can potentially be used for your posters and for your video. Which graphical element, what style, what technique, etc – you are completely free. – upload as pdf, jpg, png or similar to BB. 
      2. Create a first draft of a poster where you place many of your text and diagram and graphics element and play around. Apply the skill learned in the graphic design workshop in class. Add color, size, font, scale, empty space, grid, hierarchy, graphic design elements, lines, color boxes, etc. - upload as pdf to BB - poster templates have been shared with the class.

      Upload to Blackboard before 1:55pm next Wednesday. Deadline extended: new due date is on Wednesday, 10:00pm after class.










      Week 12

      Critical thinking
      Text writing

      • Critical Thinking + Text Writing Input Lecture
      • Critical Thinking + Text Writing Workshop
      • Studio Worktime (rules are: work on your chosen project for this class, stay inside the classroom during class hours)



      Homework Week 12Progress Upload:
      1. Write your own elevator pitch, following the 5-part structure given by the DS366 Critical Thinking Workshop materials. Add title and slogan to it. The text should be 3-5 paragraphs (shorter is better), it should be catchy, easy to read, and make people curious about your project. Upload your text directly to BlackBoard.

      Deadline: 1:55pm next Wednesday



      Week 13

      More tools: survey of advanced tools for experience designers

      Week 14

      Coursework submission, with classroom discussion (submit to BlackBoard) = final exhibition
      Special format: exhibition with interactive classroom discussion, table-top format layout
      Upload + exhibit: series of graphics, project text, video

      Week 15

      Composing experiences: moving between making and analyzing

      Week 16

      Work documentation & submission

      Upload: 20 high-resolution images, project text, 1 finished high-quality video

      Weeks 17/18 - Exam Weeks

      exame date: to be announced



      Core Readings

      • W. Buxton, Sketching User Experiences: getting the design right and the right design. Amsterdam Boston: Elsevier/Morgan Kaufmann, 2007.    
      • S. Greenberg, S. Carpendale, N. Marquardt, and B. Buxton, Sketching User Experiences. The Workbook. Elsevier, 2012. doi: 10.1016/B978-0-12-381959-8.50001-8.  

      Additional Readings

      (this list will be extended according to the topics chosen by students)

      • Allen, Artifice and Design; 
      • Berridge, Events Design and Experience; 
      • Bogle, Museum Exhibition Planning and Design; 
      • Bowles and Box, Undercover User Experience; 
      • Burckhardt, Design Is Invisible; 
      • Chapman, Emotionally Durable Design; 
      • Ciuccarelli, Lupi, and Simeone, Visualizing the Data City; 
      • Conan, Landscape Design and the Experience of Motion; 
      • Davis and Shadle, Teaching Multiwriting; 
      • Devisch, Huybrechts, and De Ridder, Participatory Design Theory; 
      • Dohr, “Design Thinking for Interiors : Inquiry, Experience, Impact”; 
      • Dunne, Hertzian Tales; 
      • Evans and Saker, Location-Based Social Media; 
      • Farman, Composing Media;
      • Harris, Data Driven Design; 
      • Head, Designing Interface Animation;
      • King, Designing the Digital Experience; 
      • Koolhaas, Delirious New York; 
      • Leung, Digital Experience Design; 
      • Lockwood, Design Thinking; 
      • Lombardi, Why We Fail; 
      • Marcus, Design, User Experience, and Usability. Theory, Methods, Tools and Practice; 
      • Marcus, HCI and User-Experience Design; 
      • Ratcliffe, Agile Experience Design; 
      • Rice, The Rhetoric of Cool; 
      • Robinson, Marsden, and Jones, There’s Not an App for That; 
      • Shrum, The Psychology of Entertainment Media; 
      • Simon, Storyboards Motion in Art; 
      • Stevens, Designing Immersive 3D Experiences;
      • Swink, Game Feel;
      • Tabački, Consuming Scenography; 
      • Tomico, Subjective Experience Gathering Techniques for Interaction Design; 
      • Van Duyne, Landay, and Hong, The Design of Sites; 
      • Ward, Picture Composition for Film and Television; 
      • Wilson, User Experience Re-Mastered; 
      • Yu, Shopping Experience.  


      Assessment

      • Attendance 10%
      • Final Exam  20%
      • Projects***  70% 

      ***Projects
      • 33,3% for w14 final submission 
      • 33,3% for w16 final submission
      • 33,3% for w1-13 weekly progress uploads

      Attendance

      Attendance: 10%
      • 100 points for never late and never missing a class
      • 100 points for being up to 4 times late (up to 50min), OR for missing 1 entire class
      • 50 points for missing 1 entire class and being up to 4 times a little late (up to 50min)
      • 50 points for never missing a class, and being up to 8 times a little late (up to 50min)
      • 0 points for missing 2 or more classes
      • 0 points for being late for more than 8 times
      *all late or missing when unexcused. If excused with a reason, it doesn’t count toward the attendance grade.

      Coursework Submission

      • Video CN+EN: open duration, with or without sound, format: HD 16:9
      • Text Document CN+EN: product name, 1-line description, product slogan, design area (“UX Design”, ...), Name CN+Pinyin, course number+name, instructor name, for FYP people: supervisor name, abstract (everything in double language, open length)
      • 20 Images: a series of portfolio-style professional images, in high quality and high resolution, they must include at least 4 different styles/formats/materials that we have learned in this course; can include your choice of: pencil drawings, scribbles, photographs, photographs with annotations, digital illustrations, mixed pencil/digital illustrations, graphics, schematics, plans, scores, maps, flowcharts, storyboards, visualizations, sound visualizations, 3d renderings, screenshots of 3d models, screenshots from your video, screenshots from process, screenshots from software that you use (show also app interface around your work

      Important note: for FYP people, the materials submitted for DS366 can be (should be) identical with what you submit for the FYP (it is expected that you present materials in DS366 that are made for your FYP).


      Design Project Journal / Diary

      A notebook that is freely to be filled by each student to show progress and idea development over the semester.

      Student “Design Plan” Presentations

      Each student presents 1x during the semester. 
      1. Choose a single image/diagram/sketch/plan/map/exploded view/animation element/chart/flowchart/mockup/ui (or if it makes more sense, a series of 2-3 images) that you would like to introduce to the class. Find your own image from any source available to you, it should not be from the course materials and not from your own project (but make sure this image is remotely related to your own project, so that it supports your own design)
      2. Then, from the readings made available by the instructor, choose one that best corresponds to your image, and use it as the theoretical foundation to your selected image
      3. Prepare a 4min presentation for the class. It should have 5 slides: 1 title page (see at the bottom); 1 slide with your selected visual image or images (mention source!); and then 3 slides with text elements that you copy from the reading (academic citation, mention book, chapter, page numbers). The 3 pages deliver theoretical background for your chosen image(s). 
      4. Send your slides to the instructor (Marcel)
      5. Then, present it in class. In 4min, explain really well why this image is important, where it can be used, and what the underlying theory is. 
      6. The content of these presentations will be part of the written exam



      Course Language

      English (watch out, for the exam, all the English materials are relevant. For software, the exam questions will be about the English version of the software)

      Final Exam

      The final exam has 4 parts:
      1) based on all theory read and discussed in class
      2) based on all the student presentations
      3) based on applied design tasks relevat to this course
      4) software knowledge relevat to this course

      Classroom Policy

      No eating during class time. Drinking is always allowed. The breaks can be used for eating. After each class, the classroom has to be cleaned up properly. Everyone is responsible for their computer and their desk, chair, and the floor around them. Remove any food waste, any trash. Make order on the computer, on the desk. If the keyboard/mouse are low on battery, put them on charge. Backup your files privately, put the chair nicely to the desk.

      Equipment and Device Policy

      Technical devices are here to be used by the members of this class. They can be used freely during class time, and outside of class time, they can be either accessed in the classroom, or some of them can be checked out and can be taken with you. The TA is responsible to check out equipment. Special devices from the School and also from the Sound Studies Group can be used upon special permission, please talk to the TA and the instructor. 

      Academic Integrity

      https://msagesser.github.io/ds226-2023/SD-late-policy.pdf

      AI Integrity

      The use os AI is allowed and expected, however, only if AI contributions are always credited. AI tools should be used not as a replacement of your thinking, but as an aid. Raw materials generated by AI need to be brought into a final shaped, and revised, by yourself.
      Contact
      All content © 2023-2025 Sound Studies Group