The prospect of speaking to 650 people inside Nottingham’s grand Albert Hall was more than a little daunting, considering the one time I’ve spoken before was to less than 50 people in a small meeting room. But the experience was fantastic, and I’ve had some incredibly kind feedback.

If you find yourself with forty or so minutes to spare sometime, you might like to watch it. Amongst other things, I talk a bit about machines with souls, why accidents are great, pencils, Ghostbusters—oh, and there’s a video of me doing a crap jump off a balcony and breaking my heel.

If, for whatever reason, you can’t see the video above, you can watch it on Vimeo. You can also view my slides, but be warned: they make little sense without my rambling to accompany them.

Following on from getting the project proposal and contract signed off during Part I, I’ve procured the content and brand assets so now it’s onto planning and design concepts.

Wait, “procured the content”? That sounded easy! Listen, I know. Planning for, authoring and managing content is hard. We wouldn’t be building entire web apps or writing whole books on it if it was easy. But this project is not an exercise in content strategy; it’s a small, single-page site with a very specific purpose: promoting a bi-annual comedy show. The content consists of:

• Site title and description
• Details of next show (Date/time/venue, booking methods)
• Name, photo, profile (55 words), testimonial quote and link to YouTube videos for each of the 4 acts
• Mailing list signup form
• Links to Facebook and Twitter accounts, and sharing links

Getting started

Gathering snippets of visual inspiration and marking up the content in HTML have been the first two steps. I find marking up content early a great way to familiarise myself with the subject matter, at the same time as actually getting the work done. The difference this time has been my “mobile first” mindset.

Knowing that, at the most basic level, visitors will experience a single-column layout has helped me better focus on content hierarchy: most important at the top, least important at the bottom. No decisions influenced by a more “designed” layout. Traditional wireframes have always felt too influential in this regard. When beginning design concepts, I’ve often felt trapped by the wireframe layout that the client has already signed off, when in many cases all the wireframe needed to do was define simple hierarchy.

Branding work was completed by a separate company prior to kick-off on the website, with a creative direction intended to be reminiscent of 19th century circuses. I’ve received logo variations and a colour palette, but little more. This has been a bit of a blessing, as I can help shape an appropriate web presence for such a young brand without overbearing print guidelines.

Building a prototype

With the content all marked up in gooey, semantically rich HTML, I’ve defined styling for typographic and basic layout elements in global.css. Choosing 14px as my ideal text size, my measurements for type and imagery are based on the 2:3 ‘Musical Fifth’ ratio, and resulting modular scale. While I’ll be further integrating this scale into the design as the site progresses, I didn’t want to get too caught up in it at this stage, as I had quick and dirty layouts to prototype.

There is no existing Punchline website from which to deduce statistics on visitor resolutions or devices, so I’ve chosen to use the display areas of common devices as breakpoints for my media queries. These media queries, declared in a separate screen.css file, only get served up to devices with a minimum display area of 480px (iPhone in landscape mode). Devices with display areas of less than 480px, like “feature phones” or common smartphones in portrait mode, simply get served up global.css. From there it’s been a case of choosing the most suitable grids for the given content and display area.

Breakpoints and layouts

Note: The acts featured in my prototype and design are NOT the real acts appearing in the show. They’re simply examples I’ve picked for the purpose of this write-up, to protect the integrity of the real show.

Devices with a display area of up to 479px will see a single-column layout; each content block stacked on top of another. Devices with display areas of between 480px and 599px see a two-column layout; each act assuming a column (with two acts stacked on top of the other two) and the show summary, mailing list signup, social links and footer all spanning the width of both columns. Display areas of between 600px and 767px retain the two-column layout, but receive a couple of extra snippets of content that weren’t absolutely necessary at smaller sizes.

This is where it starts to get a bit more interesting. Display areas of 768px and larger see the header pulled out to the left-hand side, looking more like a sidebar. This element is given position: fixed; to retain it’s position as the document scrolls (it’s kind of important, seeing as it contains the booking information). The mailing list signup and social links are absolutely positioned above the acts to take the place of the header. The headline act assumes the full width of the main content area, with the middle slot and opening act still split into two columns underneath it. The compere appears underneath these two acts, spanning both main columns.

