Design at paulcarvill.com, the home of Paul Carvill on the web

Hi, I'm Paul Carvill, I'm a web developer. I'm currently working as Technical Lead at LBi, Europe's largest digital agency.

I also like walking, cooking, Bollywood and rock 'n' roll.

Archive for the ‘Design’ Category

Internet time

Tuesday, June 8th, 2010

Me and @agentdeal have both recently been noticing an increased interest in analogue clock-based time interfaces on the web. Pleasingly, the practice has been implemented across web development disciplines, proving that it’s not just loopy Flash developers who spend their time making utterly pointless widget-y gizmos — even Steve Jobs and his panting army of fanboys can have a go!

The trend seems to have started with bbc.co.uk’s lovingly crafted piece of old test card nostalgia, made using Canvas:

It continues in spectacular fashion with the new Times paywall site thetimes.co.uk, which has a heartbreakingly pathetic laurel-wreathed carriage clock, rendered in Flash, updating in real time, presumably sitting atop a digital mantelpiece as a retirement gift to the online news industry:

The newest kid on the block, and definitely the showiest, is the timezone-straddling multi-clock Flash display of Globe Trotter, purveyor of hand made luxury luggage:

What fascinates me about all this is that surely every single example here and elsewhere is completely redundant. Is there a device anywhere that doesn’t display the time and/or date somewhere in the interface? I’m pretty sure that anything running a web browser also has a clock or calendar in view a mere eyeball movement away. But that is what makes these internet clocks so great — each is a conceit made of whimsy and I love them.

Tags: canvas, clocks, flash, time
Posted in Design, Development, Web, Web design | 1 Comment »

Why front-end developers are so important to the future of businesses on the web

Thursday, September 24th, 2009

or How traditional businesses who have moved to the web regularly undervalue their front-end web developers, and are worse off because of that

Distinction
The roles of web developers and web designers have been around for over 15 years now, and the role of a client-side or front-end web developer started to mature into a distinct entity around 10 years ago, as the content-presentation-behaviour layer paradigm became embedded in people’s working methodologies (and, with the introduction of Google’s then-new search algorithm, when the need for cleanly structured, easily indexable pages became, for businesses, not just an aspiration but a necessity). Unfortunately the perception of the front-end developer’s role remains somewhat coloured by an early association in observers’ minds with the other, loosely related role of the web designer. The role of web designer is an extremely important and valid one, but it is very different to that of the web developer, and the lack of a clear distinction between the two, in some people’s perception, is unhelpful and does both roles an injustice.

Skill set
The web developer (sometimes also called a client-side developer, front-end developer, web architect or front-end engineer) has a huge skill set and a job description to match. They are often expected and required to excel in many disciplines, and have good working knowledge of many others. They exist at the point where art, design, interaction, programming and behavioural and performance analysis intersect. Given the time, support and ambition of a good business, being a web developer can be an extremely fulfilling job. However, the role of a web developer is often misunderstood within even the most progressive and well-meaning of businesses.

Perception
The danger can be that front-end developers, working in a user-focused area, are seen as performing a superficial function — applying a polish to the heavy lifting done by another developer, say, or that dread comment, “making things look nice”. Let’s be clear, making things look nice is the sole responsibility of the designer. When front-end developers spend much of their time deploying underlying data received from a backend database into their views, or pages, they might mistakenly be thought of as merely translators or interpreters, transferring a graphical image — the Photoshop-ed design — into markup and style rules, purveyors of what is sometimes almost mockingly referred to as a ‘black art’ of making pixels lay out correctly onscreen. While this perception is perhaps unfortunate, it is understandable. It is a particular problem where a development workflow is — some might say artificially — segregated into database infrastructure/domain modeling/server side workflows/front-end workflows. In smaller organisations a front-end developer has the opportunity, if she wishes, to input into any of these areas. In larger organisations, the increased granularity of functional areas means those opportunities are greatly reduced, and as you can see from the segregation model above, the front-end development work comes at the end of a long chain of events and decisions which essentially shape and restrict the front-end developer’s choices.

Frustration
In such cases the development workflow is one-way, negates the developer’s architectural, organisational and behavioural skills and occurs late in the development process. This chronology minimizes the opportunity for the front-end developer to have effective input into, and feedback from, the interaction design they are now expected to code. This is a sad state of affairs and undoubtedly leads to frustration, feelings of being undervalued or ignored, and an extreme cases disenfranchisement and resignation, either in the figurative or practical sense. A good business will understand how highly-nuanced user behaviour is, and value skilled interpretation and shaping of that behaviour in the interests of improving their digital offering.

