When design becomes less about design and more about decorating

Eric Karjaluoto over at Ideas on Ideas has written a great post about how design as a skill and profrssion has become a great mimic-fest. How there’s a race to the bottom of faddy design whipped up by very talented people who are extremely adept at mimicry but very much lacking in methodology and discernible design skill.

I’ve found this many times when interviewing designers. Lots of style over substance and surface gloss. An impressive portfolio of expertly executed Photoshop effects but lacking when it comes to reasoning, process, rigorous thought or any of the other traits or skills that mark a true designer out from the stylists. Anyway, enough from me, I’ll leave it to Eric and his post - Drones at the karaoke lounge of design.

“The newest design blogs are particularly telling of this as they largely seem to concentrate on a steady-stream of eye-candy and visual masturbation. Seemingly, the past year has played host to the superseding of actual writing and reflection on design to vapid graphical lists like “25 Great Green Websites”. Easy to create, bookmark, and subsequently mimic, it’s as though we’ve collectively walked into the great karaoke lounge of design–all of it somehow comforting but unlikely to result in anything of substance.”

Dieter Rams’s 10 Commandments of Good Design

Back in the 1980s, to help himself decide whether what he was producing was good design, Dieter Rams drew up what has come to be known as his 10 Commandments.

My personal favourite.

“Good Design is as little design as possible”

Read the full list on vitsoe.com.

His work still looks fresh many years later and is often held up as inspiration for the current aesthetic of Apple product design. You only need to look at his Braun calculator alongside the iPhone calculator or the punched aluminium casing of the Mac Pro alongside his T1000 Braun radio to see how his clarity of design thinking has endured long after the fads of a moment have been confined to the land fill.

Link Digest. February 2009

Do it, then fix it is a blog post from ad guru Dave Trott. In it he comments on something I agree with wholeheartedly. Why sit around talking about something when you can just get on an do it? One of the analogies he uses is from the film set.

“On a film set you’ll always have to choose between two ways of shooting something. The worst thing you can do is sit around thinking about it. Because you’re wasting time and money, while the actors and crew sit around doing nothing. And when you’ve done all the thinking you’re no nearer to solving it. So the best thing is just pick one route and go for it. Then you can change it as you see whether or not it’s working.”

I’m subscribed to his blog and I can recommend it. Even though every post is written like an ad end line.

Ever been doing a piece of work and needed a beautiful ampersand? Well, The Mesmerizing Curves of Ampersands is a great resource for helping to find the right one for the job. With links to download and buy – some of them are even free.

Courtesy of James Higgs, Layers is a great little tool which captures your display in a layered Photoshop file. Think Cmd+Shift+4 on steroids.

Grappling with some difficult interface design? ecommr may provide the answer through its extensive gallery of interface design elements.

Just recently found MediaShift. Haven’t spent long rummaging round but first impressions are good. In their own words. “Since January 2006, MediaShift has been tracking how weblogs, podcasting, citizen journalism, wikis, news aggregators and online video are changing our media world. MediaShift includes commentary and reporting to tell stories of how the shifting media landscape is changing the way we get our news and information, while also providing a place for public participation and feedback.”

Want to know how social media tool du jour Twitter came into being? Well now you know.

The Art of the Title Sequence is a collection of some of the most beautiful movie title sequences.

The Directory is a list of design studios, individuals, blogs, shops, photographers, resources etc. May take some time to go through that lot. If I find anything of particular interest I’ll post it here next month.

Volunteering can be so inspiring

A site that I was working on just before Christmas with the good folk over at Made by Many has recently gone live.

vinspired.com is all about volunteering. They believe in free. They do favours for free – and by doing them they look to open doors of opportunity. Run by ‘v‘ which was set up in 2006 by The Russell Commission and supported by the office of the third sector, they are working to get more 16-25 year olds volunteering. They organise events up and down the country and provide opportunities for the target audience to increase their own skills while at the same time helping others.

It’s a really great organisation with lots of life and energy.

As far as the site is concerned it was a simple reskin and tidy up of what went before. I’ve made it look more energetic and edgy and the architecture and usability have been reworked too. We really wanted to make it feel like there was a community of people all participating in activities and sharing experiences.

There’s more to come in the coming months. Go and check out vinspired.com.

How to do design on an agile project

