Bridge the gap between designers and developers by setting up a standard workflow process from design to implementation.

At Fresh Consulting we try our best to break away from the modern day work culture which separates designers and developers into silos. We value designers who knows how to code and developers who care about design. We also proactively hire talent who are so called “devsigners” who have background in both areas. But we don’t stop there. We have standard procedures in place to further bridge the gap between designers and developers to encourage productive collaboration in projects. In this article you will find effective ways for designers to help developers, and vice versa.

From Designers to Developers

Developers face difficult challenges on design implementations in today’s abundance of browsers and devices. Nothing is one-size-fits all and load performance is always an issue. To further complicate things, many options are available at hand to implement a particular design. For example, we can utilize web fonts instead of flattening text into animage to optimize for flexibility and SEO. We can also separate text image layers out of the background image to add sleek animation. This gets tricky fast, and designers need a strong understanding of all the technical challenges and options available to produce usable graphic assets.

Here we list few of our favorite tips for graphic designers to help developers implement your design the better way.

Organize design source files

Organizing design source files not only helps your peers, but also developers who eventually implement the design in a website or mobile app. Beyond simply receiving a JPG/PNG, , the developers might want to access source files for following reasons:

• Adjusting image compression settings for better loading performance
• Extracting a few pieces they want to use elsewhere
• Hiding or separating text layers from the background to use them as separate layers

You see how performing tasks above can be time consuming if your layers are not organized well. Simply toggling visibility or extracting certain parts of the mockup are not hard skills to learn, and is much easier than finding the designer who built the file. Name each layer, group related layers, and order them visually from top to bottom so it’s easier to navigate and read by someone who has never worked on the project.

Use smart objects

Aside from preserving raster image quality, Smart Objects are very useful when it comes to grouping related layers as separate design file. It’s common for developers to receive one large PSD file for an entire website mockup with tons of layers. It’s a nightmare to piece them apart to use in production because they are typically grouped by layers, but not limited to a specific size or dimension. Using smart layers, you can easily create layer groups in set dimensions which are very useful for slider design and popular “sectional” website designs. When developers receive a PSD file with smart objects dividing each section, all they have to do is to double-click on the layer to open a new tab which has the design ready to export at the defined dimension.

Think Responsive

If you designed a graphic asset that only works in large desktop screen resolutions, your developers will have hard time implementing your design for smaller screens. When graphics are scaled down, they are often not legible and not friendly for mobile users. Developers are left with sub-optimal choices: hide the image, replace it with text, or just show it anyway. When designing something, try to see it through the implementation process instead of expecting some sort of magic to happen.

Consider web font typography while you design because your text layer may be replaced by a real text font in the final production of the website. Start thinking about how that can affect your design and relative composition when background scales smaller and font size shifts in steps rather than in percentages.

Save files in the optimal spec

You may be good at producing quality work but lack knowledge of performance when it’s implemented. While it may seem counter-intuitive, there is actually a cost to producing your graphic assets in dimensions above necessity and preserving highest quality possible. Follow the recommended web standards below to optimize your exported design file:

• Save photo-realistic image as JPG with 80% quality or below
• Save flat 2D image as PNG (use 8-bit if quality is preserved), and only use transparency when necessary
• Further compress transparent PNG files with image compressors such as ImageAlpha and SuperPNG
• Save image file at the dimension it’s going to be used or large enough for common large size screens

From Developers to Designers

Designers face a difficult challenge, especially when they are left in the dark with ambiguity of evermore complex web design specs. Developers at least have the technical understanding to figure out things on their own. The key is to provide tools, tips, and context for designers to have full understanding of the medium they are designing for.

Provide Context

Before designers start creating design assets, provide them a little background information on how graphics are going to be used. You can’t blame designers when they send you graphics that don’t work if you have not provided enough context. To avoid unnecessary back and forth from misunderstanding,it is your responsibility to communicate your background knowledge clearly to designers and let them do their best work.

Show Browser Developer Tools

You can always provide more detailed specs on-demand, but it can be very inefficient if you are busy and designers need it very quick. Teach designers to use developer toolsto grab dimensions, colors, font families, and more right in their browser and not have to bother you again. It will empower them as designers to do more on their own and understand how to deal with web technologies better. You can also suggest a handful of developer add-ons and extensions to make things easy for designers.

Walkthrough Web Frameworks

Knowing how to read the properties of web page elements is a good solid first step. But you can help them take a step further by introducing how the web framework works. For example, you can walk them through CSS documentation of Bootstrap so designers gain further understanding of how the design elements are translated into modular elements. They can also learn to utilize useful classes such as `img-responsive` when they test their graphics in the actual context of website.

Share Your Experience

Please share your experience, tips, or workflow your organization is using to bridge the gap between designers and developers. We love to share our knowledge as well as learn from the community.