2025年1月15日星期三

Spatial Design Weekly learning (Monday-line class)

WEEK 1
Learn

The teacher introduced the relevant content of space design in the space design class.

The space design emphasizes the connection between architectural design and people, is based on the interior, integrates the technical expertise of the architect and the creative insight of the designer, and focuses on the user experience, covering everyday examples such as educational institutions, retail environments, public Spaces and residential design.

Space design is closely related to space, including the use of space as a medium, creating experience, building relationships, etc. The key concepts include the distinction between space and place, interaction and user-centered design, and also consider functionality, user experience, movement and interaction, as well as adapting to changing needs.

Three examples of New York's High Line Park, Kuala Lumpur's Red Square and IKEA are presented, and the basic principles of space design and their significance in shaping the environment are summarized.

The students got to know each other in class, and introduced the tools needed in the future course, introducing that a designer should pay attention to practicality, user experience, aesthetics and so on in design.


WEEK 2
Learn
This class covers elements including architecture, landscape design, interior design, urban design and service design. The space design focuses on the arrangement and movement of people in the indoor and outdoor environment, aiming to create value and understanding for the private and public spheres. Spatial designers need to master things like design thinking, understanding human behavior, environmental psychology, spatial planning, technical proficiency, color psychology, material selection, communication, research skills, and project management. The historical use of caves as shelters and the importance of the Sarawak Caves in Malaysia are discussed. Hexagonal patterns of bee hives and termite mounds are also mentioned as examples of natural air conditioning and sustainable architecture, highlighting their inspiration for architects and designers.
The conceptual elements of design are introduced, including points, lines, surfaces, volumes, and forms. This lecture focuses on points, lines, and surfaces. The intangible nature of these elements and their importance in design are explained, providing examples of points in design such as lighting fixtures and furniture and their impact on mood and spatial experience. Examples of the Kuala Lumpur Tower in Malaysia and the architecture of Zaha Hadid demonstrate the use of lines in urban design and architecture. The concept of surfaces in the design, including top, wall and bottom surfaces, is introduced, and their role in the definition of space and the creation of boundaries is explained respectively, as well as the impact on space through the choice of materials. Taking the Piazza SAN Marco in Venice, Italy and Mies van der Rohe's buildings as examples, the application of surfaces in design is illustrated.

WEEK3
LEARN
The theme of this lesson is the decoding of visual perception in space design, with an emphasis on the Gestalt principles. It includes figure-ground relationship, where the brain distinguishes between figures and backgrounds, such as examples of optical illusions; proximity, where close elements are regarded as a group, with applications in architecture, business cards, etc.; closure, where the brain fills in the gaps, as demonstrated by the CCTV Headquarters in Beijing and other examples; symmetry, where elements are arranged in reflection, with multiple types and many architectural applications; and continuity, where aligned elements are regarded as a whole, as shown in the examples of the Absolute Tower and Galaxy SOHO. Through the explanation of these principles and a large number of architectural and design examples, it helps to understand the application of visual perception in space design.
WEEK4
LEARN
I. Course Theme
This class focused on decoding visual perception in space design, mainly on Gestalt principles like figure-ground relationship, proximity, closure, symmetry, continuity, and similarity.
II. Specific Content
1. Figure-ground: Brain distinguishes objects from background. Examples show this. Bird example reflects its characteristics.
2. Proximity: Close elements are grouped. Examples from various designs show its role.
3. Closure: Brain fills gaps. Examples show its application in architecture.
4. Symmetry: Arranges elements for reflection. Different types. Examples show in architecture.
5. Continuity: Aligned elements are seen as a whole. Examples show in architecture.
6. Similarity: Similar elements are grouped. Examples show its effect.

WEEK5

LEARN

I. In-depth Analysis of Space and Form

1. Reinforcement of Core Concepts

