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.
7 months ago
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.
I'm just wondering if we should get it more deep like specifying spacing for all the elements in the PSD?
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.)
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?
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.
@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.
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.
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.
I love annotating as much as possible, it reduces the amount of questions afterwards. Nice little shot, Sarah.
Great idea overall.
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
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?
@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.
@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.
This is a fine idea, and makes me wonder why Photoshop doesn't have a decent annotation tool to do this.
You should use the guideguide plugin for PS
Surely you mean Andi Peters!
@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.
@Sarah Parmenter do you have a link to Jeff Broderick's post? Can't find on his sit
@Johan Jonsson http://dribbble.com/shots/1237570-Asset-Creation-Process?list=users
@Sarah Parmenter oh, do I feel stupid… Thanks!
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.
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.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.