Andy Wickes - A blog about digital media

Nothing Changes

Something struck me the other day that I suppose I had already known, but nonetheless it seemed significant enough for me to write down so perhaps I hadn't quite appreciated it's importance.

Everyone my age who works as a web designer started out as a print designer.

That was just the way things were back then. We had no idea where the web might go, how it would change the landscape of communication, or what skills would (in 20 years time) become crucial for the web to develop in the way it has.

It was just another discipline in design that designers had to tackle.

So, I cast my mind back to some of the early websites I built, shuddered inwardly, and felt very, very old.

So I thought to myself (in the interests of getting an article out of this) what advice would I have given myself back then, knowing as I now do what direction the web was to take? What could I have done differently back then to avoid some of the mistakes I made. What if anything can hindsight teach us about the last 20 years of the web?

A difference that instantly struck me was that in marked contrast to the way I learnt the web, we now appreciate the need for a division of talent in the way we deliver web projects. We don’t just employ a graphic designer who fits in a website in between print projects. Or we don’t just employ a multimedia designer who fits in website in between CD-ROM’s. We employ a designer, a front-end developer, back end developer, and if we’re lucky user experience architects, copywriters and so on.

Faced with the prospect of all this collected talent coming together on one project made me feel even more self-conscious towards the projects I had rolled out single-handedly knowing nothing at that point about semantic code, accessibility, graceful degradation or any of the other buzzwords that we knock about these days with such abandon. My mark-up would have been appalling, plain and simple. It would have been the usual incomprehensible garbage that spewed out of Dreamweaver when put in the hands of someone who didn’t really understand tables and wished each page could be one big picture with links on it.

Forgive the candour here, but we are talking 15 years ago. The first point in any journey of self-improvement is admitting you have a problem. Needless to say that happened a long while ago now, but we all have skeletons like this in our closets, right?

So would I have learnt to code better? To learn HTML and CSS intimately? To learn and publish books on web standards and JavaScript long before all the others. Admittedly that does sound attractive, but the truth is that this was just not a concern back then. Few would have predicted how important concerns such as this were ever likely to be, least of all those whose role it was to work with the code. So no, I don’t think that was it.

Fast forward15 years and I’m giving a speech at a school to students making choices for their A-Levels and wondering what skills they need to get a job in design. Over and over I found myself being asked what software they need to learn, how they can get serial codes for copies of Flash they have acquired (seriously) and whether they should learn Corel Draw or not. My response to all of these was the same it is every year. The software skills are useful, no question, but ideas are paramount. As an individual bursting with great ideas, you will always be in demand, and the people with the skills (and the cracked copies of Flash) will be ten a penny. The ideas win clients and keep them coming back.

But that’s never good enough for parents of children who pay £10,000 a year in fees so I had to come back with something else of more practical nature. ‘Well,’ I said, ‘you need to make sure that you are consuming good design at every opportunity…make sure you read good books, listen to good music, watch good films and figure out what makes them work. What makes them great, why they engage with you and why they stand the test of time.’ In essence, look to the greats, whether they are The Beatles, Kubrick, or The Face.

Now that might seem hackneyed. In fact I’m perfectly sure it is hackneyed. But the reason I dust it off and roll it out once again is that more and more I see it vindicated in current trends – none more so than the web.

Take print design for example. Take print design, and cast your mind back to the start of this article. Print designers like myself, tackling web projects. And then shut out that potential bun fight (should they, can they, ought they?) and consider the premise here which is what advice would a web designer in 2010 give to his formative self?

I think it would have been to consume more print. Consume and understand more good print design in whatever form that might take.

Seem odd? Well, consider the rationale.

Layout.

Never before has this been so important in web design that now. Grid systems in CSS use of media queries to provide more satisfying layouts dependant on the orientation of the viewport or device. Progressive layouts from personal blogs to The Times website makes use of modern CSS to reversion content to the end user and their chosen device. The layout adjusts accordingly without any adverse effect. Styles are set, and like all good editorial design, they fit the content, rather than the other way around.

Typography.

