Fusion·o·vation

Empowering marketers through helpful information, friendly education, and random musings. 

 



 

Back

Creating Developer-Friendly Digital Designs

Creating Developer Friendly Designs
Written by
Todd Knowlton

It is no secret that designers are often disappointed by developers’ implementations of their creative visions. At Smooth Fusion, we pride ourselves on being a development firm that excels at transforming creative designs into digital awesomeness.

In our 15 years of implementing the inspirations of leading firms and designers, we have identified nine simple tips for creating developer-friendly digital designs that smooth the process of translating designs into functioning web sites.

Break up PSDs into smaller ones. Ideally provide one PSD per comp page, per breakpoint (desktop, tablet, mobile). Smaller comps help reduce file size and allow for easier generation of JPGs.

Include preview images (i.e PDF, JPG, PNG) of PSDs in various states. This helps the developer fully understand the intent of the designer.

Organize layers of the PSD into related groups and label clearly. Eliminate any unused layers to reduce confusion.

Keep PSD dimensions true to what will be used on the webpage. For example, if a logo on the site should be 150px wide, it should be 150px wide in the PSD.

Optimize Your Images. Provide images in sizes optimized for the Web, i.e. 72 dpi.  If you want the image retina-ready, provide images twice the dimensions, but still at the same dpi.

Preview the Functionality. Provide comps for drop-down menus and any animations. The more detail you can provide that makes your intentions clear, the better the outcome of the implementation.

Think Past the Design. Think fluidly about the website, not just from a two-dimensional print perspective. Describe what the site should look like beyond the main width, such as how it transitions to larger monitor resolutions than the comps provide.

Be Descriptive. Give developers information on specific fonts used and how to get font files. Subscription and other hosted fonts (like Google) are suggested.

Create a Style Guide. Consider providing an associated style guide that includes helpful information such as fonts, background and border colors, and notes about expected behavior.

These tips, along with a sample style guide, are available in a handy downloadable PDF that you can distribute to your team.

 

Recent Posts

Have A Project In Mind?

          

Let's Get Started