• This week, I gained a deeper understanding of the fundamental concept in spatial design - the close integration of space and form. Space is no longer an abstract existence but interdependent with form, covering the voids and physical volumes around us, as well as essential elements such as form, space, openings, and circulation. From a visual presentation perspective, space and form are like the two ends of a balance, indispensable and jointly constructing a complete design picture.

2. Application of Horizontal Elements

• I learned to use horizontal elements to accurately define space. Taking the base plane as an example, its uniqueness can be manifested through differences in color, tone, and texture. When we raise the base plane, we can enhance the visual separation effect and create an independent spatial area; while using a recessed base plane, we can skillfully define the spatial volume. The height change between the recessed area and the surrounding elevated area not only creates a rich sense of volume hierarchy visually but also ensures the continuity of the space through steps, ramps, and other elements. For example, a sunken courtyard is an excellent instance. It can not only effectively shield the space from external disturbances such as noise and wind but also add a sense of tranquility and privacy to the space. Similarly, the use of a suspended plane is also ingenious. The gap between it and the ground clearly defines a specific spatial range, endowing the space with unique tension and a sense of hierarchy.

II. Summary of the First Presentation on the Works of Design Masters

1. Highlights of Design Elements

• In the first presentation this week, we conducted an in-depth discussion centered on the works of design masters, with the theme focusing on the exquisite application of design elements and principles. When studying the works of many masters, it was found that their control of design elements is outstanding, especially in achieving a highly sophisticated balance of line, space, and color. The smoothness and rhythm of lines, the mutual generation of virtual and real spaces, and the harmonious combination of colors together weave a series of design masterpieces with strong artistic appeal. Each element seems to be endowed with life, performing its own functions and echoing each other in the works, injecting a unique soul and style into the works.

2. Insight into Design Principles

• The masters' application of design principles is even more proficient and nuanced. Through the ingenious combination of different design principles and lines, a wide variety of styles of works have been created. When deeply studying the works of modernist masters, a prominent characteristic comes to the fore - the frequent use of straight lines has become a distinct symbol of modernist design. These simple and straightforward straight lines, abandoning cumbersome decorations, construct the order and rhythm of the space in the purest form, showing a simple, efficient, and rational design aesthetic. Of course, the works of other masters also have their own merits. With their unique creativity and profound understanding of design, they shine brightly in their respective works, being either graceful, bold, delicate, or rough. Each style carries the design concepts and artistic pursuits of the masters, opening up a series of doors to different design worlds for us.

III. Case Study of Public Space Design

1. Integration of Tradition and Modernity

• In today's era of high integration of technology and art, we conducted a detailed analysis and study of public space design. Although design technologies are advancing with each passing day, design principles have always adhered to their core positions, like a lighthouse guiding the direction in the torrent of the times. Whether it is the ancient square design or the modern intelligent building space, it is inseparable from the adherence to basic design principles such as proportion, symmetry, and rhythm. These principles are like the skeleton of a building, supporting the structure and order of the entire space, enabling it to not only meet functional requirements but also bring people aesthetic enjoyment and emotional resonance.

2. Technology Assisting the Deepening of Design

• With the help of advanced technical means, we are able to more deeply explore the subtleties and potential values in public space design. For example, through virtual reality (VR) and augmented reality (AR) technologies, we can experience the atmosphere and effects of the space in person during the design stage, discover possible problems in advance and make optimization adjustments. At the same time, big data analysis also provides strong support for design. By accurately grasping the behavior patterns and usage needs of the crowd, we can more rationally plan the spatial layout, facility configuration, and traffic flow lines, making public spaces truly become places where people are willing to stay, interact, and communicate, realizing the goals of humanized and sustainable design.

WEEK6

LEARN

I. The Importance of Vertical Elements in Spatial Design

1. Function of Space Division

• In this week's course, we delved deeply into the crucial role that vertical elements play in spatial design. We've come to understand that vertical elements are multi-functional components in design and can accurately divide space. Whether it's defining indoor and outdoor areas or creating distinct functional subspaces within a larger environment, they are essential for achieving refined spatial layouts.