Perhaps the area where some of the most important steps have been taken recently, whether it be the increased adoption of @font-face, web fonts delivered by ‘services’ such as Typekit or FontDeck, developments with the WOFF format or any number of the Jquery bases scripts around which give the budding typographer control only previously dreamt of. What we see is resurgence in the appreciation of the role typography can play in a flexible, powerful design. The web being what it is, once more we have found ourselves faced with the wonderful duality of seeing companies present both the problem and the solution in one neat bundle. Not enough good fonts for use only? Here’s the solution. Next.

Copy

The fact that is has taken this long for us to come around the realisation that content is as crucial an element as design, function and imagery is a wonder in itself. But there you are. In recent times content, copywriting, ‘micro copy’, tone of voice and all the other ways in which words contribute towards the user experience have begun to draw the attention they deserve.

Content

Not that we’ve ever not cared about content, but in recent times we have appreciated that the website as an object simply doesn’t work. The success of communities such as Facebook, Digg, Stumbleupon and their like have shown us that it is the content that brings people back rather than the function or the form of the site. In essence we now know that the function and form of a site is at its best when it is almost invisible to us. So the continual generation of new material is vital these days to creating loyalty and interest among our audience.

Likewise in print, this was ever the case. The old adage went that the content of a print campaign was out of date the minute the ink was dry. And in a lot of cases this was true. But that never stopped clients and project managers from continually updating and innovating. The transience of the format (in the case of Direct Mail this meant the proximity of the waste paper basket) meant that unless you persisted in your campaigns you would more than likely soon be forgotten by your prospects. And at its most fundamental level, the very idea of ‘campaigns’ driving the advertising industry signified the incessant and enduring nature of conceiving and producing new and more creative content regardless of any new innovation on the part of the brand. So what if Coke is the same today as it ever was, we need to keep advertising.

Art Direction

Design online isn’t just there to inform an action. It isn’t just there to aid the completion of tasks or to better inform the UX. It is all those things of course to a lesser extent, but recently the concept of Art Direction online has begun to be seen as requirement when delivering the message and values of a brand. It is there in it’s own right, omnipotent (if that isn’t too grandiose a term) and independent of the function and form around it.

Art Direction in age of ad agencies was of paramount concern to a successful campaign. The simplicity of the medium (ink on paper) meant that an Art Director had little or no limitations on their craft, and it showed. They created messages that had no requirement other than to visually engage. Now compare that with a designer producing images for the web in the early 90’s. They needed to be aware of their medium, they needed to logically flow, form part of a navigation, or deliver complex messages over the course of a series of frames. They could only be so, big, or such and such a file size. They were, in short, a part of a construct (the site) rather than being of primary importance.

More recently though we are able to slacken these restrictions. We are able to deliver image content and messaging online with fewer limitations and

Collaboration

So lastly, the idea of collaboration. To my mind at least this is one of the most refreshing changes in the way online is delivered these days, and something which harks back to the traditional print teams I grew up with. In the early days of web design, the idea of a web team was a fairly loose one. There would be a designer, who probably did the visuals as well as code the HTML. And there was a developer. And more than likely that was it. In print, you had a copywriter, an art director, sub editors, and a team working on layout. Gradually as the web has matured we have learned that far more specialism are required from a web team to deliver the experiences we need and want, and therefore we have divided up our teams into areas of expertise.

So have we found ourselves going full circle? After 15 years have I found myself wrangling the same sort of things online as I was in Quark all those years ago? Well in some cases yes. What this demonstrates is that good, solid design principles such as those detailed above will always form the basis of visual design whether it be in print or online. It shows that an understanding of successful print design has more in common with web design than many people would like to think. Just as print design isn’t constrained to ‘A’ paper sizes, web design is increasingly adapting to an unpredictable array of display devices with flexible layout and typography at the heart of its success.

Learn the HTML. Learn the CSS. Learn the JavaScript. Learn as much of this as possible. But then put it down and read a copy of the Guardian. Read a copy of Jan Tschichold. Watch Saul Bass. And see that nothing is new.

It’s different, but it’s the same. And that's what I said. In a nutshell.

Posted

Link Tagger - An Audio Review for Boagworld.com

