Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Apple Systems and Services > Programming > iPhone/iPad Programming

Reply
 
Thread Tools Search this Thread Display Modes
Old Jan 26, 2011, 01:34 PM   #1
bhsu21
macrumors 6502
 
Join Date: Feb 2008
Location: Jacksonville, FL
Question about UI and Design

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/collection...ne-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!!
__________________
"A person is a success if they get up in the morning and gets to bed at night and in between does what he wants to do." -Bob Dylan
bhsu21 is offline   0 Reply With Quote
Old Jan 26, 2011, 02:19 PM   #2
nickculbertson
macrumors regular
 
Join Date: Nov 2010
Location: Nashville, TN
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
__________________
My App Blog --->
nickculbertson is offline   0 Reply With Quote
Old Jan 26, 2011, 08:52 PM   #3
bhsu21
Thread Starter
macrumors 6502
 
Join Date: Feb 2008
Location: Jacksonville, FL
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.
__________________
"A person is a success if they get up in the morning and gets to bed at night and in between does what he wants to do." -Bob Dylan
bhsu21 is offline   0 Reply With Quote
Old Jan 26, 2011, 09:20 PM   #4
MattInOz
macrumors 68030
 
MattInOz's Avatar
 
Join Date: Jan 2006
Location: Sydney
Quote:
Originally Posted by bhsu21 View Post
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.
__________________
There is no such thing as "Collective Wisdom"
[ iPhone 5s, iPad Mini, 13" MacBookPro 2.7Ghz, 27"Al iMac i7, Black MacBook 13"]
MattInOz is offline   0 Reply With Quote
Old Jan 26, 2011, 10:13 PM   #5
nickculbertson
macrumors regular
 
Join Date: Nov 2010
Location: Nashville, TN
Quote:
Originally Posted by bhsu21 View Post
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...nName=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.)
__________________
My App Blog --->
nickculbertson is offline   0 Reply With Quote
Old Jan 27, 2011, 09:47 AM   #6
dejo
Moderator
 
dejo's Avatar
 
Join Date: Sep 2004
Location: The Centennial State
You can also find some design templates online, such as this one for Photoshop: http://www.teehanlax.com/blog/2010/0...ne-gui-psd-v4/
__________________
dejo is offline   0 Reply With Quote
Old Jan 27, 2011, 11:14 AM   #7
PhoneyDeveloper
macrumors 68030
 
PhoneyDeveloper's Avatar
 
Join Date: Sep 2008
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.
PhoneyDeveloper is offline   0 Reply With Quote
Old Jan 27, 2011, 01:31 PM   #8
firewood
macrumors 603
 
Join Date: Jul 2003
Location: Silicon Valley
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 is offline   0 Reply With Quote
Old Jan 27, 2011, 01:34 PM   #9
Xian Zhu Xuande
macrumors 6502a
 
Xian Zhu Xuande's Avatar
 
Join Date: Jul 2008
Quote:
Originally Posted by firewood View Post
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.
__________________
Mac Pro 3.2 GHz Xeon Retina MacBook Pro 15″ 2.6 GHz i7 iPhone 5 64 GB
Xian Zhu Xuande is offline   0 Reply With Quote
Old Jan 27, 2011, 06:26 PM   #10
bhsu21
Thread Starter
macrumors 6502
 
Join Date: Feb 2008
Location: Jacksonville, FL
Quote:
Originally Posted by dejo View Post
You can also find some design templates online, such as this one for Photoshop: http://www.teehanlax.com/blog/2010/0...ne-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?
__________________
"A person is a success if they get up in the morning and gets to bed at night and in between does what he wants to do." -Bob Dylan
bhsu21 is offline   0 Reply With Quote

Reply
MacRumors Forums > Apple Systems and Services > Programming > iPhone/iPad Programming

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Simple Graphic Design Question macuser1232 Design and Graphics 26 Nov 14, 2013 10:25 AM
Frog Design's Hartmut Esslinger Details Early Apple Design Language in New Book MacRumors Mac Blog Discussion 11 Oct 13, 2013 12:17 AM
Noob screen design question icewing iPhone/iPad Programming 0 Oct 29, 2012 11:56 PM
Apple files entire design team to London to collect design award Rogifan Apple, Industry and Internet Discussion 0 Sep 19, 2012 03:47 AM
App developed military design copyright question adildacoolset Community Discussion 7 Jun 15, 2012 04:44 AM

Forum Jump

All times are GMT -5. The time now is 06:48 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC