Introducing GiftKit – gifting made easy

I love Appirater and enjoy how simple and easy the process of letting users easily review apps in the App Store.

In a previous #idevblogaday post, I wrote about how to get your users to spread the word and their love for your app in a post entitled Assisted word of mouth: Get users to sell your app.

In this post, I wrote about App Store Gifting and how awesome it actually is. To recap: You’ve already sold your app, the user loves it and wants to share his/her love for it. Gifting is a great way to share the app, and once a user has spent $X.XX, they’re usually more apt to want to Gift your app to a friend or someone in their family. Read the post for more insight.

While Gifting was just one of the ideas I included in my post, Gifting really seemed to be the key idea that most people loved and many wanted to include in their apps.

So, today I am releasing GiftKit. It’s basically Appirater, but for gifting.

GiftKit is a small utility class that allows you to prompt your users to Gift the app via the App Store, spreading the love to their friends and family.

Simply add GiftKit to your iOS project and call one of the various methods to increment uses and launches and eventually prompt the user to Gift your app via the App Store.

Simply add GiftKit to your project and call one of the methods provided. Change days/uses/alert text in GiftKit.h to suit your needs.

Optionally, add a Gift this app to allow the user to Gift more times in the same version – or without having to wait for the prompt! Call [GiftKit giftApp] to jump directly to your App’s App Store page.

By default 5 days must have passed before the alert appears. Furthermore, either 15 uses and 25 significant events must occur before the alert appears.

Add -1 to significant events in the header file if you only care about the launch method calls.

Here’s a screenshot of the UIAlertView in action:

Clone the repo here: https://github.com/runmad/GiftKit

Be sure to check for updates, as I might try and improve it a bit later. If you have any ideas feel free to comment or help out on Github :)

Follow me on Twitter: @runmad and be sure to say “hi” at WWDC next week if you’re there!

ColorKit: A Color Assessment Utility App

For this week’s #idevblogaday post, I’ve written a small utility app that’s freely available for download on github.

ColorKit is a tiny iOS app (iPhone) which allows for quick and easy color-sampling for a UINavigationBar + UIToolBar. It allows developer to easily assess the appearance of tintColor on the device.

Last week, I talked about adding textures and depth in your app, in particular to a UINavigationBar. While this effect is great when used appropriately, UINavigationBar’s tintColor property is extremely handy and useful to give your app a unique look with one line of code.

Finding the right colour for your app can be a bit of a hassle, especially due to differences in colour appearance depending on which monitor or device you’re using. Furthermore, UINavigationBar and UIToolbar are coloured with a gradient and has a glossy shine, so knowing exactly which RGB value to use is often impossible.

ColorKit builds and runs right on your iPhone and makes it extremely easy to quickly play around with various RGB settings to find the perfect colour for your app.

Inside the app is a UIImageView which allows you to add a screenshot from your app to better see how the colours may look with your UI.

You can download a copy of the code here: https://github.com/runmad/ColorKit

Pro-tip: Do not use bright colours. Play around with the values to create more “faded” colour. Brighter colour wash out the title text and generally look horrible.

Faking depth and textures in your app

I just returned from vacation, so this won’t be a huge blog post. I’m making a pretty sweet offer at the bottom of the post, so be sure to check it out at the bottom!

In this post I will address how you can use simple techniques to create a sense of depth on a flat touch screen device and a “visual tactility” to your app – and without going completely overboard with textures. While I like to create unique examples, I’ll be using examples from existing apps and talk about what effects are used, what’s good about them and why you should stay away from some of them.

What’s too much?

You might be familiar with the Game Center app. While the design is great and I can appreciate they were going for a pool table-look or poker-table look with wood grain navigation and tab bar, and a green fabric background, but I personally think it’s all too much.

Gloss on top of wood (navigation and tab bar) just doesn’t work, and it really makes it look more fake than real. The horrible font and it’s weird shadow are also not working. And the shadow is depressed into the background as well? Weird. Furthermore, notice how some items in the main view are raised from the background, while others appear to be depressed into the green background. And why is there a shadow coming from the navigation bar only and not the tab bar? The navigation bar is raised from the background, yet the identical looking (texture-wise) tab bar is on the same plane as the background.

Needless to say, this is a great example of what’s too much.

Textures that work

Groceries is a great app from Sophia Teutschler. Here’s a screenshot taken from the App Store page for Groceries:

Notice how this app uses lots of textures, yet they make the app more appealing, and when you view it on your iPhone it really looks and feels great. Groceries also uses a wood grain texture for the navigation bar and tool bar. The background (more visible on first launch of the app) is a cork board texture, which matches the two bars. The table resembles a piece of note paper stuck to the board, with the top edges torn and casting a soft shadow on the background.

Now, while both Game Center and Groceries share some major similarities, why does it work for Groceries and not for Game Center? As I mentioned earlier, gloss on wood doesn’t work. In Groceries, Sophia uses a soft white-to-transparent gradient that helps fake a soft light from the top, making the bars seem 3-dimensional. The colours of the text match in the bars the wood grain much better compared to the Game Center app. Both the navigation bar and tool bar cast a soft shadow on the background and paper creating a nice depth in the UI.

Groceries is a great example of how extensive, yet careful use of textures in your app’s UI can compliment your app’s content and not desperately steal away attention from it like in Game Center.

Shadows create depth

Using shadows, you can easily create a 3-dimensional effect. As seen above, you can protrude and depress views when using shadow effects on views and texts.
For UILabel, see the properties shadowOffset and shadowColor. I suggest you use these for most text in your app. As a general note, do not use it with longer text, such as in a UITextView or where not approrpriate, such as in a UITextField. I briefly talked about how to appropriately use colours and offset in this post: http://runmad.com/blog/2010/11/random-tips/ (Tip #4). Have a look at the above screenshots and see how shadowOffset is used.

Some points from this post:

  • Don’t go crazy with textures. Subtle is key and more is never the answer!
  • Use textures and colours that compliment each other.
  • While you want to go for real-world look and feel, creating completely “realistic” interfaces often never works. It’s all about finding an in-between state, where it’s appropriate for a non-tactile, touch screen device, yet still has a 3-dimensional depth to it.
  • Shadows create depth in your UI

For further reading, Mike Rundle posted a nice post, Crafting Subtle & Realistic User Interfaces, where he talks about gradients more in depth as well as tips for using materials in your UI design.