Creating Developer-Friendly Digital Designs
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 18 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.
Smooth Fusion is a custom web and mobile development company and leading Progress Sitefinity CMS Partner. We create functional, usable, secure, and elegant software while striving to make the process painless for our customers. We offer a set of core services that we’ve adapted and refined for more than 250 clients over our 18 years in business. We’ve completed more than 1800 projects across dozens of industries. To talk to us about your project or review our portfolio, send us a message and one of our project managers will reach out to you quickly.