forked from RyanFitzgerald/devportfolio
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathproject-pollocks.html
More file actions
231 lines (198 loc) · 17.6 KB
/
project-pollocks.html
File metadata and controls
231 lines (198 loc) · 17.6 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
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hadiya Firdaus - Portfolio</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div id="mobile-menu-open" class="shadow-large">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<!-- End #mobile-menu-toggle -->
<header class="sticky">
<div id="mobile-menu-close">
<span>Close</span> <i class="fa fa-times" aria-hidden="true"></i>
</div>
<ul id="menu" class="shadow">
<li class="lefter">
<a href="/" class="no-scroll"><img src="favicon.png" class="favicon"/>HADIYA FIRDAUS</a>
</li>
<li>
<a href="#about">The Pollock Button</a>
</li>
<li>
<a href="#initial-sketches">Initial Sketches</a>
</li>
<li>
<a href="#refined-sketches">Refined Sketches</a>
</li>
<li>
<a href="#software-implementation">Implementation</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</header>
<!-- End header -->
<div id="lead" style="background-image:url('/images/pollocks-image2.jpg');">
<div id="lead-content">
<h1>The Pollock Button</h1>
<h2 color="white">HCI 581: P0</h2>
<div class="social">
<ul>
<li>
<a href="https://github.com/hfirdaus" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
</li>
<li>
<a href="https://linkedin.com/in/hadiyafirdaus" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
<li>
<a href="mailto:contact@hadiyafirdaus.com"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
<!-- End #lead-content -->
<div id="lead-overlay"></div>
<div id="lead-down">
<span>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</span>
</div>
<!-- End #lead-down -->
</div>
<!-- End #lead -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2 class="heading">The Project</h2>
</div>
<div class="col-md-8">
The <b>aim</b> of this project is to create a button and use this button – its context, interaction, and appearance – to represent a person through their personality or character traits. This should be easily recognizable and should delight them.
</div>
</div>
<hr>
<div id="initial-sketches" style="padding:50px;" class="row">
<h2 class="heading">Initial Sketches</h2>
<img style="float:left;padding:10px;" height="500px" src="/images/sketches-zach.jpg">
<p>Starting with a breadth of ideas for sketches, I did <b>two interviews</b> with students in our class. My first interviewee, Zach, told me a lot about how he was an avid traveler, had gone to many countries in his youth, but when I asked him about what he considered home, he said he wasn’t really certain. After further questioning on this line, which I found particularly revealing about his character, he said he could make a home anywhere he was. One of my sketches for him was inspired by this, with <b>a bird as the button on a canvas of a world map</b> that had marked the places he had been in his life, anything you would click the bird, it would fly to another location on the map that Zach had been. Another of my favourites from those sketches were about how he was so organized and compartmentalized everything, and it was an image of him with <b>a thought bubble that was divided into sections of things that made up his life</b>; when you click on him, they would get reorganized in the bubble.</p>
<br>
<img width="700px" style="float:right;padding:10px;" src="/images/sketches-aaron.jpg">
<p>My second interviewee, Aaron, told me a lot about how much he loved games – board games, video games, any kind – and avidly collected them. Further more, he was also interested in game theory and strategy, and also was a fixer upper when it came to trucks and cars and general repairs. I used this to come up with a lot of ideas for him. My top favourites were a button that when you clicked on it, would disappear and reappear somewhere else, so it would be <b>a game of “catch the button”</b>, and another idea was the button as <b>a chess queen</b>, which when pressed, the background would change to different board games – the queen would be on a snakes and ladders game, then a catan board, etc.</p>
<br>
<img height="600px" style="float:right;padding:10px;" src="/images/sketches-famous.jpg">
<p>I also did some sketching on celebrities and fictional characters, such as Harry Potter, Donald Trump, Bill Nye, Steve Irwin, and Hackerman (do memes count?). These are pretty typical: a snitch you have to catch for Harry, a nuke button for Donald, crocodile catching for Irwin, etc., but were really fun to make!</p>
<br>
<img height="400px" style="float:left;padding:10px;" src="/images/sketches-other.jpg">
<p>After getting feedback on my sketches from the group and from the class, I discarded most of the sketches for the celebrities and fictional characters, because they were too baity and didn't really try hard to get at the character of these people, rather focussing on their obvious external traits. I think the sketches I did for the interviews were the most interesting and representative of character.</p>
<br>
<p>After the class feedback, as a group we decided to follow the sketch of <b>the button as the process of making a Jackson Pollock painting</b>. The canvas would be the "button" in this case, and a Pollock-style painting could be made on it. This was a really interesting concept and the class was really curious about it. Furthermore, it took the representation of a celebrity to a deeper level, <b>representing them through their art is the rawest form of their character</b>. Having <b>to interact with Pollock's "button" through experiment by making one's own painting evokes his character as a man for whom the process is as important as the art and as one obsessed with experimentation</b> - and it is a concept so meta it would delight him.</b> </p>
</div>
<hr>
<div id="refined-sketches" style="padding:50px;" class="row">
<h2 class="heading">Refined Sketches</h2>
<p>After this, we split up to ideate further. The group came up with many ideas, and of those ideas, my best contributions were of the following sketches.</p>
<br>
<img width="600px" style="float:right;padding:10px;" src="/images/sketches-pollock.jpg">
<p>
I designed the canvas to look like a real physical button that you push and it actually gets pushed and recoils. Each time the user clicks on the button, a splash of paint is added to the button. Around the button is discarded cigarettes and beer cans. This is a thoughtful take on Pollock's life, since <b>the user must hold the button for the splashes to accumulate</b>, with a shadow Pollock making those splashes, and <b>when the user lets go, the paint fades out, simulating Pollock's long struggle as an artist to remain and leave a lasting mark and his simultaneous struggle as a person, with alcoholism</b>. Each time the painting fades, another can is added. I thought this really resonated with the core of Pollock's character. However, I decided against this, because it does not seem as if it would <i>delight</i> Pollock, since it is at heart a bit sad. However, specific parts of this, such as the painting being a small part of the large background has been kept in our final version.
</p>
<br>
<img width="500px" style="float:left;padding:10px;" src="/images/sketches-warhol.jpg">
<p>I designed this one to take the concept of the button as the process of creating a work of art, to explore another revolutionary artist: Andy Warhol. His pop art also has a really interesting process. Essentially, Warhol's face is the button, but the face is depicted in his style. Each time the button is clicked, another colour filters gets added to the face until the work of art is complete. Then it duplicates to show multiple faces, like Warhol's paintings. Furthermore, to include Warhol's love of his dog, it has a dog that runs around the background each time the button is clicked. And a classic can of tomato soup hanging around. I really enjoyed this one, but eventually decided against this since the experimentalism and experimentation themes of making the painting resonate more strongly with Pollock's style than Warhol's, as this interaction does not allow for the user to experiment the same way the Pollock original does.</p>
<br>
<img width="500px" style="float:right;padding:10px;" src="/images/sketches-zach-celebs.jpg">
<p>Plus many other sketches:</p>
<br>
<p>The rest of my team's refined sketches are here:</p>
<img width="300px" height="300px" style="float:center;padding:10px;" src="/images/fungai-sketch.jpg">
<img width="300px" style="float:center;padding:10px;" src="/images/aaron-sketch1.jpg">
<img width="300px" style="float:center;padding:10px;" src="/images/aaron-sketch2.jpg">
<img width="300px" style="float:center;padding:10px;" src="/images/dan-sketch1.jpg">
<img width="300px" style="float:center;padding:10px;" src="/images/dan-sketch2.jpg">
<img width="300px" style="float:center;padding:10px;" src="/images/dan-sketch3.jpg">
<img width="300px" style="float:center;padding:10px;" src="/images/max-sketch1.jpg">
<img width="300px" style="float:center;padding:10px;" src="/images/max-sketch2.jpg">
</div>
</div>
<hr>
<div id="software-implementation" style="padding:50px;" class="row">
<h2 class="heading">Software Implementation</h2>
<div style="padding:20px;float:right;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TeNsiDFyrBE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p>We eventually decided on a button design that attempted to capture Pollock through interaction as follows: </p>
<ul>
<li>The cursor would be <b>a cigarette that would mediate the user's experimentation</b>, to depict Pollock's love of smoking, but also to show that he was not held back by his flaws and instead fueled them into his artwork.</li>
<li>The <b>button would be the canvas</b> on which Pollock paints, and the whole page would be this canvas. Pollock did not limit himself and his art and he also did huge paintings in large scales. We wanted to show his love of limitlessness -- a big theme in his art -- by making the whole page his canvas. </li>
<li>Of course, the painting! Painting in his rebellious style of drip painting that painted through experimentation and force of expression to really experience Pollock through his way of creating. You can recreate his style by <b>clicking and dragging the cursor</b>.</li>
<li>The paintbucket would also <b>show the reality of his painting</b>: it was, despite an attempt for limitlessness, essentially limited. So we've limited the drip painting-strokes that the user is allowed to just 10, so that they choose carefully, like Pollock did. This playing with limitlessness of space and limit of medium really represents Pollock's struggle to express his new type of painting style and also his amazing ideas with the limits of his time, his many critics, and his ability.</li>
<li>After the 10 strokes are over, you see the border of the canvas close and you can then save the painting. Pollock did not sign his paintings so you cannot sign them either. But <b>you can save them because he wanted his paintings to last</b>. This closes the painting for the user in a positive way (unlike my original somewhat sad ending), so Pollock can be delighted by the representation of his style.</li>
</ul>
<br>
<img style="float:left;padding:10px;" height="400px" src="/images/pollocks-image1.jpg">
<h4>The identifying effect of The Pollock Button is to experience Pollock's struggle with the limits of his ability and his time with the limitlessness that he desired, by exploring the way he made his art through experimentation by experimenting ourselves.</h4>
<p>We worked together on the Pollock button, each contributing time to specific parts of it. I contributed especially to working on the counter and the paint bucket that would count down the user's clicks and show the amount of paint remaining.</p>
<h3> Try the <a href="/pollocks">Pollock Button</a> right now~!<br>To paint, you just click and drag anywhere on the page! At the end, you can choose to save your painting. The source code is hosted on <a href="https://github.com/hfirdaus/pollocks">Github</a> and also available on <a href="https://codepen.io/hfirdaus/pen/exWjgN">codepen</a>! You can download <a href="/files/the-pollock-button.zip">the-pollock-button.zip</a> as well.<br><br></h3>
</div>
</div>
</div>
</div>
<!-- End #about -->
<div id="contact">
<h2>Get in Touch</h2>
<div id="contact-form">
<form method="POST" action="https://formspree.io/contact@hadiyafirdaus.com">
<input type="hidden" name="_subject" value="Contact request from hadiyafirdaus.com" />
<input type="email" name="_replyto" placeholder="Your email" required>
<textarea name="message" placeholder="Your message" required></textarea>
<button type="submit">Send</button>
</form>
</div>
<!-- End #contact-form -->
</div>
<!-- End #contact -->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-5 copyright">
<p>
Copyright © 2018 HADIYA FIRDAUS
</p>
</div>
<div class="col-sm-2 top">
<span id="to-top">
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</span>
</div>
<div class="col-sm-5 social-bottom">
<ul>
<li>
<a href="https://github.com/hfirdaus" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
</li>
<li>
<a href="https://linkedin.com/in/hadiyafirdaus" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
<li>
<a href="mailto:contact@hadiyafirdaus.com"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- End footer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/scripts.min.js"></script>
</body>
</html>