2. Role in Creating Atmosphere

• Different types of vertical elements, with their unique geometric forms and spatial attributes, demonstrate diverse characteristics and varying degrees of practicality in actual applications and play an irreplaceable role in creating unique atmospheres.

II. Core Functions of Vertical Elements

1. Protection Function

• Vertical elements can act as all-round protectors, shielding interior spaces from adverse weather conditions and maintaining a relatively stable environment.

2. Regulation Function

• Meanwhile, they also function as intelligent regulators, effectively controlling air flow, heat transfer, and sound propagation, which have an important impact on the comfort of the space.

3. Space Shaping and Defining Function

• Vertical elements possess a strong ability to shape and enclose space. They can create a private environment and clearly define the boundaries between indoor and outdoor spaces, giving a sense of spatial hierarchy and order.

III. Common Types of Vertical Elements and Case Analysis

1. Linear Vertical Elements

• Characterized by clean and powerful lines, they are vital components in space design. For example, the Campo Square in Siena, Italy, uses the iconic tower of the Public Palace and the surrounding colonnades to define the square's boundaries with a striking vertical arrangement, creating a strong sense of space and visual impact.

2. Single Vertical Plane

• Its height is the key factor in defining and enclosing space. When placed at different heights, it creates different spatial sensations. A lower height gives a faint sense of boundary, while a plane at eye level or higher creates a strong sense of separation.

WEEK7

LEARN

This is the third session on form and space fundamentals, focusing on the design of openings in enclosed spaces like rooms.

1. Importance of openings: Key elements in space design, impacting function, aesthetics, comfort, and overall experience. Doors affect access and movement. Windows bring in light and connect inside and outside.

2. Key factors: Size affects lighting, ventilation, and space sense. Number influences light distribution and visual interest. Location determines directional light, views, and connectivity.

3. Types of openings:

• Inter-planar openings: In walls or ceilings. Position, shape, number, and arrangement affect visuals. Centered ones have even visual weight. Off-centered create tension. Unique shapes attract attention. Large ones change nature. Examples like Le Corbusier's chapel have dramatic lighting.

• Corner openings: At corners, making space diagonal. Used for composition, views, or lighting corners. Weaken corner definition when large. Light illuminates adjacent planes. Examples like Le Corbusier's studio and Samuel Freeman House.

• Inter-planar extended openings: From floor to ceiling or between walls. Create modern look and emphasize verticality/horizontality. Erode space definition at corners. Light interacts for dynamic effect. Examples in modern architecture.

4. Summary: Learned three types of openings that affect space visually, atmospherically, and functionally. Covered in form and space lecture series along with horizontal and vertical elements.

WEEK8(self-study week)

WEEK9

LEARN

This class mainly focused on spatial relationships. The content is as follows:

Introduction to the Course Theme

The lecturer introduced that this class would explore the basic principles of spatial relationships, with a particular focus on how different spaces interconnect and are organized into coherent forms and spatial patterns. It was also mentioned that there are four types of spatial relationships.

Explanation of Spatial Relationship Types

1. Space within a Space

• A large space can enclose a small space, with good visual and spatial continuity between them. However, the connection of the small space to the external environment depends on the large space. For example, in the case of a small room within a large room, floating rectangular or wooden cubes, etc., can form unique and intimate areas within the large space. Examples like the relationship between multiple small spaces and a large space shown in architectural models, and the multi-layered spaces created by Sou Fujimoto's House N through nested shells, all demonstrate the fluidity and openness emphasized by this type of spatial relationship, which can meet different privacy and interaction needs.

2. Interlocking Spaces

