7+ Resources for Mobile UI Design

The world out there is most probably full of fantastic ideas that can help solve exactly your problem, so before you reinvent the wheel, why not take a glimpse at their stuff first?

Being a great app designer doesn’t only mean to have the neatest, never before seen ideas, but also to know what’s going on and design accordingly.
I’d like to show you a buch of resources that I always check when a new app is  in planning. They’re inspiring both from the perspective of the UI components used and the way there’re placed on screen as well as the graphic design.

1. Pttrns.com








I  believe the most comprehensive collection of screenshots from a variety of apps out there. They’re sorted into categories, such as “Comments”, “Custom Navigations”, “Splash Screens”, “User Profiles” etc. to help you find out how others display the stuff you want to display. The best website of that sort I reckon.


2. Mobile UI Patterns








Same as pttrns.com, this website puts together a collection of mobile app screenshots for any need. It is maintained by Mari Sheibley,  lead designer of foursquare.


3.  Mobile Patterns








Does the same as the two above, yet still needs to grow a bit further. I think by checking all of them you get a good overview, since they’re not looking at the same apps.


4. LovelyUI









While the previous three sites were looking at screens in total, this page breaks it down to particular UI elements like buttons. It also looks at typography, textures, sliders… There are quite some neat screenshots there!

While these four websites deal with stuff that’s already out there and is all polished and shiny, another page helps you find the right design pattern in its most rudimentary form (as a little scribble).


5. Android Patterns








How can I…? If your questions start like this, like “How can I help users navigate through a vast amount of content?”, Android Patterns is the right place for you to be. Rather than showing you finished apps, they help you find the right design pattern, such as the concept of an action bar or the window shade. You’ll see a  bunch of scribbles describing how it works, but also very helpful text. Android Patterns tells you what it’s good for, so when to use it, but also what pros and cons the particular design pattern has.  I simply love this page!


6. Moobile Frames









Ok, so now you’ve got the taste of wire framing and sketching? This website show you wire frames and sketches other people have made. It is an inspiration for your own app but can also teach you a lot about the whole process of creating an app concept and what its output should be, since some of the posts link to blogposts of the actual UI designer.


By now either your head is spinning of ideas and you want to start coding or you’are still stumbling through the internet, all desperate… This last site I want to show you might help you with both.


7. Cocoa Controls









This website is for for the techie people who want to start coding. It comprises an excellent collection of preexisting code for creating custom controls, shared by other developers. Do you need a color picker, or a custom pop over? Before you start coding it yourself, you just might want to take a look here first. Since the variety is amazing, you might also find a custom component you’ve never thought of before that suits exactly your needs right now, and build it into your own app concept. The component comes with the link to the source code as well as a little screenshot illustrating the functionality. Unfortunately, this is only for iOS stuff… Hope to see something similar for Android as well!


If you haven’t had enough, there’s quite a bunch of sites out there that showcase the nicest apps. You can take a look at iOS Inspires Me, iOSInspirations, Landing Pad, TappGala or Popular Mobi for native apps. Here’s also a couple for mobile web apps: Mobile Awesomeness, CSS iPhonejQuery Mobile Gallery and AppSites.