Collaboration Tips for Designers Working with Developers

Jan 7 2010 by Chris Spada | 32 Comments

As the web design field opens up more and more to designers with a limited technical knowledge, the prospect of developing a website can seem like a staggering and scary feat. This may seem even more difficult if you are new to working with developers who will be engineering the website to your design specifications. In this article, we examine some fundamental tips and tricks to help you work with developers and ensure your designs are pixel perfect. I’ll assume that you’ll be using Photoshop, but all these principles apply regardless of what design tool you use.

Collaboration Tips for Designers Working with Developers

I will be quickly moving across several topics so feel free to add your own tips in the comment section.

1. Have a solid plan

Have a solid plan

The saying "failure to plan is planning to fail" rings all too true in web design and development. Having a game plan is essential in creating successful websites, but more importantly, when trying to make sure a developer understands your expectations.

One great way of avoiding this miscommunication is having a developer review your wireframes before you invest any time in designing.

This is a great stage to ask your developer questions like, "Is this possible within our budget" or "do you see [insert your concern here] being an issue?"

2. Hand off a good mockup of your web design

Before firing up Photoshop and starting on a design, there are graphical elements to be mindful of.

Grid system

Grid system

We want to ensure that our site will be compatible across different resolutions, so utilizing a 960px grid system is a great way to avoid any surprises when the finished website is viewed on various monitors. Using a grid system will also provide a structure for you and your developer to make sure your design stays perfectly aligned. Using a gridded layout is the easiest and best way to get pixel-perfect web designs. Grid-based layouts also provide a way for you to streamline your design processes because a lot of guessing and obsessive tweaking is removed from the workflow.

Layouts that scale with the growth and changes of a website

One important point to be aware of is that your website, once it’s launched, will take on a life of its own. Whether a client has additional content they want to add, or the site is ready for the next phase of development, it is important to have an idea of how your site will scale and grow.

How will your layout be affected if five more paragraphs of text are added? Does your navigation allow for additional pages to be added? Theses are some questions to ask yourself and have answers for once you begin working with your developer.

Organization of the mockup

There is a lot to be said about a well-organized Photoshop document. Organizing your document in a clear and consistent manner allows your developer to easily locate and disassemble your design. This can be done by organizing your Photoshop document with web related naming classes. For example, you may want break your design down to elements such as header, main content area, footer, and sidebar. You may also want to group your graphics accordingly in a logical manner.

Additionally, a well-arranged and modular Photoshop document means that you should be conscious about separating elements as much as possible into layers; there’s nothing worse than trying to isolate a piece of the design, only to find out that it’s merged with other design elements.

This may seem obvious, but you might be surprised how much development time will be saved by staying organized.

On this note, it’s also essential to make sure that you strive to provide your developer with all the imagery and links your design may need upon launch. These items can include items like various states of the navigation system (normal state versus hovered state), interface buttons like Call to Action buttons, etc. (Learn how to create an animated call to action button).

Skitch

If you have any other specific notes you would like to share that you feel are essential to your design, you may want to use an application such as Skitch. Skitch allows you to mark up your design with notes that can help communicate points that otherwise might be hard to put into words. (See a list of other web-based collaboration tools that you can use).

3. Learn about UI functionality

When designing with elements that will have special behaviors and actions, take the time to find examples and supporting documentation to give your developer an idea of what you are talking about.

Coda slider

Developers are not mind readers and may not meet your expectations if you are presenting elements in a static state with zero notation. Search around, there are great documents, demos, and tutorials on virtually every type of action and behavior – you’ll be glad you did, even if its just for your edification. (For inspiration, check out this huge list of interface techniques and tutorials).

4. Give good feedback

Once your developer has completed coding your design, there will likely be revisions by you and your client. It’s rare that anyone hits it out of the park on the first try and now you have the task of presenting the revisions in a clear manner. You will want to strive to be as specific as possible to avoid confusion. Keeping tabs on how many revisions will help you and your developer keep tabs on version control. (Read the ultimate guide on version control for designers).

Conclusion

Taking the time and effort to stay organized will pay off in the end. If you’re a designer new to website development, never let an opportunity to learn something new pass you by. Ask your developer questions and learn from your mistakes to ensure your next project will move along on schedule and your design will come off as planned.

Related Content

About the Author

