10 Ways for Designers to Woo Developers

Hey designers, are you driving your developer peers crazy?

Chances are that you have some habits that don’t translate particularly well to code, and it is making life tough for the developer working with you on projects. Want to be a better coworker (and friend)?

Learn how to better communicate and design so that developers will love you. It will speed up projects and make work life easier. And it’s not a matter of bringing candy to meetings either. You can make developers love you by making slight changes to the way you work.

1. Bring Developers in Early

The biggest problem between designers and developers is that they often work in bubbles. The individuals or teams don’t start talking about a project until the first draft of the design is finished. Then there’s a handoff from the designer to the developer.

Sigh.

That’s just not the way to work. Designers and developers should be involved together from the beginning to talk about how a project will come together. While the designer might focus on color and typefaces and imagery, the developer can provide insight into usability, function and performance.

Designers and developers should have a good idea of what the other side looks like. Designers should understand enough code and usability to speak with developers and understand challenges; developers should have a little knowledge of design theory so they can make suggestions when design ideas aren’t right for the web.

2. Practice Consistent File Management

One of the biggest things a designer can do is prep and package files in the same way every time.

How many times have you opened a Photoshop document with hundreds of unnamed layers? Don’t give this type of file to a developer. Every layer and style—regardless of what software you use—should be named appropriately.

[pullquote]How many times have you opened a Photoshop document with hundreds of unnamed layers?[/pullquote]

Styles, color swatches and typography should be consistent throughout the design. (A button shouldn’t look different from page to page.)

Name files and styles in the same way for each project. Group like elements in a similar manner and use a consistent folder system. That way the developer doesn’t have to relearn how to find parts and elements with each new project.

3. Use Google Fonts

One of the biggest challenges for design projects that include print and digital pieces is typography management. Don’t use desktop fonts for print projects for web or app designs and just assume they will work. (Often they don’t.)

For digital projects, opt for Google Fonts for typography. This means you might have to find a similar typeface for the web to match what you are using for print. (That’s OK.)

Don’t make the developer do this for you. Pick out the comparable Google Fonts and use them from the start. You can even note print versus digital typefaces in your style guide.

The reason behind this is simple: Embedding fonts can get a little tricky. Plus, Google Fonts are free and will ensure that you don’t incur additional project costs. (While you are at it, consider doing the same thing with icons and use a package such as Font Awesome, which allows the developer to style icons using CSS, not import a bunch of image files!)

4. Package Image Assets

While we are on the topic of image assets, exporting and packaging files properly is super important. While a developer can open and export all image files to meet their needs, you could ask what they need and do it along the way.

This ensures you get the crops you want on images, while compressing files to help your website load quickly.

Don’t try to do this on your own. Ask the developer how files should be saved, named and compressed for best use.

5. Think About the Environment

There are just so many device sizes and aspect ratios to think about when designing websites and mobile apps. As a designer, you need to know the canvas size, margins, padding, etc. to create a mockup that’s actually usable.

Talk to the developer before you start drawing to ensure that you know what the design environment looks like before you start. There’s nothing worse than a design that looks amazing in Photoshop or Sketch and falls flat in production.

You need to know these things in advance:

• If the framework has specific padding specs at different sizes
• The gutter width between columns (and if it varies)
• The size of the most narrow screen size the developer will code

6. Ask Questions

It’s been mentioned a few times already, but communication between the designer and developer really is the key to making all this work. Communication can make or break projects, impact deadlines and influence the end project design and functionality.

[pullquote]Communication can make or break projects[/pullquote]

Take your developer to lunch. Get to know them. Ask plenty of questions along the way. If you aren’t sure whether something will work or not, just ask. Developers aren’t scary people and it’s a lot easier to answer a question early in the process than have to rethink and entire concept.

7. Learn Some Dev Basics

While you are talking with the developer and asking questions, dive deeper. Learn some development basics if you don’t already have these skills in your design arsenal.

Designers working on digital projects should verse themselves in:

• HTML and CSS (you should be able to change a font size or color and understand how the two are different)
• Common user patterns (design for the way users will interact with content)
• Accessibility standards (so your design will work for more users)
• What types of elements need to be served as images and what can be created using pure CSS
• How breakpoints work in responsive layouts
• Trends in website design

You may never actually write code, but learning development principles will make you a better designer because you will understand the value of the tools and workflows.

8. Use a “Living” Style Guide

The design process extends to development as well. Designers, you need to recognize that the developer is just as vital to the design process as you are.

With that in mind, create a “living” style guide that not only includes color and fonts but components as well. Everyone should be able to access and update the document as the project comes to life.

A good style guide will help everyone working on a project maintain consistency with visual elements, provide context for design choices, serve as a point of collaboration for the project and help standardize code. The living style guide allows everyone to share ideas and provide guidance throughout a project. It’s not just a document that someone creates right before a design goes live.

Put the following information in the style guide to make the most of it:

• Logo styles
• Color palette
• Font palette
• Icon palette
• Navigation menu elements (and there they link to)
• Layout options for different pages
• Code snippets that get reused throughout the site (such as buttons)

9. Use the Grid

Respect the grid. In responsive website design, the grid is more than just a guideline for placement of elements on the screen, it can also dictate where elements go at different screen sizes and how columns stack and shuffle.

The grid can help you design and maintain flow. (The challenge is that you can’t arbitrarily break design rules.)

Think about it like this: Your design has four content blocks lined up across the screen in a row (with equal gutter widths) on a full-screen desktop monitor. Then on a tablet, those blocks shift to form two columns, with two rows. On a mobile device they shift to form a single column with four rows.

Understanding how the grid impacts the size of objects and how objects will shift on different devices is important because it can dictate how you design for the content you have. Think about that same scenario again. What if you had five content blocks? It would require a redesign to ensure that you create a consistent visual outline.

10. Don’t Be a Jerk

The real key to ensuring projects come together with ease is to be flexible. Design techniques and standards for the web change all the time. Whereas some projects do allow you to be a stickler for details and unmoving, responsive design doesn’t really work that way.

The golden rule when it comes to working with developers is…don’t be a jerk.

Designers that are easy to work with will earn more respect and have better relationships with developers. This will lead to better and more successful projects. It should go without saying, but too often there’s a lot of jerk-ish behavior out there. Don’t fall into that trap.

Be flexible, open and talk things out with your developer. They will love you for it.

Carrie Cousins

Carrie Cousins is a freelance writer with more than 10 years of experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with Carrie on Twitter @carriecousins.