This three-column layout then morphs into a four-column layout for display areas of 1024px or larger, with the compere coming up to join the two other acts in columns underneath the headline act. There is no change for display areas of more than 1200px yet, but I’ll likely progressively increase type sizes to maintain readable measures and eventually set a max-width on the site container.

1. < 479px
   
2. 480px – 599px
   
3. 600px – 767px
   
4. 768px – 1023px
   
5. 1024px – 1199px
   
6. 1200px >
   

Because each layout is liquid, all that’s really happening from one breakpoint to another is the addition (or subtraction) of floats, percentage widths and margins. As a result, it’s been super quick to knock up the prototype.

It’s sure as hell not pretty, but take a look. Resize your browser to see the breakpoints in action.

Static visual mockup

I found my base typographic sweet spot in the process of creating the prototype: 14px Georgia with a 1.5em line-height. I also chose Rosewood Std Fill for both h1 and h2 headings, as it made sense historically; Adobe based it on an 1874 design, which fits nicely into our 19th century bracket. But other than basic typography and layouts, I’d done no visual design work at all.

Though the brand assets riffed off old 19th century circus artwork, I was told specifically that the site should have “a hint of circus”. Take from that what you will, but I heard: don’t design a page that’s meant to look as if it’s inside some god-awful circus tent or staring down a lion’s throat, just drop enough hints and people will get it.

I’ve based my static visual mockup on the 1024px-and-up layout, employing an eight-column grid (960px wide). It’s hardly the greatest thing I’ve ever designed, but as a first-pass concept, it feels developed enough to send off for some feedback. I deliberately didn’t work into it too much; it’ll develop in due course.

Why 1024? It’s the easiest reference point for the client. They’re used to browsing websites of around this width on their desktop anyway, and this layout is, I suspect, likely to be the one visitors see most.

I emailed the client a link to the visual mockup set in a browser, accompanied by a video. In both the email and video, I emphasise the fact that this mockup is an “artist’s impression” of what the final site may look like. In the video (a screencast), I simply take a few minutes to explain my reasoning behind the responsive approach and demonstrate the breakpoints in action. This should help the client understand what is otherwise a potentially lofty concept, or at least a relatively new one. Particularly if they’re not a complete nerd.

Potential issues

Getting to this point has been an interesting (and at times downright fun) process, and though it feels like I’m making good progress, I’m left with more questions than answers…

Q: How will I get around loading large inline and background images across potentially weak data connections (not to infer strength of data connection from device resolution, of course)?

A: Only load large background images past certain breakpoints? For inline images, load smaller versions by default and feed large versions to more capable devices with Filament’s script?

Q: Will browsers, like IE6, 7 and 8, that don’t understand media queries simply get served up the basic linear layout?

A: Without JavaScript enabled, yes, though there is the option of using css3-mediaqueries.js to mimic the work media queries are doing. The idea of having an entirely JS-dependant layout does feel wrong to me, but I’m not ruling it out for these cases. Alternatively, simply serve up the 1024+ layout to IE7 and 8, as they would otherwise get were the site not responsive at all. IE6 will likely get a basic, linear layout.

Q: Will lettering.js and fittext.js work well enough, and how will I avoid all this JS load for small screen users who won’t even get to see the results?

A: My plan is to set the complicated type using lettering.js and FitText. I’m a bit apprehensive, as I’ve never properly integrated them into a site build. As for avoiding JS bloat on devices that can’t even make use of it, people much smarter than me allude to the fact that it isn’t easy. So, yay.

Until Part III…

Two streams of thinking I’ve found fascinating to see develop over the past year or two are “responsive” (or “adaptive“) web design and a “mobile first” approach. Perhaps because I’m never really involved in mobile-specific projects, it feels like responsive web design has generated more discussion and prompted more writing amongst those I know. But however separately these topics have been discussed, it feels as though they share the same ethos: we can create better experiences by embracing the inherent flexibility, power and dynamism of the web.

Hearing Jeremy Keith speak at DIBI last week helped clarify a lot of the thoughts I’ve been having surrounding the topics. To begin creating better experiences, the first step we need to take as designers is to start relinquishing this delusional idea of control we have over our designs as concrete visual pieces. Every time we fire up [insert your graphics editor of choice] and punch in canvas dimensions at the beginning of a project, we’re simply perpetuating this fallacy that the web is some kind of fixed canvas we can design for. It isn’t. It never was.