Everyone’s doing agile. The days of the monolithic project are seemingly numbered. Whether that’s true or not I’m not sure. There will always be the big enterprise stuff going on somewhere.

But for the rest of us it’s getting quicker and cheaper to build web products and services. OSS, SaaS and a plethora of APIs has reduced the time frame down to days to get something out into the wild.

At the same time that all this is happening, the increased complexity of the user interactions online now necessitates greater attention to the design of a given site. But, with the deadlines getting shorter, where does the extra time come from to get the design right? This is something I’ve been asked a number of times. Most recently by a developer specialising in Ruby on Rails development – the grand daddy of all web 2.0 rapid, agile development platforms.

I’ve worked on a couple of agile projects. And let me say, it’s not for the feint-hearted. No room for newbies here. Sorry. You need to begin with a designer who has plenty of experience in designing and delivering web projects. That designer also needs to let go a little, become less precious and realise that if it’s not perfect now, it can be in 24 hours time – but more of that later.

Right let’s get started.

Defining the interface through sketching

As I may have mentioned before, I like to sketch. I find it’s the best way of getting an idea down in visual form and in front of the client quickly. What’s great with this approach is that the client won’t get bogged down in the details of colour and copy. They’ll focus on content and the broader layout and examine if everything they need/requested is on the page. Just to note at this point, I’m not talking about managing scope creep in this post, just how the design bit might work within the wider project.

What’s lovely about sketching is that it lowers the barrier to producing layouts to anyone who can hold a pen and apply it to paper. In fact, one method I have used historically is to gather the project team around a whiteboard and gradually ‘build’ the interface as a collaborative exercise. A snap with a camera phone then records it to be shared. Which ever way you do it, the sketching process helps to iron out any potential issues with development before committing pixels in Photoshop.

Working up the interface

The developers can go and start to build some stuff working from the sketch as a starting point. It’ll be ugly (probably) but at least they have something to build. Without the sketching bit they may be hanging around waiting for your designs which creates a bottleneck.

You’re probably looking at getting a design out in a couple or three days from here. Before the project started you may have done some initial investigative design work and got a broad ‘look and feel’ working which makes this stage a little easier.

It’s a convenient point to mention that working in the same room as the client on an agile project really helps. They are engaged, not going to any other meetings (this is agile – it takes both a physical and time commitment) and are, therefore, on hand to answer any questions. That client also needs to be in a position that allows them to sign things off quickly. No committees allowed. No 6 rounds of design amends. Get a design done, keep reminding them of the deadline and hopefully get it (largely) signed off. If there is one particular widget or element that isn’t working, you may be able to ignore it for the time being and commit the rest of the design leaving the sticking point to later.

This signed off design can then go and start the transition into CSS, XHTML and Javascript. As this is happening you can start to work on other screens or refine the design of that widget that the client wasn’t happy with. Again though, you’re not holding the process up. Everyone has plenty to do and aren’t wanting for finished designs.

This should be the way the process then works for the rest of the page templates on the site/service.

The PSD is not king – the prototyped site is

One point to mention in an agile project and, in my eyes, it’s very important. Unlike other projects where the client likes to see armfuls of printed out PSDs; in an agile project the PSDs have a diminished authority. As soon as they’ve started to hit the front-end mark up guy, the prototype site has the authority. That’s the working, living, breathing product. We’re not in the habit on an agile project of creating artwork for gallery walls.

A very efficient method of working I’ve found is to screen-shot the prototyped site and work on that in Photoshop for the subsequent iterations. That way you don’t waste time recreating PSDs to match the prototype. It’s all in place for you and you can get on with designing the portion of the interface that you need to get done.

The only certainty is change

Always remember that this is a two-way process. Development / client / HTML  can come back to you at any point for clarification or indeed amends for any number of reasons. Ideally you should commit 100% of your time to this project. Dividing your time between projects may mean that you miss decisions being made and have no idea of functionality that may have changed from half a day ago. Services such as Twitter (or any enterprise variant) come in handy to help keep communication channels alive on the project. Perpetual contact with the team and multiple releases a day make it both and exciting but at the same time exhausting process.

