-
Notifications
You must be signed in to change notification settings - Fork 0
/
casestudy-nucco.html
224 lines (194 loc) · 10.2 KB
/
casestudy-nucco.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
<!DOCTYPE HTML>
<!--
Directive by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-153596096-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-153596096-1');
</script>
<title>Calibre | Digital Innovation and Product Development Studio</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body class="is-preload page-casestudy-styling">
<header class="header">
<div class="container header__container">
<nav class="header__nav">
<ul class="header__nav-list">
<li class="header__nav-item">
<a href="./index.html">Home</a>
</li>
<li class="header__nav-item">
<a href="#portfolio">Portfolio</a>
</li>
<li class="header__nav-item">
<a href="#culture">Culture</a>
</li>
<li class="header__nav-item">
<a href="#enquire">Enquire</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Header -->
<div id="header" class="nuccoheader">
<h1>Nucco Brain Case Study</h1>
<p>[Insert the relevant tags of this project here (comma separated)]</p>
</div>
<!-- Main -->
<div id="main">
<div class="container medium center">
<h3>Project Overview</h3>
<h3 class="greytitles">Overview</h3>
<p>Nucco Brain were initially looking for a small, agile team to manage and update their existing website. As our relationship grew, Calibre helped upskill their internal team, leveraging their animation talent on the web for paying clients.</p>
<p>They chose Calibre because of our flexibility, and remain both a client and a partner 4 years.</p>
<p><a href="https://www.nuccobrain.com/">www.nuccobrain.com</a></p>
</div>
<div class="box container medium left">
<div class="row cs-box-row">
<div><img class="testimonialface" src="./images/casestudies-nucco/hilary.png" alt=""></div>
<p class="testimonialquote">
As we are a growing company, we are constantly making changes and iterations to our website, and Anthony and Jerome are always helpful and patient with me and my team.<br/><br/>
The best thing about working with Calibre Digital is that they provide feedback on our suggestions, which feels more like a partnership. I highly recommend them as you emerge on your own digital journey!<br><strong>- Hilary Taylor<br> - Marketing Executive</strong>
</p>
</div>
</div>
<div class="container medium center">
<h3>ABOUT NUCCO BRAIN</h3>
<h3 class="greytitles">About</h3>
<p>Nucco Brain are an award-winning visual storytelling studio based in London, with a pan-European presence. They specialise in telling the stories of established brands, bringing innovative twists to both the narrative itself and the delivery, whether through traditional video, animation or even VR.</p>
</div>
<div class="container medium center">
<h3>Highlights</h3>
<h3 class="greytitles">Highlights</h3>
</div>
<div class="container medium center">
<p><strong>When you need to focus on your brand, trust a team who understand not just your technical, but also your business priorities.</strong></p>
<div class="js-Accordion" id="accordion1">
<p id="expandtrigger" class="challenge-cta">Expand to see how we helped turn web presence from a concern to a major asset</p>
<div>
<p>How do you find the perfect positioning for you when website changes are hard to prototype, expensive, and take time to see in the flesh?</p>
<p>By working with Nucco Brain’s designers to develop appropriate web design workflows for them, they were soon able to rapid-prototype website iterations in-house, and call us in to code & publish once they had something that felt right. These iterations continued for 3 years until they found a positioning that was clear enough to hire a sales team and be acquired by a larger company: Two of the hardest transitions for an Agency founder.</p>
<img class="container" src="./images/casestudies-nucco/PlaceholderThingImage.png" alt="">
</div>
</div>
</div>
<div class="container medium center">
<p><strong>As a team of talented animators and illustrators, it made sense for Nucco Brain to showcase that talent on the web</strong></p>
<div class="js-Accordion" id="accordion2">
<p id="expandtrigger" class="challenge-cta">But video files are so heavy that you can’t use them in many ways on a website.</p>
<div>
<p>Video files are contained within a rectangle and take a while to load. There’s certainly a place for them on the web, but Nucco Brain’s brand deserved a better method of implementing animation.</p>
<p>By leveraging a framework called lottie.js and Bodymovin, we enabled Nucco Brain to create beautiful SVG animations (which are much more lightweight and versatile) in their animation style. With this high-performance animation capability available to them, Nucco Brain were able to start offering professional and animated web design as a service to their cleints.</p>
<img class="container" src="./images/casestudies-nucco/PlaceholderThingImage.png" alt="">
</div>
</div>
</div>
<div class="container medium center">
<p><strong>When your work with another agency is filled with both excitement and trust, it's time to team up</strong></p>
<div class="js-Accordion" id="accordion3">
<p id="expandtrigger" class="challenge-cta">Expand to see how Calibre and Nucco Brain’s relationship has evolved</p>
<div>
<p>Originally a founder-founder relationship, the two companies have grown over 4 years to start working on client projects as well. We’ve worked with a number of Nucco Brain’s clients, including a website redesign with the European Space Agency.</p>
</div>
</div>
</div>
<div class="box container medium left">
<div class="row cs-box-row">
<div class="calibretip">
<img src="./images/casestudies-nucco/lottie.gif" alt="">
</div>
<div class="calibretip">
<h3 style="text-align: left;">CALIBRE TIP</h3>
<p class="tipquote">
If you want to do something interesting (in our case, SVG animation), there might already be an open source solution available. In our case we found Bodymovin and Lottie.js, which is maintained by Airbnb.<br/><br/>
Note: You’ll need to properly evaluate an open-source project before including it though: badly-made projects can also be a liability in your codebase.
</p>
</div>
</div>
</div>
<div class="container medium center">
<p>After 4 years of working together on both Nucco Brain’s website and exciting external clients, we can’t wait to see what’s next for the Calibre-Nucco Brain partnership.</p>
<p><strong>How could you not just talk about what you do, but show what you do in the most innovative way possible on web?</strong></p>
</div>
</div> <!-- end main div -->
<!-- Footer -->
<div id="footer">
<div class="container medium" id="enquire">
<header class="major last">
<h2>Questions or comments?</h2>
</header>
<p>You know the drill.</p>
<form method="post" action="https://formspree.io/jerome@calibre.digital">
<div class="row">
<div class="col-6 col-12-mobilep">
<input type="text" name="name" placeholder="Name" />
</div>
<div class="col-6 col-12-mobilep">
<input type="email" name="email" placeholder="Email" />
</div>
<div class="col-6 col-12-mobilep">
<input type="text" name="referrer" placeholder="Who connected you to us?" />
</div>
<div class="col-6 col-12-mobilep">
<select name="enquiry type">
<option value="other">What are you enquiring about?</option>
<option value="newbiz">We've got a project for you</option>
<option value="officehours">I'd love to pick your brain</option>
<option value="bizdev">Partnership Opportunity</option>
</select>
</div>
<div class="col-12">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</div>
<div class="col-12">
<ul class="actions special">
<li><input type="submit" value="Send Message" /></li>
</ul>
</div>
</div>
</form>
<!--
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
</ul> -->
<ul class="copyright">
<li>Website created in a day, the Calibre Digital way</li>
<li>Calibre Digital Limited - Company Number: <a href="https://beta.companieshouse.gov.uk/company/10869672">10869672</a></li>
</ul>
</div>
</div>
<!-- Scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/breakpoints.min.js"></script>
<script src="js/util.js"></script>
<script src="js/main.js"></script>
<script src="js/vanilla-js-accordion.js"></script>
<script>
var accordion = new Accordion({
element: "accordion1", // ID of the accordion container
});
var accordion = new Accordion({
element: "accordion2", // ID of the accordion container
});
var accordion = new Accordion({
element: "accordion3", // ID of the accordion container
});
</script>
</body>
</html>