Design to Development Resources

As a designer, one of the biggest challenges in a website redesign project is transitioning from design to development.

We’ve looked into a few solutions to make this process as smooth and painless as possible. Below is a list of recommended tools, along with a brief description of how you can use them.

Specctr – This is a plugin for Photoshop that is used for creating quick design comp specs. This is especially useful for designers who don’t have much time to manually measure individual components and take note of their properties and spacing.  Specctr has a new “Expand Canvas” feature to make the Photoshop canvas bigger to fit annotations in side margins. It can even measure in percentages or Ems rather than pixels, so that the specs are responsive-friendly for developers. Another time-saving feature that it holds is the ability to export CSS automatically from annotated specs. A perfect bridge from design to development!

InVision – This online application is great for quickly prototyping design comps . Complete with automatic syncing, InVision easily links together flat images (design comps) to create seamless, interactive page flows, also known as prototypes. A great feature of InVision is that is acts as a repository for your saved screen comps. This means that anytime a screen comp is updated in the repository, it is also automatically updated in the prototype! This is especially useful for any team that deals with last minute design changes. Another great time-saving feature of InVision is the ability to create “hotspot masters”, or saved hotspots that can be applied to multiple screens.

ZURB – Responsive websites are the norm, but responsive emails can be more challenging. This responsive email framework allows you to create HTML emails that – wait for it – even work in Outlook. For anyone who has ever spent hours QAing an email in Outlook, this is great news. ZURBS’s five step process is to 1) make sure the email looks good in Outlook, 2) add responsive styles, 3) bring styles inline, 4) test, 5) send!

Material Design Lite (MDL) – At this point, just about every designer and developer knows about Google’s 2014 material design specifications. Now there are open-source components and screen templates for this design style in HTML, CSS, and JavaScript. These beautifully designed components let the developer add a material design look and feel to static content websites. It is optimized for cross-device use, offering an experience accessible from the get-go. This is great news for designers, as this may shorten development time, effectively lengthening time used for design decisions!

Infogr.am – If a picture is worth a thousand words, then imagine how much damage a good infographic can do! Also imagine a world in which infographics can be quickly created and manipulated. Infogr.am is an app that lets you build real-time infographics using a variety of charts, videos, images, and maps. These can be perfectly saved for presentations, websites, or printed materials. They can also include interactive elements, are easily shareable, embeddable and downloadable.

This is only a small sample of the many tools available to eliminate the gap between design and development. If there’s a tool that you use that’s not listed here, let us know! We’re always looking for ways to improve and expand.