640×480? 800×600? 1024×768? Basing the width of a website on the resolution of a desktop computer monitor, particularly when we have no idea what the viewport width might be, has never been the right thing to do. But now, finally, the reality of the exploding mobile landscape has brought the inadequacy of our approach into sharp focus.

Design for the web demands an approach further divorced from the visual communication practices of the past. This is not to say we should disregard any of the undeniably crucial work of designers over the course of history; we should must learn from them and carry that awareness with us always. I don’t think it’s possible to reach our full potential as designers of the web without doing so. But the web is a unique medium unto itself, and designing for it should be approached appropriately.

Why all the babbling?

Being a designer for a product, I rarely create websites these days. But I’ve taken on a small project that, in the process of completing, will hopefully help answer some of the questions I have about responsive web design and design for small screen (by doing, as opposed to just reading about).

I’m not claiming that what I’ll be doing is in any way groundbreaking. I personally know people employing the same, or at least similar, techniques in their work right now, and have been for some time. But I know more still who aren’t, so I’m keen to open up my own experience in the hope it might act as some sort of reference. Through comments, it’d be great to build some discussion around the approaches I’m taking as I work through the project.

The project

The website is for a new company hosting bi-annual comedy shows in Edinburgh. It’s purpose is simple: to be the primary source of information for upcoming shows, providing visitors with methods of booking tickets, and encouraging them to sign up to the mailing list.

With the project proposal and contract signed, the first step has been to procure the content.

Part II next week.

Interface = Brand

In ‘The Interface of a Cheeseburger’, Oliver Reichenstein observes that “Shaping interfaces is shaping the character of things. The brand is what transports the character of things.” It’s possible for the gut feeling we have for a product, service or organisation—Marty Neumeier’s definition of brand—to be defined by the interface. Apple, Dyson and Lego are examples of such brands.

Establish a vocabulary

Interfacing with something is a lot like having a conversation. Just as people learn to articulate themselves, so must an interface. Like social etiquette, the language of an interface should be designed appropriate to situation and purpose. Crafting a vocabulary helps mould the senses of an interface.

Context is king

Is the purpose of the interface a serious one? Utilitarian in nature? Perhaps it’s a tool, or simply used for fun? Successful design decisions are made in the context of usage, content and the business. Complicated web apps demand design decisions that not only serve the user, but that scale well and are performant too.

Make it better

Every time you touch your app is a chance to make it better. “Better” does not equate to more features. Seek out weak points, note down issues and set time aside from your schedule to improve them. Consistency of UX, visual improvements, code dryness, whatever. If you’re developing new features without an eye on the larger experience, you can bet you’re making things a whole lot worse in the long term.

Facilitate good habits

Much like a driving instructor and pupil, it’s a designer’s job to facilitate good habits in the user. Prepare them mentally for the task at hand. Set the tone. Use handholding and signposting techniques to ease the introduction to, and completion of, specific activities.

Make it simple, but no simpler

I like to define simplicity of an interface as: allowing the user to concentrate on the task at hand without realising it.  While the quest for simplicity is virtuous, enforced simplicity can be dangerous. Instead, consistency of approach is paramount. It buys you attention, and while it’s important to know how not make the user think, it’s arguably more important to know how and when to make them think.

Small details make a big difference

A/B tests performed on changes to button text, form element alignments and small passages of microcopy have proven that small changes can make a huge difference to a bottom line. Likewise, crafting elements of the user experience that resonate with us as  human beings creates a bond that draws us back. Taking the time to sweat the details is always rewarded.

Design is for humans

Machines are logical and rational, but humans are emotional and irrational. Try to see design as less about solving problems and more about creating opportunities. Theory can be learned, just as execution can be learned. Our real value as designers is our instinct to know how and when to marry them appropriate to the situation.

Download my slides

• InnerSpeaker — Tame Impala

  Modular Recordings

  In the best possible way, InnerSpeaker sounds more like it was recorded in 1967 than 2010. Chock full of dreamy melodies, spaced-out psychadelic fuzz and fat, pounding drums, it’s a trip back to an era of lo-fi production that modern music seems to have largely forgotten. Even calling it “lo-fi” seems unjust, given how rich and imaginative Dave Fridmann (multiple-time collaborator with The Flaming Lips, Mercury Rev and Mogwai) has been in his mixing of the album.

  Though occassionally directly referencing sixties groups like Cream, The Jimi Hendrix Experience (‘The Bold Arrow of Time’, ‘Island Walking’) and The Beatles (the very Lennon/McCartney-esque double-tracked vocals), I find it hard to put my finger on exactly what makes the albums best moments really work. It’s certainly not a reactionary record; these three young Aussie’s haven’t just sat down and worked through their parents’ vinyl collections over a fortnight. Everything from the songwriting approach, to the instrumentation and recording style has clearly been honed over a number of years. It sounds old, and I love it.

  Highlights

  • Alter Ego ·
  • It Is Not Meant To Be ·
  • Lucidity ·
  • Jeremy’s Storm

• One-Armed Bandit — Jaga Jazzist

  Ninja Tune

  One-Armed Bandit is a bit like Hot Rats for 2010. After the short introductory ‘The Thing Introduces…’, the title track picks up where Zappa’s 1969 breakthrough album left off. But despite the abundance of complex passages and frenetic time signature changes, Jaga Jazzist never seem to lose sight of the fact that strong melodies are central to everything. There’s an abundance of musical styles here, and an impressive array on chops to match. Aside from the aforementioned Zappa, there are more than a few nods to John Coltrane, Aphex Twin, King Crimson and even Squarepusher’s more instrument-led material.

  What I really love about this 10-strong Norweigan powerhouse is that they manage to do something really rare on One-Armed Bandit: credibly fuse elements of jazz and progressive rock with electronica. And if that remark doesn’t scare you off immediately, you’re probably in for a treat.

  Highlights

  • One-Armed Bandit ·
  • Banafleur Overalt ·
  • Prognissekongen

• This Great Pressure — Jogger

  Magical Properties

  As a general rule, Jogger seem to take perverse pleasure in denying the existence of anything as petty as rules. This Great Pressure is a strange but compelling listen that takes in elements of folk, math-rock, electro, IDM, breakcore, hip-hop, dubstep and… death metal.

  It was the relatively straightforward ‘Gorilla Meat’ that got me hooked on the album initially, but if you’ve got the patience to hear Jogger out you’ll be rewarded with an eclectic collection of songs that somehow seem to blend seamlessly.

  Highlights

  • Gorilla Meat ·
  • Master And Student ·
  • Champing At The Bit

• Astro Coast — Surfer Blood

  Kanine Records

  I saw this group of young Floridians play at the Pavement-curated All Tomorrow’s Parties festival in Minehead back in May. My immediate thought was: “they sound sound a bit like Weezer, if Weezer hadn’t gone shit after Pinkerton”.

  Astro Coast is good wholesome pop at it’s core, but with a few interesting twists and the occasional dip into shoegaze/glue-sniffing territory. Wads of reverb on the vocals and a few Dick Dale-esque guitar melodies lend a nice kind of “west coast” feel, and there are shades of The Pixies and Sonic Youth throughout too.

  Highlights

  • Take It Easy ·
  • Harmonix ·
  • Swim ·
  • Fast Jabroni

• Butterfly House — The Coral

  Deltasonic Records

  I’ve long respected The Coral, despite never really being a massive listener. They’ve always seemed like a “band’s band” — no frills, no drama, no make-up, just music. But their older albums never really grabbed me, for whatever reason. Butterfly House, however, is a brilliantly crafted record.

  The production (handled by John Leckie, producer of Radiohead’s The Bends and The Stone Roses’ debut) is lush and interesting, but without being flashy. The songs were written over a period of two years and thoroughly road-tested, so the writing and playing is polished and really well-rounded. The band sound confident and self-assured. And though they’ve retained many elements of their psych-pop roots, there are plenty of Beach Boys-esque harmonies and elements of the best Stone Roses material here too.

  Highlights

  • 1000 Years ·
  • Walking In The Winter ·
  • Butterfly House ·
  • Falling All Around You

Notable Mentions

Oh, and these lovely records have tickled my ears too…

• 

  SwimCaribou

• 

  The SuburbsArcade Fire

• 

  ModeratModerat

As designers, we subscribe to RSS feeds so we don’t miss out on the next inspiring article or nugget of advice. We read hoping it’ll help us improve, learn more or think differently in some way. And why not? Hunger for knowledge and growth is essential, and there is sure as hell enough brilliant writing on the web there to deliver it. But I’ve always struggled with making enough time to consume it, even a fraction of it.

