-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbbc.html
208 lines (198 loc) · 10.4 KB
/
bbc.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
<meta http-equiv="expires" content="Fri, 1 July 2011 10:00:00 GMT" />
<link type="text/css" rel="stylesheet" href="stylesheets/reset_html5.css" />
<link type="text/css" rel="stylesheet" href="stylesheets/wa-2011.css" />
<link type="text/css" href="stylesheets/wa-2011-06.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/wa-2011-03.js"></script>
<script type="text/javascript" src="javascripts/june-scripts.js"></script>
<script type="text/javascript" src="javascripts/june.js"></script>
<title>With Associates — A digital agency, we build and design websites and apps</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lte IE 8]>
<script src="/javascripts/html5.js"></script>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-298580-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body class='june'>
<nav class='global_header instapaper_ignore' class="white">
<a href="/" id='back'>
<img src="images/header/logo.gif"/>
</a>
<div id='menu'>
<ul id='compact'>
<li class='padding'>
<p id='short_text'>
We're changing our site every month... <a href="#" id="more" class="toggle">read more</a>
</p>
<p id='long_text'>We're changing our site every month this year with an aim to experiment, play, discuss and learn more about the ever evolving nature of the digital environment. Follow <a href="http://twitter.com/@withassociates">@withassociates</a> for updates, or <a href="/january">read more behind the idea</a>, or simply explore the index on the right… <a href="#" id="less">read less</a>
</p>
</li>
<li class='dropdown'>
<a class='toggle' href='/' id='current'>
Index
</a>
<ul id='months'>
<li><a href="/january">January</a></li>
<li><a href="/february">February</a></li>
<li><a href="/march">March</a></li>
<li><a href="/april">April</a></li>
<li><a href="/may">May</a></li>
<li><a href="/june">June</a></li>
<li><a href="/july">July</a></li>
<li><a href="/august">August</a></li>
<li><a href="/september">September</a></li>
<li><a href="/october">October</a></li>
<li><a href="/november">November</a></li>
<li><a href="/december">December</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class='row'>
<div class='column grid_3' id='sidebar'>
<h1 class='logo'>
<a class='external' href='/'>With Associates</a>
</h1>
<p>We’re a digital agency based in North London that plan, design and build websites, apps and user interfaces.</p>
<p>More specifically, ‘we’ are currently made up of <a href="http://twitter.com/mathewwilson" target="_blank">Mathew Wilson</a>, <a href="http://twitter.com/erino" target="_blank">Erin Staniland</a>, <a href="http://twitter.com/weesquirt" target="_blank">Jenifer Dunn</a>, <a href="http://twitter.com/almonk" target="_blank">Al Monk</a>, <a href="http://twitter.com/jgwhite" target="_blank">Jamie White</a> and <a href="http://twitter.com/lawrencebrown" target="_blank">Lawrence Brown</a>.</p>
<p>And more broadly, and in this month’s instalment of our 2011 project, we’re refocusing our attention on our clients and wider network of associates with a select set of nine case studies.</p>
<ul class="vcard">
<li class="fn org">With Associates</li>
<li class="adr"><span class="street-address">100 De Beauvoir Road</span><span class="locality">London</span> <span class="postal-code">N1 4EN</span></li>
<li><a href="http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=Studio+100,+100+De+Beauvoir+Rd,+Hackney,+London+N1,+United+Kingdom&sll=51.542532,-0.080101&sspn=0.011811,0.01605&ie=UTF8&ll=51.543132,-0.08008&spn=0.016254,0.040298&z=15&iwloc=A" target="_blank">Google Map</a></li>
<li><a href="mailto:[email protected]" class="email">[email protected]</a></li>
<li><a href="tel:+ 44 20 7923 4757" class="tel">+ 44 (0)20 7923 4757</a></li>
</ul>
<div id='extra'>
<ul>
<li>
<a href='http://twitter.com/withassociates' target="_blank">Twitter</a>
</li>
<li>
<a href='http://www.flickr.com/photos/withassociates' target="_blank">Flickr</a>
</li>
</ul>
</div>
</div>
<div class='column grid_9' id='content'>
<div id='pagecontent'>
<h1>BBC introducing</h1>
<p><span class="caps">BBC</span> Introducing is the the UK’s largest supporting platform for unsigned, undiscovered and under the radar musicians. It exists purely to enable artists to highlight themselves and get their music into the ears of <span class="caps">BBC</span> radio DJ’s.</p>
<p>One of, if not the main function of the site therefore, is enabling artists to upload their music files in order for them to join the ranks and compete fairly, while behind the scenes another piece of software called Peel, processes the tracks and enables the DJ’s to listen, review and highlight favourites.</p>
<p>Our role in the latest incarnation of all this functionality was to take on business analysis, user stories, and wireframes created by another <span class="caps">BBC</span> roster agency, <a href="http://softwire.com">Softwire</a>, and apply the Introducing and Peel brands and identities.</p>
<p>Within a tight deadline, the designs were created with input and collaboration between all parties and handed back to Softwire for technical implementation.</p>
<p>One extra little easter egg highlight within all this for us was the opportunity to commission animator Dan Britt to create a looping animation that explains the whole process while tracks are uploaded, the results of which push the brand even further into an hypnotically watchable animated format.</p>
<div class='pic first'>
<img src="/images/june/bbc1.png" />
</div>
<div class='pic'>
<img src="/images/june/bbc2.png" />
</div>
<div class='pic'>
<img src="/images/june/bbc3.png" />
</div>
<div class='pic'>
<img src="/images/june/bbc4.png" />
</div>
<div class='pic'>
<img src="/images/june/bbc5.png" />
</div>
<div class='pic'><iframe src="http://player.vimeo.com/video/22564673?title=0&byline=0&portrait=0" width="700" height="394" frameborder="0"></iframe></div>
<ul><li>The Associates:</li>
<li><a href="http://www.bbc.co.uk/introducing">BBC introducing</a></li>
<li><a href="http://softwire.com">Softwire</a></li>
<li><a href="http://danielbritt.co.uk">Dan Britt</a></li>
<li><a href="http://withassociates.com">With Associates</a></li></ul>
</div>
<div class='row'>
<div class='column grid_3 thumb'>
<a class='ajax' href='/bbc'>
<img src="/images/june/thumbs/bbc.gif" />
</a>
<h3>
<a class='ajax' href='/bbc'>BBC Introducing</a>
</h3>
</div>
<div class='column grid_3 thumb'>
<a class='ajax' href='/its-nice-that'>
<img src="/images/june/thumbs/int.gif" />
</a>
<h3>
<a class='ajax' href='/its-nice-that'>It’s Nice That</a>
</h3>
</div>
<div class='column grid_3 thumb'>
<a class='ajax' href='/soho-house'>
<img src="/images/june/thumbs/sh.gif" />
</a>
<h3>
<a class='ajax' href='/soho-house'>Soho House</a>
</h3>
</div>
<div class='column grid_3 thumb'>
<a class='ajax' href='/visual-editions'>
<img src="/images/june/thumbs/ve.gif" />
</a>
<h3>
<a class='ajax' href='/visual-editions'>Visual Editions</a>
</h3>
</div>
<div class='column grid_3 thumb'>
<a class='ajax' href='/lorva'>
<img src="/images/june/thumbs/lor.gif" />
</a>
<h3>
<a class='ajax' href='/lorva'>Louise O’Reilly</a>
</h3>
</div>
<div class='column grid_3 thumb'>
<a class='ajax' href='/cut-laser-cut'>
<img src="/images/june/thumbs/clc.gif" />
</a>
<h3>
<a class='ajax' href='/cut-laser-cut'>Cut Laser Cut</a>
</h3>
</div>
<div class='column grid_3 thumb'>
<a class='ajax' href='/vitsoe'>
<img src="/images/june/thumbs/vit.gif" />
</a>
<h3>
<a class='ajax' href='/vitsoe'>Vitsœ</a>
</h3>
</div>
<div class='column grid_3 thumb'>
<a class='ajax' href='/when-should-we'>
<img src="/images/june/thumbs/wsw.gif" />
</a>
<h3>
<a class='ajax' href='/when-should-we'>When Should We</a>
</h3>
</div>
<div class='column grid_3 thumb'>
<a class='ajax' href='/slices'>
<img src="/images/june/thumbs/slices.gif" />
</a>
<h3>
<a class='ajax' href='/slices'>Slices</a>
</h3>
</div>
</div>
</div>
</div>
</body>
</html>