Value
The modern web developer has huge amounts of value to offer a business. Indeed the type of professional you often find in this role encapsulates the very best the web has to offer:

up-to-date knowledge of available and emerging technologies
extensive experience of implementing de facto web standards and programming patterns
database configuration and data manipulation
implementation across multiple platforms and legacy software applications
provisioning for mobile devices
data aggregation
graphics sourcing and creation
search engine optimisation (SEO)
a thorough understanding of the aesthetics and parameters of designing for the web

Further, the best web developers have wealth of knowledge and understanding around interaction design, user needs, hierarchies of data, navigation systems, user journeys, wireframing, design brief interpretation, focus group and usability testing and the art of a finely polished product. Largely gone are the days of HTML-monkeys, spending days on end converting Photoshop comps to pixel-perfect layouts. A web developer’s role is broad: from developing in what Yahoo!’s Nate Koechley calls ‘the world’s most hostile development environment’ — the browser — and ensuring cross-platform and cross-browser consistency, to working with art directors and designers and remaining true to their vision, to considerations and implementations of accessibility, usability and the overall user experience. A web developer is responsible for everything that sits on the client side of the web stack — the content, presentation and behaviour layers. Few other roles touch so many other key aspects of a business as does a web developer’s. Good businesses realise what an asset they have in their front-end web development team, and welcome their input into the product development process. Even better businesses have a User Experience team which encapsulates all those values, skills and judgements necessary to make great websites. Members of those teams are part of a feedback loop that results in great products, not just acceptable implementations of the first good idea that came up.

Slow
Large businesses and organisations move slowly. They may find it hard to understand they have developers whose skills and interests cross the boundaries their job descriptions impose on them. In addition, large businesses like to modularise their development teams into clearly segmented areas for planning and accountability. End-to-end developers don’t really fit this business model. Web development, certainly rapid prototyping at least, is moving away from monolithic relational database installs and towards schema-free, fluid data repositories like CouchDB and MongoDB. Many other layers of the application stack are now capable of being managed by a web developer. Most developers of this ilk, who are able to own the whole process from from domain and model definition, through to server infrastructure and on to a useful and appealing user experience, are running their own consultancies or are employed by the more enlightened web properties. Some examples of this type of person are Jeff Croft, Dan Rubin, John Resig, Jeffrey Zeldman, among many others. Functionality, data storage and interaction are increasingly moving to the client side (HTML5, Gears, RIAs, iPhone and Android web apps). The web stack sits on top of any technology, making the web developer one of the most versatile members of any business, let alone the technology department.

Undervalued
Unfortunately my experience has been that most large businesses massively undervalue their web developers, employing them in narrowly defined roles as the guys who make the site look nice, or fix the Javascript bugs that make the page break in IE. Larger business and the public sector have made moves towards working seriously on accessibility and usability, but the thinking behind such strategies remains superficial, those conceptual areas misunderstood. Too many people think of them in terms of awards and rating levels, not in ongoing process of improvement. Most of this work is also likely to be outsourced to a specialist third-party.

Career progression
One further, worrying, complication is the lack of clear career progression for front-end developers. Once you’ve spent a year or ten working in every nook and cranny of every browser out there until you can code progressively enhanced web pages blindfolded, what next? Economics and management structures mean there’s only so many architect or senior engineer roles to go round. The other option is to specialize in something and move forward from there. Current trends would seem to be leaning towards a big need for performance specialists in the next 5 years, as the client side moves ever further towards accommodating distributed, complex web applications. Page views will also continue their inexorable rise, placing stress and demand on infrastructure, databases and hardware, and thus even greater stress on a fast, responsive user experience.

Know your value
What does this mean if you’re a front-end or client-side web developer? Know your value. What are your skills? Are you a developer, an engineer, a User Experience architect or an Interaction Designer? Advertise your value. Shout about it. Don’t be knowingly undermined or ignored. Create a User Experience team within your business. If they’ve already got one, join it! Your job is incredibly important, and your present employer needs to realise that, as they stand to benefit.

Updated, 29th September 2009: just fixed a couple of typos

Posted in Browsers, Design, Development, Internet, Usability, User Experience, Web design, Work | 55 Comments »

The Flash user experience is regularly awful

Friday, September 18th, 2009

