Designing for an iOS app

One of the first questions I get asked by friends, and also friends of friends, when they learn that I am a “computer guy” and do something with websites is “Can you fix my computer?”.  The second question I get is “I have an idea for an iOS app, how do I start making it?”.

Depending on the talents of the person asking the answer can go any number of ways.  Being a designer by education and trade I’m going to focus on resources and techniques used in designing an app.

Zurb.com Responsive Sketch Sheet

One of the biggest design trends currently for website design is the concept of responsiveness.  Responsive web design was first talked about by Ethan Marcotte in his alist apart article from 2010 (http://www.alistapart.com/articles/responsive-web-design/) and then elaborated on in his book (http://www.abookapart.com/products/responsive-web-design).  Basically Ethan was proposing was that instead of creating multiple versions of a website to render correctly on a myriad of devices we should strive make our website responsive to the screen rendering it.

This idea of platform agnostic designing seems antithetical to the idea of iOS application design, but with the advent of the iPhone5 and the iPad mini it is a good idea for designers to be aware of these concepts.  I won’t even get into the myriad of android device screen resolutions.

A great starting point to get your app ideas from your head is to sketch them out.  These initial sketches can be extremely rough, you are just trying to get your idea down on paper.  To help facilitate this take a look at free sketch sheets provided by Zurb.com.  I would recommend using the responsive sketch sheets to get your ideas our quickly.  Then when you are ready to formalize your thoughts a little better the iPad stencils work really well.  You can print all the standard visual elements, cut them out, then quickly arrange and re-arrange them on the fly.  This technique is great for group brainstorming.

iOS Button Template by teehanlax.com
iOS Button Template by teehanlax.com

Once you have your sketches ironed out you’re going to want to formalize your design a little more.  Geoff Teehan has created a great free Photoshop file that contains everything you would want to use in iOS UI and in Retina resolution.

Now that you have your design and if you are a programmer, you can now being coding in xCode to bring your concept to life.  For those of you that need help with coding in iOS there are lots of free resources available such as Standford’s iPad and iPhone Application Development course.

Hopefully these tools and resources have given you a starting point for designing your own iOS app.  If you have any questions about what I’ve laid out, or any suggestions for a future blog post please leave your comments below.

Newsletter5

Tom has been desiging websites and interactive art work for over 12 years. He has experience working at some of largest not for profits in the country. Tom has a passion for emering web technologies and currently has a crippling addiction to chiplotle. Tom has a passion for great leadership and is always up for a discussion on what makes someone a great leader versus a good manager.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.