Blog Archives

There comes a point in the creation of every great app that you move from concept to implementation.  On the design side, this is when you feel like you have your wireframes and storyboard walk-throughs (or collection of bar napkins) at a point where you want to start “real” development.  There are definitely some great tools for the iPad to help solidify your app concept from a more abstract design point of view. Looking at the more tangible side of visual design, I’ve found the following tools available in the Mac App Store to be quite helpful.

Choosing the Right Colors

ColorBlender ($1.99). When choosing a color palette for your App, you either have an eye for it or you don’t. For those of us who don’t have it, ColorBlender can help out.  There have been a lot of studies on how humans are affected by different colors, and there are certainly combinations of colors that are hard on the eyes.  The main function of ColorBlender is to create a palette with six harmonious colors that will make looking at your app pleasant, or at least tolerable, for most people.  The only thing this app is missing is a good color picker, but that’s quickly remedied using OS X’s included DigitalColor Meter utility. After choosing a base color in the DigitalColor Meter, ColorBender will help you select a collection of harmonious colors to use throughout your app.

AppControls ($19.99). Once you have a solid color palette picked out, the next step will be to use that palette when creating various controls throughout your app. AppControls will help you create the artifacts necessary to create some great looking controls. You can copy the values of the colors generated in ColorBender, and paste them into the Color Picker of AppControls. Even if you don’t like the limit of six colors that ColorBender generates, you can at least use it to select the two colors that will be used to create a smooth gradient on your controls. All you need to do is the following:

1. Use the DigitalColor Meter to select the color you want to use as your primary color, and hit the Shift+Cmd+H key combination to hold the colors on the screen.
2. Type the color codes into ColorBlender to set your six harmonious colors.
3. Copy the value of the color you want to use directly from ColorBlender’s screen and paste it into AppControls color picker.

Preparing for App Store Submission

LittleIpsum (Free). How many time have you tried to size up how a data entry or large text display field will look by pounding random keys on the keyboard? A tool named LittleIpsum provides a better way. It generates Latin text in varying lengths including words, sentences and paragraphs. The text is then copied to your clipboard, and ready to paste into your app.

Status Barred ($0.99). Occasionally, you may want to pull together a collection of screen shots for the current state of the application, either to update documentation when designing a change in the way the application works or simply to craft your marketing material.  Status Barred is a simple little app that will crop off the carrier status bar from the images you take so that the focus in on your app, and not your carrier.

Icons ($2.99). The final Mac App in this collection of design apps will help in the creation of icons, both for and within the app.  It can also be used to help with the design of any support or marketing web sites that will be created.  Icons could not be easier to use. Start with a 512×512 square image, drop it into the tool, and generate your icons.  You can even round the edges and add that cool glass look.

While these tools individually are no match for Adobe’s creative suite of tools, for the price, they add up to a competitive package. And like the start of a thousand bee stings, it only makes sense that this tightly focused new breed of apps help others create more great task-specific software as the App Store model continues to propagate.

Related content from GigaOM Pro (subscription req’d):

• Mobile Q1: All Eyes on Tablets, T-Mobile and AT&T
• A Media Tablet Forecast, 2011 – 2015
• Connected Consumer Q1: The Over-the-Top vs. Pay TV Battle Heats Up

The best app ideas don’t necessarily come from the ranks of iOS developers. Anyone can have a good idea for a new app. The challenge is in getting that new idea down in a way that makes it easy to share and visualize. For both developers and non-developers alike, the App Store has a selection of design tools for the iPad that each play a unique role in the process of evolving a good idea into a great one.

UI Sketcher ($3.99) — In the “better than a bar napkin but still sort of a bar napkin” category, there’s UI Sketcher. In this app, all you get is virtual graph paper and a selection of five different pens.  If you want to pass around an iPad for a rapid session of brainstorming, then a free form based designer like UI Sketcher is the best choice. I would recommend investing in a stylus like the Pogo Sketch or the upcoming Cosmonaut to help your inner artist become more of a professional draftsman than a kindergarden finger painter.

Mocking Pad ($9.99) — Mocking Pad represents a step up from free form design.  There is a lot to be said about keeping the initial design as loose as possible, meaning you probably don’t want to spend a lot of time on color choices, pixel perfect button placement, or even the exact implementation of which widget to use.  This designer is that you have a pallet of roughed out widgets to choose from.  You drag and drop each widget onto a sketched outline of an iPhone or iPad screen.  The number of controls at you disposal is not limitless, but more than adequate to get the idea across.  This is a very good design tool to use early in the design process to work out user interaction scenarios and screen level functionality without getting too caught up in the overall look and feel of the final product.

Blueprint ($14.99) — This is the Rolls-Royce of designers. As with Mocking Pad, you’re presented with a pallet based drag and drop design interaction.  Where this differs from Mocking Pad is that the controls are almost an exact replica of the final product.  It can therefore provide pixel-perfect alignment of each element in your application.  This tool is most useful in the development of a high-level storyboard of the app.  You can see the entire navigation of the app you’re creating from one comprehensive view.  If you are not a developer, and you what a way to quickly piece together a story board of exactly how you want the application to work, then this is the choice for you.  If you are a developer, you may find that time is better spent on creating a series of well drafted XIB files in Xcode.  Then take some screen shots of the XIBs in Xcode’s designer to piece together in some sort of page layout tool, so you aren’t duplicating effort.

Runners Up — Draft from 37signals is a good alternative to UI Sketcher as a free hand designer.  It’s worth considering if you’re already a Campfire (web-based chat client) user, as the designs can be shared with your fellow campers from within the app. iMockUps were both good alternatives for Mocking Pad, and are worth a second look if you decide that Mocking Pad is not right for you in this space.  I have found no replacement or competition for Blueprint. For what it has to offer, there is simply nowhere else to look.

Each design tool has its niche.  I would recommend UI Sketcher to get that initial idea down before you forget it. Once you have a good idea and are ready to think through some basic user interaction scenarios, then Mocking Pad will prove to be the tool you need.  I would avoid using a tool like Blueprint at first, as it has the potential to consume a lot of time and could limit your implementation choices when handing your design over to the development team. On the other hand, if you are not at all technically-oriented and really want to get as close to a final design as possible before you hand it over, then Blueprint is a great tool to work with and has no match.

Related content from GigaOM Pro (subscription req’d):

• Fixing Fragmentation: Google’s Key to the Enterprise Tablet Space
• 5 Ways Apple’s In-App Purchase Rule Could Come Back to Bite
• Why Apple Should End Its Fight Against iPhone Jailbreaking