How many times have you had to see good designs annihilated by ‘amateur’ developers? Hurts something fierce when it’s your own design, doesn’t it? On the flipside, have you considered that you could be the problem here, designer?
If you answered yes (preferably with a sheepish look on your face), you are to be commended for recognizing the trouble and trying to fix it. Salut. And in this post, we’ll do just that.
Here are some tips to make your next project (as an employed or freelance designer) less of a pain and all around more awesome:
Practice the following:
Learn to organize individual resources (buttons, modals, margins, fonts, icons, etc.) into separate, clearly named folders so that developers know where to find them without wasting time.
Include any 3rd party files for fonts and/or icon sets and make sure they all have proper licenses for intended use. Label font families properly.
Do NOT compress everything. Keep important layers (anything with an element on it) and label them properly. The purpose of this design is to be picked apart, not to sit there and look nice.
Create diagrams/charts/storyboards to depict where links go in the hierarchy.
Keep Localization requirements in mind while creating layouts (accommodate variations in text-width in body, buttons, quicktips, etc.). Annotate everything.
Help your developer understand the minutiae of your design so that he/she may make it functional without missing out on anything.
On a different note, here are Top 10 Text Editors for Designers and Developers.
A style guide is a living document of code, which details all the various elements and coded modules of your site or application. It’s a one-stop place for the entire team.” – Susan Robertson, Creating Style Guides.
For any project big or small, style guides is a way to ensure smooth collaboration, design + code consistency, and context-of-use in a volley of ideas. During this storm you discuss and arrive on settled results which will become standards for the rest of the development or future customization process. This is where collaboration should start:
Style guides/Pattern Libraries are a good habit to get into for designers: Not just for collaborative advantages, but for branding and personality purposes. It improves workflow, saves time, and keeps design/development steady.
In order to see design through the eyes of a developer, you don’t need to learn coding. You just need to know its fundamentals.
This means that you don’t have to learn how to code. You just have to have a working knowledge of web development and programming languages (especially front-end coding languages) in general. Here are some points to start studying:
In a nicely put-together post on Percolate’s blog, their marketing engineer Sean Connolly expresses this in the very first point very succinctly: “As a developer I don’t expect a designer to know the nuances of markup or CSS, but someone designing for the web should understand basic principles of web development.”
This helps you gain a realistic idea of what’s viable/possible in the design and why. This is the same as you expecting an interior designer to know the functional and aesthetic properties of different building materials, but not how to build a house with them.
So take interest in development and learn the core fundamentals/basics. If you can take it further, so much the better, but as I said earlier, you don’t have to learn to code.
Once you have an inkling of how developers see a design, you’ll be able to collaborate better and communicate more effectively.
Get a developer in on your project as early in as possible. This is to keep your design in the realms of possibility and a more comprehensive, cohesive designing/development process.
Use tools like Slack, UX Pin, or even Google Drawings to collaborate with your developer/designer and keep up this streak.
You might also like “Personal Security Rules for Web Developers“.
As a developer myself, these tips have personally helped me work in better tandem with the designers, so consider these a little tete-a-tete from your developer pals. Remember that the more designer-developer collaborate, the more fantastic is the end-product.
It’s in everyone’s best interest, really.