-
Notifications
You must be signed in to change notification settings - Fork 0
/
october.html
293 lines (277 loc) · 20.1 KB
/
october.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content='Tue, 1 November 2011 10:00:00 GMT' http-equiv='expires' />
<link href="/stylesheets/reset_html5.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/javascripts/fancybox/jquery.fancybox-1.3.4.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/wa-2011-10.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="/javascripts/nice-load.js" type="text/javascript"></script>
<script src="/javascripts/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script src="/javascripts/wa-2011-10.js" type="text/javascript"></script>
<!--[if lte IE 8]>
<script src="/javascripts/html5.js" type="text/javascript"></script>
<![endif]-->
<script type="text/javascript" charset="utf-8">
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="october">
<div id="holder">
<nav class="global_header instapaper_ignore">
<div class="container">
<a href="/" id="logo">
<img src="images/wa-logo.png">
</a>
<ul>
<li class="first">
<a href="january">Jan</a>
</li>
<li>
<a href="february">Feb</a>
</li>
<li>
<a href="march">Mar</a>
</li>
<li>
<a href="april">Apr</a>
</li>
<li>
<a href="may">May</a>
</li>
<li>
<a href="june">Jun</a>
</li>
<li>
<a href="/july">Jul</a>
</li>
<li>
<a href="/august">Aug</a>
</li>
<li>
<a href="/september">Sep</a>
</li>
<li class="active">
<a href="/october">Oct</a>
<span></span>
</li>
<li><a href="/november">Nov</a></li>
<li>
<a href="/december">Dec</a>
</li>
</ul>
<a class="toggle" id="whats-this" href="#">What’s this?</a>
<div id="more">
<p>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.</p>
<form action="http://withassociates.createsend.com/t/r/s/ikkkjd/" id="subForm" method="post">
<p>Follow <a href="http://www.twitter.com/withassociates" target="_blank" title="Javascript will open this external link in a new window.">@withassociates</a> for updates, <a href="january">read more behind the idea</a>,<br>or sign up for email updates <input type="email" name="cm-ikkkjd-ikkkjd" id="ikkkjd-ikkkjd" placeholder="example@domain.com"> <input type="submit" value="Sign up" class="button"></p>
</form>
</div>
</div>
</nav>
<section id="main" role="main">
<div id="bk" class="bks">
<div id="bk_34"><img src="/images/october/bk_34.jpg" alt=""><span></span></div>
<div id="bk_56"><img src="/images/october/bk_56.jpg" alt=""><span></span></div>
<div id="bk_18"><img src="/images/october/bk_18.jpg" alt=""><span></span></div>
<div id="bk_15"><img src="/images/october/bk_15.jpg" alt=""><span></span></div>
<div id="bk_28"><img src="/images/october/bk_28.jpg" alt=""><span></span></div>
<div id="bk_47"><img src="/images/october/bk_47.jpg" alt=""><span></span></div>
<div id="bk_44"><img src="/images/october/bk_44.jpg" alt=""><span></span></div>
<div id="bk_55"><img src="/images/october/bk_55.jpg" alt=""><span></span></div>
<div id="bk_22"><img src="/images/october/bk_22.jpg" alt=""><span></span></div>
<div id="bk_35"><img src="/images/october/bk_35.jpg" alt=""><span></span></div>
<div id="bk_26"><img src="/images/october/bk_26.jpg" alt=""><span></span></div>
<div id="bk_45"><img src="/images/october/bk_45.jpg" alt=""><span></span></div>
<div id="bk_14"><img src="/images/october/bk_14.jpg" alt=""><span></span></div>
<div id="bk_25"><img src="/images/october/bk_25.jpg" alt=""><span></span></div>
<div id="bk_48"><img src="/images/october/bk_48.jpg" alt=""><span></span></div>
<div id="bk_24"><img src="/images/october/bk_24.jpg" alt=""><span></span></div>
<div id="bk_52"><img src="/images/october/bk_52.jpg" alt=""><span></span></div>
<div id="bk_54"><img src="/images/october/bk_54.jpg" alt=""><span></span></div>
<div id="bk_38"><img src="/images/october/bk_38.jpg" alt=""><span></span></div>
<div id="bk_58"><img src="/images/october/bk_58.jpg" alt=""><span></span></div>
<div id="bk_23"><img src="/images/october/bk_23.jpg" alt=""><span></span></div>
<div id="bk_41"><img src="/images/october/bk_41.jpg" alt=""><span></span></div>
<div id="bk_43"><img src="/images/october/bk_43.jpg" alt=""><span></span></div>
<div id="bk_32"><img src="/images/october/bk_32.jpg" alt=""><span></span></div>
<div id="bk_27"><img src="/images/october/bk_27.jpg" alt=""><span></span></div>
<div id="bk_12"><img src="/images/october/bk_12.jpg" alt=""><span></span></div>
<div id="bk_46"><img src="/images/october/bk_46.jpg" alt=""><span></span></div>
<div id="bk_13"><img src="/images/october/bk_13.jpg" alt=""><span></span></div>
<div id="bk_33"><img src="/images/october/bk_33.jpg" alt=""><span></span></div>
<div id="bk_16"><img src="/images/october/bk_16.jpg" alt=""><span></span></div>
<div id="bk_36"><img src="/images/october/bk_36.jpg" alt=""><span></span></div>
<div id="bk_17"><img src="/images/october/bk_17.jpg" alt=""><span></span></div>
<div id="bk_11"><img src="/images/october/bk_11.jpg" alt=""><span></span></div>
<div id="bk_21"><img src="/images/october/bk_21.jpg" alt=""><span></span></div>
<div id="bk_57"><img src="/images/october/bk_57.jpg" alt=""><span></span></div>
<div id="bk_31"><img src="/images/october/bk_31.jpg" alt=""><span></span></div>
<div id="bk_37"><img src="/images/october/bk_37.jpg" alt=""><span></span></div>
<div id="bk_42"><img src="/images/october/bk_42.jpg" alt=""><span></span></div>
<div id="bk_51"><img src="/images/october/bk_51.jpg" alt=""><span></span></div>
<div id="bk_53"><img src="/images/october/bk_53.jpg" alt=""><span></span></div>
</div>
<div class="container">
<div id="window_01" class="window">
<a href="#content_01" class="badge fancy">Click me</a>
<div class="holder">
<div id="content_01" class="content">
<h1><img src="/images/october/its-nice-that.gif" alt="It's Nice That logo" /></h1>
<h2>Shown: It’s Nice That Issue #6 - <a href="http://shop.itsnicethat.com/products/its-nice-that-issue-6">Buy online</a><br/>Written, designed and distributed by It’s Nice That</h2>
<p>From quarterly print publications, to annual conferences, via a frequent series’ of talks, events and commercial projects, It’s Nice That is an undeniable powerhouse that champions great creativity from within the worlds of art and design.</p>
<h3>Where we fit in</h3>
<p>We’re lucky enough to have worked with It’s Nice That for over 3 years now, on planning, wireframing, scoping and designing across all their online projects, the core of which being our custom CMS. Tied into the CMS we employ Shopify and a number of other smaller custom systems, stitched so tidily together that the experience seems seamless and never stands in the way of content.<br>
<a href="http://www.itsnicethat.com">www.itsnicethat.com</a></p>
</div>
</div>
</div>
<div id="window_02" class="window">
<a href="#content_02" class="badge fancy">Click me</a>
<div class="holder">
<div id="content_02" class="content">
<h1><img src="/images/october/william-and-son.gif" alt="William & Son logo" /></h1>
<h2>Shown: William & Son Catalogue<br/>
Designed by Material Organisation for William & Son</h2>
<p>William & Son have two shops on Mount Street, London. At 14 Mount Street, Paul West, their resident gunsmith, creates unique matching shotguns available with custom detailing and engraving. At 10 Mount Street they sell a range of unique luxury gifts, from exclusive timepieces to rare ostrich skin handbags; at both addresses William & Son provide an incredible and unique service for their clients.</p>
<h3>Where we fit it</h3>
<p>We built a framework across our Slices CMS and Shopify that allows William & Son to replicate the elegance of their printed catalogues. Working with <a href="http://m-o.tv">Material Organisation</a> who are the brand guardians, we ensured the house typeface, colours and grid were all looking sharp and sexy.</p>
<p>Right now we hope that this is just one of many websites in the fashion and luxury market that is saying goodbye to Flash and hello to progressive enhancement, touch interfaces, webfonts and helpings of clever Javascript.<br/><a href="http://www.williamandson.com">www.williamandson.com</a></p>
</div>
</div>
</div>
<div id="window_03" class="window">
<a href="#content_03" class="badge fancy">Click me</a>
<div class="holder">
<div id="content_03" class="content">
<h1><img src="/images/october/soho-house.gif" alt="Soho House logo" /></h1>
<h2>Shown: House Magazine Issue 18 Autumn 2011<br/>
Edited Justin Quirk and Published for the Soho House Group</h2>
<p>Ever growing, the Soho House Group currently consists of 11 restaurants, 9 private members houses, 7 hotels, 2 cinemas, 1 music venue and more Cowsheds than the West Country.</p>
<h3>Where we fit it</h3>
<p>We’re working with Soho House on a whole host of projects with the single aim of bringing their myriad of websites and networks together under one digital roof.<br><a href="http://www.sohohouse.com">www.sohohouse.com</a></p>
</div>
</div>
</div>
<div id="window_04" class="window">
<a href="#content_04" class="badge fancy">Click me</a>
<div class="holder">
<div id="content_04" class="content">
<h1><img src="/images/october/lets-make-some-great-art.gif" alt="Let’s Make Some Great Art logo" /></h1>
<h2>Shown: Let’s Make Some Great Art - <a href="http://www.laurenceking.com/product/Let%27s+Make+Some+Great+Art.htm">Buy online</a><br/>
Illustrated by Marion Deuchars and Published by Laurence King </h2>
<p>Let’s Make Some Great Art is a stimulating and interactive book from the award winning artist and illustrator Marion Deuchars. The book features step-by-step guides in an accessible and encouraging format that will have ‘artists of all ages’ up to their elbows in paint, paper and pencils in no time.</p>
<h3>Where we fit it</h3>
<p>In the first instance our brief was to create a ‘microsite’ for the launch of Let’s Make… but on closer inspection of the actual book it became clear there could be further reaching ways of spending the online budget. Working very closely with Marion, we helped her set-up Twitter, Facebook and Vimeo accounts and introduced her to animator <a href="http://www.danielbritt.co.uk">Daniel Bitt</a>, while coaching her on how to weave everything together, and created a simple single page site to help weave some more.
<br/>
<a href="http://www.letsmakesomegreatart.com">www.letsmakesomegreatart.com</a></p>
</div>
</div>
</div>
<div id="window_05" class="window">
<a href="#content_05" class="badge fancy">Click me</a>
<div class="holder">
<div id="content_05" class="content">
<h1><img src="/images/october/life.gif" alt="LIFE logo" /></h1>
<h2>Shown: The 2010 LIFE Catalogue<br/>
Published for Caprice Holdings</h2>
<p>LIFE is a personal concierge service created by The Caprice Group for its club members. Only ever a phone call away, clients experience a personal service where they can gain priority access to exclusive restaurants and hotels around the globe. Every year LIFE partners with exceptional brands and offers its members unrepeatable occasions and experiences.</p>
<h3>Where we fit in</h3>
<p>One of the challenges of websites with lots of content is finding the right fit. Designing pages that try and fit everything in often leaves you with an awkward few that never seem to feel right. We worked on several different arrangements of content with LIFE, the wireframing and UI process ended up being very hands on. We brought in <a href="http://regardregard.com">Regard</a> to work on copywriting to really tie-in the high-end experience for the clients of LIFE. <a href="http://www.life.uk.com">www.life.uk.com</a></p>
</div>
</div>
</div>
<div id="window_06" class="window">
<a href="#content_06" class="badge fancy">Click me</a>
<div class="holder">
<div id="content_06" class="content">
<h1><img src="/images/october/visual-editions.gif" alt="Visual Editions logo" /></h1>
<h2>Shown: Composition No. 1</br>
Written by Marc Saporta, Designed by Universal Everything and Published by Visual Editions -
<a href="http://www.visual-editions.com/our-books/book/composition-no1">Buy online</a></h2>
<p>In a time where some foresee the <a href="http://www.economist.com/node/21528611">demise of the printed book</a>, Visual Editions are effectively reinventing the format and putting paid to ideas that the end is nigh. Their publications go beyond narrative, innovate visually and become beautiful and collectable objects in the in their own right. Real modern day treasures.</p>
<h3>Where we fit it</h3>
<p>Partnering with design agency <a href="http://airside.co.uk">Airside</a>, we work closely with the VE team on all aspects of their online design, strategy and build. A custom CMS, PayPal, Campaign Monitor and numerous other third party networks and systems have been employed over the last year, and a new phase in the coming months will see a larger Shopify offering alongside revised templates and site structures.<br>
<a href="http://www.visual-editions.com">www.visual-editions.com</a></p>
</div>
</div>
</div>
<div id="window_07" class="window">
<a href="#content_07" class="badge fancy">Click me</a>
<div class="holder">
<div id="content_07" class="content">
<h1><img src="/images/october/lorva.gif" alt="Louise O’Reilly logo" /></h1>
<h2>Shown: The With Associates Field Guide 2010-11<br/>
Illustrated by Louise O’Reilly</h2>
<p>Louise’s work is quite simply beautiful. Her illustrations are of a wide range of natural history subjects including plants, insects, birds and animals. The attention to subtle details in her subject matter makes her images look true to life and leave you wondering how she did it.</p>
<h3> Where we fit it</h3>
<p>We didn’t want to make a site that overpowered Louise’s work; the design needed to be subtle and elegant. She has the ability to update details about her art management and add and edit illustrations.<br/>
<a href="http://www.lorva.co.uk">www.lorva.co.uk</a></p>
</div>
</div>
</div>
<div id="window_08" class="window">
<a href="#content_08" class="badge fancy">Click me</a>
<div class="holder">
<div id="content_08" class="content">
<h1><img src="/images/october/matt-stuart.gif" alt="Matt Stuart logo" /></h1>
<h2>Shown: Trafalgar Square - Buy online (coming soon)<br/>
Photo by Matt Stuart</h2>
<p>Matt Stuart is a photographer with an uncanny ability for being in the right place at the right time. Working primarily as a Street Photographer, his images manage somehow to be beautiful, technical, irreverent and intimate at the same time, and never fail on first viewing to cause double-takes or accusations of begin staged!
</p>
<h3>Where we fit it</h3>
<p>Our first job with Matt was to help him rebuild his old Flash website into a more accessible and appropriate HTML version. Since then, visits and views have risen steadily, as more and more people discover, share and then credit his work, testament to which is his consistently high ranking in Google in <a href="http://www.google.co.uk/#sclient=psy-ab&hl=en&site=&source=hp&q=photographer&pbx=1&oq=photographer&aq=f&aqi=g4&aql=&gs_sm=e&gs_upl=2685l4102l0l4235l12l9l0l5l5l0l170l499l3.2l9l0&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=31ea94275df596bc&biw=1177&bih=1011">searches for ‘photographer’</a>. Next in line for the site, we’re adding a simple shop section alongside other tweaks such as a thumbnail views and more touchscreen friendly navigation options<br/><a href="http://www.mattstuart.com" >www.mattstuart.com</a></p>
</div>
</div>
</div>
<div id="window_09" class="window">
<div class="holder">
<div id="content_09" class="content">
<h1><img src="/images/october/wa.gif" alt="With Associates logo" /></h1>
<p>Inspiration for this months site came from <a href="http://gim.ie/a6jC">multiple sources</a>. Images following the process of creating this months’ site can been seen on <a href="http://www.flickr.com/photos/withassociates/sets/72157627803720880/detail">Flickr</a> in our ‘WA October 2011 website’ set, and there’s a clearer demo of the overall trompe-l’œil effect on <a href="http://www.vimeo.com/29916872">Vimeo</a>. </p>
<p>Once again, many thanks to <a href="http://www.andymatthewsphotography.com" >Andy Matthews</a> for spending the day at our studio.</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="cols vcard">
<div class="col first">
<h2>Contact</h2>
<ul itemscope="" itemtype="http://schema.org/PostalAddress">
<li>With Associates</li>
<li itemprop="streetAddress">100 De Beauvoir Road</li>
<li><span itemprop="addressLocality">London</span> <span itemprop="postalCode">N1 4EN</span></li>
<li><a href="http://g.co/maps/nw77y">Google Map</a></li>
</ul>
<ul>
<li><a href="mailto:hello@withassociates.com" class="email">hello@withassociates.com</a></li>
<li><a class="tel" itemprop="telephone" url="tel:+44 20 7923 4757">+44 (0)20 7923 4757</a></li>
</ul>
<p class="registration">With Associates is the trading name of With Associates UK LLP. Registered office: Top Floor, 100 De Beauvoir Rd, N1 4EN. Registered in England under registration No. OC313207.</p>
</div>
<div class="col last">
<h2>Credits</h2>
<p>This months adventure into continual experimental ‘web page’ redesign would not have been possible without the help of <a href="http://mariondeuchars.com/">Marion Deuchars</a>, <a href="http://www.solalights.com/">Sola Lights</a> and <a href="http://www.studio100london.com/">Studio 100</a>, and especially not without the skill and shear tenacity of <a href="http://www.andymatthewsphotography.com/">Andy Matthews Photography</a>. Thank you all for being part of the fun!</p>
<p><a href="#content_09" class="fancy">Read more about the ideas and process behind this months site.</a></p>
</div>
</div>
</div>
</footer>
</div>
<!--# include file="/with-banner/index.html" -->
</body>
</html>