Talking of multiple releases. As mentioned earlier, precious designers may find the whole process a nightmare of frustration and chaos. If you let go a little and remain pragmatic then you can still produce well crafted sites. The very thing that may create this frustration allows you to change things very quickly – the multiple releases. If you embrace the process and adapt to a way of working that sits well with you and just as importantly with the rest of the team, there is every chance that you will be able to get a great product out in a time-frame that you never thought possible.

Ideas are nothing without the execution

I’ve just watched the second installment of ‘Big Chef Takes on Little Chef‘, the concept of which revolves around trying to reinvigorate the fortunes of the Little Chef roadside restaurant chain.

I’ve probably been to a Little Chef once in the last 20 years (when very hungry and desperate on a road trip you understand). Watching the show it looks like they haven’t changed a bit in at least 20 years – or even decorated in some cases.

To help with this turnaround they drafted in the culinary genius Heston Blumenthal.

Now, I like Heston. I admire his direct manner and his ‘fuck ‘em’ attitude. I like the idea of what he does with food; challenging perceptions, creating new tastes and experiences. I thought that it might have been a bit of a mismatch putting someone like Heston in the hot seat to refresh a 50 year old, staid, outdated institution like Little Chef. But as the chief executive, Ian Pegler, said, he brought Heston in for his ‘blue sky thinking’ to ‘think out of the box’ and for ‘that Heston wow factor’. Suffice to say I wanted to throw the controller at the TV every time he uttered these phrases. He chose Heston above ‘other celebrity chefs’ because he was so radical and he felt that’s what Little Chef needed. But what he failed to understand is that Heston’s food is £250 a head at his flagship Fat Duck restaurant. And it’s completely inappropriate and at odds with Little Chef’s staple quick-turnaround roadside fodder.

So the process started with an, at best, vague brief and a client whose expectation and hope were matched in equal measures by his misguided enthusiasm. Disaster and broken relations were bound to follow.

What Heston focused on in the beginning, quite rightly in my opinion, was the quality of the ingredients and the attention to cooking techniques to produce food that was better prepared and therefore better tasting. This was, seemingly, totally lost on the chief exec. He was expecting more ‘blue sky’ and less ‘box’. The problem was that he didn’t have the first clue how to articulate what he meant by this to Heston.

On top of this, there’s no point having loads of great ideas if they cannot be carried through. Little Chef kitchens consist of a deep fat fryer and a hot plate. The ‘chefs’ work from a manual like they’re assembling an Ikea flat-pack. Radical changes to the menu would necessitate root and branch revisions to their entire cooking processes. This is before you consider retraining staff and refurb’ing the kitchens to house more traditional food preparation implements. Like saucepans for example. What’s the point of a great new menu if there are not the means or skills to produce it? It doesn’t look like this had crossed the mind of Mr Blue Sky.

The other flaw in the process was the way in which Heston’s new menu was tested. They did this by dividing one of the more popular restaurants in two. Depending on what the diner wanted depended on where they sat. Obviously, ‘Heston’s’ side of the restaurant was empty. It’s not surprising! With no marketing, explanation or build up to what they were trying to achieve it probably scared the hell out of the diners. They were arriving expecting an olympic breakfast and were greeted by oak-smoked Salmon with scrambled eggs and offal and oyster hotpot!

There is still one installment of the series to go, so we’ll see how this all pans out.

What I want to look at is the way the ‘client’, the chief exec. in his case, treated his ‘agency’ – Heston.

I can see a lot of similarities here with clients I’ve worked with historically on web design projects. In fact, I’ve blogged about the designer/client relationship before. Far too many clients focus on the wrong things. They want a ‘blue sky’ website design but they cannot explain what they mean by this. Then, when they see radical they get scared and want it watered-down or merged with the ’safe’ option. Alternatively, they don’t like your site design concepts at all but they can’t tell you what exactly they don’t like. They expect a ‘wave of the Photoshop brush’ and all to be well. (I’ve actually had that last sentence uttered to me in a meeting).

Then, when they eventually launch the site there’s no marketing support or fanfare. No long-term content strategy, no planning for post-launch maintenance, no warning of what’s coming for the faithful users. It’s just thrust onto the world. And then they wonder why it falls flat and people complain. And then it’s the agency’s fault!

What has become apparent in the latest episode of Heston and Little Chef’s adventure is that the process may end up being the marketing campaign itself and Heston’s hard work ends up on the back burner at best. And that won’t be Heston’s fault it’ll be down to the way the project was conceived and run in the first place.

