During the interview, @reneritchie asked me the following question:
How do you prefer the assets once they’re wire-framed? Once you have, for example, a pixel-perfect mockup… Do you prefer to be given photoshop files so that you can cut them up as you want, or do you want the slices already given to you? What’s your preferred process?
My response was that I’d rather get the layered file instead of the individual slices. To me, it makes way more sense to slice the file myself than to ask my designer to do it for me. And… Yes, while I am a control freak, that is not the reason why I prefer to handle this myself.
Imagine the following scenario:
My designer shows me his design plans for a kick-ass 3-tabbed tab bar, or a wicked cool navigation bar, or maybe even both. I decide to program the tab bar using a single image that represents the full tab bar in all three states. Armed with a plan – and a plate of cookies (for bribing) – I ask my designer for three images which he promptly delivers to me. I begin to program the tab bar. Unfortunately, halfway through I decide this may not be the route I want to go. Maybe I find out that we only need to support iOS 5+, which means I can use the fancy new Appearance API. Maybe I just want to do it different. Who knows? But the outcome is the same: Those three images that I asked my designer for will no longer work. Without going into a lot of detail, let’s just say I’ll need a whole new set of images +++ plus a lot more.
And that is exactly what could have happened with our latest project had I not sliced the creative myself.
As it turned out… while I was programming the tab bar, I shifted gears a bit. That meant I had to re-do my slices. Imagine how frustrating that would have been for my designer. For me, it wasn’t frustrating at all. I didn’t create all of the slices. I created a few, tested, and changed directions. Had I asked for all of the slices up-front, my designer would have had to go back and make all new ones. That’s not fun. For anyone!
Of course, there is a downside to getting a layered file. A big downside if you’re working with a designer that’s not very organized. Lucky for me… I have (what I would consider to be) the world’s most organized designer.
Take a look at these two screenshots below. The one on the left has its layers clearly named to correspond with the contents of that layer. But, the organization doesn’t stop there. The designer who delivered this file to me took things a step further by color-coding certain layers. Now, while it’s not real obvious here what the colors mean, I can assure you – these were a huge help when I was slicing this file.
Ok, now force your eyes to wonder a little to the right. Do you see those layers? Never, and I mean never, give your developer a file that uses a “naming convention” like the one above (right). It’s like the copy and paste keys threw-up all over the document.
So why is this a problem? Couldn’t I just set the option in Photoshop to auto-select the layer? Sure. I could do that, but I shouldn’t have to do that.
A developer (or anyone for that matter) should be able to look at the layer names and know immediately where they need to go to get their content. With the layer structure shown on the left, if I want the header, I know exactly where to go. Not only is the group labeled, but the individual layer names are meaningful. It was very easy to grab what I needed.
If you really think about it… (usually) a “complete asset” doesn’t just reside on a single layer; it’s usually spread over multiple layers to achieve the desired effect. Another gripe I have is the lack of ‘real’ grouping; layers and assets that should be grouped, are not grouped or vise versa. Why? Crazy!
So… please… please… please… give us Developers a break.
- Organize your layers
- Give your layers Meaningful names
- Group assets/layers when necessary
- And, most importantly… Deliver Clean Files
Remember — The life you save may just be that of your comrade ~ the developer. And, in case you didn’t notice, the highlighted words up there. Yup! They spell out: OMG – Deliver Clean Files. =D
By the way, you can catch the full Iterate 20: Nickelfish | iMore episode right here (http://www.imore.com/iterate-20-nickelfish). Check it out. It’s an awesome show!!
Thanks for reading… and don’t forget to [ follow me on twitter ].