iOS Question about UI and Design

The iphone screen with the status bar is 460X320 so I would make my photoshop document something like 920X640 for the backgrounds. The "icons" can be any size. If you just need some basic images, use free clipart from a google search. If an image is under copyright, don't use it. To add the image drag it into the xcode project. If you are paying someone to program the app they probably already have some "icons" you can use. Keep in mind you will also need an application icon in various sizes, iTunes artwork, and iTunes screenshots

Nick

bhsu21 said:

Thanks Nick

So let's say I'm making a calendar app, what will I need to give graphically to the programmer? Am I going to have to design the whole calendar?

And so for the top toolbar above the calendar if I have a back arrow in the top left corner and a button for settings in the right corner, are you saying the programmer might have it? Or is that something can get online or need to design?


Thanks everyone.

Click to expand...

Ok maybe there is better advice as I'm at a similar level to you.
Have you downloaded the SDK yet?
Interface builder lets you layout your interface and add any OS controls you want to use into much the right location. You also get access to any standard graphics that are used in buttons. You could then take a screen shot of that in to a graphic program to layout the elements that make your app your's.

That stencil and pad kit looks really useful too.

bhsu21 said:

Thanks Nick

So let's say I'm making a calendar app, what will I need to give graphically to the programmer? Am I going to have to design the whole calendar?

And so for the top toolbar above the calendar if I have a back arrow in the top left corner and a button for settings in the right corner, are you saying the programmer might have it? Or is that something can get online or need to design?


Thanks everyone.

Click to expand...

As for the arrows, you probably could use some of these
http://www.freebuttons.com/index.php?action=display&buttonName=Balloons
You might also want some images for a load screen, menu(?), and calender cell layout in addition to the app icon and iTunes Artwork (Apple is pretty specific on the size and names of those image files.)

You can also find some design templates online, such as this one for Photoshop: http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/

I did a recent contract that had quite a bit of art in it. When I was bidding the customer claimed to have all the artwork ready and we also agreed that customer would provide all artwork. But when I got into the app it turned out that they didn't have all the artwork ready. When I told them what I need it took several days for them to get their artist to provide me the art and it was almost always in the wrong format or the wrong size. I ended up putting together some of the images from what they sent, resizing things etc. Some of this ended up looking fine and some didn't.

From the standpoint of the customer the more precise your designs for each screen the greater the chance that it will end up looking the way you want. So building mockups of each screen should be done. A lot of the artwork has to be precise sizes to match the screensize or sizes for particular controls. Some artwork might be more flexible in the sizes. png is favored for most artwork but jpegs work also and can be smaller file size.

You can expect some back and forth, re-evaluation etc. of what images will work in the app as things always look a little different in a working app vs a Photoshop mockup. My project that I mentioned eventually was finished, even though there was more back and forth than I expected.

If your app is heavy on artwork then you'll need an artist. If it mostly uses built-in controls then you might get away without one. If the app does build a significant custom UI, like a calendar, there will definitely be some trial and error to implement it, unless the developer already has code in hand to do this. Telling the developer "I want it to look exactly like the calendar in GreatCalendarApp.app" will only take a little time off the implementation.

Read the HIG

Even if you are not a developer, read Apple's iOS Human Interface Guidelines. It will tell you what kind of UI elements are stock, and how they should behave.

Study other top rated apps in the same category, and see what kinds of UI app customers expect, what kind of look they find attractive enough to buy. You may get some good idea's from the competition.

You can sketch up your UI on paper. Maybe graph paper. Apple recommends this. Make sure to mark which elements you think are stock UI, and which are custom graphics (your programmer will tell you if you make a mistake).

If you want to mock up in photoshop, there are libraries of stock UI elements for various iOS devices. Use one of those.

When you give the sketches to your graphic artist, make sure to tell them the DPI and exact pixel resolution(s) you need, that you want the artwork delivered in layers with transparency, and specify which UI item goes in each layer. Be very specific here, unless you have a very experienced iOS UI artist, or you may get botched results that you will have to fix.

It may require a round trip(or several) between the artist and the programmer to line things up exactly right. Make sure to budget for this in both time and money. Or make sure to get enough artwork assets to fix things up yourself.

firewood said:

Even if you are not a developer, read Apple's iOS Human Interface Guidelines. It will tell you what kind of UI elements are stock, and how they should behave.

Click to expand...

Good advice, and worthy of highlighting again.

Make sure your app if comfortable, familiar, and at home on an iOS device.