-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
executable file
·308 lines (294 loc) · 36.6 KB
/
index.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
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Prototyper / Interface Designer / Art Director Portfolio / UI/UX</title>
<meta name="description" content="Prototype Designer and developer Nick Jones. UI, UX, JavaScript, CSS3, HTML5 design and development. This website is a portfolio of web and app work I did 1999-NOW. A gallery of interfaces for responsive and pre-responsive websites, apps and games.">
<meta name="author" content="Nick Jones">
<meta name="viewport" content="width=device-width,maximum-scale=1,user-scalable=0">
<script src="js/libs/modernizr-2.0.6.min.js"></script>
<script type="text/javascript" src="http://use.typekit.com/bhp4tdq.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<link rel="stylesheet/less" type="text/css" href="css/style.less">
<script src="css/less-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7453942-1']);
_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>
<div id='bg'></div>
<div class="vr" id="line1"></div>
<div id="articles">
<div class="close-btn" id="article-x">×</div>
<div class="link"><span class="in">and</span> WORDS</div>
<div class="article" id="article-human">
<article class="article-title">Human HTML / CSS / JS</article>
<div class="link"><a>READ</a></div>
</div>
<div class="article" id="article-rwd">
<article class="article-title">Responsive Web Design</article>
<div class="link"><a>READ</a></div>
</div>
<div class="article" id="article-father">
<article class="article-title">Fatherhood Platform</article>
<div class="link"><a>READ</a></div>
</div>
</div>
<!-- CONTACT -->
<div class="button" id="contact">
<div id="contact-icons">
<div id="open">
<div class="in">Selectively</div>
<br />
<div id="introduce">FREELANCING</div>
</div>
<div id="icon-vr"></div>
<!-- CONTACT ICONS -->
<div class="email-icon"></div>
<div class="twitter-icon"></div>
<div class="email-icon-preload"></div>
<div class="twitter-icon-preload"></div>
<div id="phone">Ask lots of questions. Sometimes I can offer an answer. Otherwise, we’ll both learn something.</div>
</div>
<div id="contact-cta"><span class="in">I like Questions.</span></div>
</div>
<div id="github">
<a href="https://github.com/narrowdesign/narrowdesign" target="_blank">
<icon>g</icon><br>
ALL CODE FOR THIS SITE IS HERE
</a>
</div>
<!-- END CONTACT -->
<header id="top-bar">
<div id="logo">
<div id="n"></div>
<div id="ick-jones"></div>
</div>
</header>
<!-- PROJECTS -->
<div id="container">
<div id="project-images">
<div class="project-image" id="project-image-big"></div>
<div class="project-image" id="project-image-mid"></div>
<div class="project-image" id="project-image-small"></div>
</div>
</div>
<div id="top-small">
<div id="top-button"><svg id="top-arrow" x="0px" y="0px">
<polygon points="0,9 5,9 5,36 9,36 9,9 14,9 7,0 "/>
</svg><span id="top-text">TOP</span>
</div>
</div>
<div id="everything">
<div id="other-way">GO <span class='in'>the</span> OTHER WAY</div>
<!-- BACK TO TOP -->
<!-- SPLASH -->
<div class="design-build">
<!-- <div class="usa">-</div> -->
<span id="design">INTERFACES</span><br /><span class="and">and</span><br /><span id="codee">PROTOTYPES</span>
</div>
<h1 id="intro-text">I design and code people’s ideas into usable interfaces (websites, prototypes and apps). I’m selective about the projects I take but <a href="mailto:nick@narrowdesign.com?subject=I might want to work with you on something...">ask anyway</a>. I like helping my friends find work. Below are some things I’ve made.</h1>
<!-- CTA -->
<!-- <div id="message">debug</div> -->
<div id="instructions">
<div id="work">SO FAR</div>
<div id="down-arrows">
<svg id="down-arrow2" x="0px" y="0px">
<polygon points="5,0 5,41 0,41 7,50 14,41 9,41 9,0 "/>
</svg>
<svg id="down-arrow" x="0px" y="0px">
<polygon points="5,0 5,41 0,41 7,50 14,41 9,41 9,0 "/>
</svg>
</div>
</div>
</div>
<div id="landscape-overlay"><h2 id="landscape-message">THIS SITE <span class="in">is</span> RESPONSIVE <span class="in">but not</span> THAT RESPONSIVE! <br>LANDSCAPE MODE <span class="in">is</span> DEAD. GO PORTRAIT <span class="in">or</span> GO HOME.</h2><br></div></div>
<div id="project-credits"><p id="credits"></p></div>
<div id="project-description"><p id="description"></p>
<div id="story-arrows">
<div class="arrow prev-arrow" id="prev-story">
<svg x="0px" y="0px">
<polygon points="0,7.5 8,15 8,10 48,10 48,5 8,5 8,0 "/>
</svg>
</div>
<div class="arrow next-arrow" id="next-story">
<svg x="0px" y="0px">
<polygon points="0,5 0,10 40,10 40,15 48,7.5 40,0 40,5 "/>
</svg>
</div>
</div>
</div>
<!-- PROJECT CONTENT -->
<div id="projects">
<ul id="project-list">
<li class="project first" id="prometheus" url="http://weylandindustries.com/david">
<h3 class="project-title">PROMETHEUS</h3>
<div class="year">2012 / FWA / AWWWARDS</div>
<h4 class="project-description"><div class="project-story-title">PROMETHEUS</div>Been a long time since I got to design a website for Hollywood. The few times I have in the past, it was almost never for somebody I respected. When I started out, I dreamt of getting to work on design projects like this one day, for people who contribute their art to popular culture (if you hated the movie, skip the rest of this).<br /><br />The alternate reality campaign for Ridley Scott's first sci-fi film since Blade Runner (his 1984 <a href="http://www.youtube.com/watch?v=OYecfV3ubP8" target="_blank" onClick="_gaq.push(['_trackEvent', 'Story', 'Launch', 'Blake Dunk Video']);">Super Bowl spot</a> for Apple doesn't count), was far reaching. I was asked to design the website for a few products from the film, which takes place in 2094. My first reaction was, "Don't be ridiculous, there won't be products that resemble an iPad or websites that sell them in 2094" but then I remembered, it’s not real! <br /><br />My first illustrations in a decade were done for Weyland's David8 (a human-like cybernetic individual played by Michael Fassbender, indistinguishable from a very, very, creepy human based on Olympic high diver, Greg Louganis) and a few other world-changing (fake) initiatives from Weyland Industries. Designing for sci-fi geeks was scary. It's hard enough to design for you web design geeks.</h4>
<div class="project-credits"><div class="credits-title in">with</div> Ignition / 20th Century Fox</div>
</li>
<li class="project" id="nfc" url="http://namesforchange.org">
<h3 class="project-title">NAMES <span class="in">for</span> CHANGE</h3>
<div class="year">2013 / FWA / AWWWARDS</div>
<h4 class="project-description"><div class="project-story-title">NAMES FOR CHANGE</div>Three years after we launched <a href="http://dontfollowthis.com" target="_blank" onClick="_gaq.push(['_trackEvent', 'Projects', 'Launch', 'http://playspent.org']);"> Spent</a>, we got the team back together for another UMD project. This time, the goal was to put a twist on the familiar “Sponsor a Child” by mashing it up with stadium naming rights. The Frankenstein that produced was an ecommerce site where you can purchase naming rights to everything in the shelter. Toilet paper. Tampons. Teddy bears. Towels. And 165 other things that don’t start with a “T.” For example, my wife has had a really rough year medically so I bought naming rights to this <a href="https://www.namesforchange.org/poster/corly-jones-plunger-of-perseverance" target="_blank" onClick="_gaq.push(['_trackEvent', 'Projects', 'Launch', 'Plunger']);">plunger</a> (1 of only 15). As I write this, it’s still the first week after launch but for every $5k it raises, they can help someone pick up the pieces and get into permanent housing. So far that equals 2 people. I hope to revise this number often.</h4>
<div class="project-credits"><div class="credits-title in">with</div> <a href="http://jennysayshi.com/" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Jenny Nicholson']);">Jenny Nicholson</a><br /><a href="http://stuffcarmenmade.tumblr.com/" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Carmen']);">Carmen Bocanegra</a><br /><a href="http://twitter.com/kemmis" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Rafe']);">Rafe Kemmis</a><br /><a href="https://twitter.com/MariaJankovics" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Maria']);">Maria Jankovics</a><br /><a href="http://twitter.com/noram2000" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Nora']);">Nora Mishriky</a><br />Lindsay Parina<br /><br /><div id="credits-at" class='in'>at</div><a href="http://mckinney.com" onClick="_gaq.push(['_trackEvent', 'Agency', 'Launch', 'McKinney']);">McKinney</a></div>
</li>
<li class="project" id="almost" url="http://almosthumanfox.tumblr.com">
<h3 class="project-title">ALMOST HUMAN</h3>
<div class="year">2013</div>
<h4 class="project-description"><div class="project-story-title">ALMOST HUMAN</div>Do I have a sign on my back that says “Humanlike droid expert?” Not that I’m complaining. This is the second time in a year that I’ve done an alternate reality site for a sci-fi film/show which included a droid that looked and acted just like a creepy human. This one was for the JJ Abrams and JH Somebody show about a damaged cop and his damaged droid partner. Buddy cop show meets Star Trek. My wife Corly is way into sci-fi so it was exciting to get to watch the pilot with her before the show aired. Not bad. Got the first three episodes on TiVo but we haven’t finished Breaking Bad yet so it is on ice. It wasn’t exactly tickets to a movie premeire but it was one of the few times I got to impress her with access to exclusive stuff.<br><br>As is increasingly the case these days, the site needed to be built on Tumblr so I called my old pal <a href="http://buddin.us" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Brett']);">Brett Buddin</a> who wrestled the Tumblr API to the ground and made it say “Uncle Brett, I give.” It may not look super-complex but that’s because he’s <i>really</i> good at what he does. I’m sure he’s ready for another three year cooling off period until we work together again.</h4>
<div class="project-credits"><div class="credits-title in">with</div> <a href="http://buddin.us" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Brett']);">Brett Buddin</a><br><a href="http://nomimes.com" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'NoMimes']);">NoMimes</a><br><a href="http://badrobot.com" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'BadRobot']);">Bad Robot</a><br>Fox</div>
</li>
<li class="project" id="fictitious" url="http://wearefictitious.com">
<h3 class="project-title">FICTITIOUS</h3>
<div class="year">2013</div>
<h4 class="project-description"><div class="project-story-title">FICTITIOUS</div>I’ve never had a client say “We like what you do and we trust you. Make us something interesting.” That’s more or less what these two guys, whom I’ve never met, said when we talked for the first time. I wasn’t sure if I could perform with that much blind trust but it turned out to be my favorite beginning of a project ever. They weren’t sure what they wanted to call themselves right away but after Fictitious was settled on (I love that name), I set about designing a logo (DOUBLE LIGATURES!!!) and this website. The result is an experimental interface that showcases nineteen commercial and entertainmant projects they’ve worked on together over the years. Hope to meet these guys some day so I can say “Thank you for the pleasure” in person.</h4>
<div class="project-credits"><div class="credits-title in">with</div>RANDY BOBBITT<br>STEVEN STEINER<br></div>
</li>
<li class="project" id="circle" url="http://circle.com">
<h3 class="project-title">CIRCLE.COM</h3>
<div class="year">2013</div>
<h4 class="project-description"><div class="project-story-title">CIRCLE</div>Usually when I work with somebody who doesn’t have a logo or know what they are going to call themselves yet, we end up with a URL like awwwsome.com or weareacompany.com. Not this time. These high-muck-a-mucks went out and BOUGHT CIRCLE.COM! I was scared to ask how much they spent but it was barrels more than they paid me to design their logo and the first iteration of the website for their Bitcoin startup. Josh Hawkins is a longtime friend and collaborator and he pulled me in as he and Jeremy Allaire were beginning to put some form to the vision for their followup to Brightcove.com which had its IPO in 2012. When we started in early October, Bitcoin was trading at $175. As I write this it’s at $1100. If I had listened to the voice in my head telling me “These guys know what they’re doing. Let’s invest a little.” when we started, I wouldn’t need to work anymore (but I still would because I love it).</h4>
<div class="project-credits"><div class="credits-title in">with</div>JOSH HAWKINS<br>JEREMY ALLAIRE<br></div>
</li>
<li class="project" id="spent" url="http://playspent.org">
<h3 class="project-title">SPENT</h3>
<div class="year">2011 / FWA / WEBBY / ONE</div>
<h4 class="project-description"><div class="project-story-title">SPENT</div>"We’re making a game about homelessness" is not what I expected to hear when I started working at an ad agency. “We have to get more kids to smoke our brand” or “I don't care if the product sucks, make them want it!” maybe, but not this. Co-creator <a href="http://jennysayshi.com/" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Jenny Nicholson']);">Jenny Nicholson</a> came up with this crazy idea and somehow convinced everyone at <a href="http://mckinney.com">McKinney</a> and the shelter we did it for, that it was a risk worth taking. Many of the challenges in the “game” were pulled from her childhood. The rest, <a href="http://stuffcarmenmade.tumblr.com/" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Carmen']);">Carmen Bocanegra</a>, Jenny and I created to force people like you and me to face some decisions we'd face if we were one of the 14 million Americans on the brink of homelessness. That number sounds official but I made it up, sort of.<br /><br /><a href="http://ableparris.com/" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Able']);">Able Parris</a> and I designed it and I worked with <a href="http://jorshasaur.com" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Josh Barber']);">Josh Barber</a> on the Flash before <a href="http://matthisamoto.com" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Matt Hisamoto']);">Matt Hisamoto</a> took over and got it ready for launch. After a serious McKinney team effort, Spent kicked a few million people's emotions in the nuts, won a bunch of awards you've probably never heard of and a couple that you probably have (not Cannes). <br /><br />I can't believe McKinney paid us to work on this or that <a href="https://twitter.com/jcude" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Cude']);">Cude</a> gave us the creative liberty to be so controversial. It says a lot about the character of the place. Changed my life for good.</h4>
<div class="project-credits"><div class="credits-title in">with</div> <a href="http://jennysayshi.com/" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Jenny Nicholson']);">Jenny Nicholson</a><br /><a href="http://stuffcarmenmade.tumblr.com/" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Carmen']);">Carmen Bocanegra</a><br /><a href="http://ableparris.com/" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Able']);">Able Parris</a><br /><a href="http://twitter.com/jcude" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Cude']);">Jonathan Cude</a><br /><a href="http://jorshasaur.com" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Josh Barber']);">Josh Barber</a><br /><a href="http://matthisamoto.com" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Matt Hisamoto']);">Matt Hisamoto</a><br /><br /><div id="credits-at" class='in'>at</div><a href="http://mckinney.com" onClick="_gaq.push(['_trackEvent', 'Agency', 'Launch', 'McKinney']);">McKinney</a></div>
</li>
<li class="project" id="despicable" url="http://despicableme.com/stars/">
<h3 class="project-title">DESPICABLE ME 2</h3>
<div class="year">2013</div>
<h4 class="project-description"><div class="project-story-title">DESPICABLE ME 2</div>No other movie currently in rotation at our house is more universally adored than Despicable Me. Let me say right off the bat, the lazy movie Tumblr site thing bothers me a bit and I shouldn’t be contributing to the extinction of the movie experience website but I was sure this was just an early piece of a campaign worthy of the most anticipated movie of the summer (at our house). I was wrong but I’ve made peace with it. The kids and I went to see it last night and it didn’t disappoint anybody.<br><br>John C. contacted me in 2012, likely due to the Tumblr theme designs on this site, about doing this one. It was a total joy to be able to say, “Hey kids, come look what I’m working on!” and have them run in and care.</h4>
<div class="project-credits"><div class="credits-title in">with</div> <a href="http://projectc.net/" target="_blank" onClick="_gaq.push(['_trackEvent', 'Agency', 'Launch', 'ProjectC']);">Project C</a></div>
</li>
<li class="project" id="mckinney" url="http://mckinney.com">
<h3 class="project-title">McKINNEY</h3>
<div class="year">2010 / FWA / AWWWARDS</div>
<h4 class="project-description"><div class="project-story-title">McKINNEY</div>Around February, 2010. Walking back from lunch:<br /><br /><blockquote><i><b>Trevor O'Brien:</b> "Nick, we'd like you to design the new McKinney.com." <br /><b>Me:</b> "GREAT!"<br /><b>Trevor:</b> "You can't use Flash."<br /><b>Me:</b> "You hired the wrong guy."</i></blockquote><br />I was scared to death about designing for the newfangled HTML5, which, as a Flash loyalist, I was convinced was a passing fad. Then I got stuck in a small room with <a href="http://buddin.us" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Brett']);">Brett Buddin,</a> who schooled me on the virtues of not being just some dumbass Flash guy who pollutes the web, and <a href="https://twitter.com/ajkarim" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'aj']);">AJ Karim</a> who cleared a path and kept us focused. I was stubborn and blinded by self preservation but I've come around (this site you're on right now is proof!). <br /><br />The iPad had just come out so we decided early in the process to make the first ever touch-first agency site. I asked Brett if it was possible for him to do a touch slider in mobile Safari. He said, "No." and then proceeded to make it possible by building <a href="https://github.com/brettbuddin/lectric" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Lectric']);">one</a>.<br /><br />The space we work in is the best I've ever seen. With photo and design help from <a href="http://thegreatdiscontent.com/parris" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'TeamParris']);">Team Parris</a>, we brought the best of it to the website.<br /><br />In the last month before launch, I was certain some other, more savvy agency was going to beat us to the touch-first thing. I was obsessing on it so to quiet my fears, I went to the sites of all the best agencies I could think of on my iPhone and took screengrabs as I went. Just before launch, I published those <a href="http://narrowdesign.com/future" target="_blank" onClick="_gaq.push(['_trackEvent', 'Site', 'Launch', 'Future']);">screenshots</a>. Most everybody in our industry showed up as a blue lego or a phone number. It started the <a href="http://adage.com/article/digitalnext/advertising-worst-agency-websites-iphones-ipads/145956/" target="_blank">conversation</a> we wanted happening while we launched our first attempt at a device agnostic site (for us, these were pre-responsive web design days).<br /><br />The site became the first to win both <a href="http://thefwa.com/site/mckinney" target="_blank">FWA</a> and <a href="http://thefwa.com/mobile/mckinney" target="_blank">MobileFWA</a> honors. My first of either.</h4>
<div class="project-credits"><div class="credits-title in">with</div><a href="http://buddin.us" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Brett']);">Brett Buddin</a><br /><a href="https://twitter.com/ajkarim" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'aj']);">AJ Karim</a><br /><a href="http://dontfollowthis.com" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Trevor']);">Trevor O'Brien</a><br /><a href="http://ableparris.com/" target="_blank">Able Parris</a><br /><a href="http://twitter.com/scottmccall" target="_blank">Scott McCall</a><br /><a href="http://twitter.com/gfellman" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Glen']);">Glen Fellman</a><br /><a href="http://www.everydayworks.com/" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Jesse']);">Jesse Flores</a><br /><a href="http://juliaparris.com/" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Julia']);">Julia Paris</a><br /><br /><div id="credits-at" class='in'>at</div><a href="http://mckinney.com" target="_blank" onClick="_gaq.push(['_trackEvent', 'Agency', 'Launch', 'McKinney']);">McKinney</a></div>
</li>
<li class="project" id="blake" url="http://blakegriffin.com">
<h3 class="project-title">BLAKE GRIFFIN</h3>
<div class="year">2011</div>
<h4 class="project-description"><div class="project-story-title">BLAKE GRIFFIN</div>I hate to admit, I had no idea who Blake Griffin was when this project began. He hadn't played an NBA game yet because he was hurt during preseason his rookie year. Everybody seemed sure he'd be dominant when he got a chance to play. I wanted to ensure that he had a site that made him look good when he was ready. If I'm being totally honest, I fell short. He seems to have been <a href="http://www.youtube.com/watch?v=6gG4W0L41FI&feature=relmfu" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Blake']);">more successful</a>.<br /><br />The funny thing about the web is, you get guys like me, designing sites for guys like him. <a href='http://dribbble.com/shots/45730-Unnamed' target="_blank" onClick="_gaq.push(['_trackEvent', 'Dribbble', 'Launch', 'Blake']);">Dribbble</a> meets dribble!? Sorry.</h4>
<div class="project-credits"><div class="credits-title in">with</div>AthleteDirect</div>
</li>
<li class="project" id="whitehouse" url="https://pro.gimmebar.com/view/4f5d5bdc2e0aaac17a000005">
<h3 class="project-title"><span class="in">the</span> WHITE HOUSE</h3>
<div class="year">2010</div>
<h4 class="project-description"><div class="project-story-title">POTUS</div>█████ ████████ ██ ███████ █████ █████ a. █████ ███ ██████ ████ ████████ Twitter. █████ █████ █ ██████ █ ███████ █████████████ ██ thing. ███ ██ █ ███████ ███ ████████ ██ █ ███████ propaganda. ██████ █ ████ ██ ██████ ████████ ██ ██ █ ██████ pants.</h4>
<div class="project-credits"><span class='in'>with</span>Secret Service</div>
</li>
<li class="project" id="originwest" url="http://originwest.stylehatch.co">
<h3 class="project-title">ORIGIN / TUMBLR</h3>
<div class="year">2012</div>
<h4 class="project-description"><div class="project-story-title">ORIGIN / TUMBLR</div>I didn't know the first thing about designing a Tumblr theme. Thankfully, <a href="http://twitter.com/moore" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Moore']);">Jonathan Moore</a> knows everything so I handed him a messy PSD and he turned it into this responsive web design. I hope it makes him rich beyond his wildest dreams.</h4>
<div class="project-credits"><div class="credits-title in">with</div><a href="http://twitter.com/moore" target="_blank">Jonathan Moore</a><br /><br /><div id="credits-at" class='in'>of</div><a href="http://stylehatch.co">StyleHatch</a></div>
</li>
<li class="project" id="epoch" url="/">
<h3 class="project-title">EPOCH FILMS</h3>
<div class="year">2010</div>
<h4 class="project-description"><div class="project-story-title">EPOCH FILMS</div><a href="http://vimeo.com/13768695" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Everynone']);">WORDS</a> and <a href="http://vimeo.com/22564317" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Everynone']);">SYMMETRY</a> by Everynone are two of my favorite videos ever. I was ecstatic when <a href="http://www.ravineassociation.com/password" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'DanRavine']);">Dan Ravine</a> asked me to design this site for their production company. I had a brief love affair with Courier New and pink, which you can see here, but that lasted about as long as this design did. Epoch launched with a different design in 2012. This is a memorial.</h4>
<div class="project-credits"><div class="credits-title in">with</div><a href="http://www.ravineassociation.com/password" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'DanRavine']);">Dan Ravine</a></div>
</li>
<li class="project" id="iran" url="http://picturesofyouiran.com">
<h3 class="project-title">PICTURES <span class="in">of </span>IRAN</h3>
<div class="year">2008 / WEBBY</div>
<h4 class="project-description"><div class="project-story-title">PICTURES <span class="in">of </span>IRAN</div>This artist named Tom Loughlin traveled to Iran and took photos of regular people. Then, he blew the photos up huge and displayed them at shows across the U.S.A. The best is, he made a documentary about people's reactions to seeing Iranian's depicted as human beings. American's reactions varied from gratitude to wringing of hands for having forgotten to pack dynamite on the way out of the house that morning. Designing and coding the site definitely challenged many of my own misconceptions.</h4>
<div class="project-credits"><div class="credits-title in">with</div>Tom Loughlin, the Artist</div>
</li>
<li class="project" id="carmex" url="http://mycarmex.com">
<h3 class="project-title">CARMEX</h3>
<div class="year">2008</div>
<h4 class="project-description"><div class="project-story-title">CARMEX</div>I can't say enough about how great it was to do work with a client that wanted work that was as irreverent and random as I could muster. The brand was in a state of transition and the site I designed created much of the visual language they use to this day. Writing isn't something I'm ever ASKED to do. This was no exception. But as is often the case, I did it anyway.</h4>
<div class="project-credits"><div class="credits-title in">with</div><a href="http://www.bolinmarketing.com/" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Bolin']);">Bolin</a></div>
</li>
<li class="project" id="carlson" url="http://www.narrowdesign.com/carlsonNB/">
<h3 class="project-title">CARLSON</h3>
<div class="year">2006</div>
<h4 class="project-description"><div class="project-story-title">CARLSON</div><i>Me: "Let's put dogs in suits and make fun of stereotypical marketing types by matching them with the personality of the dog depicted. Then, let's make a game of memory out of it!"<br /><br />
Them: "Nah. Let's not."</i><br /><br /> It never got past the design stage you see here but it sure was fun to concept. Another memorial. A pet cemetary.</h4>
<div class="project-credits"><div class="credits-title in">with</div><a href="http://www.pjloughran.com/" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'PJ']);">PJ Loughran</a><br /><br /><div id="credits-at" class='in'>of</div>The Distillery</div>
</li>
<li class="project" id="neilyoung" url="http://www.narrowdesign.com/neilyoung">
<h3 class="project-title">NEIL YOUNG</h3>
<div class="year">2006</div>
<h4 class="project-description"><div class="project-story-title">NEIL YOUNG</div>Say what you will about Neil's politics or Canadian-ness but you can't deny his contribution to rock and roll or my awkward teenage years. Jonathan Demme's documentary details his comeback show at the Ryman after a brain anneurism nearly did him in. At the rock-bottom of my interest in Neil's music, I got an opportunity to design and program the site for 'Heart of Gold.' By the end of the project, a nostalgic joy had taken hold and my old Neil Young albums secured a permanent place in my playlist.<br /><br /> If the site looks like it was designed and Flashed out in 2006, it's because it was.</h4>
<div class="project-credits"><div class="credits-title in">with</div><a href="http://watsondg.com" target="_blank" onClick="_gaq.push(['_trackEvent', 'People', 'Launch', 'Watson']);">Watson Design Group</a></div>
</li>
<!-- <li class="project" id="elephantmouse" url="blank">
<h3 class="project-title">ELEPHANT MOUSE</h3>
<div class="year">2012</div>
<h4 class="project-description"><div class="project-story-title">ELEPHANT MOUSE</div>If Dane would hurry up and tell me he's ready to launch it, I'll get it done and then I can write about it...</h4>
<div class="project-credits"><span class='in'>with</span>Dane Baker<br /></div>
</li> -->
<li class="project" id="failure" url="blank">
<h3 class="project-title">FAILURE</h3>
<div class="year">SOMETIMES</div>
<h4 class="project-description"><div class="project-story-title">FAILURE</div>Once upon a time, I did some interface design for a popular erectile dysfunction drug website (yes, that one). The CD was maybe the most talented guy I had ever worked with. The design work I did, was not good. The CD was disappointed and the project was cancelled. It felt horrible. I never want to feel it again.
<br /><br />
I failed. Hard. My heart wasn't in it. I followed the wireframes but didn't bring anything special to the work. I wasn't having fun. I didn't believe in the project and it showed.
<br /><br />
From here on out, I'm working with people I believe in, on projects I believe in.<br /><br /><a href="mailto:nick@narrowdesign.com?subject=so, I was on your site and..." target="_blank" onClick="_gaq.push(['_trackEvent', 'Email', 'Launch', 'StoryTalk']);">Let's talk</a></h4>
<div class="project-credits"><div class="credits-title in">with</div>TALENTED PEOPLE<br /><br /><div id="credits-at" class='in'>at</div>A GREAT SHOP</div>
</li>
<div id="list-message">All this reckless code, the art direction, design, the website itself... it’s all made up of things I picked up somewhere else along the way. If there’s anything here you find useful, take it with you and make something better with it.<br>
</div>
<li class="project" id="nickjones" url="http://www.twitter.com/narrowd">
<h3 class="project-title" id="my-name"><div id="my-name-image"></div><div id="my-name-preload"></div></h3>
<div class="year">1978-Now</div>
<h4 class="project-description"><div class="project-story-title">NICK JONES</div>The people in the picture are my family. They're amazing. I want to do more work that makes them proud.<br /><br />You’re welcome to be in my story, if I can be in yours.<br /><br />I collaborate remotely on select design/interface projects for responsive websites and apps. If I can't help, I'll put you in touch with friends who can. <a href='mailto:nick@narrowdesign.com?subject=so, I was on your site and...' target="_blank" onClick="_gaq.push(['_trackEvent', 'Email', 'Launch', 'Story']);">nick@narrowdesign.com</a><br /><br />By day, I'm an Art Director working on making <a href="http://mckinney.com" target="_blank" onClick="_gaq.push(['_trackEvent', 'Email', 'Launch', 'McKinney']);">McKinney</a> the agency of my dreams. You should <a href="mailto:josh.janicek@mckinney.com?subject=So, I was thinking about working at McKinney...&body=Hi Josh, Nick Jones recommened I get in touch with you about coming to work with you guys at McKinney..." target="_blank" onClick="_gaq.push(['_trackEvent', 'Email', 'Launch', 'JoshJanicek']);">come work with me</a>.<br /><br />
<br /><a href='http://dribbble.com/narrowdesign' target="_blank" onClick="_gaq.push(['_trackEvent', 'Dribbble', 'Launch', 'narrowdesign']);">Dribbble: narrowdesign</a><br /><a href='http://twitter.com/narrowd'>Twitter: @narrowd</a><br /><div id="follow"><a href="http://twitter.com/narrowd" class="twitter-follow-button" data-button="blue" data-text-color="#FFFFFF" data-link-color="#00AEFF" data-show-count="true" onClick="_gaq.push(['_trackEvent', 'Twitter', 'Follow', 'list']);">FOLLOW @NARROWD</a>
</div><br /></h4>
<div class="project-credits"><div class="credits-title in">with</div>Family<br />Friends<br /><a href='mailto:nick@narrowdesign.com?subject=so, I was on your site and...' target="_blank" onClick="_gaq.push(['_trackEvent', 'Email', 'Launch', 'yourNameHere']);">Your name here</a></div>
</li>
<div id="list-contact-icons">
<div class='in' id="keepInTouch">Keep in touch</div>
<div class="email-icon red"></div>
<div class="twitter-icon red"></div>
</div>
<div id="other-way-2">GO <span class='in'>the</span> OTHER WAY</div>
</ul>
<div id="project-list-close"></div>
</div>
<!-- PROJECT NAV -->
<div id="project-sub-menu">
<div class="arrow prev-arrow">
<svg x="0px" y="0px">
<polygon points="0,7.5 8,15 8,10 48,10 48,5 8,5 8,0 "/>
</svg>
</div>
<div class="arrow next-arrow">
<svg x="0px" y="0px">
<polygon points="0,5 0,10 40,10 40,15 48,7.5 40,0 40,5 "/>
</svg>
</div>
<div id="project-sub-menu-line"></div>
<div id="launch-btn">LAUNCH</div>
<div id="story-btn">STORY</div>
<div id="project-list-icon"></div>
</div>
<div id='indicator-area'></div>
<div class="indicator">
<div id="indicator-text">I'm only an indicator. <br />Drag the page!</div>
</div>
<div class="close-btn" id="top-x">×</div>
<div id="overlay"></div>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<!--! end of #container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script defer src="js/plugins.js"></script>
<script defer src="js/script.js"></script>
<!-- end scripts-->
</body>
</html>