Chris Spada is a designer living in Danbury, Connecticut. By day, he works for Plaid, a design and branding agency. He is passionate about studying new techniques and styles emerging in web design. Check out Chris’ latest work at chrisspada.com. Connect with him on Twitter: @spadachris.

32 Comments

Stefan Kroes

January 7th, 2010

I would like to add the following to this list:

4. Put some concern into technicalities

As a developer, too often do I have to deal with designs that look beautiful but are (almost) impossible to actually implement. Some pointers about what to think about are:

- Using web safe fonts. Something like Helvetica Neue UltraLight will work wonders for the look of your design but will only work well on mac browsers. If you want your website to be accessible, search engine optimized and not not require flash for something as trivial as a header, stick to web safe fonts.

- One pixel more or less does matter. When you deliver certain parts or variabilities of your design at a later stage be sure to make sure your deliverables fit perfectly with regard to size and colors. Little differences might not be obvious at first, but will be when implemented.

- Don’t overuse things like shadows and transparancy. They can be a pain to implement, especially on older browsers.

- Worry about the actual content. When you create a design that highlights three products but the client only offers two, there will be a problem. Also make sure the data you use (like a description or a thumbnail) is actually available.

Kind regards,

Stefan Kroes

Rasmus

January 7th, 2010

Not surprising points, but still useful. An interesting thing would be to check if anybody know any good wireframing/mockup apps for doing mockups like in the 1st point of view.

Thanks :)

Marcell Purham

January 7th, 2010

Great Post. I’m not sure why many designers couldn’t code their own work unless they’re too busy but in most cases you would not need a designer or developer if you have the skills to create and code a website.

ajay

January 7th, 2010

Great article! Much appreciated.

James Costa

January 7th, 2010

Hey Chris! Thanks for an awesome article. Definitely something to think about, especially when I hand my designs to my flash or interface developers. Cheers!

China Krys Darrington

January 7th, 2010

Thanks. This will help me a lot in my day-to-day work.

ausra

January 7th, 2010

well put! Sometimes we have to be reminded of the basics.
Communication is key!

Kiefer Waight

January 7th, 2010

This is a great post. I have had to work with a few designers who were designing a web site for the first time. It can be tiresome trying to explain what exactly you need them to do. I’m glad resources like this are out on the internet.

Stephanie

January 7th, 2010

Nice article! I am a strong believer that if you want to call yourself a web designer, you need to know how to code your designs in HTML and CSS. BUT, I know designers don’t always have time to code all of their designs, so I think this article will be helpful to a lot of people.
I think good communication with your coder/developer is essential. If you are designing something that you think might be tricky to code, talk to your developer about it and ask them if they foresee any problems and/or have any suggestions on how to make it more feasible.

sergi

January 7th, 2010

this is a great article, thanks for writing it. i appreciate the links to the version control info, and 960 grid info too.

Jordan Walker

January 7th, 2010

Interesting article, communication between the developer and designer is a critical aspect of every project collaboration.

Peter Steenbergen

January 7th, 2010

Nice article, ill send it to our designers maybe they get some insights to make my word easier.
But in addition, ill go for Stefan Kroes his comment. I have sometimes the same problem.

Melody

January 7th, 2010

I’ve had to do a lot of things on my own, but developer stuff is just so beyond me..now that I have a couple of contacts this is a good start in working with them..

Kenny Saunders

January 7th, 2010

@Marcell Purham

I totally agree. This is a good article, and they are things that designers should do on their own. Not because they need to work with a developer, they should code their designs themselves, but just because it will help keep you organized.

Robin Rath

January 7th, 2010

Great post, checkout this post for a good segue to getting better results from developers from a management perspective. http://johnnyholland.org/2009/12/30/12-lessons-learned-for-getting-better-results-from-developers/

Amber Weinberg

January 7th, 2010

Great posts, I’ve come across web designers (mostly print designers) who have no clue how the web works. They don’t follow best practices (like every link has a different color and hover) and want impossible-to-code layouts. It’s definitely a learning experience on both sides!

Digital Landscape

January 7th, 2010

Great article.

Two things that I would add:

1. The benefit of starting the process of collaboration as early as possible. Many of the design / development issues can be easily avoided by bringing the tech guy (or gal :o) ) in at the earliest planning.

The same can be said for the more technically biased freelancers as well. Get the designers in early and you’ll catch many of the issues.

2. Keep communicating! A quick call just to see if they have everything they need or to brainstorm a possible issue will go a long way toward preventing major problems further down the line.

Chris Spada

