Big News: FounderDating is joining OneVest to build the largest community for entrepreneurs. Details here
Latest Notifications
You have no recent recommendations.
Name
Title
 
MiniBio
FOLLOW
Title
 Followers
FOLLOW TOPIC

Question goes here

1,300 Followers

  • Name
    Entrepreneur
  • Name
    Entrepreneur
  • Name
    Entrepreneur
  • Name
    Entrepreneur
  • Name
    Entrepreneur
  • Name
    Entrepreneur
  • Name
    Entrepreneur
  • Name
    Entrepreneur

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

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?

7 Replies

Miklos Philips
1
0
Miklos Philips Entrepreneur • Advisor
Principal User Experience Designer
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
2
1
Aleksandra Czajka Entrepreneur
Freelance Senior Software Engineer, Developer, Web Developer, Programmer - Full Stack
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.
Robinson Greig
1
1
Robinson Greig Entrepreneur
User Experience Designer at Catalant Technologies
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:http://www.robinsongreig.com/subscribe.html
Madhur Chopra
1
1
Madhur Chopra Entrepreneur
SAP Supply Chain (APO) Lead Consultant - Now looking for my next project
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
1
1
Steven Rubenstein Entrepreneur
Entrepreneur, Activist, Developer and soon Solver of all the World's Problems
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.
David Schwartz
3
0
David Schwartz Entrepreneur • Advisor
Multi-Platform (Desktop+Mobile) Rapid Prototyping + Dev, Tool Dev
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.
Stephen Williams
0
0
CTO & cofounder at Change My Path
http://invisionapp.com 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.
Join FounderDating to participate in the discussion
Nothing gets posted to LinkedIn and your information will not be shared.

Just a few more details please.

DO: Start a discussion, share a resource, or ask a question related to entrepreneurship.
DON'T: Post about prohibited topics such as recruiting, cofounder wanted, check out my product
or feedback on the FD site (you can send this to us directly info@founderdating.com).
See the Community Code of Conduct for more details.

Title

Give your question or discussion topic a great title, make it catchy and succinct.

Details

Make sure what you're about to say is specific and relevant - you'll get better responses.

Topics

Tag your discussion so you get more relevant responses.

Question goes here

1,300 Followers

  • Name
    Details
  • Name
    Details
  • Name
    Details
  • Name
    Details
  • Name
    Details
  • Name
    Details
  • Name
    Details
  • Name
    Details
Know someone who should answer this question? Enter their email below
Stay current and follow these discussion topics?