-
Notifications
You must be signed in to change notification settings - Fork 0
/
graphite.html
251 lines (205 loc) · 10.8 KB
/
graphite.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-122715692-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-122715692-2');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>Hello, I'm Vinod.</title>
<meta name="title" content="Vinod's Product Design Portfolio.">
<meta name="description" content="For now, I publish my work and process here. I have plans to add some exciting stuff shortly.">
<meta name="author" content="Vinod Ramamoorthy">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://vinod.design/">
<meta property="og:title" content="Vinod's Product Design Portfolio.">
<meta property="og:description" content="For now, I publish my work and process here. I have plans to add some exciting stuff shortly.">
<meta property="og:image" content="assets/preview.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://vinod.design/">
<meta property="twitter:title" content="Vinod's Product Design Portfolio.">
<meta property="twitter:description" content="For now, I publish my work and process here. I have plans to add some exciting stuff shortly.">
<meta property="twitter:image" content="assets/preview.png">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#000">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#000">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#000">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/favicon/site.webmanifest">
<link rel="preconnect" href="https://indestructibletype.com/fonts/" crossorigin>
<link rel="stylesheet" href="https://indestructibletype.com/fonts/Jost.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="css/styles.css">
<script src="js/turbolinks.js" charset="utf-8"></script>
<script type="text/javascript">
function getDayOfWeek() {
var d = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var n = weekday[d.getDay()];
document.getElementById("day").innerHTML = n;
}
window.onload = getDayOfWeek;
</script>
</head>
<body>
<section id="wrapper">
<header>
<a href="index.html">
<h1><span class="wave">👋🏽 </span> Hello, I’m <span class="underline">Vinod</span>.</h1>
</a>
<nav>
<a href="#">Resume</a>
</nav>
</header>
<section class="article-title">
<h1><img src="./assets/graphite.png" alt="">Graphite</h1>
</section>
<video class="noSelect" controls poster="assets/videos/graphite-poster.png">
<source src="assets/videos/graphite-demo.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
Your browser doesn't support video playback.
</video>
<section id="toolkit" class="small">
<ul>
<li data-role="list-divider">Tools</li><br>
<li>
<img src="assets/figma.png" alt="Figma">
<p>Figma</p>
<span class="tooltiptext">Best UI design tool yet. Real-time collaboration with design, product and development.</span>
</li>
<li>
<img src="assets/sketch.png" alt="Sketch">
<p>Sketch</p>
<span class="tooltiptext">First UI design tool I ever loved. I still use it to do that odd job that Figma cannot handle.</span>
</li>
<li>
<img src="assets/html.png" alt="HTML 5">
<p>HTML</p>
<span class="tooltiptext">Bread and butter of the internet.</span>
</li>
<li>
<img src="assets/css.png" alt="CSS 3">
<p>CSS</p>
<span class="tooltiptext">CSS powers the style and character of the internet. Thanks, Eric Meyer.</span>
</li>
<li>
<img src="assets/javascript.png" alt="Javascript">
<p>Javascript</p>
<span class="tooltiptext">Programming language of the web that everyone loves to hate. Not me.</span>
</li>
<li>
<img src="assets/electron.png" alt="Electron">
<p>Electron</p>
<span class="tooltiptext">Make platform agnostic desktop apps with HTML, CSS & JS.</span>
</li>
<li>
<img src="assets/sublime.png" alt="Sublime Text">
<p>Sublime</p>
<span class="tooltiptext">Tried atom and all, But this one takes the cake. Best IDE there is.</span>
</li>
<li>
<img src="assets/codekit.png" alt="Codekit">
<p>Codekit</p>
<span class="tooltiptext">Cannot think of web development without this nifty little tool.</span>
</li>
<li>
<img src="assets/github.png" alt="Github">
<p>Github</p>
<span class="tooltiptext">Version code and collaborate with developers. Also, Github Pages.</span>
</li>
</ul>
</section>
<section class="article">
<p>During the early days of working out a strategy for developing a design system at Careem, we got the entire team together in a room once a week for an hour. We started by discussing the problems we dealt with as designers at Careem. It was
apparent that we needed to find ways to deliver a consistent user experience and establish visual consistency across different verticals. Better collaboration and shared resources were vital.</p>
<p>An idea to build an icon organiser/browser was born during one of these team workshop sessions. Some of us used Iconjar, and the others preferred using icons as shared assets within Figma. Searching through 30k icons within Figma wasn't an
ideal experience at the time (we used <a target="_blank" href="https://streamlineicons.com/">streamline icons</a>) . The meticulously crafted tags that came out of the box with streamline icon-set didn't work within Figma. Tags only worked
for Iconjar users. The bigger problem was to maintain a single source of truth that everyone had access to, the designers and eventually the development teams.</p>
<p>When I did the initial round of research, I came across how someone built a <a target="_blank" href="https://www.figma.com/blog/learn-how-a-microsoft-designer-built-an-internal-icon-library-in-his-spare/">fantastic tool</a> closer to what we
needed.</p>
<p>Our reasons align with the article above, tagging icons was not our use-case. We already had them tagged out of the box. Also, this tool was built for Microsoft's internal use and was not available for us. We needed to build our own.</p>
<p>So I started with a poll on slack. I asked the team to choose between a menu bar application, web or a desktop app, the three possible forms of how this application could work. Most people in the team seemed to want a desktop application,
and they had their reasons that convinced me.</p>
<p>The audience included product designers, marketing designers, developers, and product managers, which meant that this application had to work on macOS, Windows and Linux. Electron was an obvious choice. Also, I always wanted to try it out.
The point of side projects is to learn something new through experiments.</p>
<p>Even though it is very tempting to write a step by step tutorial of how I went about building Graphite, it is out of this case study's context. But here is an outline of my process and I'll spare you the majority of technical details for
brevity.</p>
<p>First, I needed to figure out a way to extract the tags from the Iconjar file that came with the streamline icon set. Simply de-compressing the file using <a target="_blank" href="https://www.zlib.net/">zlib</a> seemed to do the trick.</p>
<p>The de-compressed file now contains a folder of icons and a JSON file with all the tags associated with them. All I needed to do is to manipulate the JSON file using <a target="_blank" href="https://stedolan.github.io/jq/">JQ</a> to create a
new data structure that I would use within Graphite.</p>
<p>Apart from the "click to copy SVG to clipboard" part, everything else is pretty straight forward in terms of markup. Graphite displays all the icons within the viewport and loads more of them progressively when they scroll up to the
viewport. Supports a simple filter function to filter through the icons based on a search query. Whipped up a name and an app icon and that's all, version one of Graphite was ready after a week or so.</p>
<p>I owe big time to the design team at Careem, who were so supportive in initiatives such as this one. I plan to expand on this idea at some point in time. For now, it's in the back burner.</p>
</section>
<section class="case-study-nav">
<h1>Check out more of my work —</h1>
<ul>
<!-- <li>
<a href="graphite.html">
<img src="assets/graphite.png" alt="Graphite">
<h1>Graphite</h1>
</a>
</li> -->
<li>
<a href="">
<img src="assets/storybook.png" alt="Storybook">
<h1>Storybook</h1>
</a>
</li>
<li>
<a href="">
<img src="assets/alertness-index.png" alt="Driver.AI">
<h1>Driver.AI</h1>
</a>
</li>
<li>
<a href="">
<img src="assets/captain-bus.png" alt="Captain Bus">
<h1>Captain Bus</h1>
</a>
</li>
<li>
<a href="">
<img src="assets/ola-store.png" alt="Ola Store">
<h1>Ola Store</h1>
</a>
</li>
<li>
<a href="">
<img src="assets/partner-portal.png" alt="Growth">
<h1>Growth</h1>
</a>
</li>
</ul>
</section>
<!-- <a href="index.html#case-studies">Home</a> -->
<section id="contact">
<p>
I’m looking to find a full-time product design role in Berlin. Have you got any? Perfect. Lets get in touch -- <span class="bold">[email protected]</span>
</p>
</section>
<footer>
<p>Handmade with a lot of ❤️from Berlin. Happy <span id="day"></span>.</p>
</footer>
</section>
</body>
</html>