iPhone User Interface Design

Question

Hey guys, I've just had a nagging question for a while regarding iPhone app user interfaces. For example, consider WeightBot's User Interface. I am wondering, how are most of these user interfaces created? In general, of course.

Is there a way to simply design controls (that is, the images) in a program like Photoshop, then use that 'skin' for controls in UIKit? I realize that there are some controls that are probably created by the programmer (custom controls), but I'm referring to the ready-made ones that come in UIKit.

In other words, is the concept similar to 'splicing' web site designs? Where a designer draws out the design of the website in something like Photoshop, and then it is cut up into pieces which can be applied to form the actual website? I know this can be done for UIButtons, can this also be done for other controls, and is this how it is usually done?

Or perhaps this is done with Core Animation? I've heard this from time to time, so does this mean that the User Interfaces are 'hard-coded'? Or is Core Animation only used for the 'effects', such as applying the glowing effect to the numbers in WeightBot?

If there are any resources you can point me to I would really appreciate it.

Thanks!

Answer 1

I can't think of any written resource about this practice. But you are on the right track about Photoshop. Designers create assets visuals for the different controls in some design app such as Photoshop. Developer then assigns these assets to controls, e.g different states of a button are loaded as images, and maybe text added in code.

Looking at WeightBot UI and the big blue glowing numbers, I can think of two ways doing them:

1) precreate all the digits 0-9 in photoshop, and put them together at runtime (just load UIImageViews into UIView, calculating the sizes and positions at runtime)

2) create the text with something like UILabel and then apply effects to it programmatically at runtime.

Both ways are fine and both have different tradeoffs about app size, code maintenance, developer/designer skill required, performance etc. It is also common to mix these all over the place, especially with something like a fancy background image + text created at runtime on top of it.

You are correct that all of this is quite similar to web slicing and requires you to think about what elementary pieces the interface consists of and how to composit them together.

Answer 2

I've asked myself the same question and just like you i couldn't find any examples. After playing around i've managed to create a similar control. You can check it out on github http://github.com/kompozer/HorizontalSliderControl

Its very simplistic but i hope you get an idea. Basically its a UIScrollView, not much core animation needed.