Time to do something about it

Having used (and subsequently dropped) both Netvibes and Shaun Inman’s Fever in the past, the last few months have been nothing short of a revelation for me. I began using Instapaper to save articles I found through Twitter during the day, reading them on the iPad at night. Ditching the desktop made such a difference; it was like sitting down to read a magazine. The next step was RSS.

I imported my Fever feeds into Google Reader and deleted all but my most essential, going from 149 down to 40. After hearing good things about Reeder for iPad, I picked it up and was quickly taken with it’s functional, yet somewhat charming, interface.

Now between Instapaper-ing select articles during the week and letting articles from my relatively small number of feeds build up in Reeder, my weekly ‘magazine’ is curated. Come Saturday morning, I open Reeder and dive in.

Anything I might reference in future gets bookmarked into my Delicious account from within Reeder. Music-related posts not already using the HTML5 <audio> element are moved to a Music folder within Instapaper for later listening in a Flash-enabled browser. Posts with inspiration-worthy visuals get added to a LittleSnapper folder in Instapaper, ready to be snapped when I get back to my desktop machine.

Having sieved select articles from Reeder through to Instapaper, they’re all read then bookmarked and/or archived. And that’s it. Sometimes it’s an hour-and-a-half, sometimes it’s a couple of hours dotted throughout the day. Always a belly full of content.

Lessons worth learning

Reading in portrait-mode (where there’s no sidebar menu) is key for me, because it means I can’t just skip articles. I’m forced to read sequentially, processing each one equally. Exposing yourself to articles you wouldn’t normally read is healthy, like when you come across a random article in a newspaper and ‘accidentally’ end up reading it.

Being realistic about just how much you can sensibly consume is paramount. It might mean ditching a chunk of your feeds to find a good balance initially, but if you’re frustrated with the state of your reading I think it’s a sacrifice worth making.

The Designful Company Marty Neumeier

Brand-guru Marty Neumeier kicked off the day speaking about ‘The Designful Company’. I’m a big fan of his book ‘The Brand Gap’, and in person he certainly didn’t disappoint. Exploring how brands are defined by their approach to design, he discussed the challenge designers face creating innovative products in the face of ‘traditional’ management.

Citing the famous Henry Ford quote—”If I had asked people what they wanted, they would have said faster horses”—Marty asserted that innovation is the way to create lasting barriers to competition. He used Herman-Miller’s Aeron chair as an example of when products achieve long-term success because they’re both different and good. Though the Aeron performed poorly in initial tests, was called “weird” and initial sales were sluggish, it eventually became a greater source of revenue than any other product the company have produced because customers “soon equate weird with good”.

Boil, Simmer, Reduce Brendan Dawes

Next up was magneticNorth’s Creative Director, Brendan Dawes, discussing his design process. Boil: fill your head with as many ideas as possible, then Simmer: consider and reflect, and finally Reduce: remove things until there’s nothing you can’t justify. Along with his own brand of self-deprecation, I particularly appreciated Brendan’s message of being aware of your sense of play as a designer.

Information Is Beautiful David McCandless

I have to admit to being a bit non-plussed about the idea of David McCandless’s topic before the conference kicked-off. Though I’ve read parts of his ‘Information Is Beautiful‘ book in the past, I’d slowly become a bit cynical about ‘infographics’ and the trend of data visualisation that’s seemingly gripped the design world over the past couple of years. Suffice to say, David’s talk reminded me why I was once so enthusiastic about the field.

Highlighting the differences in his examples of successful and, well, rubbish data visualisation, David explained that great data visualisation is the result of beauty (abound with visual relationships; the language of the eye) and interest (conceptual relationships; the language of the mind). He also echoed Brendan’s remarks about maintaining a sense of play when visualising data. Using his own infographic that analyses hierarchy within US politics, he maintained that boredom (“How can I make it interesting?”), ignorance (“How can I find out about it?”), bewilderment (“How can I make it understandable?”) and frustration (“How can I make it work”) are catalysts for the most effective data visualisations.

The Power & Beauty of Typography Samantha Warren