If the Adobe-Omniture deal means anything it’s that with feedback from behaviour tracking Flash developers might finally get around to addressing their applications’ regularly awful user experience.

Designers of Flash apps and widgets seem to go back to the drawing board every single time they make something. They start from scratch each time, creating new and confusing user interfaces to reflect whatever the fashionable paradigm of the time is — whizzy, futuristic dashboard? No problem! Over-elaborate transitions? Easy-peasy! Flash intro on your splash page? No sooner said than done (but is it still 1999?).

The problem with this approach is that with each new app and its innovative bespoke interface, users are regularly forced to learn a new method of navigation. The web has well-established, native patterns of interaction that do everything you need them to. Discoverability, when implemented correctly, is a finely nuanced mechanism for delivering complex systems to the user. But Flash apps are too often clunky, unnavigable, hastily put together bits of software designed to capitalise on trend and satisfy business interests keen on some thing ‘jazzy’ or ‘funky’. Way back in 2000 Jakob Nielsen said that Flash was 99% bad, Flash encouraged design abuse, and made bad design more likely, and not much has changed since he made those statements.

Flash applications avoid many established design patterns, are often explicitly designed to be impermanent, and regularly lack fallback content in the instance of the correct plugin not being installed, but these issues are rarely considered by a business pushing for a snazzy new feature they can parade before their board.

Hopefully the Adobe-Omniture deal will set off a new era of closely-monitored stats which might prove useful in finding where Flash applications and interfaces could be improved, and where using web standards to build a long-term solution might prove a more fruitful endeavour. Of course, Flash analytics can currently be recorded by other analytics tools such as Google Analytics, but Omniture is a far bigger hitter on large scale websites, and where influential Flash design is needed the most in order for good practice to trickle down into common usage.

Tags: flash, webstandards
Posted in Design, Internet, Web design | Comments Off

How to do music lists

Monday, March 16th, 2009

How to do a list of songs on a newspaper or magazine website:

The Guardian’s 1000 Songs Everyone Must Hear — comes with Spotifiy links, a lengthy review of each song by a panel of music journalists a crystal clear layout and a handy export list to HTML widget.

And how not to:

The Telegraph’s 100 Greatest Songs Of All Time — in which the adjudicating panel of one – Neil McCormick – hilariously abandons grammar in favour of enigmatic SMS-length capsule reviews. Sample description of The Doors’ Light My Fire, “Provocative, sensual, slinky song weaving erotic desire.” And another one of U2’s Still Haven’t Found What I’m Looking For: “Gospel rock hymn of doubt and spiritual quest.”
Esquire’s 50 Songs Every Man Should Be Listening To — let me get this straight: you want me to click through at least 50 times, even more with ads, and if I haven’t heard the band you’re talking about the onus is on me to wade through the internet to find one of their songs to listen to? OK, thanks.

Tags: songlists music
Posted in Design, Internet, Music, Web design | Comments Off

The Internet Fridge delusion

Thursday, October 23rd, 2008

I sat through a debate on Tuesday night that was more interesting for its audience and positioning than it was for its addressing of the motion — ‘the internet needs magazines more than magazines need the internet.’

The debate was held at the London College of Fashion just off Regent Street, and was organised by the British Society of Magazine Editors and editorialdesign.org. The audience was evidently a non-technical one, keen on understanding how the whole magazine/internet crossover thing might work. My colleague, a designer, later commented that the room was full of fear, fear that everyone’s hard won Quark or InDesign layout skills would prove insufficient for the brave new technological world. And rightly so.

The panel was made up of a variety of figures from the print world, some of whom had made forays into the web. It became obvious that we were in a decidedly nontechnical audience for whom the internet was an unknown quantity and whose main concern was replicating the magazine experience in web form.

Straight talking David Hepworth, the esteemed editor of The Word magazine and co-founder of such titles as Mixmag, Smash Hits, and The Face, nailed the argument with the night’s opening statement. Do not attempt to reproduce the magazine experience in web form. The printed word is glossy, definitive and final. The web is none of these things. To work on the web, said Hepworth, your offering must have humility, economy and personality. At least two of those things can be said to be absent from the UK’s magazine culture, with the third possibly endangered in the vast majority of the output.

Then at one point the discussion descended into one of gender politics stemming from the unfortunately all male panel.

The most glaring misjudgment, however, was uttered by Paul Kurzeja — creative director at Redwood, the world’s biggest customer publishing agency. Declaring the future to be one of technological revolution and infinitely diverse media, Kurzeja invoked that most misguided of delusions — YOU WILL HAVE THE INTERNET ON YOUR FRIDGE.

