Tap Swipe Pinch

The devil’s in the details.  I can’t think of many disciplines in which this statement is more true than in that of UI design where attention to subtle detail can mean the difference between an ok-looking design and a great one.  If you’re interested in learning how to create a good UI, or at least understand one, studying great designs is key.  And inspecting each carefully placed pixel to see how those designs were made can be challenging using only the naked eye.

I had my face pressed against my Mac’s screen for a long time before I found out that Apple actually gives you a great tool to allow you to do this for free.  If you have the developer tools installed, go to Finder and launch the Pixie app.

Pixie opens a window that zooms-in to the pixel level, the screen area around your cursor.  This can help you pick up those crucial subtleties.  I also like to look at the color values for the pixels (which can be turned on in the Preferences) to see exactly how a feature was created.  For example, in inspecting this number field, I can see that it’s made up of a linear gradient ranging from (240,240,240) down to (174,174,174). 

I can also see that the border of the field and the background have subtle gradients.

If you’re serious about inspecting an iOS app’s UI, I recommend using actual screenshots taken on your iPhone as opposed to using those on The App Store inside of iTunes.  When inspecting apps, I’ve noticed small artifacts on iTunes App Store screenshots that don’t appear on actual device screenshots that I take.

And if you’re on the hunt for some solid UI designs to inspect, here are a few of my favorite sites:

http://tappgala.com
http://tapfancy.com
http://wellplacedpixels.com

If know of any other great iOS design sites, leave a comment and let everyone know.