Buy Generic Alprazolam - No Prescription DrugStore

Designery nerdy things.

Links to all the great UI UX mobile app resources that I use

by admin on March 21, 2012, 2 comments

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! This is great overview of iOS design guidelines. Hover over the images to get the pixel dimensions of each element. Meng To has written many really great of Medium articles about designing and coding, which led to this book: Design + Code Designing iPhone Apps — How To Set Up Photoshop For UI Design: a good reference on all the proper settings that you wouldn't normally know if you're just starting out. 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." The ustwo™ Pixel Perfect Precision Handbook 2 is now available, restructured and split into Pixel Perfect Principles and Pixel Perfect Details, as well as additional information on Accessibility, More Photoshop tips & techniques and updated design. Still available in many formats. 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. 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): @mengto / Meng To - Designer, coder & writer @teehanlax / Teehan+Lax - They release very helpful PSDs & Sketch templates of all the iOS components. Projects they worked on: Readability, Krush, Prismatic, Medium, Globe & Mail and more. @davidkmckinney / Blog: David McKinney - Interface design & code for iOS. Designed/Developed the iPhone app for Product Hunt, Founded Discovr, Co-made Flipcase @strikeux / : Jesse James Herlitz - Starbucks, Blixt, formally Designed @Target for iPhone at Übermind. @bryanjclark / : Bryan Clark - Starbucks, Blixt (also dabbles in XCode) He also has his own list of resources that he used to get started on iOS design & development. @iconmaster / : John Marstall - iOS and Mac Designer for Black Pixel @maxvoltar / : Tim Van Damme - Dropbox, formally at Instagram, Gowalla @miekd / Maykel Loomans - Instagram (and if you want to add me) @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. "...captures fleeting transitions between app screens and delightful animated UI elements that we'll otherwise lose forever as apps and operating systems continue to evolve." Curated by my partner in crime, Alli Dryer. 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. Mobile Patterns gets updated quite often, so I tend to visit that site the most. Android Design guide: A must read for anyone designing for Android, and surprisingly easy to read. A super helpful list of all Android specific sizes, naming structure and such can be found here, Android Cheat Sheet for Designers. Anyone designing for iPhone or iPad should always look at Apple's HIG, but keep in mind these are all guidelines. But you must know the rules before you break them. 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. GUI Toolkits: The largest collection of user interface components ON THE PLANET, or so the website says. iOS 7 icon template: Retina optimized, contextual & ready for Slicy. For use with Photoshop CC. Make one app icon, and have all the other sizes made for you, automagically. 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. Precomposed touch-device gestures created by @areus: "A set of basic, precomposed touch-device gestures in a neatly organized zip file for you to use in product demos or presentations. These gestures are available as raw Quicktime animations. They'll work in your video editor, and Photoshop." Pay $2 for free with a tweet. 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. After slicing all of these graphics, I like to use Gemba to upload the assets to Github for me. It's a real simple drag-and-drop. I really like it for when I'm tweaking a bunch of tiny things on the graphics, I don't have to keep reminded the devs to update to the latest image. I just do it for them. Also, there is now added support for adding assets to Xcode asset catalogs. 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 photoshop GUI built to the size of Nexus 5 screen. 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. While you're designing for Android, check out these Android Design Tips, which quickly gives you info on: Unit calculation, Icon sizing, Action Bar sizing, Navigation styles, 9-patch images, Device Dimensions and Asset naming. 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) or pay for them for around $2. IconMonstr also has free icons to use in either png or svg format. 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. 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. Also, Teehan & Lax have created an easy to use density calculator that gives you pixel measurements for all the densities at once (non-retina / mdpi, hdpi, retina, and xhdpi), as well as a chart explaining how they work. For those who use Sketch, here's a long list of plugins that are available. Mobile App design tools & prototyping software When I'm not at my giant monitor, I turn my iPad into a second monitor using Air Display. It's the next best thing to a portable monitor. I wrote an overview here. I've used both LiveView (free) and XScope ($30) for looking at my iOS designs. But I've started to really prefer Skala View. And I also use Android Design Preview (free) to look at android designs. How these work: These apps provide remote view of the psd file as you're designing 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. I really like Skala the best cause you dont have to worry about re-positioning the viewing frame every time you zoom in/out or move your psd window. And if you're mocking up a long screen that scrolls, you can scroll that whole length in Skala, as the others you have to manually move the frame to that part of the psd. Skala was kinda buggy for awhile, but they fixed alot of things so I recommend it highly. 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. 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. Ikonica allows you to test out an app icon on your device. 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've used Field Test App Solidify Invision App I really love the Keynote app is good for simple animation prototypes. I wrote a long overview with a sample that you can download yourself to view. I really like the quickness of Pop App for iPhone. Alli Dryer, has a 10 step overview. These are others, but I haven't fully explored them. Pixate (There's an overview here) Flinto (A good overview of how to use Flinto) Stand In Mawk Mobile Fluid UI Prototypes Scott Hurff wrote a great post on how to get the animations out of your head, giving a great overview of all the various animation prototyping tools out there. Designer’s Toolkit: Road Testing Prototype Tools: A great overview on deciding which prototype software to use, pros & cons by Emily Schwartzman Also to ease the transition of making a prototype and giving it to the developer to try to make from scratch, Chris Davis has a program in beta called Flux. It lets you build the transitions and import them directly into XCode. Putting your App Designs in a Device Once you have a few designs figured out, you'll want to present them in a device. It's best to actually show your design in an actual phone when you're presenting it. If that's not possible, or if you're looking on how to present it in your portfolio, then you might want to use one of these sites to easily drag-and-drop the design in a phone for mockup. (Also good to share these links with your marketing department so they don't have to bug you every time too) MockUphone has every angle with both iPhone and android frames in a transparent background. Place It by Breezi has both iPhone and Android frame in real life situation-ish backgrounds and transparent backgrounds. Screenshot App- Make beautiful screenshots for the App Store: If you want to quickly make iPhone App Store Screenshots, you can try this app that Mayank and I made. It pulls in your screenshot, allows you to choose your device frame, put descriptive text on top and exports it to all the sizes you need to your phone or dropbox. Get Notified on your App Store Reviews 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." Recording your iPhone screen I find this super important when reporting bugs to developers. It allows them to see exactly what is going on rather than just describing it in words. I also use this when making animated gifs of animations I want to show off. These are some tools you can use for this. Reflector app ($12.99): This is a mac app that mirrors and records anything that uses Airplay (iphone or computer). You can choose to record with a iPhone frame, which type of iPhone frame or no iPhone frame. It looks like it's available for Android as well, but I haven't tested it yet. If you have Yosemite, you can also use Quicktime (which is free) to record your screen or iPhone. This does not include a device frame but it does record at 60FPS with full-retina quality.

2 thoughts on “Links to all the great UI UX mobile app resources that I use

  1. Well done on assembling a really fantastic resource for Mobile UI and UX.

    With a commercial disclaimer up front: is a new iPhone and Android prototyping tool (soon tablet) – built from the ground up for mobile / touch screen UI design.

    Fluid UI has full iPhone and Android widget sets, image upload functionality. Fully linked prototypes with touch gestures, animated page transitions – test and present your designs on mobile with a click.

    Check out the beta:

Comments are closed.