• When two spatial fields overlap, a shared area is formed. The overlapping part can merge with one of the spaces or become a transitional space connecting the two original areas, enhancing functionality and unity. For example, the top floor of the Total under 4 time 4 house is designed with offset cubic volumes to form a unique spatial relationship. In the villa designed by Lee Kobuzier, geometric shapes overlap and interlock with each other. And various situations of different rectangular prisms interlocking to form shared spaces shown in relevant diagrams help to understand the dynamic changes and connection methods of different volumes in interlocking spaces.


3. Spaces Linked by a Common Space


• Two separated spaces can be connected through an intermediate space. The visual and spatial relationship depends on the nature of the intermediate space. The form and direction of the intermediate space can be different. When it is large enough, it can become the dominant space, and its form can be the remaining space determined by the connected spaces. For example, a house connects different parts through a central public space. Examples such as glass bridges, sliding doors, viaducts, central pond courtyards, etc., serve as intermediate spaces to connect different building areas. Also, Casa do quarteiro connects residential units, public gardens, and public passages and other functional areas by establishing a public space, enhancing connectivity and a sense of community.

4. Adjacency Spaces

• This is a common type. Each space can be clearly defined according to functional or symbolic requirements. The visual and spatial continuity of adjacent spaces depends on the nature of the plane that separates and connects them, and the plane can take various forms. For example, the Lawrence Residence reflects the characteristics of adjacency spaces through designs such as sliding doors and different floor heights. Sliding doors balance openness and privacy, and different floor heights encourage user activities and interactions. Also, the steps of the pavilion, the covered walkway, and the external open area, etc., also reflect this type of spatial relationship.

Course Summary and Expectations

The lecturer summarized that this class covered four types of spatial relationships. It was hoped that students could integrate what they had learned into their design projects. Looking forward to seeing everyone in the next class.

This class also focused on the formal transformations in spatial design, covering two types: additive and subtractive transformations, and explained them with many examples.

1. Additive Transformation

• Definition and Influencing Factors: The form of the structure is changed by adding elements. The nature of the elements, etc., determines how the original form changes.

• Combination Methods: Edge-to-edge contact, face-to-face contact, and block interlocking, which are used in different design scenarios respectively.

• Examples: The Trigora furniture system, works by Sou Fujimoto, designs by Mark Combau, Habitat 67, The Interlace, works by Takamatsu Nobu, Al Bar Towers, the proposed Paris Point North Bridge, etc.

2. Subtractive Transformation

• Definition and Characteristics: Part of the structure is removed, and the original form can still be retained under specific conditions.

• Examples: Complex wooden structure models, Graf, Meyer Residence and Studio, Culture Forest, the Italian Pavilion at the Shanghai World Expo, Zaha Hadid's Mirror Social Housing Project, etc.

3. Summary: Formal transformations provide designers with diverse options to create spaces that are both practical and aesthetically pleasing. Designers should actively think about and apply them.

WEEK10

LEARN

This class focused on the formal transformations in spatial design, covering two types: additive and subtractive transformations, which were illustrated with numerous examples.

1. Additive Transformation

• Definition and Influencing Factors: The form of the structure is changed by adding elements. The nature of these elements determines how the original form will be altered.

• Combination Methods: There are three combination methods, namely edge-to-edge contact, face-to-face contact, and block interlocking, which are respectively applied in different design scenarios.

• Examples: The Trigora furniture system, works by Sou Fujimoto, designs by Mark Combau, Habitat 67, The Interlace, works by Takamatsu Nobu, Al Bar Towers, and the proposed Paris Point North Bridge, etc.

2. Subtractive Transformation

• Definition and Characteristics: Part of the structure is removed, while the original form can still be retained under specific conditions.

• Examples: Complex wooden structure models, Graf, Meyer Residence and Studio, Culture Forest, the Italian Pavilion at the Shanghai World Expo, Zaha Hadid's Mirror Social Housing Project, etc.

3. Summary: Formal transformations offer designers diverse options, enabling them to create spaces that are both practical and aesthetically pleasing. Designers should actively consider and apply these transformations.

