Styling your iOS apps   UIAppearance and other tips           June 28, 2012                                               ...
Nic Wise   MonoTouch developer   Xamarin Insider   Coffee lover.
Agenda• Overview of design• But I’m not a designer!?!• UIAppearance• Tricks• References
"Your app shouldnt look like your database threw up."             Aral Balkan @ NDC Oslo                http://aralbalkan....
What is design?• Means different things to different people• To me, it’s how an application works from  the users perspect...
Where to begin?
Start on paper• It’s quick and easy to change• You don’t have to be a “designer”, iOS is  very systematic• Gets you away f...
Tip!• Grab a larger, grid-lined Moleskine• 10x15 squares is exactly an iPhone 4S  screen size• Take photos of it, and crop...
Work out what your app is       Sarah Parmenter | http://www.sazzy.co.uk/
• Serious Tool: Mail, Dropbox  •   Apple UI. Limited colors; data is the most important      thing;• Fun Tool: Speedtest.n...
But I’m a developer, not       a designer!• A lot of these tricks are easy• Pay attention to details, compare yourself  to...
Customizations• TintColor (iOS 2+)• UIAppearance (iOS 5+)
Tint Color  Extremely simple, but limited        Works in iOS2+https://gist.github.com/2874588
UIAppearance  iOS5+ only (80%+ of all devices)   https://gist.github.com/2874948
You can also set the style when X is contained in Y        All buttons are UIBarButtonItem        (You are going to want t...
UIAppearance• A lot more than just background images• Most customisable properties can be set via  UIAppearance  • The one...
Where can I use it?•   MonoTouch wraps it up in nice discoverable    classes (better than ObjC!)•   Most iOS controls supp...
Tip!       Apple WWDC videos are available to all              registered developers*    https://developer.apple.com/video...
Managing assets• Try to keep them all in one folder  •   Not all in the root folder• If you have 2 assemblies, both with /...
https://gist.github.com/2876233http://docs.xamarin.com/ios/tutorials/Working_with_Images
Demo        Source code is athttps://github.com/nicwise/xaminar-            uiappearance
Essentials• A good graphics editor •   Photoshop ($$$) or Pixelmator ($). PaintCode if you have some skill.• Glyphish and ...
References•    iOS Visual Proportions    • http://aentan.com/design/new-visual-proportions-for-the-ios-user-interface/•   ...
Summary•   Always think your application through before you    start (paper and coffee are good!)•   Hiring a designer isn...
Xamarin    Seminar   Please give us your feedback  http://bit.ly/xamfeedback      Follow us on Twitter        @XamarinHQ  ...
Upcoming SlideShare
Loading in …5
×

Styling your iOS apps with Nic Wise

27,782 views

Published on

Video for this session: http://www.youtube.com/watch?v=zc1u-Eqria4

Code for this session: https://github.com/xamarin/Seminars/tree/master/2012-06-28-StylingYouriOSApps

Give your feedback on the session: http://bit.ly/xamfeedback

Nic Wise provide us with an introduction to iOS5 UIAppearance API’s and other tools which are handy when dealing with iOS design assets, as well as some other tricks for making your MonoTouch app look amazing and perform great, with or without a designer.

Published in: Technology, Art & Photos
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
27,782
On SlideShare
0
From Embeds
0
Number of Embeds
16,154
Actions
Shares
0
Downloads
58
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • Quoted by John Galloway\n
  • Anything from pixels to layout to screenflow;\nHow the user interacts with the application is the key thing\nMinimise the numbers of taps; Use sensible information density.\nMention TubeDeluxe. Crazy useful, but it’s all Apple UI!\n
  • \n
  • Visual design tools - esp ipad ones - can be useful, but they are very precise, which means you spend a lot of time working on making it look right, not how it works.\niOS design has a distinct rythmn - 44, 22, 11. 50 in some places...\n
  • \n
  • What is you app going to be? Serious or fun? entertainment or a quick tool?\n
  • \n
  • If you have the budget, get a designer or someone who can do visual design.\nThe basics are easy - Apple does let you fall into a pit of success.\nThere are 100’s (1000’s) of examples of great design on the appstore (and a lot of crap design too!)\n
  • \n
  • We will get to what Resources is later. In this case, it’s a UIColor object. Centralized colours FTW.\n
  • Explain CreateResizableImage on the next slide\n
  • CreateResizableImage makes an image which can be stretched, and expaneded, to any size while still looking good.\nThink how you would do the Messages speak bubbles. Or the Edit button above vrs the +\n
  • \n
  • \n
  • \n
  • \n
  • Use UIImage.FromFile as it loads async and also doesn’t cache, so has less overhead if you are just loading it once. \nUIImage.FromBundle is syncronous, and works better if you need to constantly reload the image.\nAlso keeps things in the same place if you need to change things.\n
  • \n
  • Photoshop or Pixelmator for pixels. Paintcode is a vector design app, but outputs code!\nIcons are not cheap and easy to get good ones.\nUnretina converts your @2x into a normal sized image. Not always perfect, but good enough.\nAppDesignVault.com has some great skins to get started, tho you might need to port some of the code.\n
  • \n
  • \n
  • \n
  • Styling your iOS apps with Nic Wise

    1. 1. Styling your iOS apps UIAppearance and other tips June 28, 2012 Xamarin Copyright 2012 © Xamarin Inc. All rights reserved
    2. 2. Nic Wise MonoTouch developer Xamarin Insider Coffee lover.
    3. 3. Agenda• Overview of design• But I’m not a designer!?!• UIAppearance• Tricks• References
    4. 4. "Your app shouldnt look like your database threw up." Aral Balkan @ NDC Oslo http://aralbalkan.com/
    5. 5. What is design?• Means different things to different people• To me, it’s how an application works from the users perspective• Includes how it looks, but not exclusively• Think User Interaction or User Experience, not User Interface.
    6. 6. Where to begin?
    7. 7. Start on paper• It’s quick and easy to change• You don’t have to be a “designer”, iOS is very systematic• Gets you away from the desktop• Search for “iphone template pdf” - lots of free ones.iOS Visual Proportions - http://bit.ly/qzZfnR
    8. 8. Tip!• Grab a larger, grid-lined Moleskine• 10x15 squares is exactly an iPhone 4S screen size• Take photos of it, and crop on the device. Swipe through to test your applications flow.
    9. 9. Work out what your app is Sarah Parmenter | http://www.sazzy.co.uk/
    10. 10. • Serious Tool: Mail, Dropbox • Apple UI. Limited colors; data is the most important thing;• Fun Tool: Speedtest.net, Twitter • Either Apple or custom, but moderate use of graphics.• Fun Entertainment: Games • Everything custom. Learn to love OpenGL. Hire a designer. Or 2.• Serious Entertainment: AppStore • Apple UI or some Custom UI.Very content heavy. Lots of tabs.• Utility: Weather • Usually custom, but can be either. Single screen. Usually single tasking apps
    11. 11. But I’m a developer, not a designer!• A lot of these tricks are easy• Pay attention to details, compare yourself to other top apps• Use existing tools and services• Employ a designer, especially for icons
    12. 12. Customizations• TintColor (iOS 2+)• UIAppearance (iOS 5+)
    13. 13. Tint Color Extremely simple, but limited Works in iOS2+https://gist.github.com/2874588
    14. 14. UIAppearance iOS5+ only (80%+ of all devices) https://gist.github.com/2874948
    15. 15. You can also set the style when X is contained in Y All buttons are UIBarButtonItem (You are going to want to look up UIImage.CreateResizableImage)
    16. 16. UIAppearance• A lot more than just background images• Most customisable properties can be set via UIAppearance • The ones you can’t appear to be oversights• Like everything in iOS, it’s a case of working out which property changes the thing you want to change
    17. 17. Where can I use it?• MonoTouch wraps it up in nice discoverable classes (better than ObjC!)• Most iOS controls support UIAppearance• It persists to system items you call • e.g. ABPeoplePickerNavigationController• Expect more to be added in iOS6, some glaring holes• Makes your app degrade nicely on old hardware.
    18. 18. Tip! Apple WWDC videos are available to all registered developers* https://developer.apple.com/videos/wwdc/2012/ Sessions of special note: 211; 216. Also: 221; 238; 230 Remember video is available in SD if you hunt a little. And all slide decks are in PDF format.* Registration is free! It is all under NDA though...
    19. 19. Managing assets• Try to keep them all in one folder • Not all in the root folder• If you have 2 assemblies, both with /images, they will be merged (which may be fine)• Consider a single static class which contains a reference to all the images, colors, and other resources
    20. 20. https://gist.github.com/2876233http://docs.xamarin.com/ios/tutorials/Working_with_Images
    21. 21. Demo Source code is athttps://github.com/nicwise/xaminar- uiappearance
    22. 22. Essentials• A good graphics editor • Photoshop ($$$) or Pixelmator ($). PaintCode if you have some skill.• Glyphish and Symbolicon icon packs • http://glyphish.com / http://symbolicons.com/ - $25-$40• Unretina (auto-scales @2x to normal) • https://github.com/stuartkhall/Unretiner (free on github) • Prepo, Screentaker• AppDesignVault • Great skins to get you started, from $70 each
    23. 23. References• iOS Visual Proportions • http://aentan.com/design/new-visual-proportions-for-the-ios-user-interface/• CreateResizableImage • http://tirania.org/monomac/archive/2012/Jan-30.html• Sample source is on GitHub • https://github.com/nicwise/xaminar-uiappearance• Josh Clark - Tapworthy.
    24. 24. Summary• Always think your application through before you start (paper and coffee are good!)• Hiring a designer isn’t that expensive, especially for icons• You can go a long way without even opening an image editor. Just look at what Apple and your favourite apps have done• Start with the Apple Human Interface Guidelines (HIG).
    25. 25. Xamarin Seminar Please give us your feedback http://bit.ly/xamfeedback Follow us on Twitter @XamarinHQ Copyright 2012 © Xamarin Inc. All rights reserved

    ×