(download)

Andy: Hi there Paul and Marcus, it's Andy from Jellybean here. Just thought I'd submit a quick audio review of a sevice that I found recently which has proven pretty useful so far. I found it on the newly launched Google Analytics apps page with is google.com/analytics/apps.

This is a relatively new collection of bolt-ons, add-ons, enhancements for the Google Analytics service. One of the things that we've often found clients asking for is information relating to the popularity of file download on their websites. For example PDF's or .ZIP files, something like that. Also outbound links, mailto: links or cross-domain link tracking. And this is something that Google Analytics doesn't do, being as it is an on page javascript, it will only track page loads and page views. So the Link Tagger service has proven really really useful.

The website you want if you want to find out more is analyticsmarket.com/freetools/link-tagger, or you can find it as I said on the Google Analytics Apps page. What's great about it is that it walks you through the process, it asks you a series of questions related to the version of the Google Analytics javascript that you use. Also what sort of file extensions do you want to track? Do you want to track PDF's, Word files, Excel files, .ZIP files? It runs you through that process, spits you out a little code snippet which you will add into your include file or however it is that you have added your Analytics file so that it appears on every single page, and then it will simply include file downloads or mailto links into your regular analytics statistics. You don't have to tag every single link as you did. You don't have to work through sometimes scores of lines of custom code just to track simple things like file downloads. It's a really really simple service, took us around 5 minutes to get it in place, and for those people who do have files for download on their website that they want to track the popularity of, so far this has been the best one I've seen. Hope it's been useful, thanks again for the podcast. Bye.

Posted

PostMark App - An Audio Review

(download)

Posted

Cinematize - Product Review

Video Products for the Mac seem to be the most mixed of mixed bags. There are those written with the Mac in mind. Then there are those written for PC and then ported to the Mac. And then there are those that are cross platform and sit somewhere in the middle. As such, when you find an application that is designed well and is as robust and reliable as OS X it is a happy day indeed. When that programme also provides an easy way to rip DVD content to file as well, it really is the icing on the cake.

Cinematize is just that programme. Stick an encoded DVD into your drive, choose your rip settings and hit GO. Cinematize produces a digital file for you. Simple. Now you might think that there are a load of programmes that do that already, and so what on earth is the fuss all about. Well, I have the dubious pleasure of having to encode a lot of video during the working week and I can say that out of the programmes I have chosen, they are all garbage. Honestly. Either they produce preposterously large files, or they prevent you from selecting specific timecodes for extraction. In short, there has been a real gap in the market for a simple, reasonably priced application that just churns out good quality video, simply and in manageable sizes for agencies to work with.

$59.00 gets you the basic programme which currently runs on an old Emac here at Jellybean, so modern Intel Macs will run it will no problems at all. Stick your disc in and fire up the programme.

The first tab allows you to select your disc, select the chapter if there are multiple, and then manually select in and out points for specific sequences if you prefer. One click allows you to preview the selection, and finally you can choose PAL, NTSC, Mpeg 1 or 2.

The next tab allows you to choose the file format you would like your exported file, as well as ancillary options such as whether you want the audio and video together or as separate files, control the aspect ratio, quality and they even have some options for common devices and applications such as iPods and iMovie and Final Cut. A small moan would be that they don't offer the ability to type in a specific pixel dimension for your export, but it is a small gripe at that.

So there you have it. It's not the most exciting application ever, but it really does do 'what it says on the tin,' reliably and with good quality results. Clearly I'm a fanatic so I wanted to share this with you as it has been so tricky to find something this good in the past.

Visit the website here for more information.

http://www.miraizon.com/products/cine2features.html

Posted

What's So Special About You?

What's your point of difference as an agency or designer? What makes your customers choose you over your competition? Can you sum it up in 15 words or less? 20 words? Ever even thought about it?

Why would I come to you over and above all the other web designers that are out there?

That’s more than enough questions for an opening paragraph.

What I'm suggesting here are ways in which you can take a look at your current skills, either as a freelancer or an agency, and try and see if any of them might help you stand out from your competition and secure more work.

