Read without ads and support Scribd by becoming a Scribd Premium Reader.
See Premium Plans
 
 
Digital Organics
:Web Design Sunshine Coast- 1/102 Howard Street, Nambour, QLD 4560
T
617 5476 3800,SEO Sunshine Coast
 
10 Tips For iPhone User Interface Design
Designing for iOS4 devices is totally different from designing for the web. Sarah Parmenterillustrated how to conceptualize, design, and develop a successful user interface for iPhone.The most successful apps fulfill basic needs of people who need to find something quickly, orpeople who are plain bored or just micro tasking.When you design user interface with the Iphone, it's a completely different category becauseyou've got one platform, Webkit (there are other browsers but the main one is Webkit) and all theconstraints of designing for the web. We have barriers to actually make it designing for Iphone apleasure and that's something that's a bit strange to get your head around because we have thisguidelines, various strict restrictions on what we can and can't do in the Iphone. But this actuallymakes the design process easier.How do we start this process and give a helping hand in making an Iphone user interface projectyou might find along the way?1. Make a Development ChoiceThe first choice is Apple SDK. It's got steep learning curve, cocon and objective C. It uses appsfrom the Apple SDK which is $99 to join but it's got a lot of potential to generate a significantincome from the Itunes store. There are great books you can find to learn more about Iphone andmobile design and development to such books as "Iphone in Action", "The Iphone Developer'sCookbook", and"Mobile Design and Development".  Your second choice Web Only App. This uses HTML/CSS techniques with no revenue from the appstore. It's good for clients on lower budgets and can be made to look like a native app.The third choice is a Hybrid App. There's app like PhoneGap, Mobile Roadie, and JQTouch. Youhave to be very careful what you use because sometimes apps get rejected on the basis of notusing the SDK.2. Clearly Define What you Design You start with an Application Definition Statement (ADS). It is a couple of sentences that describesexactly what your app does. Don't make large paragraph with every single detail and as coherentto someone who maybe doesn't understand. Just keep it short and straightforward.Figure out the best UI components for your application. The first type of design app is SeriousTool which is one of the very specific design methods. This comes with limited colour palette andalways focuses on minimising graphics. The most important thing about this type is the data. Itcontains standard navigation with clear divisions and blocks.
 
 
Digital Organics
:Web Design Sunshine Coast- 1/102 Howard Street, Nambour, QLD 4560
T
617 5476 3800,SEO Sunshine Coast
 
Next is the Fun Tool. They are types with moderate use of colour and graphics and with simplehierarchy of information. This always encourages leisurely productivity which is very diffrent to theSerious Tool.The third type is Fun Entertainment. Now this is very easy to design for because this embodiesgames. This are extremely graphically-rich, have fun use of sound, with simple hierarchy of information, and in-your-face visual feedback.The fourth one is Serious Entertainment. This specific design have moderate use of graphics,focused on content, with normally heavy use of tabbed data, and standard navigation elements.This is probably the hardest type to get yor head around.The fifth app type is Utility. These are graphically rich with normally single screen. It tries to nothave a hierarchy and normally used for less than 30 seconds.3. Provide Inspiring Documents You can wireframe however you like
 –
paper, Fireworks, Photoshop
 –
but don
’ 
t get too detailed:keep to shades of grey and white and block elements. Don
’ 
t produce detailed icons or anythingthat could steer your client away from the main task of signing off the functionality; they can signoff design elements later.Think about the gestures a user will need to use to get from one screen to another or to refresh apage and sign these off at this stage as well. You might also want to bear in mind whether you
’ 
regoing to support a different landscape mode, in which case you
’ 
ll need to wireframe this too.Giving the user a visually rich landscape mode can really add brownie points to your app.4. Be Prepared for UX InterjectionIf you
’ 
re presenting your wireframes to clients, take the time to produce comprehensivedocuments, annotate where required and reinforce any design or UX decisions you
’ 
ve had to makefor the greater good of the app. By putting your thoughts down on paper and explaining detailsconcisely, you
’ 
ll minimise questions and queries from the client throughout the process. Don
’ 
t betempted to just send off screens as an attachment in an email: give them purpose and show themin the most realistic environment you can.I always embed my screens into a Keynote document, with the screen on the left and a paragraphabout the screen to the right. I never embed full quality artwork because I
’ 
ve had my fingersburned too many times. It
’ 
s a good habit to slightly downsize the artwork for presentation.5. Orientations, Dimensions, and Hierarchy You
’ 
re also going to need to think about the space for touch gestures, such as buttons. Theminimum hit size on an iPhone is 44 x 22px: anything smaller than this and a user might get
 
 
Digital Organics
:Web Design Sunshine Coast- 1/102 Howard Street, Nambour, QLD 4560
T
617 5476 3800,SEO Sunshine Coast
 
frustrated with mis-hitting their intended buttons. The ideal fingertip target is a comfortable 44 x44px. You also have to think about the space between anything a user will need to touch. Therecommended minimum space between elements is between 12 and 22px. Always embed my screens into a Keynote document, with the screen on the left and a paragraphabout the screen to the right. I never embed full quality artwork because I
’ 
ve had my fingersburned too many times. It
’ 
s a good habit to slightly downsize the artwork for presentation.6. Unravel High Fidelity UI You
’ 
ll notice that the apps that ship with your iPhone or iPad are of the highest quality, thatattention to detail is in abundance and that they
’ 
re pleasing to the eye. The apps that get thegreatest graphical reviews are those that follow suit. The iPhone and iPad are in such closeproximity to your eye level that it
’ 
s possible to make the most subtle of textures and gradientsnoticeable. Flat, block colours can work well but just adding hints of gradients, texture and realismcan lift your app from good to fantastic.Other elements that can make an app beautiful are text highlights, tactile backgrounds, subtleshadows, high gloss finishes and clean, crisp, custom icons within your app (of course, all usedsparingly and appropriately).Studying the UI of your favourite app will help you to see these little details but the best apps arealways those that get the UI and the UX right, such as the Twitter for iPhone app (formerlyTweetie). The
 “
pull to refresh
” 
has become a standard gesture across many apps and coupled witha beautiful user interface: it
’ 
s no wonder it has become a favourite amongst Twitter iPhone users.7. Don't Reinvent the WheelWhile you are designing, keep your documents neat and tidy. If you
’ 
re working in Photoshop,make sure you group and name layers sensibly. Whilst Photoshop is an industry favourite, you canwork in any program that can export PNG files, as this is what is used for development.It
’ 
s normal to hand over a Photoshop document to a developer at the end of the process: unlikethe web, this isn
’ 
t frowned upon. It
’ 
s always worth asking your developer whether they
’ 
d like youto pre-slice the UI into PNG files.8. Take Time to Design a Beautiful Icon Your icon is one of the most important things you
’ 
ll design: it will be someone
’ 
s first contact withyour app on the App Store. Start on paper: it
’ 
s expendable and easy to let your ideas flow withoutcommitting to anything. Once you have something you feel you could develop further and betteron the computer, move forward. The best icons always portray a single, defined silhouette and tella story of what your app represents.
Search
Search History:
Searching...
Result 00 of 00
00 results for result for
  • p.
    • Notes
    Load more