6

After designing your pixel-perfect application in Photoshop, naming and exporting everything correctly - what is the best method / tools that we can use to explain to developers where we specifically want those PNG's placed on the screen?

The biggest issue I have had is that after preparing everything to pixel-perfection, the developer makes a mess of all of my PNG's. I ask and ask to use my mock-ups for reference, but they are never able to accurately position the elements to match my PSD.

Just to be clear - I am aware of Apple's guidelines and I always design everything to spec. - What I am referring to is the placement of the PNG's within the application itself. For example, lets say that I have a logo that should sit in a specific place within a navigation bar and a menu icon on the left and a search icon on the right. The placement of those icons and the logo is never exactly like the PSD. There are always issues with vertical/horizontal centering and it causes days of back and forth troubleshooting to get right.

Can you recommend how I can be more helpful to them, what I can prepare for them or use to indicate the specific positioning of the PNG elements within xCode?

Improve this question
8
  • 3
    Have you asked them why they can't do what you ask? could it be that your design just doesn't fit properly with the dimensions of the device? Could it be that text is not readable? could it be that your design doesn't escalate well? In my experience, most of the times, when somebody has a "pixel perfect design" it just doesn't work the way they expect due to good reasons that the designer didn't consider or cares about. May be this is not the case, but your question is too generic.
    – PatomaS
    Apr 2, 2014 at 5:52
  • 1
    What sort of application is this? Web app? Desktop app? Mobile App? I also think that expecting pixel perfection is a bit of a thing of the past really. Using photoshop (a photo editing tool - the clue is in the name) to design User Interfaces isn't really the best approach in the first place.
    – JonW ♦
    Apr 2, 2014 at 9:22
  • I am aware of Apple's guidelines and I always design everything to spec. - What I was reffering to is the placement of the PNG's within the application itself. For example, lets say that I have a logo that should sit in a specicifc place within a navigation bar and a menu icon on the left and a search icon on the right. The placement of those icons and the logo is never exactly like the PSD. There are always issues with vertical/horizontal centering and it causes days of back and forth troubleshooting to get right.
    – MLcode
    Apr 2, 2014 at 16:04
  • From my research, I have (Surprisingly) only found two places that mention giving point (layout constraint) guides to your developer to assist with this. This from my perspective, seems like an essential thing to mention in "designing for iOS" resources. Do you guys do this? If so, do you use any tools outside Photoshop for the point guides/layout constraint guides?
    – MLcode
    Apr 2, 2014 at 16:10
  • 1
    You can't. If the developers don't have an eye for detail, no amount of documentation will fix it. Try to adopt a more agile process with plenty of feedback loops so you have the opportunity to review multiple times before going live.
    – DA01
    Apr 2, 2014 at 16:27

3 Answers 3

Reset to default
1

Two options that have worked for me in the past:

Learn xCode.

Getting around a project takes a little bit of learning, but you only need to learn enough to move between states to modify X/Y values, colors, type, etc. When I was initially working with an iOS developer on a project, I tried this approach and I think if I was able to focus solely on the app design, it would have worked really well because I was translating the Photoshop document exactly into the app, freeing the developer to work on bigger items.

Unfortunately I was on a small team and couldn't focus solely on the app, but had to work on other items as well. In order to not slow down the developer I had to come up with another solution.

Document everything.

A lot of times the problems that arise when moving an app design from Photoshop into the actual medium are translational errors. You're just not communicating explicitly with your team. There are items that you just assume the developer knowing, and they don't! It's not their fault. It's yours. So eliminate that by explicitly documenting everything... and I mean everything.

Now to just be up-front about this, it does take more work initially to document everything. But you're keeping frustration low and wasting less time in the future because items are done exactly as you want. Then you can spend your time tweaking items instead of wasting days on text colors, pixel placement, and so forth. The developer I did this with loved this because it took the translation burden off of them (they're trying to make it work amazingly well – not design the app) and they knew exactly what they needed to do.

For example, for a button I would document:

  • Button Label Copy
  • Button Label Copy Color
  • Button Label Copy Font
  • Button Label Copy Font Size
  • Button Label Copy Line Height (if applicable)
  • Button Label Copy Tracking (if applicable)
  • Button Label Copy Text Shadow (if any)
  • Button Background (Solid or Gradient)
  • Button Border
  • Button Shadows (Inner & Outer)
  • Button Placement
  • Button Disabled state (if applicable)
  • Button Pressed state
  • Icon file (if applicable)
  • Icon file pressed state (if applicable)
  • Icon file disabled state (if applicable)
  • Icon pixel placement (if applicable)

It may seem like a lot, but you know a lot of this stuff already because you've been designing it. It's just a matter of documenting it now.

Improve this answer
0

How about putting a 4*4 grid (any size) on each of your PSD's so that developer can figure out accurately.. where each PNG should fit,Also it would be easy for you to review them and make them understand the imperfections from PSD to code

Improve this answer
0

I can add that involving the developer in design discussions early would help you identify "brick wall" problems like you are facing early. For example, customizing the navigation bar title or logo can be pretty hard, because it is not a drag and drop, but configuring an "attributed string" to go there.

Ask your developers if something will be hard to implement, chances are they will tell you

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.