7

Ask DN: What's your workflow when handing off PSDs to an iOS Developer?

almost 10 years ago from , Designer at Camp 4 Creative

Hey Guys,

I've worked with several iOS devs in the past but each has been a friend or close colleague on a dedicated project – IE, we'd been working closely together for several months on one app. In those situations I handed off final PSDs and they got their information about colors, spacing, fonts, etc. from opening the PSDs & inspecting the elements.

I'm now working with a client that uses an iOS dev who is remote & part time. He's requesting a pdf that includes screenshots of all of the different screens within the app (of which there are many, 20+) with annotations for every font size/weight/color/line height, all margins & spacing, size of elements, etc. – as seen in this screenshot: http://grab.by/r9q4

It seems like he should be able to access the PSDs and gather this information himself, much like my front end guy & previous iOS devs.

My question is, is this sort of annotated pdf a normal practice? If not, is there something else? Your input would be appreciated!

19 comments

  • Nice ShoesNice Shoes, almost 10 years ago (edited almost 10 years ago )

    You forgot to put the blur settings ;)

    I know, not helpful. I'll go sit in the corner.

    1 point
  • Marc EdwardsMarc Edwards, almost 10 years ago (edited almost 10 years ago )

    I’m really against giving a PSDs to devs. I want to know how they want the images cut up, and I’ll work with them to implement whatever they need, with the file naming convention we agree on. To be honest, there really isn’t that many ways to do things, and it’s usually easy to predict the most efficient method.

    I realise that things could be different if you’re in a situation where client has requested PSDs. I usually provide annotation/specs for text as text files. I also assume that I’ll be the one doing QA on the implementation, so I’ll be able to let the dev know which elements need to be nudged and sized differently.

    Again, not everyone will have the ability to work like that.

    Here’s why I give devs PNGs, rather than PSDs:

    1. Being more involved with the dev process means less back and forth on way things are bolted together, saving time and giving better results. This is especially true with UI animation.

    2. I can ensure images are exported without colour profile issues. I never, ever want images exported from someone else’s computer that hasn’t been set up correctly. Having images exported from many computers is asking for colours to not match. More info on how I set things up: http://bjango.com/articles/photoshop/

    3. I want to ensure exporting is set up in a way that’s completely automated and reproducible. Software evolves over time, even before the first version is released, and you should be prepared for that. I use slice sheets and think they’re the best way to automate exporting.

    4. I want control over things like stretchable images, because as the designer, it’s more likely that I’ll know what’s important (like needing the repeating section to be 20px wide because there’s dithering or noise, vs it being 1px wide and looking ugly when stretched).

    5. And finally, it seems a little lazy to hand over a half finished job. (Again, clients may request PSDs, so you may not have a choice!)

    1 point
    • Alyssa Pelletier, almost 10 years ago

      Hey, thanks for this well thought out & detailed answer! I really appreciate it. I wasn't really talking about anything that needs to be sliced / exported – I will definitely be doing all of that, and luckily it's pretty "flat" so there isn't much to slice. (Guess I wasn't clear on that in my original post.)

      You mentioned that you make a text file for the text information... do you also do an annotation that shows spacing for everything?

      0 points
      • Marc EdwardsMarc Edwards, almost 10 years ago

        Hey, thanks for this well thought out & detailed answer! I really appreciate it.

        No probs. :)

        I wasn't really talking about anything that needs to be sliced / exported.

        Ah, ok!

        You mentioned that you make a text file for the text information... do you also do an annotation that shows spacing for everything?

        Typically not, only because it seems like a lot of work for not much benefit. I prefer talking to the dev as they’re building. If they have a question, I can measure the parts we’re talking about and tell them. I think it’s easier that way, because the implementation may mean that the measurements are taken from a place that isn’t initially obvious.

        Quite often we just slap the UI in roughly, then I’ll measure everything and provide a document with changes. They look like this: http://i.imgur.com/qlvA9.png

        That means the developer can worry about the code without getting hung up on the UI being pixel perfect.

        I do provide specs for text though (usually made before the dev starts work on that section of the app).

        1 point
    • Jonathan YapJonathan Yap, almost 10 years ago

      I second the approach of communicating with your devs, especially when there are situations when you are developing for iOS and Android at the same time. Catching up in sprints are more helpful than a 1 off hand off because there are cases where you would overlook some technical feasibility during implementation.

      There are situation when you need to provide documentation, but I would still keep an open communication and provide them actual PNG assets + design mockups. There are too many accounts of Dev cocking up the designs with hand off.

      One more advantage of PNG is you can work on Sketch too :)

      1 point
  • Ketan Anjaria, almost 10 years ago

    No No No No No No No. That's like designing a suit and handing it to manufacturing without any instructions. Sure they can figure it out but much easier it you spec if out. Yes it takes time but all good collaboration does. Even if you have 20 screens, that shouldn't mean 20 different font styles. Actually why do you have 20 screens?

    1 point
    • Will Hitchcock, almost 10 years ago

      It's more like designing a suit using a standard suit-designing software that includes measurements and all important information. You then hand that suit design over to manufacturing who could use the same software to get all the necessary information. Instead, they demand that you print out screenshot of the design and put post-it notes on it detailing all of the information that was in the original file.

      2 points
      • Ketan Anjaria, almost 10 years ago

        Haha, maybe my analogy isn't perfect but while working with a developer who understands line heights, type and color is great, it's not in their job description. Basically they are really good at writing code and it's your job as designer to teach and improve their design output. Design is about sending your message across and that includes brand guidelines. It's not a dev's job to figure out that message, it's yours. Also it's just a nice thing to do and saves them time.

        0 points
    • Alyssa Pelletier, almost 10 years ago

      Wow, seven Nos!

      Ok, here's the thing. It's really nothing like your analogy. That would be the case if the information in Photoshop was totally inaccessible, only visible to me... but it's not. One who is not me could just as easily open up the program and figure out the text color, size, and weight, the margins, etc.

      Additionally, spec'ing is not the norm for web based projects. Using your suit analogy, one would be crazy to hand off without creating the same detailed annotation. Do you do this for web projects as well?

      I wasn't arguing that I don't want to do the work, I was just asking what the normal practice is. Thank you for weighing in.

      0 points
      • Ketan Anjaria, almost 10 years ago

        I think your key word there is "figure out". That leads to interpretation and I rather have really strong specs up front. In fact lots of time, while creating design specs I find things like inconsistent margins or extraneous type styles that can improve my design. In a professional work flow, the designer's job is to ensure developers have a specific and actionable guideline to work from.

        0 points
  • Ben LeeBen Lee, almost 10 years ago

    It depends on who the engineer is. Some are adept at working with PSD's and some require spec docs.

    1 point
  • Martin Mark, almost 10 years ago

    Annotations are very necessary. Without them, I find a lot of times designs turn out ballparked - almost there - but not optimal.

    To spec areas before clipping assets, I've used PNGExpress (though I do prefer CutAndSliceMe for actually cutting assets).

    I then drop the annotated screenshot into Visio or Omnigraffle and add other annotations as needed.

    1 point
  • Paul @StammyPaul @Stammy, almost 10 years ago (edited almost 10 years ago )

    Largely, we don't hand off PSDs to engineers- I spec out every page/state for them individually including measurements, tap targets, colors and icons/assets. It leaves less room for error.

    1 point
    • Will Hitchcock, almost 10 years ago

      Just out of curiosity, do you do the same thing when handing off designs to web developers? I've seen many designers annotate PSDs for iOS, but never for the web.

      1 point
  • Jaime SelvaJaime Selva, almost 10 years ago

    I custom to work in big companies with developer teams, therefore I work with specctr - http://www.specctr.com/ - in Fireworks defining each website component. My notes are made manually, are very necessary if you want a calm future without troubles & reviews ;)

    Specctr works with Illustrator and Photoshop as well http://www.specctr.com/products.php/ but are more expensive than SpecKing for example http://wuwacorp.com/downloads/

    When every assets have been exported as png or jpg files, you have to know that developer is not a designer and sometimes they haven't knowledge when it comes to works with design files.

    0 points