So, how can we help you?

Tell us a little about you and your project and we will get back to you quickly.


Archive for the ‘iPhone App Design’ Category

How to Organize Your App’s Interface

Tuesday, November 1st, 2016

Users accomplish goals in a series of mental steps. Each step involves a mode of thinking. And each mode of thinking requires certain bits of information, but not others. Our apps must help users accomplish definite goals. But our apps must also take into account the mental steps the user uses, the mental modes these steps involve, and the information required for these modes. These steps should govern the organization of our interfaces.

Each mental mode should correspond to either a screen or window. Elements (buttons, scroll bars, etc.) and information that go along with a certain mental mode should be put together into one screen (or window). And these steps/screens should then be stacked in space (a la Jesse James Garret). The order in which these steps are stacked hinges upon the overarching goal the user is trying to accomplish.

Let’s give a concrete example. When I use iMovie, I have a definite goal: to awe my family, various film festivals, and, indeed, nothing less than the entire world with my cinematographic genius. I have an idea for an art film about black blocks from space that teach humans how to turn into glowing star-babies. The purpose of iMovie should be to facilitate these delusions of grandeur.

But: this goal requires many steps, each of which involves a distinct mode of thinking. First, I must conjure up some video material. Second, I need to organize this material, clipping and trimming it to perfection. Third, I must fudge with the soundtrack. Fourth, I need to name and save my masterpiece. And, fifth, I must share it with various family members, film fanatics, studio execs, and award committees.

Budget constraints in mind, I decide to film my vision using my iPad. iMovie has a button that takes you straight to the iPad’s video camera. Note: the camera has its own mode, its own screen, and only information relevant to its filming function.

I then go to another mode on another screen for editing.






The Anatomy of a Successful App

Wednesday, October 15th, 2014

I gave a talk a couple weeks ago at 360iDev Mini in beautiful Greenville, South Carolina, called The Anatomy of a Successful App. It is essentially a summary of my App Making guide, covering — in brief — what it takes to build a successful app, from idea, to design, to marketing.

Check it out here:

Jeremy Olson – Anatomy of a Successful App from John Wilker on Vimeo.

If you thought the video was helpful, you should check out the App Making guide I released yesterday. It is designed to be a comprehensive guide to succeeding on the App Store.

Screenshot 2014-10-14 17.20.34
I also wanted to say thank you to all the awesome folks who supported the App Making launch yesterday. All your support resulted in App Making first day sales being comparable to one of our successful app launches. It even got up to #5 on Product Hunt. That is pretty awesome because if we can make education a sustainable business, it helps us do more of it.

p.s. The 360iDev conference was also a great opportunity for my daughter of two weeks to learn the finer points of Swift pointers versus Structs, among other things. She enjoyed it.


p.s.s. I have recently been on a bunch of different podcasts, in case you are interested: MobileAppChat on app marketing, The Ray Wenderlich podcast talking about how to meet people in the app industry and launch successful apps, Novice No Longer on Swift, design, and teaching, Iterate on Hours, and My Appventure on my story. Phew! It has been busy around here.

The Apple Watch’s greatest superpower

Wednesday, September 10th, 2014

I just wrote an article on Medium about what I think is the Apple Watch’s greatest superpower.

At the bottom of that post we revealed Hours for Apple Watch, iteration #2 (see above). Check it out and let me know what you think.

Tutorial: getting started with Pop

Monday, April 28th, 2014

It is here! I’ve been raving about Pop for a while and today Facebook finally made it available to the public. You owe it to yourself to download Pop and use it to revolutionize the way you think about animation in your app.

Here is an example of how we are using Pop in Hours:

Since I had the privilege of using the Pop beta to create animations for Hours, I feel like I owe it to the community to share a quick tutorial on how to get started with Pop to make a basic animation:

I’ve created a sample project that has detailed comments, as well as a more advanced animation, download the source code here.

If you would like me to make some more tutorials, please share this page.

Using Origami to design animation

Tuesday, April 22nd, 2014

Yesterday I mentioned that Facebook will be open-sourcing Pop, the awesome animation framework that powers Our Choice and Facebook Paper.

But what about designers? While learning Objective-C and using Pop would be great, that’s a ton work.

Well, designers, you are in luck. Origami is a tool that Facebook built on top of Apple’s Quartz Composer that makes designing incredible animations for apps relatively simple.

Even better news? Once Pop comes out, your programmers won’t be complaining so much when you come up with that crazy animation because the Pop animation framework will integrate with Origami. That is huge.

But… Quartz composer and Origami have a bit of a learning curve. I’ve considered taking some time to make tutorials since I think these tools are so important, but today I found out that I don’t have to. Nathan Manousos, creator of Flinto has already started making some short, no-nonsense tutorials that teach the basics really quickly. Really great stuff.

Tut 1:

Tut 2:

Tut x: if you want Nathan to make more, I suggest sharing those videos on Twitter, Facebook, etc. and be sure to send Nathan a tweet expressing your appreciation. It’s a great service to the community.

If you want a more in-depth look at Origami, check out Jay Thrash’s talk, Prototyping with Facebook Origami.

clicking on ".more" toggles class "visible" on "#popover" clicking on ".pageCover" removes class "visible" on "#popover"