-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathstudio.html
347 lines (335 loc) · 22 KB
/
studio.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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Knowledge Units</title>
<link rel="icon" href="images/favicon.png" type="image/x-icon"/>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header class="studio">
<nav class="navbar fixed-top navbar-expand-lg">
<a class="navbar-brand" href="#"><img src="images/logo.svg"></a>
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="index.html">HOME <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="index.html#contact">ABOUT</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
WHAT WE DO
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="content.html">CONTENT UNIT</a>
<a class="dropdown-item" href="studio.html">STUDIO UNIT</a>
<a class="dropdown-item" href="development.html">DEVELOPEMENT UNIT</a>
</div>
</li>
<a class="nav-item nav-link" href="index.html#clients">IN THE NEWS</a>
<a class="nav-item nav-link" href="careers.html">CAREERS</a>
<a class="nav-item nav-link spec" href="index.html#form">CONTACT</a>
</div>
</div>
</nav>
<div class="row">
<h1> St<span>udio Un</span>it </h1>
</div>
<div class="row">
<div class="col-lg-3">
<h3>Digital Arts</h3>
</div>
<div class="col-lg-3">
<h3> User Experience Design</h3>
</div>
<div class="col-lg-3">
<h3> User Interface Design</h3>
</div>
<div class="col-lg-3">
<h3>Creative Arts</h3>
</div>
</div>
</div>
</header>
<section class="m-text">
<div class="row">
<p data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
Design is one of the core ingredients of any type of product. A product that is solving a core
customer/consumer problem but has poorly designed UX (User Experience)/UI (User Interface)
might not be able to scale heights. On the other hand, a well crafted product that is designed by
taking into consideration the user/customer journey works wonders as there is user stickiness
and intuitiveness.
<br>
Have a product idea but do not have in-house expertise in user-experience design? The design
arm of ‘Knowledge Units’ aptly called as ‘The Studio Unit’ can do virtually everything related to
product design. Whether it is creation of UI/UX prototyping, wire framing, digital arts, etc. we can
be your partners to take your product to the next level in terms of user experience and design!
<br>
Below are the different sub-units in ‘The Studio Unit’, each unit can play a pivotal role in product
design & development:
</p>
</div>
<div class="row">
<a href="#strategy"><img id="floating" src="images/down.png"></a>
</div>
</section>
<section class="strategy" id="strategy">
<h1 data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100"> <img src="images/cont2.png"><span class="und">User</span> Experience Design </h1>
<p data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
Consumers/users have a lot of choices/alternatives for products/services that are offered to
them. One wrong move from a product design/development point of view and your loyal
consumers might opt for your competitor’s services. Within a short span of time, you need to hit
a bullseye so that users are hooked on to your platform. For startups, this KPI becomes even
more important since a good customer-experience can help in spreading good word of mouth
for the product.
<br>
<br>
User Experience Design can help in achieving these goals. A product with sticky UX can win
your business new customers and drastically increase the user retention rate. Your loyal users
can become evangelists of your product if the UX design is spot-on!
<br>
<br>
Below are some of the services under the broad umbrella of User Experience Design:
</p>
<ul class="nav nav-tabs pc" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
<li class=""><a data-toggle="tab" class="active" href="#home">Analysis</a></li>
<li class=""><a data-toggle="tab" href="#menu1">Interface Architechture</a></li>
<li><a data-toggle="tab" href="#menu2">Sketching and Wireframe</a></li>
<li><a data-toggle="tab" href="#menu3">Prototype</a></li>
<li><a data-toggle="tab" href="#menu4">Editing</a></li>
</ul>
<div class="dropdown">
<button class="ue btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
Analysis
</button>
<div class="uemenu dropdown-menu" aria-labelledby="dropdownMenuButton">
<ul class="nav" >
<li class=""><a data-toggle="tab" class="active" href="#home">Analysis</a></li>
<li class=""><a data-toggle="tab" href="#menu1">Interface Architechture</a></li>
<li><a data-toggle="tab" href="#menu2">Sketching and Wireframe</a></li>
<li><a data-toggle="tab" href="#menu3">Prototype</a></li>
<li><a data-toggle="tab" href="#menu4">Editing</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade in active show" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
<h1>Analysis</h1>
<p>
Have a good web/consumer product but struggling with low user engagement?
There could be an issue in the way the product’s user experience is designed. Our team of
experienced UX analysts & designers can help you improve the overall user flow. We also
perform deep-rooted analysis to understand customer behavior & psyche from a design point of
view. Based on UX analysis of the product, competitor analysis, and insights from analytics
tools; our team works on improvising the UX design for achieving higher conversion rates, better
engagement & retention.
</p>
</div>
<div id="menu1" class="tab-pane fade">
<h1>Interface Architechture</h1>
<p>
Information Architecture is considered the basic building blocks
of the product/site’s information structure. There is no need to complicate the structure and our
designers stand by that principle. Based on the requirements & market segment, we can come
up with un-complicated information architecture for easy navigation within the product
blocks/pages.
</p>
</div>
<div id="menu2" class="tab-pane fade">
<h1>Sketching and Wireframe</h1>
<p>
If you have an idea for kick-ass consumer web product, we
can be your design partners by supporting you in wireframing the product. Wireframe is a
blueprint of the visual guide of your website/application. It is an important process that involves
the key stakeholders of the product – product designers, developers, product managers, and
visual artists. Visual experts & sketch artists from our design think-tank have extensive
experience in wireframing for UX and they are here to help in UX Planning process of your
product.
</p>
</div>
<div id="menu3" class="tab-pane fade">
<h1>Prototype</h1>
<p>
Prototyping is a key process in the design process as it enables to seek
feedback from the key stakeholders & user-groups that tested the product. It is a visualization of
how the final product would look like. Prototyping is an iterative process as relevant feedback
has to be incorporated back in the product UX. Our in-house expertise and experience can be a
huge plus when it comes to rapid UX prototyping or prototyping within tight deadlines.
</p>
</div>
<div id="menu4" class="tab-pane fade">
<h1>Editing</h1>
<p>
Already have a product in the market facing stiff competition and witnessing
stagnant growth? Time to re-think the product UX flow! Our team has helped clients achieve
their key KPIs by revisiting an existing product’s UX journey and revamping UX based on
analysis and feedback. Having worked with varied set of clients, we can come up with
customer-centric UX which is a vital component that contributes to product’s growth.
</p>
</div>
</div>
<a href="index.html#form" ><button data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">Contact Us →</button></a>
</section>
<section class="strategy">
<h1 data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100"> <img src="images/con1.png"><span class="und">User</span> Interface Design </h1>
<p data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
User Interface Design is about improving the overall look & feel/presentation of the website or
mobile/web application. A User Interface built from an intuitiveness point of view will result in
higher engagement, positive word of mouth, and higher retention rate. Our UI designers work on
simplifying UI by incorporating a thought-process from an external customer’s point of view.
<br>
<br>
Below are some of the services under the broad umbrella of User Interface Design:
</p>
<ul class="nav nav-tabs pc" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
<li class=""><a data-toggle="tab" class="active" href="#home1">Design References</a></li>
<li class=""><a data-toggle="tab" href="#menu11">Graphic Interface</a></li>
<li><a data-toggle="tab" href="#menu21">Animated Prototype</a></li>
<li><a data-toggle="tab" href="#menu31">UI Guidelines Kit</a></li>
<li><a data-toggle="tab" href="#menu41">Design Review</a></li>
</ul>
<div class="dropdown">
<button class="ui btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
Design References
</button>
<div class="uimenu dropdown-menu" aria-labelledby="dropdownMenuButton">
<ul class="nav">
<li class=""><a data-toggle="tab" class="active" href="#home1">Design References</a></li>
<li class=""><a data-toggle="tab" href="#menu11">Graphic Interface</a></li>
<li><a data-toggle="tab" href="#menu21">Animated Prototype</a></li>
<li><a data-toggle="tab" href="#menu31">UI Guidelines Kit</a></li>
<li><a data-toggle="tab" href="#menu41">Design Review</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div id="home1" class="tab-pane fade in active show" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
<h1>Design References</h1>
<p>
Along with UX product design, our team of visualizers can come
up with a rapid reference UI design based on the client’s requirements. While coming up
with the reference, we study the competition to understand how UI design can be a big
differentiator in upping the game. We have collaborated with multiple startups for
building reference design for their products and supporting many of them in their next
phase of growth.
</p>
</div>
<div id="menu11" class="tab-pane fade">
<h1>Graphic Interface</h1>
<p>
Believe it or not, consumers rarely have idea about the
underlying technology behind a product they use on a frequent basis. Ideally, they
shouldn’t be as GUI (Graphical User Interface) is their way of interacting with the
features in the product. Whether you are building a website, creating a mobile app or
creating voice-controlled interfaces, we can build beautiful graphical interfaces to give
your product the best visual appeal.
</p>
</div>
<div id="menu21" class="tab-pane fade">
<h1>Animated Prototype</h1>
<p>
Animations in products look great, but are they really
necessary? Animations in UI prototyping should be used only if it is adding value to the
usability quotient and not creating a hindrance for the end-user. At Design Unit,
animation experts and design experts collaborate to figure out ideal scenarios where
animations can add value to the product/prototype. Talk to us if you plan to use
animations in the UI prototyping phase.
</p>
</div>
<div id="menu31" class="tab-pane fade">
<h1>UI Guidelines Kit</h1>
<p>
Have a product and looking for a detailed design review? Our
experience working with clients, ranging from startups to multi-nationals can be vital in
contributing to your product’s design process. We can do a detailed design review by
looking into the nitty-gritty of the product.
</p>
</div>
<div id="menu41" class="tab-pane fade">
<h1>Design Review</h1>
<p>
Have a product and looking for a detailed design review? Our
experience working with clients, ranging from startups to multi-nationals can be vital in
contributing to your product’s design process. We can do a detailed design review by
looking into the nitty-gritty of the product.
</p>
</div>
</div>
<a href="index.html#form" ><button data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">Contact Us →</button></a>
</section>
<section class="strategy">
<h1 data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100"> <img src="images/cont3.png"><span class="und">Digi</span>tal/ Commercial Arts</h1>
<p data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
Looking to scale your business by leveraging the avenues of online marketing? Be it
designing creative banners for online advertisements or creating artistic material for online
marketing, we have all these services covered under this arm of Design Unit. Our designers
design by keeping the end-users into account thereby ensuring that there is high CTR (Click
Through Rate) for the banner/advert leading to better conversion rates.
</p>
</section>
<section class="strategy">
<h1 data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100"> <img src="images/cont4.png"><span class="und">Crea</span>tive Arts</h1>
<p data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
Our team has in-house creative artists who can pitch in developing beautifully designed
marketing material. While designing the material, we ensure that core aesthetics of the
material are kept intact so that it drives user engagement. A poorly designed banner or any
form of marketing medium can cause damage to the brand value. We take all the
parameters into account and come up with a well-crafted creative art material for your
business.
</p>
</section>
<footer>
<div class="row">
<div class="col-lg-4 abt">
<img src="images/logo.svg">
<p>
An all-in-one creative agency based out of Pune, India, that takes care of all your creative, branding and marketing needs.
</p>
</div>
<div class="col-lg-4 lin">
<div class="row">
<div class="col-lg-4">
<h3> QUICK LINKS</h3>
<a href="index.html#main">HOME</a>
<a href="index.html#contact">ABOUT</a>
<a href="index.html#heart">WHAT WE DO</a>
<a href="index.html#clients">IN THE NEWS</a>
<a href="careers.html">CAREERS</a>
<a href="index.html#form">CONTACT US</a>
</div>
<div class="col-lg-8 lin1">
<h3>CONTACT US</h3>
<p>
Marisoft I, EFC Business Center, 4th Floor, Marigold IT Park, Kalyani Nagar, Pune, Maharashtra 411014
<br><br>
+91-20-3059-1500
<br><br>
</p>
</div>
</div>
</div>
<div class="col-lg-4 cal">
<h3>NEWS LETTER</h3>
<b>Subscribe to our Newsletter and get latest updates</b>
<input type="email" value="Email Address">
<button>Submit</button>
</div>
</div>
</footer>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>