It struck me recently that many of the most sought after speakers at web design conferences are there because they have a particular area of expertise, and are therefore easily pigeon-holed in the minds of those people organising the events.

'We need someone on DOM scripting, is Jeremy Keith free?'

'We need someone to talk on CSS, give Andy Clarke a buzz.'

Having expertise like this has helped to build their reputations amongst their peers and also to keep them front of mind with prospective clients, as the go-to-guys for projects that require skilled input in these areas. They have set themselves head and shoulders above the rest by making it their business to publicise their abilities.

Now not all of us are as gifted as messrs Keith and Clarke, but we it's well worth a long look at your CV's to see whether you are making the most of your skills and experience. Never leave people thinking ‘so what?’

Here are some thoughts.

SWOT UP

Strengths, Weaknesses, Opportunities and Threats. Possibly an old marketing cliché, but a very useful exercise to identify exactly where you fit when compared against your potential competition. Complete these four categories for yourself, and then show them to a close friend or colleague and see whether they agree with your answers. If it's your own business, or you are a freelancer then you can often be too close to your own affairs to answer objectively, or even honestly. Ask your clients why they use you, because what you value may be very different to what they value! Be brutally honest with yourself here as you might uncover some uncomfortable truths, but then again you might outshine even your own expectations. The objective here is to find out how where you have scope to improve your service offering and to recognise where competitor agencies are perhaps stealing a march on you.

Skills

What are your technical abilities, your design abilities, your front-end coding experience, your back end coding experience? List everything down, from those you use regularly to those you haven't used in years. All this accumulated expertise will have a value to someone, somewhere. We're not looking for a list of software proficiency here ('I consider myself to be an ADVANCED user of Fireworks, but an AVERAGE user of Dreamweaver'), we're looking for a list of services that a client might not know you

offer. You use Mail Chimp all the time, so you need to highlight 'E-Marketing' as a service. You also use a proprietary survey tool and so you ought to really publicise 'Online Surveys / Questionnaires' as a service. Offering 'Final Cut Pro' as a skill on your website may mean nothing to a marketeer, who then goes elsewhere for 'video production and editing' or 'video case studies.'

Clients / Testimonials

Because let's face it, you would say you're a brilliant web designer wouldn't you? Of course you would. But we all want recommends from our peers don't we? People whose opinion matters. You might be able to hand code Javascript, but as a client I want you to stick to a budget. You might produce clean, accessible HTML but as a client who perhaps knows little about what this means, I just want you to be friendly, enthusiastic and easy to get hold of. Appreciating these concerns will get you far, and show you can see these from the perspective of those paying the bills. Find some happy clients you have worked for in the past, and ask them if they would mind being contacted by a new prospect so they can ask about the experience of working with you? Ask if these clients would mind writing a sentence or two about how great you are and include this in your tender documents and on your website.

Sometimes it is enough just to demonstrate how happy your clients are to set you apart from the competition.

Industry Knowledge

At the agency I work for, Jellybean Creative, we specialise in the food and drink industry. We know the market well and therefore we attract clients from that industry who are keen to benefit not only from our skills in design, but from the fact that we can target that design squarely at their audience. It's proven to be a successful strategy for us. And the chances are you may very well have a similar edge to exploit. Typically having an estate agent as a client will attract another estate agent client. You may very well have built up a wealth of experience in one particular industry sector, and through the pressure of jobs and the giddy pleasure of just being busy, failed to realise that you are an expert web designer and e-marketer for the fashion / property / restaurant / education / insert industry sector here.

Budgets

Everyone has one whether they know it or not. And every freelancer or agency has one. They have a limit for jobs, under which it simply isn't worth tendering. Depending on your size and overheads, most agencies or freelancers will have at least a notional idea of their minimum budget for a web project. That said, you need to know (if you don't already) what this figure is for you. Furthermore I would say you should know what it is for you to break even on a project, and for you to make profit from a project. As a freelancer or a small agency you are going to be able to tackle sites that medium size enterprises won't be able to get close to, and these low hanging fruit might just come your way after being turned down on cost alone. If you can publicise your rates on your website, or provide a 'package' style service then you will find that cost-conscious clients will be far more willing to approach you based on this.