Why does this crazed obsession with the assumed permeation of technology into every area of our lives persist? I suggest it’s more an allusion to the quotidian nature of the fridge, the kitchen and its intrinsic presence in our life. It also assumes that we all have a huge, family-sized tank of a fridge, big enough to fit a screen on as well as an ice-crusher, smoothie-maker and little Rupert’s simply darling hamfisted scribbles supposedly meant to be Mummy and Daddy. But, really, I think the ‘empty bottle of milk’ is a perfectly adequate graphical model for the average consumer to reference when considering whether or not to buy more cow juice. Don’t you?

Tags: Internet
Posted in Design, Internet, Work | Comments Off

Hell yeah!

Thursday, September 20th, 2007

I saw Helvetica, the film last night with some like-minded typography wonks from The Guardian, and can say that it’s entertaining, informative, revealing and suprisingly funny.

The film starts with a typesetter arranging metal letters, and goes on to tell the story of how Helvetica originated, how it got its name, and how it came to be used so ubiquitously. It’s expansive, too, and also give insights into the typography design process, and the very philosophy behind type and visual design and communication.

The most interesting aspect of the film is how passionate all the interviewees are. The great and good of the design community are all present – Erik Spiekermann, Matthew Carter, Massimo Vignelli, Wim Crouwel, Hermann Zapf. Vignelli adores it and speaks bitterly of “the disease of post-modernism”. Michael Bierut coughs up a hilarious distribe about how corporations from the chintzy 50’s would crawl across a dry, dusty desert to get a new design featuring Helvetica as if it was a long, cool glass of icy water. His “It’s Helvetica. Period. Any questions? Of course not” had people rolling in the aisles. Spiekermann compares using it to eating crap at McDonalds “just because it is there”.

The DVD, out November 6th, is apparently twice as long. Watching the enthusiasm of the designers here, not just for Helvetica but for their work in general and the history of their profession, I’m not surprised theyre is so much good footage. I’m looking forward to it.

And my view? I find Helvetica perfectly unambiguous, the ultimate signpost typeface. It is capable of imparting the minimum required information without enhancing or colouring the message. It does not impose itself upon the information it delivers. Corporate America loves it – used in small amounts in logos and posters it provides a solid, reliable standard. Used in larger quantities, however, either contained within one design or as a result of widespread use, and it loses strength through the very thing that provides its modernist power – pure, balanced, standardized anonymity.

Posted in Design, Film | Comments Off

Chocoholic

Saturday, June 30th, 2007

My taste for fine chocolate is well known, but it reached its apogee this week when I purchashed a one of Rococo Chocolate’s ‘Artisan Bars’. These are handcrafted, organic bars of rich, dark chocolate, flavoured with botanical ingredients. I went for the cardamom flavoured bar. It was delicious.

The product packaging was what, as it so often is, initially caught my eye. This is an age obsessed with the infantilization of marketing strategies – see Innocent smoothie’s childlike whimsy, Orange’s playschool style cardboard cutouts, E4’s forced “tellybox” slang, and many more.

But the wrapper of this bar is exquisite. Printed in monotone blue, it features etchings of chocolate bar moulds and motifs from a 19th century manufacturer’s catalogue, complete with dimensions and weight measurements. The whole thing is then wrapped twice around the bar, completing a simple, understated yet luxurious feeling package.

Top marks Rococo!

Posted in Design | Comments Off

The Damned

Monday, June 18th, 2007

A quick post to note how much I admire the jacket design of David Peace’s remarkable novel “The Damned Utd”. Successful jacket design is a mysterious alchemy of elements, somehow blending the essence of the book with eye-catching salesmanship, whiel at all times avoiding being overly literal where imagery and graphics are concerned.

The jacket image, attributed to Peace himself, brialliantly conjures up the animosity and hatred felt towards the championship winning Leeds team. Black graffiti daubs across their eyes, and the eyes of their manager, Brian Clough, further expose the subject’s final unknowableness. Did this man hate them, and himself, so much he was willing to destroy them?

Posted in Design | Comments Off

Innovate! And vote for me?

Wednesday, May 16th, 2007

I’ve submitted a poster design to the competition to find an artwork celebrating the theme of “Innovation” for the Manchester International Festival, to be exhibited and distributed at the festival and around the UK.

