Designers + Developers = BFFs
As designers, we can push pixels to perfection all day long until we create the most beautiful masterpiece. But the reality is it can look very different once it hits development. That’s why playing nice with developers is so important. Hand over a messy Photoshop file and you can instantly irritate the person or team who is in control of the end result. Disregard the worst case scenario and you can run into major issues once real content is placed in. Ignore responsive design rules and the site can look really ugly on-the-go. Here are some easy tips to help developers make your site look great when launched.
When possible, sit next to developers!
I’ve seen many agencies operate with design and dev in silos. Are we different types of people? Most of the time, yes! But I’ve found myself, more often than not, trying to bridge the gap between design and development so that the two teams can learn from eachother and work together. If you learn a little front-end code as a designer you can be of great value to a developer who doesn’t have time to adjust line spacing or push that element over 1 pixel. You may even get your own branch on GitHub so you can nitpick all day long! And if you learn an eye for detail as a developer, then you’re more than likely going to nail that first pass on staging.
Organize your files.
In addition to working side-by-side, I am obsessive when it comes to organized files. You will never find an empty layer, an unnamed folder, or an unused layer comp in any of my files. It’s also because if I cannot work directly with the developers (especially now that I work from home) I want to make sure everything is clear, simple and easy to find. Here’s a little preview of my layers and layer comps palettes. Folders are labeled the same as the layer comps they relate to. That way, if there is any layer comp confusion, the developer can just go into the folder and turn elements on and off.
Provide a UI Kit
I also like to provide my developers with a UI kit for the desktop experience, and then a small UI kit for devices which includes only the elements that need adjustment. This cuts down on the guesswork or measuring that they need to do. It also leaves no room for assumptions because it’s essentially the global document for my design. Below is an example of one I put together recently for the City of Danbury’s website redesign (hitting development soon)! Hopefully, some of these tips will help your website launch with all the pixel perfection you intended.