The I’Anson family rebus

Having a surname like mine I spend my life spelling it down the phone; explaining that an apostrophe is not a comma or a hyphen and generally wishing, at times, that my name was Smith. I’ve been known to write it eye-and-sun as a way of helping people understand how to pronounce it.

Then, last week, it hit me. Taking Paul Rand’s iconic IBM poster as my inspiration I’ve done a rework. Although I’ve used the same font for the ampersand as Rand used for the ‘M’ of the IBM version (City Medium), I’m not entirely happy with it. I think the problem lies with the stripes. They cut through in some odd places but I wanted to keep it faithful to the eight stripes of the original. I’ve tried a number of different fonts but may have to resort to drawing my own. This will work for now, though.

I think I’m going to adopt this as the new family crest.

Portfolio up and running. A vision in brown.

For those of you that it affected, thanks for putting up with some poor styling and a constantly changing masthead graphic last week.  I think I’m largely happy with the final blog design. It’s pretty straightforward and sits well with my portfolio site and my business card designs.

Talking of the portfolio site. I just want to say a couple of words about the rather fine piece of software that is Indexhibit. Aimed at designers, artists and anyone wanting to put together a simple gallery of work it’s easy to install, use and skin up to your requirements.

The new portfolio site

For any designer, it’s always a hassle putting up your own portfolio site. Resizing screenshots of work, hand coding html, hacking CSS to get it to work in IE6 – the usual stuff. Indexhibit allows you to concentrate on curating your work and preparing images. Once the main template is set, it’s a very quick process to reorder navigation items, rename pages and drop images in. It’s also more likely to be kept up to date as it’s so quick and easy to add content.

Indexhibit admin page

It’s been so good, I think I’ll use it to show my archive of work from the retrospective project.

Objectified trailer released

The trailer for the upcoming film ‘Objectified’ has been released. This film follows on from Gary Hustwit’s previous film ‘Helvetica‘, released in 2007.

The trailer features the voices of Jonathan Ive, Andrew Blauvelt, Marc Newson, and Karim Rashid. You can read more about the film at the Objectified website.

The retrospective project: Scottish Power

This is the (very belated) second installment in the retrospective project.

The design and development of ScottishPower.co.uk happened hot on the heals of the jamjar.com launch in summer 2000.

Scottish Power wanted, for the first time, to offer the sale of domestic appliances on their site. Couple this with the ability to switch energy suppliers and view and pay your account online, it was a pretty powerful proposition.

Some of the initial design concept work was done while I was still working on jamjar.com but I had the opportunity to design and artwork the flash movie on the home page and some of the product illustrations throughout the site.

The concept was the ‘Scottish Powered Community’. By creating a small village on the home page consisting of residential, commercial and small business premises it created both a means of navigation and communicating who the site was for. Some, for the time, creative Flash development tied it in to the user’s PC clock allowing the sun to set on the village and it become dark – complete with street lighting, drawn curtains in the bungalow and lights going out in the office block.

The illustrative style of the village was carried through to product illustrations on the shop pages which really lent the site a personality. The initial intention was to create interactive rooms within the house to both shop for appliances and fact-find about energy usage. Looking back at the kitchen illustration for the first time in 6+ years, it looks beautifully naive. Unfortunately, however, the budgets didn’t stretch to such involved interaction design and flash development. Shame.

The copywriter on the site was ex-Saatchi. A good thing you might think. But the fact he had spent his entire career up to that point writing tag lines and end lines he struggled when it came to writing compelling passages of copy to sell products and services. Hence such shockingly bad lines as “Welcome to our ohm page”, “We’ve got watt you want” and “Come windows shopping”. I kid you not!

The site had a very short shelf life. Scottish Power repositioned their business in 2001 which involved the closure of all their retail shops and, as such, the e-commerce part of the site. Couple this with some poor maintenance and brand guardianship by the client and the polished, slick look of the site started to wane, looking a shadow of its former self within 12 months and becoming virtually unrecognisable by the end of 2001.

Here’s what it looked like at launch though…

Home page

Energy landing page

Product sub category browse page

Village designs – day and night

Domestic appliance illustrations

Kitchen illustration – first draft