The Manchester International Festival is the world’s first festival of new, original and innovative work. Hosted and inspired by a city synonymous with creativity and invention the festival is part of the PlayStation Season – where the brand works with globally renowned public entities to engage and excite not only their core audiences but also those that have traditionally sat away from the cultural mainstream.

The winning poster will be selected by leading Mancunian innovator Peter Saville.

So, click the poster image above, or the other image below, read all about the festival, and if you like my poster then please VOTE FOR IT!

Tags: innovate manchester poster
Posted in Design | Comments Off

Guardian redesign

Thursday, May 10th, 2007

The Guardian today debuted its long overdue redesign, albeit restricted mainly to the homepage prior to a network wide rollout. I wonder if they chose today specifically for the launch, with the widespread prediction of Tony Blair’s resignation announcement certain to cause a peak in traffic. Good timing, whether it was intentional or not.

Importantly, the redesign meets multiple goals: satisfying users, by updating and maintaining technology trends; keeping advertisers happy with more and varied ad formats; and for once the homepage at least is completely standards-based and accessible, making use of CSS and separation of content and data layers to produce a page that is viewable across multiple platforms and media. Well done the Guardian, at long last.

The new look continues what the Travel channel started. The wide page layout takes full advantage of today’s increased resolution and screen size. It also allows the introduction of larger and more varied ad formats, for example the two 300×250 MPU flash ads seen on the page now. Page width is major design decision when sprucing up a site after a number of years, as it affects every other design choice made subsequently, and undoubtedly follows much analysis of weblogs and user agent (browser) stats to ensure the site is meeting and keeping up with its audiences technology standards.

The site is structured with three equal columns, the first two holding most of the new and heavy content, the third a mix of featured items, text ads, sponsored items and a couple of navigations for the remaining bits and bobs not held elsewhere. This new structure had both strength and weaknesses. At first viewing there seems to be little differentiation between hard news and sport/travel/lifestyle sections. Indeed, when I viewed the site late last night and early this morning there was no hierarchy present in the news section at all. There was no distinction between the main story and the others – all news items were presented equally sized in a list format. Once the huge and expected news of Tony Blair’s resignation plans broke this list was soon updated to a more familiar top story/secondary stories arrangement.

One benefit of this new structure is that sections other than news get much more of a “boost” than they had on the old site, filtering traffic through the paper’s vast mine of content much more equitably.

Colour coded sections split the content up nicely, although it remains to be seen if this follows through to all the channels. Travel, for instance, is represented by a vibrant blue (#11B1FF) on the homepage, yet on the travel channel itself the channel highlight colour is a slightly more muted shade (#0099CC). A small niggle, but an inconsistency that the observant might pick up on, especially if the user is expected to identify the channel and the colour with one another, even at a subconscious level. The promotion in visibility of the various sections reflects the increasingly diverse nature of the Guardian’s online offering

Barring the elegant Georgia serif headline font, the site makes no concessions to its paper version. It is its own thing. This seems to be editor Alan Rusbridger’s vision, that it should stand alone, even though the paper business is currently supporting its expansion, and rumour has it that journos are upset at the attention the editor spends on it compared with the more traditional paper business.

Some nice touches include the “last updated” strapline under the logo, and the section at the bottom of the page that aggregates the various formats of news delivery Guardian readers can enjoy – G24 pdf, RSS, digital editions etc.

Early responses to Guardian Unlimited Editor-in-Chief Emily Bell’s blog about the “next step” of the site seem to be largely negative. You might expect this to be a natural response to change, even among the Guardian’s supposedly more progressive readership. I expect users will grow accustomed to the site on its more expansive platform over the next view weeks. Hopefully the rather jarring transition period for updating the rest of the site will be short.

Comparisons to the The Times Online or NYTimes.com, both of which had recent makeovers, are inevitable, although this is mainly down to similarities such as increased page width and white space, grid designs and coincidental timing, nothing more. Given the lengthy lead times in web development it would be harsh to criticise the Guardian’s developers of plagiarism. The majority of these changes are technology-led, and as such are bound to resemble new and recently updated sites that are out there.

To sum up – a good, and long overdue, redesign. Clean, clear, fresh, vibrant and varied. And standards-based and accessible, something it is almost indecent not to be at this point in the evolution of the web. There’s plenty of work to do in completing the site overhaul, and ensuring consistency of user experience and site behaviour, and I look forward to all of this, and any new surprises they want to pull on us.

Posted in Design, Internet | Comments Off

Design at paulcarvill.com, the home of Paul Carvill on the web

paulcarvill.com