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
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.