Be Realistic

If (and I'd love to think you would) you have considered the points above, and decided that after racking your brains and chewing the end of your pencil, you are just a good, all-round, reliable web designer with nothing really that unique about you, then that is fine. Don't whatever you do make anything up to try and 'remedy' that. Don't try and pitch yourself as an expert in complex shopping cart solutions if you aren't one. It just might be that you need to pitch yourself as the 'friendly designer' / 'the reliable' designer / 'the designer you can trust' - humanising what is a complex, confusing, and often impersonal business (what if anything, are more impersonal than computers?) is always going to be a step in the right direction, especially for a freelancer or partnership that may struggle to get face to face with clients.

IMPLEMENT THEM

So you've gone to the trouble of finding out what sets you apart, what opportunities you have to exploit, and what your key expertise ought to be in eyes of your prospects, how do you go about putting them into action? Some thoughts you might like to consider.

Reinforce your Position

If you decide that you need to reposition yourself as a ‘Creative Facility’, more than say, just a ‘Developer,’ then you need to reinforce this as often as you are able. Be sure that when you meet clients or prospects that you consistently and regularly reinforce yourself / your agency as a 'Front End Design and Development Facility'. This needs to become your byline, your audio slogan, so that it trips of the tongue whenever you describe your services to anyone.

You can change people's perceptions of your services just be ensuring that 'Front End Design and Development' becomes the byline for your work. It might sound obvious, but the act of describing yourself in these terms to people, compared with just printing this on your stationery is significant.

Promote Lesser Known Skills

This can be a hard one to achieve. As a freelancer or a small agency, you’re more than likely able to tackle tasks competently, that in the eyes of a client might seem to require entire departments. You handle e-marketing campaigns for example, and yet your client uses a large London agency that employs 100 staff to handle e-marketing campaigns. But you want their work, and yet you have to convince them that you can tackle this, probably better than the London agency, as you will manage it with your usual one-on-one dedication that you have handled all their work up until now. Well on this one you may just have to offer to tackle a small project at cost, or perhaps even for nothing, with a promise that if you come up to scratch you will have a guarantee of work to follow. It's only fair to assume that clients will be a little wary of placing work with you that they have not yet tested you on, and only right to think that sometimes, as with any acquisition, there is an opportunity cost to be met.

Say Something Nice

Clients are simple creatures when it comes to tender processes I find. Do I like the design, can I afford it, do I like you, and can you do it in time? Not necessarily in that order, but that really covers off most eventualities. Now I might temper that by encouraging clients to be wary of anyone who can start right away or is the cheapest in any round of cost proposals, but then as an agency I would. Try instead to replace some of your standard 'blurb' in any tender proposal with some testimonials by satisfied clients detailing real world business benefits that you ideas and applications have delivered. This more than anything speaks to a client, to someone with a business objective who is influenced more by their peers, than by your (quite genuine and well founded) proficiencies in the latest web technologies.

Get Personal

A life stuck behind a screen is more than likely, an all too common experience among people involved in the web. It's a fact that as designers and developers we are rarely client facing within agencies, and freelancers are often too busy doing the work to get out amongst those who pay the bills. I'd probably rate this as one of the most important changes anyone can make to improve their perception amongst clients, and in doing so, generate more work. This side of the business is felt all too often by clients, especially those who may not be as web savvy as they might be, but still have the job of maintaining the website and therefore dealing with you. Try and get client facing as often as you are able, discuss projects face to face, and try and demystify the process of web design for them. If you can demonstrate, face to face, new technologies and features that you have developed for other clients, and you will find that merely by 'being there' you will pick up work that might have otherwise been shelved or tendered elsewhere.

If I've learnt anything from iPhone applications, web services such as RSS, content management, e-marketing, e-commerce, social networking and the like, it's that as web professionals, we need to know and do a lot to remain competitive in the marketplace. With that in mind, it’s never been a better time to look at your competitive set and see where you can offer a real point of difference to your clients – something that makes you, you. And once you know what it is, be sure your clients are aware of what it is, and how lucky they are to have it.

Posted