-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
240 lines (211 loc) · 20.4 KB
/
Copy pathindex.html
File metadata and controls
240 lines (211 loc) · 20.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fern Itthisang' Archives</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<div class="header-left"><span>Fern Itthisang</span></div>
<div class="header-right"><span>Project Archive</span></div>
</div>
<div class="container">
<div class="column-small">
<div class="box collapsed"><div class="box-title"><div class="icon"><span class="arrow">↗</span></div>Say Hello!</div><div class="content">
<p>Hello! I'm Fern Itthisang</p>
<p>Currently, I'm a designer who is passionate about data visualization, interactive design, and creating human-centric digital experiences. My journey began with architecture, where I learned to visualize space and create environments that resonate with human experience. Over time, I discovered that data could tell stories too—stories that shape how we perceive and understand the world.</p>
<p>This realization led me to explore <b>the intersection of design, technology, and human interaction.</b> I began to see both architects and data visualizers as storytellers—crafting narratives that connect people to spaces, ideas, and information.</p>
</div></div>
<div class="box collapsed"><div class="box-title"><div class="icon"><span class="arrow">↗</span></div>Where I Am Now?</div><div class="content">
<p>Right now, I'm pursuing my studies in <b>Computational Design Practices (CDP) at GSAPP, Columbia University.</b> It's an exciting journey, where I'm constantly challenged to think about how technology can reshape our relationship with space and data.</p>
<p>In 2024, I received my degree in <b> M.S. in Data Visualization from Parsons School of Design</b>, where I honed my ability to transform complex data into clear, insightful visuals. This education solidified my belief that design is not just about aesthetics but about making information accessible and meaningful.</p>
</div></div>
<div class="box collapsed"><div class="box-title"><div class="icon"><span class="arrow">↗</span></div>What Drives Me?</div><div class="content">
<p>I am driven by a simple yet powerful idea: <b>technology should feel human.</b> Whether I'm working on data-driven storytelling, designing interactive interfaces, or prototyping AI-driven experiences, I approach each project with the mindset of a storyteller. I believe that the most impactful designs are those that resonate emotionally while solving practical problems.</p>
<p>My current interests are rooted in exploring how AI can make technology more intuitive and adaptive. I see a future where interactive systems not only respond to human input but also understand and anticipate human needs.</p>
</div></div>
<div class="box collapsed"><div class="box-title"><div class="icon"><span class="arrow">↗</span></div>My Vision</div><div class="content">
<p>I see design as a bridge between people and technology—a way to make the digital world feel more alive and human-centered. I believe that thoughtful design can transform our interactions with machines, making them feel less like tools and more like companions. </p>
<p>As I continue to evolve as a designer, I am committed to exploring how data, AI, and interaction design can shape a more empathetic and connected future.</p>
</div></div>
<div class="box collapsed"><div class="box-title"><div class="icon"><span class="arrow">↗</span></div>My Skills and Approach</div><div class="content">
<p>I blend creativity and technical expertise to create experiences that are engaging and thoughtful.</p>
<p>- <b>Data Visualization:</b> Transforming raw data into visual stories that make sense.</p>
<p>- <b>UX/UI Design:</b> Crafting interfaces that feel natural and intuitive.</p>
<p>- <b>Interaction Design:</b> Building digital experiences that connect with users.</p>
<p>- <b>AI and Coding:</b> Developing systems that think and respond intelligently.</p>
<p>- <b>Storytelling through Design:</b> Making data and technology feel personal and relatable.</p>
</div></div>
<div class="box collapsed"><div class="box-title"><div class="icon"><span class="arrow">↗</span></div>Let's Connect!</div><div class="content">
<p><b> pakjira[dot]itt[at]gmail[dot]com</b></p>
</div></div>
</div>
<div class="column-large">
<button id="back-btn" style="display:none">Back</button>
<div id="project-container" class="project-container">
<div class="project-card" data-project="1">
<div class="project-thumbnail">
<img src="assets/thumbnail.png" alt="Project Thumbnail" />
</div>
<div class="project-title">Companion, Cohabitant <br>and Continuum (Cee)</div>
</div>
<div class="project-card" data-project="2">
<div class="project-thumbnail">
<img src="assets/0090.png" alt="Project Thumbnail" />
</div>
<div class="project-title">The Roomba Eye View</div>
</div>
<div class="project-card" data-project="3">
<div class="project-thumbnail">
<img src="assets/symbol.png" alt="Project Thumbnail" />
</div>
<div class="project-title">Codes of Protest and <br>Predicting Solidarity</div>
</div>
<div class="project-card" data-project="4">
<div class="project-thumbnail">
<img src="assets/document.gif" alt="Project Thumbnail" />
</div>
<div class="project-title">Documenting Protest Symbols</div>
</div>
<div class="project-card" data-project="5">
<div class="project-thumbnail">
<img src="assets/fare.gif" alt="Project Thumbnail" />
</div>
<div class="project-title">Equal Fare, Unequal Ground</div>
</div>
<div class="project-card" data-project="6">
<div class="project-thumbnail">
<img src="assets/flipframe.png" alt="Project Thumbnail" />
</div>
<div class="project-title">FlipFrame</div>
</div>
</div>
<div id="project-details" class="project-details">
<div class="project-card-details" data-project="1">
<div class="project-images">
<div class="project-images-carousel">
<div class="carousel-track">
<img src="assets/thumbnail.png" alt="Project Image 1" />
<img src="assets/demo.gif" alt="FlipFrame Project Image 3" />
<img src="assets/about.png" alt="FlipFrame Project Image 3" />
</div>
</div>
</div>
<div class="project-title-row">
<div class="project-title">Companion, Cohabitant <br>and Continuum (Cee)</div>
<span class="project-date">Fall 2024 - Spring 2025</span>
</div>
<div class="project-description">
<p>Cee is not about creating a better robotic vacuum, and it’s not just a device. Cee goes beyond cleaning the space—it acknowledges that there is culture behind the act of cleaning. It is designed to recognize cultural perspectives, making it feel natural and meaningful in diverse spaces. Different cultures have different ideas about:</p>
<p>- How space is used and organized.</p>
<p>- The presence and significance of objects within our homes.</p>
<p>- What it means to interact with technology on an emotional level.</p>
<p>Moreover, there is a strong connection between cleanliness and mental well-being. Many traditions link a clean space to good fortune, harmony, and emotional stability.</p>
<p>Therefore, Cee is not just a device—it is a living companion that shares the space with us. It’s about building relationships, because relationships are what make a house feel like home. Through four adaptive personas (Butler, Fortuneteller, Therapist, Cleaner), Cee listens, responds, and engages, fostering a deeper connection with its environment and the people within it. Cee becomes a new cohabitant in your space. </p>
</div>
<a class="learn-more-btn" href="https://gsapp-cdp.github.io/archive/projects/2025/companion-cohabitant-and-continuum/" target="_blank">Visit Project</a>
</div>
<div class="project-card-details" data-project="2">
<div class="project-images">
<video controls width="100%" style="border-radius: 4px;">
<source src="assets/animation.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="project-title-row">
<div class="project-title">The Roomba Eye View</div>
<span class="project-date">Fall 2024</span>
</div>
<div class="project-description">
<p>A unique perspective on urban spaces through the lens of a Roomba vacuum cleaner. This project examines how autonomous devices like the Roomba perceive and move through our living environments. It looks at how these devices interact with everyday spaces and how they make decisions while navigating. By studying the Roomba's movements and reactions, the project offers insights into how technology and spatial awareness intersect in our homes.</p>
<p>This concept played an important role in the research for the capstone project, Companion, Cohabitant, and Continuum (Cee). The idea was to see the world from the Roomba's point of view and use that perspective to better understand the relationship between robotic companions and domestic spaces. To achieve this, the project used the idea of rendering—a way to visualize how the Roomba perceives its surroundings. Additionally, a short story was created to imagine the Roomba's experiences and how it might interpret the space around it. This helped shape the project's direction by highlighting how robotic companions might feel more integrated and connected to the spaces they inhabit.</p>
</div>
</div>
<div class="project-card-details" data-project="3">
<div class="project-images">
<video controls width="100%" style="border-radius: 4px;">
<source src="assets/protest.mov" type="video/mp4"au>
Your browser does not support the video tag.
</video>
</div>
<div class="project-title-row">
<div class="project-title">Codes of Protest and <br>Predicting Solidarity</div>
<span class="project-date">Fall 2024</span>
</div>
<div class="project-description">
<p>An exploration of protest movements through data visualization and machine learning. This project takes a closer look at how protest symbols and solidarity movements evolve and spread. By using data visualization techniques and machine learning, the project uncovers patterns in the ways people express resistance and support for social change.</p>
<p>The goal is to better understand the visual language of protests—how symbols, signs, and actions come together to convey powerful messages. Through analyzing data from various movements, the project reveals the connections between different acts of solidarity and highlights the complex ways communities come together to make their voices heard.</p>
<p>This approach not only sheds light on the visual aspects of protests but also deepens our understanding of how social movements communicate and grow. It aims to capture the dynamic and ever-changing nature of collective action, offering a new way to study and interpret the language of resistance.</p>
</div>
<a class="learn-more-btn" href="#" target="_blank">Visit Project</a>
</div>
<div class="project-card-details" data-project="4">
<div class="project-images">
<video controls width="100%" style="border-radius: 4px;">
<source src="assets/document.mov" type="video/mp4">
Your browser does not support the video tag.
</video> </div>
<div class="project-title-row">
<div class="project-title">Documenting Protest Symbols</div>
<span class="project-date">Fall 2024</span>
</div>
<div class="project-description">
<p>A comprehensive documentation of protest symbols and their evolution in contemporary social movements. This project aims to capture the visual language of resistance and how it shapes collective memory and social change. It focuses on understanding how protest symbols develop, change, and take on new meanings over time.</p>
<p>The project is part of the Codes of Protest and Predicting Solidarity initiative, which explores how symbols used in protests evolve as social movements grow. The goal is to document these symbols, analyze their visual elements, and understand how their meanings are interpreted and reinterpreted within different contexts.</p>
<p>Through data collection and analysis, this project seeks to map out the journey of protest symbols—from their origins to their use in modern movements. By examining how these symbols spread and transform, the project offers insights into how collective action is visually communicated and how symbols continue to inspire and unite people.</p>
</div>
<a class="learn-more-btn" href="https://fernitthisang.github.io/coding-practices-fall2024/project/desktop/index.html" target="_blank">Visit Project</a>
</div>
<div class="project-card-details" data-project="5">
<div class="project-images">
<div class="project-images-carousel">
<div class="carousel-track">
<video controls width="100%" height="400" style="border-radius: 4px;">
<source src="assets/eq2.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
<img src="assets/eq3.png" alt="Equal Fare Project Image 2" />
</div>
</div>
</div>
<div class="project-title-row">
<div class="project-title">Equal Fare, Unequal Ground</div>
<span class="project-date">Spring 2025</span>
</div>
<div class="project-description">
<p>An investigation into transportation equity and accessibility in urban environments. This project visualizes the disparities in public transit access and proposes solutions for more equitable transportation systems. It is an interactive memory walkthrough built in Unity that reconstructs fragments of New York City subway stations. The project uses scanned elements—like mosaic walls, cracked tiles, benches, and trash cans—to create layered stories about how people occupy transit spaces in ways that are often overlooked. To convey this perspective, the project adopts a lower angle, resembling a third-person view from the perspective of a rat.</p>
<p>The focus is on how public infrastructure, such as the subway, can simultaneously serve as shelter and exclusion. Some people easily tap through OMNY gates and ride the trains, while others claim benches or corners as their homes. I wanted to explore this contrast between mobility and immobility within the same space.</p>
<p>By incorporating elements like fog, spotlighting, and ambient sound, users experience these zones not as typical transit spaces but as memory spaces—places that hold traces of lived survival. Each interactive object reveals a fragment of someone's life: a person who slept on a bench, played music in a corner, or simply tried to stay warm during harsh conditions.</p>
<p>The project is inspired by a climate justice perspective, questioning how cities prepare for environmental challenges while leaving vulnerable people exposed underground. It reflects on how ordinary infrastructure becomes quietly political—not just in terms of who moves through the station, but who is allowed to stay.</p>
<p>My intention was not to simulate homelessness, but to reflect on how everyday public spaces, like subway stations, carry silent stories of both shelter and displacement. The project encourages viewers to think about the hidden lives within urban infrastructure and to consider the social implications of transit accessibility.</p>
</div>
<a class="learn-more-btn" href="https://play.unity.com/en/games/730f031b-d23f-4540-8f3e-f9b2890ac9a8/equal-fare-unequal-ground" target="_blank">Visit Project</a>
</div>
<div class="project-card-details" data-project="6">
<div class="project-images">
<div class="project-images-carousel">
<div class="carousel-track">
<img src="assets/flipframe.png" alt="FlipFrame Project Image 1" />
<img src="assets/flipframe-2.JPG" alt="FlipFrame Project Image 2" />
<img src="assets/flip-frame-3.gif" alt="FlipFrame Project Image 2" />
อ
</div>
</div>
</div>
<div class="project-title-row">
<div class="project-title">FlipFrame</div>
<span class="project-date">Spring 2025</span>
</div>
<div class="project-description">
<p>An innovative digital frame that transforms static images into dynamic storytelling experiences. FlipFrame merges traditional photography with interactive technology to create engaging visual narratives. It takes the concept of a photo frame to the next level by allowing images to move, change, and tell stories.</p>
<p>Instead of just displaying a single picture, FlipFrame can sequence images, animate transitions, and respond to user interactions. This makes each visual experience more immersive and captivating. Whether it's showcasing personal memories or artistic creations, FlipFrame turns still images into living stories, blending the familiarity of photography with the excitement of digital interaction.</p>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="script.js"></script>
</body>
</html>