-
Notifications
You must be signed in to change notification settings - Fork 0
/
single-blog.html
231 lines (214 loc) · 14 KB
/
single-blog.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Wize - Creative Portfolio Showcase Template">
<meta name="keywords" content="personal, portfolio new, html, one page, bootstrap, new html template, design, creative, onepage, clean, modern">
<meta name="author" content="Chatura Dissanayake">
<!-- PAGE TITLE -->
<title>Wize - Creative Personal Portfolio</title>
<!-- FAVICON ICON -->
<link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon" />
<!-- ALL GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
<!-- BOOTSTRAP CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<!-- FONT AWESOME CSS -->
<link rel="stylesheet" href="assets/fonts/remixicon.css" />
<!-- MAGNIFIC CSS -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- NICE SELECT CSS -->
<link rel="stylesheet" href="assets/css/nice-select.min.css" />
<!-- ANIMATE CSS -->
<link rel="stylesheet" href="assets/css/animate.min.css" />
<!-- SLICK CSS -->
<link rel="stylesheet" href="assets/css/slick.min.css" />
<!-- SPACING CSS -->
<link rel="stylesheet" href="assets/css/spacing.css" />
<!-- MAIN STYLE CSS -->
<link rel="stylesheet" href="assets/css/style.css" />
<!-- RESPONSIVE CSS -->
<link rel="stylesheet" href="assets/css/responsive.css">
</head>
<body>
<!-- START HEADER -->
<header class="main-header">
<div class="header-upper">
<div class="container">
<div class="header-inner d-flex align-items-center">
<!-- START LOGO DESIGN AREA -->
<div class="logo-outer">
<div class="logo">
<a href="index.html"><img src="assets/images/logos/logo.png" alt="Logo" title="Logo" /></a>
</div>
</div>
<!-- / END LOGO DESIGN AREA -->
<!-- START NAV DESIGN AREA -->
<div class="nav-outer clearfix mx-auto">
<nav class="main-menu navbar-expand-lg">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-bs-toggle="collapse" data-bs-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="navigation clearfix">
<li><a class="nav-link-click" href="index.html">Home</a></li>
<li><a class="nav-link-click" href="about.html">About</a></li>
<li><a class="nav-link-click" href="projects.html">Projects</a></li>
<li><a class="nav-link-click" href="blog.html">Blog</a></li>
<li><a class="nav-link-click" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>
<!-- / END NAV DESIGN AREA -->
</div>
</div>
</div>
</header>
<!-- / END HEADER -->
<!-- START BLOG POST -->
<div id="smooth-wrapper">
<div id="smooth-content">
<main class="main-bg o-hidden">
<section class="single-page-hero-area single-blog-page-design">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<h2>Mastering Data Visualization: A Designer's Journey from Adobe to Tableau</h2>
<p>How my journey from Adobe’s design suite to mastering Tableau transformed my approach to visual storytelling.</p>
</div>
</div>
</div>
</section>
<!-- START BLOG CONTENT -->
<section class="blog-category section-padding">
<div class="container">
<div class="row">
<div class="col-lg-8">
<!-- BLOG POST CONTENT -->
<div class="single-blog-post-details wow fadeInDown" data-wow-delay="0.2s">
<img src="assets/images/blog/blog1.png" class="img-responsive" alt="" />
<h2>Mastering Data Visualization: A Designer's Journey from Adobe to Tableau</h2>
<div class="post-date">
<span><i class="ri-calendar-fill"></i> 05, Sep 2024</span>
<span><i class="ri-file-copy-2-fill"></i> Data Visualization</span>
</div>
<p>Data is everywhere, but making sense of it can be challenging. For years, designers have been tasked with transforming raw data into meaningful visuals that tell a compelling story. While Adobe’s design suite has long been a go-to tool for many graphic designers, platforms like Tableau are transforming how we approach data visualization. This is the story of my journey as a designer moving from Adobe to mastering Tableau, and how it has reshaped my perspective on the intersection of design and data.</p>
<h3>From Graphic Design to Data Visualization</h3>
<p>I began my career primarily focusing on graphic design. Adobe Illustrator and Photoshop were my bread and butter—crafting visual identities, laying out infographics, and designing websites. But as the need for data-driven decision-making exploded across industries, I found myself increasingly drawn to the field of data visualization. Adobe was fantastic for aesthetics, but as datasets grew larger and more complex, I needed a tool that went beyond static design. Enter Tableau.</p>
<h3>Learning Tableau: A Game Changer</h3>
<p>Tableau isn’t just about making charts; it’s about uncovering patterns and trends in real-time. It allows you to explore data dynamically and presents the flexibility to adjust and reframe your visuals instantly based on the insights you discover. For me, this was a significant shift. Instead of static graphics, I was now creating interactive dashboards that let users explore the data on their terms.</p>
<h3>Combining the Best of Both Worlds</h3>
<p>The beauty of being a designer who has worked with both Adobe and Tableau is having the best of both worlds. Tableau empowers me to craft data stories with real-time accuracy, while my Adobe experience ensures my visuals remain polished and visually appealing.</p>
<p>Here are some of the ways I’ve blended my design skills with Tableau:</p>
<ul>
<li><strong>Custom Branding:</strong> While Tableau has a great set of default templates, I still bring my custom branding expertise from Adobe to ensure a consistent visual language.</li>
<li><strong>Typography:</strong> Attention to detail in typography from Adobe pays off when creating clear, readable dashboards in Tableau.</li>
<li><strong>Interactive Storytelling:</strong> Tableau lets me take a step further by making dashboards interactive, empowering users to discover insights on their own.</li>
</ul>
<div class="next-previews-button-design">
<a class="pull-left" href="#"><i class="fa fa-chevron-left"></i> Previous post</a>
<a class="pull-right" href="#">Next post <i class="fa fa-chevron-right"></i></a>
</div>
</div>
<!-- / END BLOG POST CONTENT -->
</div>
<!-- START BLOG SIDEBAR -->
<div class="col-lg-4">
<div class="single-blog-sidebar-area">
<div class="single-side-bar">
<h2>Search</h2>
<input type="text" class="form-control" placeholder="Search">
<button>Search</button>
</div>
<div class="single-side-bar">
<h2>About Me</h2>
<img src="C:\Users\Chatura Work\Documents\GitHub\atakatus\assets\images\blog\author1.png" alt="Author" style="width: 100%; height: auto; margin-bottom: 15px;">
<p style="margin-top: 10px;">Hi, I’m Chatura Dissanayake, a passionate data visualization designer with experience in turning data into meaningful visuals. Join me as I share insights on blending creative design with data storytelling.</p>
</div>
<div class="single-side-bar">
<h2>Categories</h2>
<ul>
<li><a href="#">Data Visualization <span>(8)</span></a></li>
<li><a href="#">Graphic Design <span>(6)</span></a></li>
<li><a href="#">UI/UX Design <span>(5)</span></a></li>
<li><a href="#">Web Development <span>(10)</span></a></li>
</ul>
</div>
</div>
</div>
<!-- / END BLOG SIDEBAR -->
</div>
</div>
</section>
<!-- / END BLOG CONTENT -->
<!-- START CALL TO ACTION -->
<section class="call-to-action-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="call-to-action-part wow fadeInUp delay-0-2s text-center">
<h2>Are You Ready to kickstart your project?</h2>
<p>Reach out and let's make it happen ✨. I'm available for full-time or part-time opportunities to push the boundaries of design and deliver exceptional work.</p>
<a href="contact.html" class="theme-btn call-to-action-button">Let's Talk <i class="ri-download-line"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- / END CALL TO ACTION -->
<!-- START FOOTER -->
<footer class="main-footer">
<div class="footer-bottom pt-50 pb-40">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="copyright-text">
<p>© 2024 Chatura Dissanayake. All Rights Reserved.</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- / END FOOTER -->
</main>
</div>
</div>
<!-- / END PAGE WRAPPER -->
<!-- JQUERY JS -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<!-- BOOTSTRAP JS-->
<script src="assets/js/bootstrap.min.js"></script>
<!-- APPEAR JS -->
<script src="assets/js/appear.min.js"></script>
<!-- MAGNIFIC JS -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!-- SLICK JS-->
<script src="assets/js/slick.min.js"></script>
<!-- GSAP AND LOCOMOTIV JS-->
<script src="assets/js/gsap.min.js"></script>
<script src="assets/js/ScrollSmoother.min.js"></script>
<script src="assets/js/ScrollTrigger.min.js"></script>
<script src="assets/js/smoother-script.js"></script>
<!-- NICE SELECT JS-->
<script src="assets/js/jquery.nice-select.min.js"></script>
<!-- IMAGE LOADER JS-->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<!-- ISOTOPE JS-->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!-- WOW ANIMATION JS-->
<script src="assets/js/wow.min.js"></script>
<!-- SCRIPT JS-->
<script src="assets/js/script.js"></script>
</body>
</html>