January 7th, 2010

Thanks for all the kind words and feedback.

@Stefan Kroes, @Digital Landscape- great tips thanks for sharing!
@Marcell Purham, – This can apply to a designer working in a team who may only be responsible for the design or the design of various UI elements of the site, or a designer who may be new to web design in general.

Thanks again!

Singapore

January 8th, 2010

Well, one of the ways both designer and developer can work well together is for teh developer to provide a framework, a list of dos and donts for the designer. More often than not, some designs are difficult difficult or near impossible to implement. We should adopt a “engineering” perspectives for any projects and to save time (and costs for clients), the developer can specify a list of guidelines and framework before the designer provides his magical touch of creativity.

my 2 cents.

Antoine Guédès

January 8th, 2010

Great article!
Thank you for it. I really do appreciate article like that.

Candace

January 8th, 2010

I would also strongly suggest designers try to think of the “worst case scenario” when it comes to dynamically generated content. This is why it’s necessary to have your content owner, developer in meetings where these things can be resolved. I don’t know how many times I have had to tweak the CSS/HTML because the designer counted on the content fitting a certain mold.

Also, bringing UX into the conversation, it’s critical that you don’t let the fact that something is harder to code subtract from the user’s experience. I have also seen lazy developers who did something a certain way because that was what made sense in the code.

I guess my conclusion would be: Whether you are the des/dev/content owner/or UX pro or you have a team, all these things need to be taken into consideration and properly communicated.

Forrest

January 9th, 2010

Thanks for the article. I have for the first time been working with a coder (I think ‘developer’ is misused in the computer world…but that’s another topic) instead of doing everything on my own, and it has definitely been a learning process. I got a few tips from this that should help.

Angela Bowman

January 9th, 2010

Great article! I work with many print designers who have become web designers. Would be great to have a print design vs CSS design comparison, so designers would have a better sense of how to design for web and what CSS can and can’t do and what types of layouts are better for CMS environments, etc.

MTA

January 12th, 2010

I believe Candace highlights some good points for all parties to consider. In my experience, I could count on one hand the amount of people who are both competent designers and developers. Many think they can do both of course, but it’s very rarely the case. In summary;
Good Designers should not have to design to code limitations (or lack of developer ability/technical contraints) and lets face it, practically anything can be built these days. So if your developer can’t code the designers creative – get a new developer. Conversely, if your Designer can’t listen to, work with and respect your Developer, get a new Designer. But the key is to remember -let the coders code, and the designers design.

titos2k

January 14th, 2010

I think that every webdesigner should know more and less the secrets of HTML, CSS and even JS/JQuery and make complete static web page, that developer will take care of by creating or adapting existing CMS env.

Scott

January 15th, 2010

great post thanks, its always a challenge working with a team

Patrick

January 16th, 2010

MTA…amen!
I am a graphic designer. I have absolutely no interest in coding. Thats why I use a developer.
Good designers have a purpose (visually) for everything they do.
I have to keep reminding my coder that just dropping this or adding that changes the whole design.
that said, I have not designed anything that my developer couldnt implement.

Eko Setiawan

January 23rd, 2010

On our team, we always start on research and find inspiration layout, then we build a mockup on photoshop.
Thanks, this great tips to improve our performance.

DB

February 12th, 2010

Thanks for this article. Good communication between designer and developer is essential!

Adam

June 25th, 2010

Candace,

You bring some good points to the table, however, doing things the way they make sense in the code is not always a sign of a “lazy developer”, we are the one’s that need to take your designs and turn them into code to be interpreted by a web browser.

Visuals are not the only thing that matters, with the semantic web being pushed so heavily, code to content ratios, page size and performance, not to mention SEO, all of these also have a place within a beautiful, fast and efficient web page, and i think it’s slightly naive to think that, while fundamental, design will always trump these other factors.

Your conclusion however was spot on, it is about communication from all parts of the team, each part voicing their concerns when they have them.

MTA and Patrick, i’m sorry, but i completely disagree with you both on the subject of non-coding designers, having a designer with “absolutely no interest in coding” or that “should not have to design to code limitations” is absolutely insane. It’s like having a painter that has no understanding of the different kind of canvases on which he/she paints, a designer should always understand the medium with which they are working, even if it is at the most basic level.

As quite a few people have already, the key is communication, nip problems in the bud before they become costly issues for you or your client.

Leave a Comment

Subscribe to the comments on this article.