Coolidge Park Fountain

Jonathan — Thu, 18 Aug 2011 13:48:25 +0000

Rapid Prototyping Tools for iPhone and iPad UI Design

Jonathan — Tue, 28 Jun 2011 12:54:08 +0000

I have recently been hard at work developing my first user interface design for a universal iPhone and iPad application. With a background in graphic design and web development, I thought this would be an easy transition into the world of mobile apps. I couldn’t have been more wrong. This is honestly one of the biggest challenges of my career and the learning curve is steep. Designing and coding for a touchscreen device with limited memory and screen size requires a whole new approach and understanding of software engineering. After working through a couple of iPhone programming books, I have a new found respect for anyone who has created an app that has been deemed worthy of App Store approval.

Apple stresses the importance of app design strategies in the iOS HIG ( Human Interface Guidelines ) and makes it clear that the prototypes and iterations are an important part of the app development lifecycle. Although end users might not be aware of human interface design principles, such and touch gestures and button consistency, they can tell when apps follow them and when they don’t.

Along the way, I have found a few tools that have made it much easier for me to create rapid prototypes of the interface. These tools allow my team to conduct usability tests and make many key decisions before they are committed in code.

Here is a short list of tools that I have found to be very helpful throughout my UI design process:

Keynotopia

Keynotopia provides Apple Keynote and Microsoft Powerpoint templates that turns your presentation software into a rapid prototyping tool. It only takes a few minutes to create interactive wireframes for mobile, web, Mac and Windows. They also provide prototyping templates for Android, Blackberry, Windows Mobile, and Facebook interfaces.

Keynote Kung Fu

Keynote Kung Fu also provides wireframing tools for Keynote, but they are strictly focused on iPhone, iPad, and web. It’s only $12 too. Sorry Windows users, no dice.

Teehan & Lax’s iPhone and iPad GUI PSDs

Teehan & Lax provide a wealth of free goodies on their downloads page including hi-res PSDs for retina displays, baseline grids, and vector sketch elements. These templates have saved me several hours by providing me with almost all of the standard Apple UI Kit elements in one place. Have you ever tried to redraw an iOS interface. It’s not easy.

Invision

Invision is a new web software service that allows users to design fully interactive prototypes and collaborate with clients across the web. You can upload any type of image files, then create hotspots on top of your buttons to link the images together. It’s very easy to use and the end result really feels like a working application.

I hope this list helps you with your iOS interface design. Please comment and let me know if there are any that I left out.

Letterpress Process Video

Jonathan — Mon, 23 May 2011 16:36:05 +0000

I love this video for so many reasons. The cinematography is gorgeous and it was all done with Canon 7D video DSLR Camera. I love the fact that this level of quality video production is now available to a wider user group via the new generation of video DSLRs. The videographer really utilized the camera with most shots having focus pulls and a shallow depth of field. I’ve had my eye on the Canon 60D for awhile and this just sold it for me. This video also focuses on the subject of typography and letterpress printmaking, which is very dear to my heart. This takes me back to my college printmaking classes at UTK, where I learned to appreciate the subtle nuances of letterforms and became slightly addicted to the smell of ink and fine art paper. The graphic overlays and music really complement the overall experience of this video without overpowering the images. I’m posting this on my blog but I wish it was in my portfolio. Major kudos to Naomie Ross for producing one of my favorite short videos on Vimeo.