Design Strategy · Packaging Design

The most efficient way for designers to give designs to developers?

Christian Nicholson

June 11th, 2015

I've been using Sketch 3 for about a year now and finally am part of a project in which the User Interface is constantly changing. Does anybody have any advice on the best tools to give over sketch files, .png files etc. over to development teams to make their jobs easier?

David Schwartz Multi-Platform (Desktop+Mobile) Rapid Prototyping + Dev, Tool Dev

June 11th, 2015

There are two main aspects to software development: (1) static design and layout of visual features, like labels, edit fields, buttons, etc; and (2) processes that occur dynamically whenever certain actions are triggered.

Initially, static design should be done without concern for the "look and feel". I've never known a single software developer who had any way to deal with PSD files -- they're specific to Adobe tools and are mainly used for visual layout. They have no role to any software developers that I've known. Anybody who suggests they do isn't talking about a software developer, they're talking about something that's more in the domain of graphic designer who might write some javascript to deal with visual behavior of graphical elements.

It doesn't help that the term "designer" has been co-opted by the industry as of late to refer to visual designers rather than logical design. Both are important, but this blurring of the line is causing a lot of problems because graphic artists are being given roles to do back-end database design, UX workflow design, and all kinds of other design layers for which they have no particular training or skills.

Flow charts are the documentation historically used to communicate a design to programmers, although they have to be written by other programmers. And I personally find them far too detailed. They're annoying.

At the early stages of development, you need something that illustrates the rough layout of all of the forms and screens in the app, as well as the flow between them.

It seems people are now referring to "menu layouts" as "wireframes" to explain how users navigate through different aspects of a design. That's nice, but it imposes a certain structure on the overall application that may not be needed in the end result.

Just use any kind of structured diagramming tool to lay down blocks, put short descriptions in each one, draw lines between them with arrows, and label each line with an action trigger.  (Worst-case, you can even use Word, although it's really a PITA to manage the layouts on pages.)

Each block should represent a form or dialog of some sort. Create a rough mockup of each one, identifying each field and note any specific behaviors that you envision going on.

Each line is an action trigger, like "mouse-over" or "button-click". If there's anything not obvious about it, then add a note.

At this point, you want to do what I'd call a "mind dump". Just get out what you see in your head onto some kind of canvas, which is oftentimes easier to do with pencil and paper.

Again, it's the wrong time to worry about the "look and feel", color schemes, and widths of bevels on buttons. Because I guarantee you that however much detail you think you've captured, it's probably 1/3 to 1/2 of the overall solution. Do not waste your developers' time with eye-candy when you don't have the overall design completed.

The specific tools you use are pretty much irrelevant in my mind because it's the layouts and flow you want to communicate. The developers have their own ways of taking that and turning it into something else that's more useful to them, and that will probably make no sense to you at all. They might even be able to generate a more formal document with better design tools that are far more technical than you'd ever want to use.

Only after you've got the overall architecture of the app laid out, then you'd get a graphic artist involved and apply some kind of "theme" or "style" to the app. Trust me ... doing this too early will lead to useless arguments in design meetings about things that are totally irrelevant to the functional aspects of the software.

Miklos Philips Principal User Experience Designer

June 11th, 2015

The "best way" is what works for the team. Over the years--regardless of design tools used, which change over time--we've been handing off specifications and assets to dev teams as PDFs (specs/ markups) and PNGs (full screen designs and individual assets such as icons and other graphics not reproducible by CSS). These formats are consistent and have been for years. You can think of the hand-off as the UX between the design team and the dev team. :) and consistency is one of the basic tenets of UX. Hope this is helpful. Good luck.

Aleksandra Czajka

June 11th, 2015

I'm a developer and the most useful thing for me is using .psd files. This way I get to know the true colors, true font sizes and font-families of the text. With a .png or any other picture file, I can't click on the objects and find out their properties. 

Hope that helps.

Stephen Williams CTO & cofounder at Change My Path

June 23rd, 2015 is great for quickly sharing multiple pages (basically, as an image), allowing easy marking of points on the page with a comment, and discussion of those comments.  It is easy to start using and generates email when there is a new reply.

Robinson Greig

June 11th, 2015

I’m a product manager and designer (team of 5, so everyone has a few roles), so I spend most of my day shipping designs to the devs.  We use Trello to manager our sprint process.  Each user story has a card in Trello, and any designs applicable to a story are exported from Sketch and attached to that Trello card.  For small features, I’ll export just the screen that contains the feature, plus any individual assets required to build the feature. For larger stories, I like to use Pixate for Flinto to show the UX that accompanies the feature. Does this help? -About once per week, I write about education, startups, or lifestyle.  Subscribe:

Madhur Chopra SAP Supply Chain (APO) Lead Consultant - Now looking for my next project

June 11th, 2015

I have used Balsamiq Mockups and have found it incredibly versatile and easy to use.  It uses a drag and drop interface and allows you to add sample data to controls like lists, etc, annotate your designs, upload images or use icons from their image library.  
When ready, you can generate a PDF file to hand over to your developers.

I'll highly recommend it and the best part is that it costs less than $100 for a single user license.

Steven Rubenstein

June 11th, 2015

If you are building a website (vs mobile app) I actually prefer a designer to provide html mockups. That way, I don't have to delve into PSDs and the designer can even provide the CSS.  That way, the designer is responsible for ensuring the design works in a cross-browser fashion. And a static file (like a PDF) cannot properly incorporate potential dynamic aspects of the page, such as Javascript that changes the layout based on actions.