5 Tips for Effectively Communicating Web Design Concepts with International Developers

Thursday, 25 February 2010

Most designers will be all too familiar with the communication issues that can arise between the creative and development teams in an online design environment. Fundamentally the characters involved in each department are polar opposites. Priorities will differ and a happy medium needs to be struck between the two parties if the best result is going to be achieved.

The debate between these teams rarely stops here at Zeta. We work through our individual desires together for each project and by listening to one another (with the occasional raised voice) we achieve results that we can all be proud of.

However, workflow can sometimes dictate that we need to outsource development to one of the many extremely talented teams that Zeta occasionally work with externally.

Getting your design vision across when elements cannot be discussed in real-time  and face to face can be tricky, so here are a few of the techniques we use to help communicate our work in order to minimise project time scales and deliver outstanding results on budget.

1. Layer Comps

layer-compsPhotoshop layer composites are all too often neglected by designers. Developers should not have to manually turn layers on and off to find different elements or pages in your design. By learning to use layer comps correctly you can be sure that your work is being viewed in the way you intended. It will also cut down the weight of your psd. You do not need to duplicate layers when they have different styles or positions. Layers comps will do all of this for you. There are also scripts attached to these layer comps (accessible via the file menu) which will automate saving the different stages of your design in one easy click.http://www.adobe.com/designcenter/photoshop/articles/phscs2mrlaycomp.html


2. Photoshop Animation

When designing motion elements (flash/javascript etc) it’s useful for both the designer and developer to animate the interaction roughly. It can give you a much better idea of the user flow and conveying movement in words only is asking for trouble, even basic movement is better than a static storyboards and descriptions. I’d advise you to create a separate psd for your animation file though because merging and rasterising multiple layers can become useful when animating.

3. Design Elements psd
Separate your websites interactive elements into one psd. One file with your buttons states will save a lot of time later in the project. Think about disabled button states, default, rollover and visited styles. The more information you get across at this stage the happier you’ll be with the results.

4. Collaboration Suites
Being able to annotate your work and explain design elements to developers is crucial. Remember as well that’s it’s a two way street, you shouldn’t just be telling people what to do. Any creative process is improved when all the parties involved feel their opinion is valid and if you can’t have that conversation in real-time somewhere to have a creative conversation is vital. There are several creative collaboration suites to choose from. Here at Zeta we use Concept Share. I can highly recommend it.

vimeo5. Screen casting
Ever taken instructions off someone and wished you could listen to what they said just one more time? Notes from phone conversations never cut it, so screen cast your thoughts and send a video. Your developer can take it one point at a time or go back and clarify points as and when they chose. You don’t get inundated with questions and the developer knows exactly what they are doing, everybody’s happy.

Communication is key in any creative environment and in my experience these are definitely some of the best ways to work smarter rather than harder when overseas development is necessary.