Question about UI and Design

Discussion in 'iPhone/iPad Programming' started by bhsu21, Jan 26, 2011.

  1. macrumors 6502

    Joined:
    Feb 25, 2008
    Location:
    Jacksonville, FL
    #1
    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!!
     
  2. macrumors regular

    nickculbertson

    Joined:
    Nov 19, 2010
    Location:
    Nashville, TN
    #2
    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
     
  3. thread starter macrumors 6502

    Joined:
    Feb 25, 2008
    Location:
    Jacksonville, FL
    #3
    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.
     
  4. macrumors 68030

    MattInOz

    Joined:
    Jan 19, 2006
    Location:
    Sydney
    #4
    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.
     
  5. macrumors regular

    nickculbertson

    Joined:
    Nov 19, 2010
    Location:
    Nashville, TN
    #5
    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.)
     
  6. Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #6
  7. macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #7
    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.
     
  8. macrumors 603

    Joined:
    Jul 29, 2003
    Location:
    Silicon Valley
    #8
    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.
     
  9. macrumors 6502a

    Xian Zhu Xuande

    Joined:
    Jul 30, 2008
    #9
    Good advice, and worthy of highlighting again.

    Make sure your app if comfortable, familiar, and at home on an iOS device.
     
  10. thread starter macrumors 6502

    Joined:
    Feb 25, 2008
    Location:
    Jacksonville, FL
    #10
    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?
     

Share This Page