-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
521 lines (443 loc) · 22.3 KB
/
index.html
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
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
<!DOCTYPE HTML>
<!--
Prologue by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Portfolio of Karan Dudeja's work at Srishti</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Header -->
<div id="header">
<div class="top">
<!-- Logo -->
<div id="logo">
<span class="image avatar48"><img src="images/avatar.jpg" alt="" /></span>
<h1 id="title">Karan Dudeja</h1>
<p>Faculty at Srishti</p>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#top" id="top-link"><span class="icon solid fa-hand-spock">Intro</span></a></li>
<li><a href="#s1-context" id="portfolio-link"><span class="icon solid fa-university">Context Sensitivity</span></a></li>
<li><a href="#s2-emo" id="portfolio-link"><span class="icon solid fa-university">Emotional Design</span></a></li>
<li><a href="#s3-paradox" id="portfolio-link"><span class="icon solid fa-university">Multilingual Design</span></a></li>
<li><a href="#s4-others" id="portfolio-link"><span class="icon solid fa-th">Others</span></a></li>
<li><a href="#about" id="about-link"><span class="icon solid fa-user">About Me</span></a></li>
<!--<li><a href="#contact" id="contact-link"><span class="icon solid fa-envelope">Contact</span></a></li>-->
</ul>
</nav>
</div>
<!-- Social Icons -->
<!--
<div class="bottom">
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
<li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li>
</ul>
</div>
-->
</div>
<!-- Main -->
<div id="main">
<!-- Intro -->
<section id="top" class="one dark cover">
<div class="container">
<header>
<h2 class="alt">Hi! I'm <strong>Karan Dudeja</strong>,<br />
a faculty at <a href="http://srishti.ac.in/programs/postgraduate-program-in-information-arts-and-information-design-practices" target="_blank">IAIDP</a>, part of the<br />
<a href="http://srishti.ac.in/schools/school-of-law-environment-and-planning" target="_blank">SLEP</a> school at <a href="http://srishti.ac.in/" target="_blank">
Srishti</a></h2>
<p>This is a collection of work done.</p>
</header>
<footer>
<a href="#s1-context" class="button scrolly">See the Works</a>
</footer>
</div>
</section>
<!-- Section 1 - Context Sensitivity -->
<section id="s1-context" class="two">
<div class="container">
<header>
<h2>Context Sensitivity & Emerging Practices</h2>
<h5>M.Des IAIDP, 1st Year</h5>
</header>
<h3>Description</h3>
<p>Research, Policy, Philosophy and practice Engaging with information is a nuanced skill.
Interpreting, organizing, processing, communication and reflection of/on information
require ability for transdisciplinary thinking and problem solving.
</p>
<p>
The ability to understand context–sensitive issues and narratives emerge from
a state of mind and being that is open, empathetic, reflective and critical.
Intuition and practice are both key to insight on the field. As emerging fields IAIDP / EEC,
require reflective practitioners who can engage with, create in and emerge frameworks of
research, policy and practice as well as philosophical thought.
</p>
<p>
This unit focussed on investigating, researching and creating the kind of environment
that is needed (physical, emotional, social, cultural, political) in order for information to be
communicated, translated, or transacted; for thinking cultures to be set in education that
emerge from a meaningful transect of ecological concerns.
</p>
<h3>Capabilities</h3>
<ol>
<li>Capability to inform and communicate through narrative.</li>
<li>Capability to perceive gestalts, navigate complexity and negotiate intelligences through transdisciplinary engagement.</li>
<li>Capability to interact and work with communities, contexts and limitations and sensitively negotiate boundaries.</li>
<li>Capability to transact meaning with audiences and build context-sensitive practices.</li>
</ol>
<h3>Focus</h3>
<p>Students to have a hands-on experience of community based research practices and
understanding of the context sensitive practices.</p>
<p></p> <!--only for a separation-->
<h3>Exercises</h3>
<ol>
<li>A <strong>writeup</strong>(about 200 words) on the word ‘community’ supported by one image.<br/>
Followed by an in-class discussion of each member’s outlook.</li>
<p></p> <!--only for a separation-->
<li><strong>Film Screening</strong>,
Focus areas for the film, to open a discussion on:<br/>
<ul>
<li>Community</li>
<li>Research Ethics</li>
<li>Narratives</li>
<li>Information Processing</li>
<li>Structuring and Data Gathering</li>
<li>Research methodology of the film maker</li>
<li>Film maker’s lens - of design or art</li>
</ul>
</li>
<p></p> <!--only for a separation-->
<li><strong>Community Based Research</strong>
<ul>
<li>Unpacking ‘community’ while participating</li>
<li>Develop awareness about the community dynamics</li>
<li>Formulate a research question</li>
<li>Formulate a research process for the above stated question</li>
<li>Divide themselves into groups of 2 or work individually</li>
<li>All observations and insights to be documented individually</li>
</ul>
</li>
<p></p> <!--only for a separation-->
<li><strong>Workshop</strong>(5 Days) at <a href="http://dhaatupuppets.org/" target="_blank">Dhaatu Puppetry</a></li>
</ol>
<p></p> <!--only for a separation-->
<div class="row">
<div class="col-6 col-12-mobile">
<article class="item">
<a href="#" class="image fit"><img src="images/1b.jpg" alt="" /></a>
<header>
<h4>Dhaatu Puppet Center</h4>
</header>
</article>
<article class="item">
<a href="#" class="image fit"><img src="images/1e.gif" alt="" /></a>
<header>
<h4>Puppet Performance - Anupama Hoskere</h4>
</header>
</article>
</div>
<div class="col-6 col-12-mobile">
<article class="item">
<a href="#" class="image fit"><img src="images/1c.jpg" alt="" /></a>
<header>
<h3>String Puppets</h3>
</header>
</article>
<article class="item">
<a href="#" class="image fit"><img src="images/1d.jpg" alt="" /></a>
<header>
<h3>Puppet Making</h3>
</header>
</article>
<article class="item">
<a href="#" class="image fit"><img src="images/1a.jpg" alt="" /></a>
<header>
<h3>Hand Puppet Practice</h3>
</header>
</article>
</div>
</div>
</section>
<!-- Section 2 - Emotional Design -->
<section id="s2-emo" class="two">
<div class="container">
<header>
<h2>Emotional Design</h2>
<h5>B.Voc, 1st Year</h5>
</header>
<h3>Course Title</h3>
<p>The way you make me feel</p>
<h3>Description</h3>
<p>Human activities over generations have made design all pervasive.
But it's not all flat, there are certain qualities that separate great design from good design.
And the distinction could be based on a few factors, where the 'emotional quotient' could be an integral one.
</p>
<p>
To see & feel how this comes into action, this class looked into
the interconnections and dependencies that design and emotion have on each other,
both in output and process, for the consumers and the creators respectively.
</p>
<h3>Focus</h3>
<ul>
<li>What are Emotions?</li>
<li>Relevance of learning about Emotions whilst designing.</li>
<li>Theories on Emotions from the west and those in Indian Aesthetics(Natyashastra).</li>
<li>What is Emotional Intelligence?</li>
<li>Personal awareness and art therapy.</li>
<li>Senses and Emotions in Design, with respect to the audience - consumer - user.</li>
<li>Role of Intuition in our lives.</li>
<li>Theories on Emotions in the Design Process.</li>
<li>The tools to map Emotions while designing.</li>
<li>Important pointers, literature and books for learning more on 'Emotions and Design'</li>
</ul>
<h3>Investigations</h3>
<ol>
<li>Emotions : General</li>
<ul>
<li>Definitions</li>
<li>Classifications and Types and important theories</li>
<li>Emotions, Moods, Feelings</li>
<li>Emotional Intelligence</li>
<li>Intuition</li>
</ul>
<li>Emotions : in Design</li>
<ul>
<li>Don Norman’s Models</li>
<li>Emotions via Elements and Principles of Design</li>
<li>Trevor Van Gorp - ACT Model</li>
<li>Experience Maps</li>
</ul>
</ol>
<h3>Exercises</h3>
<ol>
<li><strong>Personal Objects and our lives:</strong><br/>
Where the individual was required to bring an object from their room and talk about it in class,
focussing on the object's significance for the respective owner.
</li>
<p></p> <!--only for a separation-->
<li><strong>Emotions and Images:</strong><br/>
Each participant was given a specific emotion, for which they were required to
bring three images in class.
</li>
<p></p> <!--only for a separation-->
<li><strong>Screenings:</strong>
<ul>
<li>Short Film, <a href="https://en.wikipedia.org/wiki/Reason_and_Emotion" target="_blank">Reason and Emotion</a></li>
<li>Film, <a href="https://en.wikipedia.org/wiki/Inside_Out_(2015_film)" target="_blank">Inside Out</a></li>
<li>Film, <a href="https://zeitgeistfilms.com/film/innsaeithepowerofintuition" target="_blank">Inn Saei - The Power of Intuition</a></li>
<li>Film, <a href="https://en.wikipedia.org/wiki/Equals_%28film%29" target="_blank">Equals</a></li>
</ul>
</li>
</ol>
<div class="row">
<div class="col-6 col-12-mobile">
<article class="item">
<a href="#" class="image fit"><img src="images/2a.jpg" alt="" /></a>
<header>
<h3>Screening Time</h3>
</header>
</article>
<article class="item">
<a href="#" class="image fit"><img src="images/2b.jpg" alt="" /></a>
<header>
<h3>Activity with an Art Therapist</h3>
</header>
</article>
<article class="item">
<a href="#" class="image fit"><img src="images/2e.jpg" alt="" /></a>
<header>
<h3>Session with a Counsellor</h3>
</header>
</article>
</div>
<div class="col-6 col-12-mobile">
<article class="item">
<a href="#" class="image fit"><img src="images/2c.jpg" alt="" /></a>
<header>
<h3>Class Activity</h3>
</header>
</article>
<article class="item">
<a href="#" class="image fit"><img src="images/2d.jpg" alt="" /></a>
<header>
<h3>Class Activity</h3>
</header>
</article>
</div>
</div>
</div>
</section>
<!-- Section 3 - Multilingual Design -->
<section id="s3-paradox" class="two">
<div class="container">
<header>
<h2>Contexts, Paradoxes & Futures</h2>
<h5>B.Des, 2nd Year</h5>
</header>
<h3>Course Title</h3>
<p>Working with Paradoxes - Multilingual Design</p>
<h3>Description</h3>
<p>There are written languages and spoken ones of the human; and there are the silent languages of the non-human.
The diversity and richness of the world lies in the million languages that we use to communicate.
In a global world, the challenges lie in allowing them to exist, grow, and add to the richness of culture and thought.
As languages die, so do cultures and so do unique perceptions of the world, creating dominant flattened perspectives.
Multilingual design, be it for print or digital technologies must understand the need to enable spaces for
multilingual users to create, innovate, engage, articulate and inspire in their own languages with pride and ease.
This unit looks at the politics and possibilities of creating multilingual design on different media and platforms.
</p>
<h3>Module Outline</h3>
<p>Contexts, Paradoxes and Futures is an immersive experience that draws directly from real world contexts and quagmires
of paradoxes in the frameworks of culture, environment and self. In this module, we will retrain our mind and responses
by changing time scales and ask core questions about what is consciousness? How can conscious experience be translated
while sense making and traversing layers of complexity? How does the future change and evolve through this retraining
principle? What makes something paradoxical to us? How can the meaning of a word be designed as form? What is the
relationship between form and function?, What will we make into the future? are all questions to problem solve in
“Contexts, Paradoxes and Futures”. Media explorations can be context-sensitive.
</p>
<h3>Focus</h3>
<ul>
<li>Understand the essence of contexts and paradoxes</li>
<li>Understand the relevance of Space and context</li>
<li>Understand problem contexts</li>
<li>Identifying more persuasive methods of communication to bring behavioral change</li>
<li>Ability to identify structural frameworks</li>
<li>Ability to comprehend problem statement, context, information flow dynamics, change agents and the structural framework</li>
<li>Interdisciplinary – Transcending disciplines and understanding methodology</li>
<li>Using skills and techniques to good purpose, by understanding market needs </li>
<li>Designing sustainable products </li>
<li>Recognize narrative functions: Analytical distinctions between story and plot and "narrative and communication"</li>
<li>Unravel the ecosystem of Products Systems and Services</li>
</ul>
<h3>Exercises</h3>
<ol>
<li><strong>Multilingual Atmospheres:</strong><br/>
Where the individuals were to bring three images to the class, of multilingualism in their surroundings.
</li>
<p></p> <!--only for a separation-->
<li><strong>Screenings:</strong>
<ul>
<li>Film, <a href="https://en.wikipedia.org/wiki/Babel_(film)" target="_blank">Babel</a></li>
</ul>
</li>
</ol>
<h3>Readings</h3>
<ol>
<li>Hillier, Mathew. "The role of cultural context in multilingual website usability." Electronic Commerce Research and Applications 2, no. 1 (2003): 2-14.</li>
<li>Graeff, Erhardt. 2013. <a href="https://civic.mit.edu/2013/11/25/diversity-and-contention-online-talks-by-anselm-spoerri-and-jisun-an/" target="_blank">Diversity and Contention Online: Talks by Anselm Spoerri and Jisun An</a>.</li>
<li>House, Juliane, and Jochen Rehbein. 2004. Multilingual communication. Amsterdam: J. Benjamins.</li>
<li>Atom. <a href="https://www.accesstomemory.org/en/docs/2.3/user-manual/translate/multilingual-design-principles/" target="_blank">"Multilingual Design Principles"</a>.</li>
<li> <a href="http://multilingualmania.com/myths-and-paradoxes-about-multilingualism/" target="_blank">Myths and Paradoxes about Multilingualism</a>.</li>
<li> <a href="https://www.monotype.com/resources/articles/translation-paradox/" target="_blank">Translation Paradox</a>.</li>
<li> <a href="https://digital.gov/2015/04/09/multiple-languages-single-platforms-the-world-digital-library/?__hstc=178037178.07430159d50a3c91e72c280a7921bf0d.1533686400081.1533686400082.1533686400083.1&__hssc=178037178.1.1533686400084&__hsfp=1773666937" target="_blank">The World Digital Library</a>.</li>
<li>Tsui, Amy. 2007. Linguistic Paradoxes and Cultural Domination.</li>
<li>Miles, William F S. 2000. The Politics of Language Equilibrium in a Multilingual Society: Mauritius.</li>
</ol>
<div class="row">
<div class="col-6 col-12-mobile">
<article class="item">
<a href="#" class="image fit"><img src="images/3a.jpg" alt="" /></a>
<header>
<h3>Class Discussion</h3>
</header>
</article>
<article class="item">
<a href="#" class="image fit"><img src="images/3c.jpg" alt="" /></a>
<header>
<h3>Students presenting their work</h3>
</header>
</article>
</div>
<div class="col-6 col-12-mobile">
<article class="item">
<a href="#" class="image fit"><img src="images/3b.jpg" alt="" /></a>
<header>
<h3>Ongoing Master Class</h3>
</header>
</article>
</div>
</div>
</div>
</section>
<!-- Section 4 - Others -->
<section id="s4-others" class="two">
<div class="container">
<header>
<h2>Others/Miscellaneous</h2>
</header>
<h3>F-321Y at Kochi Biennale</h3>
<p>I worked on this collaboratively where my role was to take <a href="https://www.instagram.com/f_321y/" target="_blank"><strong>F-321Y</strong></a>
for the 2019 Art Biennale in Kochi(Kerala, India). Also, help it with a bunch of its software needs before that. <br/><br/>
By the way, it is a printer that thinks it's an artist. It likes to work with things like alphabets and numbers it learnt to print,
it faces existential angsts and has figured that it needs money, for some reason to stay alive. Here's a <a href="https://www.instagram.com/p/Bva2jzZlGmu/" target="_blank">video</a>.
<br/><br/>
Later on, I was helping it in participating in #36DaysOfType, on Instagram again.
</p>
</section>
<!-- About Me -->
<section id="about" class="three">
<div class="container">
<header>
<h2>About Me</h2>
</header>
<!--<a href="#" class="image featured"><img src="images/pic08.jpg" alt="" /></a>-->
<p>I have a background in Communication Engineering and New Media Design. Interested I am in some-to-many things, but mostly
stuff that happens(to us people) when there's some Tech in the atmosphere.<br/>
I can be contacted over <a href="mailto:karan.dudeja@srishti.ac.in" target="_blank"> email</a>, the response time is well within a week.
</p>
</div>
</section>
<!-- Contact - Commented for now -->
<!--
<section id="contact" class="four">
<div class="container">
<header>
<h2>Contact</h2>
</header>
<p>Elementum sem parturient nulla quam placerat viverra
mauris non cum elit tempus ullamcorper dolor. Libero rutrum ut lacinia
donec curae mus. Eleifend id porttitor ac ultricies lobortis sem nunc
orci ridiculus faucibus a consectetur. Porttitor curae mauris urna mi dolor.</p>
<form method="post" action="#">
<div class="row">
<div class="col-6 col-12-mobile"><input type="text" name="name" placeholder="Name" /></div>
<div class="col-6 col-12-mobile"><input type="text" name="email" placeholder="Email" /></div>
<div class="col-12">
<textarea name="message" placeholder="Message"></textarea>
</div>
<div class="col-12">
<input type="submit" value="Send Message" />
</div>
</div>
</form>
</div>
</section>
-->
</div>
<!-- Footer -->
<div id="footer">
<!-- Copyright -->
<ul class="copyright">
<li>Made with <span class="icon solid fa-heart"></span> using <a href="http://html5up.net" target="_blank">HTML5 UP</a></li>
</ul>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>