Washington-based designer Samantha Warren urged us to consider our typeface choices, saying: “A typeface can say a lot more than the copy it spells out”. She compared the task of a designer choosing type to that of a casting director choosing actors, and told of how she considers different typefaces much like different pairs of shoes: Helvetica being a pair of black flats, Bodoni as high heels and Papyrus as a pair of garish knee-high boots.

The Auteur Theory of Design John Gruber

With this being Gruber’s (aka Daring Fireball‘s) very first speaking appearance in the UK, the expectation level was probably unfairly high.

Regrettably, I’d actually watched a video of a shorter version of this talk on the web a few months ago. Gruber explained his theory that in any creative activity, the quality of the finished piece “tends to approach the level of taste of the person who has final say”. In other words, someone with the right vision for the project—the greatest level of taste—should control the project.

Gruber explained how Stanley Kubrick and Alfred Hitchcock had very absolute visions of their films and created methods of execution that meant the final cut never strayed from their visions. With Kubrick, it meant getting hands-on during filming and obsessing over every last detail of scene settings. In Hitchcock’s day—when only the studios had ‘final cut’—he single-handedly invented storyboarding and filmed only those pre-planned scenes, meaning the film could only make narrative sense if edited exactly as it was shot.

Jam Session: What improvisation can teach us about design Hannah Donovan

Creative Director at Last.fm, Hannah Donovan explored the shared elements of improvisation in music and improvisation in design. She spoke of mastering your tools (be they instruments or software) such that they don’t inhibit the pace or process of creativity; the necessity of structural frameworks to guide and constrain; the importance of roles (other musicians, other designers) and mutual respect, then specific techniques like trading parts (call-and-response).

The Value of Ruins James Bridle

Knowing nothing of Mr. Bridle prior to his talk, I was suitably blown away by both his historical intellect (because I was never any good at that stuff myself) and sense of perspective of the web. After showing us the shipping container in which the internet “lives”, James spoke of how the Library of Alexandria—containing a million scrolls—was gradually destroyed between 48 BCE and 642 CE, and in doing so how a chunk of all human knowledge to that point in history was erased.

Referencing our new digital methods of documenting history, James sought to question the value of our past and used Wikipedia’s revisioning system as an example of how we can now look at historical documents actually come to fruition piece-by-piece. As an experiment, James has actually printed (in 12 volumes!) the entire history of the Iraq War page on Wikipedia, containing every comment and revision ever made since the page was created.

Everything The Network Touches Tom Coates

Comparing the ancient Persian road network to todays network of data and services APIs, Tom Coates got us all excited about the opportunities we have of building revolutionary new systems to enhance our lives. Mr. Coates had obviously spent an eternity creating his jaw-dropping slides, and they were matched only by his enthusiasm for the topic.

Tom cited real-world examples like the new parking system in San Francisco, where sensors at parking spaces allow you to find free parking spaces on your smartphone. An inspiring glimpse into how we’re gradually weaving new interconnected networks into our cities.

Kerning, Orgasms & Those Goddamned Japanese Toothpicks Merlin Mann

Merlin Mann. What can I say? Hilarious. Human. Cutting. Witty. Poignant. Perfect closing act. The guy could talk about toothpicks and have everyone enraptured. Oh, wait.

Whether describing the difference between geeks (“Someone who fixes your computer”) and nerds (“Could fix your computer, but first talks to you about it for 5 hours”) or claiming we’ll all be replaced by bash scripts one day, Merlin inspired and delighted without glancing at a slide.

Same time next year? See you there.

Update: Download the audio from each talk at Huffduffer, and check the photos too!

As a result, it made sense to either replace my portfolio site with my blog or to combine them. Having ended up combining them, the focus of this resulting site is very much on writing, though I’ve included a single page of some projects for a bit of context. I enjoy reading the blogs of other designers, but it’s always interesting to see a few things they’ve designed too.

Those familiar with my original blog design will recognise much of it’s structure here. Along with the Work section, new additions include a proper menu in the header, a Notes section and individual RSS feeds for Articles, Resources and Notes. It’s still the same 6-column grid, though there are a couple of instances where I’ve stepped out into the 12-column grid. Hey, you’ve got to make the grid to break the grid, right?

