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
Breaking up your PSDs into smaller ones is an important first step. Provide on PSD (photoshop design document) per comp page, per breakpoint (desktop, tablet, mobile). Smaller comps help reduce file size and allow for easier generation of JPGs.
Include Preview Images
Including preview images (i.e PDF, JPG, PNG) of your PSDs in various states helps the developer fully understand the intent of the designer.
Organize Layers and Label Clearly
It's important to organize your layers into related groups while making sure everything is labeled clearly. Always eliminate any unused layers to reduce any potential confusion with developers.
Keep Dimension True to Live Site
Keep your 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.