Developers and designers unite!

One agency, two cultures

Our office is full of incurable coffee and tea addicts, and, as we take turns to serve up beverages, we keep a list of everyone’s preferences. The variations are many – vivid green, black as sin, sweet to the point of tears and so on. But there’s a pattern: almost every developer in our office takes sugar, while the designers don’t.

I once suggested that developers, in difference to designers, need energy for late hours and harsh deadlines. That idea found some support, but the list also made me reflect on a more genuine issue found in many web design agencies: the split between designers and developers.

Designers and developers face disparate challenges and work in different ways. Many companies have found ways to bridge this split: some employ mavericks who can juggle both roles, while others use agile development and rely on close co-operation to prevent snags.

However, some agencies are strictly waterfall model and don’t promote collaboration. This is understandable; treating interface design as an isolated process has worked for a long time. As long as designers had a grasp of technical possibilities and constraints, it’s been a straightforward route – until now.

New times need new tactics

Our use of the internet is undergoing fast and wide-ranging change. For a long time, a screen was a screen, and when web-capable mobile phones became common, dedicated sites sprung up. Now that smartphone sales are seeing massive growth, solutions that cater for all devices are becoming important – but such solutions can be complex.

At the same time, trends and possibilities in web design change on a weekly basis. Some predict that we'll see more large images while others argue in favour of minimalistic websites. The role of typography is being rethought and scalable graphics are on the rise.

In order to produce websites capable of meeting these new demands, programmers and designers must break away from dated workflows and get savvy about how the other team works. Otherwise there’s a greater risk for problems that delay projects, annoy clients and lead to finger-pointing.

A good start is to be aware of why conflicts happen. Here are a few common causes for problems and ways to prevent them:

1. Chronological consequences

First impressions matter, and designers are required to cook up striking designs that convince the client. In pitches, the suggested look and feel of a website can secure a project. Concepts, even at the wireframe stage, set expectations and start discussions.

Meanwhile, developers must build, test and deliver the promised product. Their deadline is the deadline. A website without functionality isn’t even icing without the cake; it's merely an idea of a cake. While late changes and unexpected additions can take hours to mock up visually, producing these elements can take days – or be outright impossible.

This can result in the nightmare scenario when features that in the design stage amazed a client turn out to be undeliverable. Such mistakes easily sour relationships, and also damage chances to future assignments from the client.

Solution:

Run all proposed designs by the responsible developers before presenting these to a client. Even the most experienced designer can accidentally propose unworkable features that trip up development. Whether producing wireframes, designing in a browser or drawing sketches, make sure all ideas are technically feasible.

2. What you see is … not what you expected

Until a website is live, its final appearance is a vision in the heads of all involved. For that reason, there’s a risk that the final version is far from what the client anticipates. Therefore, many agencies work closely with their clients.

The same pitfall can appear during production if designs and planned functionality are misinterpreted. Lack of instructions passed on along with the concepts may lead to guesswork, which can be frustrating and time-consuming.

Also, unforeseen factors crop up in almost every project. Browser quirks and adaption to certain screen sizes can require developers to come up with ad-hoc solutions. These fixes might need to be based on the website’s general appearance as they typically have to be done before launch.

Solution:

Designers should provide developers with enough guidelines to make production easy. The onus is on the designers to make sure they have covered all thinkable parameters. Two areas that need extra attention are those that designers are picky about or, sometimes, completely overlook. For example:

• Specify padding and margins in every mode of the layout, from HDTV down to small and old mobile phones
• List all colours of fonts, backgrounds, panels and so on. Include white and black so that developers don’t have to guess or sample
• State every font that is used and where these are displayed
• Error states and validation messages must be taken into consideration so that they don’t wreak havoc with pixel-tight layouts
• Animations are especially important – do they work as intended in all resolutions?
• Maximum text lengths must be identified so that layouts aren’t broken by unpredicted 200 character headlines

In turn, developers should be in frequent communication with designers when the code is written. Assumptions can save minutes but require hours or tweaking when things go wrong. At every uncertainty or ambiguity, chase down the designer and ask for a quick clarification.

This not only prevents glitches; regular discussions also challenge involved parties to question ideas and consider new approaches. The end result will be all the better for it.

3. All those precious features

Most of us are prone to favouritism to some degree. Commonly, designers have preferred colours, fonts and structures while developers have favourite workflows and practices. This is to be expected and often makes life easier. There’s no need to upturn tried-and-tested ideas.

But, occasionally, small design details turn into major obstacles. The exact alignment of a textbox or ideal repositioning of an image can demand huge efforts. If the client has signed off the concepts, backing down can look amateurish and, at worst, risk the assignment. Cue sighs, frowns and late hours.

Solution:

Check your darlings at the door and prioritise objectives over objects. The Holy Grail is a usable, visually appealing and technically flawless website. Never let irksome elements or minor details turn into absolute must-haves unless the entire website hinges on them. Instead, be prepared for reversals, repeated changes and complete overhauls.

Also, tread carefully around ultra cutting edge features as it may daze prospective clients. Read up on requirements before offering first-of-its-kind contraptions. Unscheduled weeks of bullet-proofing code to make extravagant visual effects work in Jurassic browsers don’t make for happy developers.

More ways to sidestep problems

There are a number of ways to improve communication and grease the cogs of everyday development. Notably, most of these work in all areas of life. Here are a few examples:

• Be humble and know your limitations. Asking for explanations or confessing that something is unfamiliar signals professionalism, not inexperience.
• Clarity is essential. When briefing someone from another professional role, weed out heavy terminology and get to the point in a tactful way. What is obvious and trivial to one person may be utterly invisible to someone else.
• Never, ever take a change as a personal slight. When time is short, leave your ego at the door (right next to that red-hot special feature).

Lastly, add some sugar to your coffee

Or, depending on where you come from, leave it out. If you’re a designer, learn the basics of web programming and databases. If coding is your trade, read up on rudimentary graphic skills. What you discover will make you a better team member – and pave the way for hiccup-free development.