-
Notifications
You must be signed in to change notification settings - Fork 0
/
adfin.html
105 lines (79 loc) · 3.95 KB
/
adfin.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
---
title: Du Hoang
---
{% include header.html %}
{% include user.html %}
<div class="nav adfin">
<div class="nav-item">
<a href="imeve.html" >Imeve</a>
</div>
<div class="nav-item">
<a href="mapd.html">MapD</a>
</div>
<div class="nav-item">
<a href="sysdig.html">Sysdig</a>
</div>
<div class="nav-item">
<a href="adfin.html" class="active">AdFin</a>
</div>
<div class="nav-item">
<a href="calorie-count.html">Calorie Count</a>
</div>
<div class="nav-item">
<a href="vr-ar.html">VR/AR</a>
</div>
</div>
</div>
</div>
</div>
<div class="content adfin">
<div class="section">
<div class="section-view section-tweet">
<div class="arrow arrow-left">
<svg viewBox="0 0 24 24"><use xlink:href="#arrow"></use></svg>
</div>
<div class="arrow arrow-right">
<svg viewBox="0 0 24 24"><use xlink:href="#arrow"></use></svg>
</div>
<div class="view-transform scrollable">
<div class="tile order order-3 animated">
<img src="img/adfin-1.png" srcset="img/adfin-1-low.png 640w, img/adfin-1.png 1280w" />
</div>
<div class="tile order order-2 animated">
<img src="img/adfin-2.png" srcset="img/adfin-2-low.png 640w, img/adfin-2.png 1280w" />
</div>
<div class="tile order order-1 animated">
<img src="img/adfin-3.png" srcset="img/adfin-3-low.png 640w, img/adfin-3.png 1280w" />
</div>
<div class="nav-item">
<a href="vr-ar.html">VR/AR</a>
</div>
</div>
</div>
<div class="section-heading">AdFin Analytics Platform</div>
<div class="section-info">
<p>I joined <strong>AdFin</strong> shortly after the launch of their MVP. My challenge was to transform a dry and overwhelmingly technical analytics platform into something that is visually attractive and user friendly.</p>
<p>To do this I use bold typography and colors that not only add visual interest, but also convey the underlying hierachy of the design. I then drastically simplified the graphs and charts, and made them really clean and easy to digest.</p>
<p>Working with <strong>AdFin</strong> allowed me to explore the craft of data visualization. It introduced me to Object Oriented Javascript, D3.js data visualization framework, and Facebook's application framework, React.js.
</p>
<p>After the redesign, we began creating new products from scratch. It was a great learning experience in designing something from nothing, and the process of design in an early stage startup that is still looking for product market fit.
</p>
</div>
</div>
<div class="section dark">
<div class="section-view video">
<div class="view-transform">
<div class="tile">
<iframe src="https://player.vimeo.com/video/131616039?loop=1&title=0&byline=0&portrait=0" style="width:100%; height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<div class="section-heading">Beautifully Animated Visualizations</div>
<div class="section-info">
<p>Interactive data visualizations should be more than just static screens. With <strong>AdFin</strong>, I've taken great care to animate the transitions and interactions in order to bring our visuals to life. </p>
</p>
</div>
</div>
<div class="next-link"><a href="calorie-count.html"> My Work For Calorie Count<span class="icon"><svg viewBox="0 0 24 24"><use xlink:href="#arrow"></use></svg></a></div>
</body>
</html>