-
Notifications
You must be signed in to change notification settings - Fork 0
/
single-blog-two.html
232 lines (215 loc) · 14 KB
/
single-blog-two.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
<!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>Blending Creativity and Data: How Graphic Design Enhances Storytelling in Visualization</h2>
<p>Exploring the intersection of creativity and data visualization, and how design principles amplify the storytelling power of data.</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/blog2.png" class="img-responsive" alt="" />
<h2>Blending Creativity and Data: How Graphic Design Enhances Storytelling in Visualization</h2>
<div class="post-date">
<span><i class="ri-calendar-fill"></i> 06, Sep 2024</span>
<span><i class="ri-file-copy-2-fill"></i> Graphic Design</span>
</div>
<p>In today's data-driven world, it is not enough to simply display data; it is crucial to communicate it in a way that engages and informs your audience. This is where the fusion of graphic design and data visualization comes into play. Combining creative design with data storytelling enhances the clarity, impact, and memorability of the data.</p>
<h3>The Power of Design in Data Visualization</h3>
<p>Graphic design adds a layer of depth to data visualization that helps guide the viewer’s attention and emphasize key points. It elevates raw numbers into a story that resonates with the audience. Colors, typography, and layout are just a few of the design elements that play a crucial role in shaping the viewer's experience and making complex data more digestible.</p>
<h3>Balancing Aesthetics and Functionality</h3>
<p>The challenge in blending design with data lies in balancing aesthetics with functionality. A beautiful design that sacrifices accuracy or clarity is ineffective. On the other hand, raw data without a polished presentation can fail to engage. Graphic designers working in data visualization must strike the right balance between presenting data clearly and making it visually appealing.</p>
<h3>Designing with a Purpose</h3>
<p>Great data visualizations are created with a clear purpose in mind. As a designer, it's essential to think about the story the data is telling and how design elements can support and enhance that narrative. This involves not only choosing the right type of chart or graph but also considering how each design decision—from color choices to layout—contributes to the overall message.</p>
<p>Here are a few design strategies that can enhance data visualizations:</p>
<ul>
<li><strong>Use of Color:</strong> Colors should highlight key data points without overwhelming the viewer.</li>
<li><strong>Typography:</strong> Clean and simple typography ensures that text elements are easy to read and do not distract from the data.</li>
<li><strong>White Space:</strong> Adequate spacing between elements improves readability and reduces clutter.</li>
<li><strong>Interactive Elements:</strong> Adding interactivity through platforms like Tableau or Power BI can make visualizations more engaging and user-friendly.</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>