I’ve also switched out Helvetica for Mark Simonson Studio’s Proxima Nova. I don’t dislike Helvetica, but it’s a typeface I’ll often choose in order to concentrate on other elements of a design. For me, it’s neutrality is both it’s strength and it’s weakness. I wanted to inject type that sported a little more personality without losing any of the structural solidity Helvetica provided, and I think Proxima Nova fits the bill pretty nicely.

Whether you previously read my blog or have arrived expecting to see my old portfolio site, I’d certainly appreciate hearing any feedback you have.

It begins with the brief. The brief defines the project objectives, informed by business goals, tactics, requirements and restrictions. It should broadly outline the content required to achieve these objectives, be it information about the products your client sells; company background information; latest news. Whatever. Brainstorm with your client, conduct user research and study competing sites to guide discussion as to what content is required. If it’s a redesign, you might have rich analytics data to accompany all of their existing content. The brief is signed off before any IA or design work begins.

IA (Information Architecture, if you’re not into the whole brevity thing) isn’t simply about site structure. IA covers user research: user needs, aims, behaviour and knowledge. It allows you to look at content you have, content you need, how to plan for it and how to group it. It should explore and define required content in detail. Format, length, intended audience and relevance to any specific tasks. Is it structured content, like a product page, or unstructured content, like a once-occurring ‘About us’ page? IA is not just a sitemap.

Once you’ve communicated the IA to your client, content authoring can begin. Fail to communicate the IA properly and you can kiss your deadline goodbye. The client must understand what they’re expected to produce. I can’t stress this enough: make sure your client grasps fully the breadth, detail and purpose of the content they are expected to produce.

Your IA work should’ve given you enough of an idea about the content to begin designing the framework for it. With the IA signed off, your design work and your client’s content authoring begin — in tandem.

Don’t leave your client out in the cold. They need reassurance that the content they’re authoring is good, just as you need to know it’ll work harmoniously with the design. Communicate constantly. Writeboards or Google Docs are handy for this kind of collaboration. Provide feedback and incorporate the latest content into your designs. There should be a continual conversation between the developing design and the developing content.

As your client edits and refines, so you design and build. More time spent editing and refining means a better end result. No last minute content dump into the CMS. No long, drawn-out ‘content population’ process, delaying launch. No need to look on in terror as your templates implode with all the extra content they didn’t tell you about. Donna Spencer says it best:

“Content shouldn’t be treated as an afterthought, or something to be “poured” into the website. Content is the website“

I’m only scratching the surface of a workflow here. If you’re really interested in producing better web content, I’d highly recommend Kristina Halvorson’s ‘Content Strategy for the Web‘ and Donna Spencer’s ‘A Practical Guide to Information Architecture‘.

Finding the right degree of separation, that balance between work and home, is one of the hardest things to achieve for anyone passionate about their work. I’ve realised that physical separation from the medium through which I work is the most effective way for me to strike that balance. If I’ve made a pact with myself (or understanding spouse) not to do any work, I don’t want to fire the computer up. The problem is, the computer is not only a tool I use to realise ideas, but also serves as a lifestyle device. We reply to emails from friends and family, watch TV programmes and films, listen to music, keep up to date with news and accept friend requests from people we don’t even know or like. In our house, the computer is as much of a social enabler as it is a creative tool. Possibly more so. The problem for me is the crossover; the temptation. I’m just too bloody weak-willed.

Like any other Apple drone, I bought an iPad on it’s launch day in the UK. It’s a wonderful device, for all the reasons I expected: it’s responsive, fluid, efficient, beautiful, clever, intuitive yet simple — hallmarks of any successful Apple product. But the reason I’ve fallen in love with it so quickly is precisely the reason most people I speak to don’t ‘get it’: it’s position and relevance between the mobile and computer, otherwise phrased as “What’s the fucking point?”. I don’t want to use my computer as a consumption device because it’s too closely associated with work. I don’t really want to use my iPhone as a consumption or lifestyle device because it’s a pain in the arse to type long emails on and, frankly, is just too damn small to adequately consume any reasonable amount of information on. The iPad makes it a pleasure to surf, read, watch, listen, play, plan and reference. I can turn it off and put it down as quickly as I picked it up. For someone as obsessive and work-hungry as me, it’s beauty lies in the very fact that it can’t fully replace my computer. The degree of separation it’s creating between leisure and work is something I’m already feeling the benefits of.

Sent from my iPad (Only joking)