This will be an on going list of links/resources I have found that have helped me learn how to be a great mobile app UI designer (but of course I’m still learning).

I’ve had trouble finding resources that are just about mobile app design (opposed to mobile web) as it’s still a growing field of design, so I thought I would put this out there for people like me. I feel like I’ve been hording these links away for just me and my co-workers and they need to be on the web to share. So here we go..

Jenni’s big ole long list of mobile app design resources:

Books & Blogs with tips and tricks
Bjango also @marcedwards: The best blog I have EVER found with lots of relevant articles on how to prepare your files, photoshop actions, workflows and general knowledge on the best way to do something. Marc’s twitter is also full of little tips and tricks as well. It would be wise to follow this man on twitter!

iPhone Blueprints by Scott Jensen is an interactive iBook about the fundamentals of user interface design. “From creating icons to providing user support, iPhone Blueprints covers the start to finish of user interface design. The chapters are rich with examples and resources that demonstrate overarching principles of creating effective interfaces.” This book is great for anyone just beginning or been in the business for awhile.

The ustwo™ Pixel Perfect Precision Handbook : A free to download (an iBook version is available) guide book of tips & tricks. “From Junior to Creative Director we’re confident there’s a process or tip that can be picked up in there! And as employers, we’d love for some of the information here to make its way into university courses as graduating students are often strong in ideas and motivation but haven’t been taught the finer details.”

Mobile Tuts: Lots of great tutorials on how to design for mobile. Explore the site and find things for programming as well. (iOS & Android). Also check out PSD Tuts and Veerle Graphic & Web Design tutorials for more design specific tutorials.

Neven Mrgan aka @nevenmrgan: You may know his work from the iphone/ipad game, The Incident. Neven is someone I follow on twitter who puts alot of thought in apps. He posts many of good resources and workflows that I admire. He’s pretty entertaining too.

Josh Clark aka @globalmoxie: I think Josh goes to just about every conference out there spreading his love of gestures and hatred of buttons. I recommend following his twitter as he live tweets from said conferences and has great links to whats out there now. He also wrote the book, Tapworthy. Josh is more a UX guy than design, but he still has good information.

Other UI designers that I follow on twitter/dribbble, they either post their work or post really great thought provoking articles (I also follow alot of other designers but I wanted to post only mobile app designers here):
@maxvoltar / dribbble.com/maxvoltar : Tim Van Damme – Instagram, formally at Gowalla

@miekd / dribbble.com/miekd: Maykel Loomans – Instagram

@JulienRenvoye / dribbble.com/Justalab: Julien Renvoye – Justalab and dribbble superstar)

@dtrinh / dribbble.com/dtrinh: Danny Trinh – Path, formally at Digg

@markjardine / dribbble.com/markjardine: Mark Jardine – Tapbots

@willw / dribbble.com/will: William Wilkinson – Everyday App

@teehanlax / dribbble.com/gteehan: Teehan+Lax – most recently, Readability (but have done TONS of things)

(and if you want to add me) @thoughtbrain / dribbble.com/thoughtbrain: I’ve designed the UI for many iPhone, iPad and Android apps.

Sites with great Mobile App UI inspiration
dribbble: Everytime a new amazingly designed app comes out, I can always find the designer on here. Also, since everything is tagged, it’s pretty easy to find other great mobile app (and other kinds) of designers. If you don’t have an invite, I suggest at least signing up cause sometimes dribbble will just give you one randomly (how I got mine).

UI Parade: If you are overwhelmed by searching on dribbble, this takes posts from there and organizes them in neat little sections (buttons, forms, icons, etc) and “parades” the best of the best.

Beautiful Pixels also @beautifulpixels: Showcases all the newest, most beautifully designed apps, UIs, websites, icons, wallpapers, etc.

Android niceties: “A collection of screenshots encompassing some of the best, most beautiful looking Android apps.”

Colour Bookmark: They describe it best, “Drag the Colour Bookmark link to your toolbar to find out the colour palette of the website you’re currently on. Then simply: copy, paste and use the colours you choose.”

Ultra UI also @UltraUI: A great gallery of well designed iphone, ipad and android apps, updated fairly regularly, opposed to many other sites I’ve found with all the same apps featured.

Mobile Patterns, Android App Patterns, Lovely UI, Pttrns and Android Pttrns: This is great when you need to see examples of how another app has done a screen; like user profiles, maps, forms, feeds. It helps get you started on what is out there and what they have in common that make them work.

Android Design guide: A must read for anyone designing for Android, and surprisingly easy to read (opposed to Apple’s HIG, which was updated after Android’s redesigned guide came out).

Sites with great Mobile App UI freebies/helpers
Teehan + Lax: These guys have saved every UI designers ass by painstakingly creating templates that mimic of all of the common iOS and Android elements, giving us a base to start a design mockup.

Premium Pixels: This site has a bunch of PSD freebies, which allow you to open those psds and figure out how those amazing UI elements are built. This site is what taught me how to make super crisp shadows and highlights, the perfect pressed button and gradients (something I shunned as a print designer).

Subtle Patterns: All those cool, not flashy backgrounds and textures can be found here and download. If you click on the giant thumbnail, the background of the site becomes that pattern, allowing you to see it in action better before downloading.

SliceExtractor: My co-worker showed me this AMAZING shortcut action. I’m calling it, SliceExtractor. Download it and save it in your Photoshop Presets. It saves alot of time cutting up your designs. Instructions are included in the link.

PNG Express will slice your graphics and make spec documents. I haven’t tried this out yet, but it sounds amazing. ($30)

Crunch allows you to extract all the assets from any iOS app you ever installed in one click. This is an excellent way to see how other apps are built and sliced.

Android UI downloads from Google: straight from the horses mouth, check out the guide too. It get’s updated pretty often, which is really nice.

This is the most recent Android Ice Cream Sandwich (ICS) Jelly Bean photoshop GUI available to download. Also, here’s a PSD of Google Maps graphic assets.

Actionbar: The most up to date Android UI PSD freebies aka the most difficult UI to stay up to date with. (There’s lots of old out-of-date Android PSDs out there) Plus some UI tricks for designing for Android.

The Noun Project: There are oodles of places to find icons, Meagan Fisher (@owltastic) has a great big list of them already made, but this one in particular allows you to download them for free (with CC Attribution).

In addition to those icons, there some Android specific icons here, on sale for $25.

The Android Holo Colors Generator allows you to easily create Android components such as editext or spinner with your own colours for your Android application. It will generate all necessary nine patch assets plus associated XML drawables and styles which you can copy straight into your project.

Dev Rocket ($10) is a plug-in that contains a collection of actions made into a photoshop panel. “A simplified solution to working between display resolutions, breaking down full ui designs into separate elements ready for Xcode and saving for the Retina display are just a few of the awesome features DevRocket brings to iOS designers currently using Photoshop.” Definitely check out the video in the link for more info.

Mobile App design tools & prototyping software
Android DP / PX converter calculator: I can never figure out how to convert this as photoshop isn’t built for this functionality. This makes it alot more simple.

I use both LiveView (free) and XScope ($30) for looking at my iOS designs and Android Design Preview (free) to look at android designs.

How these work: These apps provide a frame/window that you line up over your psd file as you’re designing and allow you to see the design on your device, live. Some people take screenshot, upload it to dropbox and then view it on the device, but if you need to compare which font size looks best, this is WAYYYY faster.

LiveView is super simple to use and also allows you to interact with the device. You can place the layers palette in the viewing window and press the layer on/off while showing someone your design on the device. This has also been updated to use with the iPad 3 retina screens aka the NEW iPad.

XScope has a TON of features: zooming, rulers, color picker as well as the remote viewing to the device. There are so many , it’s best to just check out the video, but this is why it’s $30 as oppose to free. These tools are also great for developers. I do not think that they have updated for the iPad 3 as of yet.

Most of the prototyping sites are in beta and require an invite, these are handy for explaining how an app flows to clients. None are perfect, but they are kinda handy. Usually you just upload your comps and apply hotspots to different areas to simulate a working app. Most of these site will give a mobile friendly link to a webpage where users can test the app.

I like these two the best so far:
Field Test App
Invision App

This one looks promising but I’m still testing it out:
Prototypes

These are others, but they don’t quite have the features the ones above have:
Mawk Mobile
Refine.io
Fluid UI
Proto.io

And lastly, once you do have an app in the App Store, you might want to check out AppBot (free!): “AppBot sends you an email with all of the new App Store reviews for your iOS apps (If you’ve had any on that day). Each week we’ll send you an email with all of your Apple front page features such as Editor’s Choice, New & Noteworthy etc (if you have been featured at all). If you have multiple apps, you get different emails for each of your apps sent straight to your inbox.”

(originally published on thoughtbrain)