PDA

View Full Version : Question about UI and Design




bhsu21
Jan 26, 2011, 01:34 PM
Hi, I'm reading about creating an app. I'm going to have the programming outsourced cause I know nothing about it.

When I'm designing my app, how do I go about getting the background, or little icons used for settings, back arrows, front arrows, etc. I guess I'm saying how do I get the "look" of the app that I want and the UI I want.

I want to leave the programmer to just program. And provide him/her with the design elements.

Do I need to create all the design elements myself? Are there stock icons that are free to use for simple things like back arrows, settings button, send to icon, etc. I know some do it on their own if they know Photoshop. If I don't and want to hire someone, am I looking for a graphic designer? Illustrator?

For general icons I mean like this

http://www.uistencils.com/collections/frontpage/products/iphone-stencil-kit

I know that tool is helpful to layout the design but how to get that design into the program?

If I'm doing it on my own on Photoshop, are there resources I can look at to know what size the background should be? Or what size the icons should be?

Hope this makes sense. If not I'll be glad to try and help clarify what I'm asking.

Thanks!!



nickculbertson
Jan 26, 2011, 02:19 PM
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
Jan 26, 2011, 08:52 PM
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.

MattInOz
Jan 26, 2011, 09:20 PM
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.

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.

nickculbertson
Jan 26, 2011, 10:13 PM
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.

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.)

dejo
Jan 27, 2011, 09:47 AM
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/

PhoneyDeveloper
Jan 27, 2011, 11:14 AM
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.

firewood
Jan 27, 2011, 01:31 PM
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.

Xian Zhu Xuande
Jan 27, 2011, 01:34 PM
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.
Good advice, and worthy of highlighting again.

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

bhsu21
Jan 27, 2011, 06:26 PM
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/

Thanks guys for the help. Really appreciate it. Will look at Apple's iOS Human Interface Guidelines. A lot to digest for me.

I did see this design template before. Hate to sound like a noob but exactly how would I use this? Is this just something I use to create a mockup to show myself and then the developer what i want it to look like? Or a graphic artists to show what I need to create?