During the class, we also learned about how to incorporate the elements of a famous building into our own designs. For example, when designing a lakeside corridor, we can consider adding interactive elements to enhance the user experience. We can draw inspiration from the unique features of famous buildings. Maybe we can adopt the flowing lines of a certain building to make the shape of the lakeside corridor more dynamic and elegant. Or we can learn from the way a building uses different materials to create a rich tactile and visual experience, and then apply similar material combinations to the design of the corridor.

2025年1月6日星期一

Applicantion design final portfolio

 Final: Taobao App Optimization 

After finalizing the initial rough layout of my Taobao shopping experience prototype for purchasing specialty products, I advanced to the high-fidelity prototype stage. I concentrated on enhancing and perfecting the design by taking into account the feedback gathered from the earlier version. I meticulously examined each aspect of the user interface and user experience to make it more refined and user-friendly. In this process, I developed multiple versions of the high-fidelity prototype to explore diverse design options and optimize the overall shopping flow within the app for buying specialty items. To obtain more valuable insights and viewpoints, I shared these versions with some of my friends who are fond of online shopping for specialties and solicited their opinions regarding the design, ease of use, and overall shopping experience. Their feedback proved to be extremely beneficial in molding the final high-fidelity prototype, enabling me to make essential adjustments and further enhance the design.

figma Taobao app low fidelity link :https://www.figma.com/proto/CbatwVwoLHZErjJh6nrCkk/Untitled?node-id=172-711&t=ctjJBKMLYnvdv0qP-1


Scenario 1: Purchasing Dried Persimmon Cakes (a Specialty)

User: Huangyan ting

Imagine you're craving the delicious local specialty, dried persimmon cakes, and decide to search for them on the Taobao app. When you open the app, you land on the home page. From here, you can either type "dried persimmon cakes" into the search bar or navigate through the "Food" category and then further into the "Specialty Snacks" subsection. Once you've found a list of dried persimmon cake products, click on the one that catches your eye to view the product details. Check information such as the origin of the persimmons, the production process, the taste description, and customer reviews. After confirming that it meets your expectations, select the quantity you want to buy. Then, add the item to your cart. Proceed to the cart page to review your selected items. If you have any discount coupons or promotional offers available for food items or specialties, apply them at this stage. Next, provide your shipping address, making sure it's accurate to ensure the timely delivery of the perishable dried persimmon cakes. Then, choose your preferred shipping method, perhaps opting for express shipping if you're eager to receive them quickly. Finally, confirm your order and patiently wait for the package containing the delicious dried persimmon cakes to arrive at your doorstep.


To make the shopping experience more global and user-friendly, Taobao offers convenient options to switch languages, currencies, and countries. On the settings page, you can easily find the language selection dropdown menu. By clicking on it, a list of available languages will be displayed, allowing you to choose the one you are most comfortable with. For currency conversion, there is a dedicated currency setting option. Once selected, the app will automatically display prices in your preferred currency, updated based on the latest exchange rates. To change the country region, you can access the region settings and input the relevant country information. This will adjust the product availability and shipping options to better suit your location.


Regarding tracking your package, once your order for the dried persimmon cakes is confirmed, you can go to the "My Orders" section. There, you will find a detailed list of all your orders. Locate the one for the persimmon cakes and click on the "Track" button next to it. This will redirect you to the shipping carrier's website or provide you with real-time tracking information within the app itself. You can see the current location of your package, the estimated delivery time, and any transit updates along the way, ensuring you are always informed about the status of your delicious specialty purchase.

Taobao page high fidelity process youtu link:

https://youtu.be/syZAEy-sEbE

figma Taobao app high fidelity link:https://www.figma.com/proto/CbatwVwoLHZErjJh6nrCkk/Untitled?node-id=193-1053&t=b7gcxaIQrlwlvekQ-1

Spatial Design Weekly learning (Monday-line class)

WEEK 1 Learn The teacher introduced the relevant content of space design in the space design class. The space design emphasizes the connecti...