Developer Handover.

Event_map_phase_3

24 Responses

  1. Sarah Parmenter Sarah Parmenter

    This is an iOS project for an iPad that I'm working on.

    Curious to know whether any other UI Designers place, what I guess we would essentially call "spacer gifs" into their designs to show the developers specific spacing between elements?

    I have mine in a folder in PS that I toggle on and off, to help with spacing and positioning during my design phase.

    Inspired by @Jeff Broderick's excellent post about how he hands over design assets, it got me thinking about my own process.

    likes

    7 months ago

  2. Matt Carey Matt Carey

    As developers sit across from me, I hand over printed versions of my designs with those measurements hand written on. Harks back to my design school training of marking up and specifications.

    likes

    7 months ago

  3. Nijil David Nijil David

    Neat.
    I'm just wondering if we should get it more deep like specifying spacing for all the elements in the PSD?

    7 months ago

  4. Jory Raphael Jory Raphael

    Yup. I often do that. I'll also change the text of certain elements to be specific. (So, instead of "Andy Peters", I might write "H2. Helvetica 28pts". Sometimes I'll even provide class names, depending on the developer.)

    likes

    7 months ago

  5. Cat Noone Cat Noone

    Yeah, depending on the developer, I go ahead and annotate. Helps them a lot, I would imagine -- rather than them guessing the distance or going through the PSD themselves. The on and off toggle is smart.

    Good job. What is this for?

    7 months ago

  6. Matt Willmott Matt Willmott

    I have used spacer elements like yours in the above shot, but not in presenting to a client. It sounds interesting though so I may give it a go.

    7 months ago

  7. Sarah Parmenter Sarah Parmenter

    @Matt Willmott No - never to the client, but when I know it's being handed off to a development team. I've found leaving them in really helps them.

    7 months ago

  8. Martin Bean Martin Bean

    As a developer, I would love to receive annotated mock-ups like this from designers, as would save me time opening up the mock-up in Photoshop, switching to the ruler tool, and measuring elements/gaps myself.

    likes

    7 months ago

  9. Steve O'Connor Steve O'Connor

    I don't use spacer elements when handing over, only when laying out the initial designs. I usually add good old arrows/text for the coders.

    7 months ago

  10. Gavin Elliott Gavin Elliott

    I love annotating as much as possible, it reduces the amount of questions afterwards. Nice little shot, Sarah.

    Great idea overall.

    7 months ago

  11. Bobby Anderson Bobby Anderson

    Depending on the developer I've worked with and whether they require this level of information, I've always found it best to supply spacer dimensions, gutters etc as wireframes so that nothing is missed or confused to be part of the actual UI

    7 months ago

  12. Jason Hunt Jason Hunt

    Nice idea, but sort of agree with Bobby about such pretty spacers being confused for design elements. Make it ugly and obvious!

    Also, could you post a link to the @Jeff Broderick article?

    7 months ago

  13. Matt Willmott Matt Willmott

    @Sarah Parmenter Oh, I've got you now haha I think this method of showing margins, padding etc is probably the clearest way of passing it over to the developer(s) without misunderstanding.

    I haven't done a design-only job yet so I haven't encountered this myself, but when I do I'd probably do it exactly the same as your shot.

    7 months ago

  14. Sarah Parmenter Sarah Parmenter

    @Bobby Anderson @Jason Hunt - Like I said, I don't keep them in. They are toggled off. The end result has far more of them, including overlays and additional dimensions. There's no way they would be mistaken for design elements.

    7 months ago

  15. Martin Wright Martin Wright

    This is a fine idea, and makes me wonder why Photoshop doesn't have a decent annotation tool to do this.

    7 months ago

  16. Gerry McKay Gerry McKay

    You should use the guideguide plugin for PS

    7 months ago

  17. Bevan Stephens Bevan Stephens

    Surely you mean Andi Peters!

    7 months ago

  18. Chris Schnedl Chris Schnedl

    Great idea!

    7 months ago

  19. Bobby Anderson Bobby Anderson

    @Sarah Parmenter that's fine as I say thats purely from my experience of handing designs over to devs. I've worked with devs who could take unannotated Fireworks files and code it to the pixel and then others who have needed more direction.

    Using wireframes that can easily be printed off, drawn/scored on, usually without fail means the dev won't miss a thing plus doesn't rely on them having PS/FW/Sketch/weapon of choice to toggle between states.

    7 months ago

  20. Johan Jonsson Johan Jonsson

    @Sarah Parmenter do you have a link to Jeff Broderick's post? Can't find on his sit

    7 months ago

  21. Sarah Parmenter Sarah Parmenter

    likes

    7 months ago

  22. Johan Jonsson Johan Jonsson

    @Sarah Parmenter oh, do I feel stupid… Thanks!

    7 months ago

  23. John Stvan John Stvan

    I do this so often now that my devs only look for them. They are like signposts. Creating a UI Kit is great for them, but a style guide overlay is really what they use more.

    7 months ago

  24. Micah Sivitz Micah Sivitz

    In the past I've done things like this http://dribbble.com/shots/1224357-Popover-Spec to give the developers specific guides for spacing / pixel dimensions but the process takes way too long.

    I found this tool the other day http://frontify.com/ I haven't used it yet but I'm really looking forward to trying it on my next project.

    7 months ago

keyboard shortcuts: previous shot next shot L or F like