In the run up to starting development of mobile apps I thought it to be a good idea to start planning ahead. My usual method is that I get an idea in my head & I run with it which I guess is a common programmers method.
My initial thought was to design some mockups on the iPad, I’ve recently replaced my iPad and have started using it again. Upon scouring the App Store I found a couple of wireframing app which caught my eye. The first was iMockup which is aimed at both app and web design which I thought was ideal, especially at the reasonable £5 price tag. The second app I saw was AppCooker and it looked a lot more polished but the price tag reflected this at £10, this however seems the be a beta price and apparently this will raise three fold once released. I did mull over both apps, iMockup was cheaper and would let me mock up for the web but AppCooker looked like it was made to do one task and that it could probably to it really well. In the end I splurged and bought AppCooker, shortly after I found out the iMockup price had been slashed to half so I bought that too.
Both apps have very well laid out interfaces for the main design view, each with pull-out drawer style elements which can be closed to give additional workspace. AppCooker has one at the top with grouping, arranging and transitioning options and iMockup has one on each side, the left with the pages and components on the right. Both apps have a small toolbar at the top with a few options and AppCooker has an additional bar at the bottom with preferences. The bottom bar on AppCooker is static so iMockups has the ability to have a slightly larger workspace but it really is negligible.
With the app pages, iMockup only really has three different pages, the projects page, the main design view and a preview mode. AppCooker has all these pages but with a few extras thrown in. First off in iMockup you select the different pages by just opening out the left drawer and clicking on the page you want, nice, quick and simple. AppCooker has an additional section for viewing a projects pages which is really quite useful.
Not only can you drag the pages around to organise them how you like, it also shows the relationships between the pages.
AppCooker is not only just a wireframing app, they’ve also crammed in a few extra pages like an icon editor and a potential profit calculator.
Both applications have a great set of components each. The AppCooker components are generally much more cosmetically appealing as they really do look like authentic iOS components. The components in iMockups are quite barebones in comparison and are more true to a classic wireframe style. iMockups has three sections which are web, iPhone / iPad and ‘markup’, markup is pretty much miscellaneous items like shapes, arrows and links. AppCooker has widgets, wireframe, misc, shapes and images. Wireframe components are pretty much identical to the main widgets but are lacking the colour and glossy feel of the main components. They say its so you can ignore the colour and concentrate on the design, essentially making it like iMockups.
You can use images within each app, AppCooker has an additional menu which gives you direct access to your images on your iPad. iMockups however has an image component which you need to add to the page and then go into the images preferences to select the desired image.
The components are customisable in both apps but this is handled very differently in each. In iMockups you select the component onscreen and select the info option. The customisable sections for the text of each component is purely text based, mainly comma separated. The following example shows the configuration for the footer iOS navigation.
The customisation options for AppCooker are much more advanced. Continuing of the example of the main app navigation, not only can you select the text but you can also select the icon from an inbuilt selection and enable a link to another page.
In iMockups you also have the option to select a link but not for individual navigation items, either you have to select a link for the whole navigation component or add a link component for each navigation option, align it up to the correct position and set the link.
The links brings us nicely to the previews as setting a link will allow us to navigate between the pages in the preview mode. The preview modes are exactly what you’d expect them to be, a demonstration mode to see the prototype in action. The preview in iMockups is simple & straight forward to use, you can swipe left and right to quickly skip through the pages, alternatively if you have links set on a component you can tap the component to go to the target page. The AppCooker preview works on the component links to navigate through to the other pages, it doesn’t have an option to slide between the pages. It does however have a really nice additional feature in the form of a separate app called AppTaster which is completely free. AppCooker allows you to save out a preview file which you can then email to your client, the client can install the AppTaster app on their device and preview the prototype remotely.
The outcome of using both apps is that it’s quite clear a case of getting what you pay for. AppCooker does have a lot more features and is far more polished than iMockups but when the discount ends it will be six times more expensive.
At this point in time AppCooker is currently twice the price of iMockup but what you get in terms of quality can be seen throughout the app. I’m glad I got it but the question remains, would I purchase it when it reaches the full price? I’d say it’d be doubtful but it really does depend on what these ‘top secret’ future changes are going to be and if they’re as spectacular as they’re making out, in my opinion it’d have to be pretty spectacular to be worthy for a £30 price tag.
I feel that although they are both wireframing apps, they both ultimately serve very different purposes. I think the iMockup is mainly intended as a barebones tool to create quite simple layouts very quickly. If you have an idea for a design it allows you to churn out a few pages effortlessly.
AppCooker however comes across as nearly the next stage of the process. I could quite happily spend a few hours tweaking a design, customising the components to look nearly like the real thing. I’d say that with the additional feature of AppTaster where you can send a copy of the prototype and for it to be previewed remotely is an excellent idea. It really does allow you to get a real feel for the app without touching a line of code and is ideal for remote clients to get their say before any real development takes place.