Search
Goodies

Social Networks
Designs I Like

Entries in prototyping (41)

Tuesday
Sep112012

App Cooker updated with really nice refinements

This week came with a nice surprise: an App Cooker update was ready to roll on my iPad. Release 0.9.95 is out and brings a lot to the table. First, the new iPad's Retina Display is now fully supported. App Cooker which is really well designed visually is even more beautiful on the new iPad. Nice. Next, a lot of refinements:
  • Link tools is simpler to use.
  • Defining new colours attributes and saving them for reuse is easier too.
  • Updated Stroke tool to make it more like other standard graphic design apps.
  • Images imported into prototypes can be cropped.
  • Updated icons for social networks.
This is the fourth important update of App Cooker. Each iteration brings bug fixes, refinements and add a few welcomed features. Don't be afraid of Hot App Factory giving this app a weird release number. Version 0.9.95 could be numbered release 1.4 as this application is still one of the most well designed and feature complete on the App Store for building iOS application prototypes.
One thing still bugs me about App Cooker: I still don't know what will be the top secret feature that Hot App Factory will bring in the near future release. Supposedly, this feature will change the way we make mockups forever. Mmmm sound good to me.
Monday
Feb272012

iOS application prototyping on the go - what I'm using

As I prepare to leave home for a week, I wanted to get prepared to be able to do application UI prototyping while on the go. In this blog post, I want to share with you what tools I'll be using as well as write about a very impressive application that I find more and more useful for the iPad: iDraw.

So, I'll be leaving home with these on hand: my iPad, a stack of paper and pencil. I'll be using three apps in order to create the first digital prototypes of my first iPad application: App Cooker to simulate the application interaction, iDraw to draw UI elements and Eraser to create transparent background of pictures.

As you may know, I'm a big fan of App Cooker (my App Cooker review) but this application is not a complete drawing application. Recently I came across iDraw for iPad and fall in love with it. In summary, I would say that this is the most complete vector-based application for the iPad. For 8.99$, you get all what you need to draw UI elements: canvas control, all shapes, fills and gradients, layers, undos/redo, precise placement, precise sizing, copy and paste, export, etc.


In the previous picture, you see the basic grid view of my iPad application that I'm currently working on. Once complete, I can export this in the Photos.app then start App Cooker, import it and add the iPad UI elements to get the following view.
As you can see, I can get a very basic UI design running on the iPad very quickly and easily while on the go. No computers required!

Eraser is used to open a picture, set a transparent colour and then save it in order to be able to re-import it in iDraw or in App Cooker. iDraw export doesn't support transparent background. Eraser isn't universal but works perfectly on the iPad.

As you can see, with these three iPad applications, prototyping iOS applications on the go has never been easier en enjoyable.

Saturday
Feb112012

iOS App Cooker updated and feature complete

Last week, App Cooker, an iOS prototyping and mockup tool from @HotAppsFactory has been updated with welcomed features. First and foremost, all the widgets of iOS are now available to the designers. Before this update, many iPad widgets were missing, this is no longer the case. You can now design fully featured iPad mockups and interact with them.

Also new in this release is a wireframe mode where you can choose from a palette of basic iOS interface elements in order to build mockups with content emphasis. Still missing from this update is a permanent fix for the colour picker which I find to be very badly designed and awful. HotAppsFactory promise a redesign of this in a future release. Finally, many bug fixes are on the menu with this latest release. For my complete review of App Cooker: Building iPhone Apps: EXCLUSIVE: App Cooker to become the best ...

Monday
Nov142011

App Cooker little brother: App Taster

After releasing a very capable and visually compelling prototyping tool earlier this year called App Cooker (see my review here), Hot App Factory released a companion application to App Cooker named App Taster. This application is essentially a player for mockups build with App Cooker. 

Mockups are imported from iTunes via document sharing. From the preview mode, the user is allowed to send feedback via email with a screen shot of the currently shown picture. Nice. App Taster is free on the App Store. Bon appรฉtit. 

Saturday
May282011

App Cooker video preview

Want to know more about App Cooker? See this video.

Friday
May272011

EXCLUSIVE: App Cooker to become the best prototyping tool on iPad

iOS development landscape is doing very well. Developers keep coming to the iOS platform (more than 80 000 regisetred) and new applications keep coming in (last time I checked, there was more than 450 000 apps available for iOS devices). Building those apps requires a lot of time (for well designed apps this is surely the case). Tools to help developers are becoming more and more sophisticated. Once category of application that I follow closely is prototyping tools. Today, after many weeks of extensive testing, I'm pleased to post my complete review of a new prototyping tool called App Cooker.

App Cooker is built to support the developer or the designer in five areas: refining an idea, creating a nice application icon, designing the mockups, meeting the pricing challenge and finally preparing for the App Store. App Cooker uses Widgets for each of these tasks that are laid out on the application's App Board. Users can freely move between them with just two taps.
Creating a new project is simple: you select the device type, the default orientation, the project name then you set a default project icon in a very well design modal dialog box.
Well designed screens in App Cooker put the user in confidence
The application's App Board
Having an idea
App Cooker supports the developer in helping him define and refine his idea in three different ways. First, the definition statement space asks for an idea statement that should touch the differentiation or the solution and the target audience of the application. Next, the Type chart offers the developer to place an icon on a X-Y axis chart in order to provide corresponding advices. X axis correspond to the application usage and Y axis to the seriousness degree.
The third way is the evaluation of the idea. The developer judge his idea against five areas: idea, newness, ergonomy, graphics, interactivity. Depending of the ratings, a judgement is made by App Cooker. While trying this widget, I came across the best one: "You're going to be rich".

I like this widget because it provides the developer the opportunity to think about his idea and refine it before going too far in the design process.


The application's front door: the icon
The application's icon is the front door of your app. This is the first thing the user see in your app. Designing it with the right tools is a must. App cooker comes with a basic icon editor.
Icon widget of App Cooker
App Cooker provides the same graphic tools that you use in order to build visuals of the application UI: circle, square, etc. Also shown is the icon in all required resolutions for the Retina Display, iPad, Settings and Spotlight results. 

Creating mockups
Having an idea is nice but execution is the next step. This is where the mockup part of App Cooker comes into play. Having played with Blueprint for a while (a competitor to App Cooker), I must say App Cooker design in this area really shine. The mockup area contains a tool palette called the transformation bar located at the top where you can group, arrange, mirror, rotate resize or move selected objets. This palette can be hidden to make more room for the design area which is nice.
The transformation bar
At the bottom, the property bar allows you to act upon selected objects.
Property bar while a Navigation bar is selected
Property bar while a text box is selected
Each objects can be placed on the design canvas with great flexibility and precision. Tapping Size or Position on the transformation bar, you'll get a popover to change the attributes in a precise way with the use of the plus or minus. But, even cooler, tapping the number will extend the popover to show a keypad.
Creating mockups is done by selecting basic user interface elements (widgets) from a popover at the top right of the screen. You'll be able to use nearly all of the available native widget that Apple provides on an iOS device but a few are missing in this initial release: UITableView, SplitViewControllers, UIActionSheets, PopOvers and UIAlerts. These will be implemented in the coming releases.
Some of the supported widgets
Also included are many graphical primitives as shown in the the following popover.
App Cooker supports portrait and landscape orientations in design and preview mode which is very useful to build complete prototypes. In edit mode, both orientations are shown one the same canvas so you don't have to go back and forth while editing both orientations. In preview mode, rotating the device will show the respective screen. 
Screens supporting portrait and landscape mode
The prototype flow is created by linking screens together with the use of hotspots . These can be shown or hidden while in preview mode to guide the user where to tap the screen. Once a mockup is done, it can be tested in preview mode where you'll be able to "run" the application. To exit the preview mode, a tap with three fingers is required.
A rather complex prototype navigation overview
Setting the right price
How much should you sell your app? Well, it depends on many factors: how much did you pay for its development? Do you rent offices for your staff? How many copies do you plan to sell in the next couple of months? What if you consider the fact that this is an iPad app which make the potential market smaller? These are all the things that you'll be able to factor in with the Revenues and Expenses widget of App Cooker.

So you basically define the application's potential devices market size, sales period duration and optionally application in-app purchases, which pricing tier the application will be in, expenses of people, renting, equipment or anything else. You can set recurring or one time spending. These will be used to create a scenario with expected net income or net loss.

Scenario summary


Preparing for the App Store submission
App Store submission is a tedious process. You have to enter a lot of information that will serve the best to sell your application. With App Cooker, you use the Store widget to enter application name, description, promotional text, text localization, keywords, application classification just like you would do it on iTunes Connect while submitting your application for approval. This is nice. One thing that would be cool is the ability to export the information so that the developer can then do simple copy and paste into iTunes Connect to facilitate the submission process. As far as this release is concerned, the only export option is PDF file but exporting in text format will be added soon to the available choices. So it is doable but still, plain text file could be easier to copy and paste operations.
The Store widget fully supports localization. Panels for each country are presented as tabs so switching between localized versions is very easy to do. A nice touch is the bytes count shown for each field which are based on Apple's enforced limits. A byte count is more precise as accented characters account for two bytes,
This pop over is simply gorgeous
The information tab with general information about the application
On the right of the application's name, a green checkmark confirms the name will fit on the device home screen
If the application's name is too long, we see a red exclamation mark
Some functionalities and features are missing and it makes me anxious to get my hand on future releases: native prototyping for table views, export of Store widget metadata for use with iTunes connect, all iOS UI elements implementations to name a few. The maker of App Cooker told me they prefer to spend all the time it takes to polish a feature before releasing it. Good move.

Another issue is the use of an overly designed thing like the colour palette. This kind of thing is something pretty standard in design software and there is much more standard and effective way of presenting a colour palette.


Other interesting things
One thing to note is that App Cooker could be used in iOS programming class to teach the many aspects of building iOS apps. App Cooker has a very broad target market. Also very important, one of the gotcha with App Cooker is obvious when you use it to present your prototypes to your client. The reaction will be to make him think the application is almost ready! Imagine one day App Cooker generating all the code! Meanwhile, a project can be exported on a PDF document or sent by email as a whole.

Last words
According to Johann Fradj, the application developer, the next release will bring many new features including:
  • more widgets
  • augmented icon library
  • improved bitmap drawing module
  • wire framing (oh this one would be cool!)
  • and a few surprises
While on the subject of the next features to be included in future releases of App Cooker, the user will be granted by this notice upon starting the application. It is clear the developer of App Cooker want the users to take into consideration upcoming features before giving a bad review. 
Conclusions
App Cooker offers a lot for a first release and according to the developer the best is yet to come. This application will become a must for a lot of iOS developers and designers. Everything in this application received a lot of design attention and thinking. They have been working on this for more than a year. So, every parts of the application is very polished and well integrated. I'm already anxious to get my hand on the next releases of App Cooker. You'll be able to get App Cooker in the next few days on the App Store.

Previous posts about iOS prototyping tools that were posted on my blog:

  1. Prototyping tools for iOS app design: Part 1 - classification
  2. Prototyping tools for iOS app design: Part 2 - Pen, Stencils
  3. Prototyping tools for iOS app design: Part 3 - Bitmap based kits
  4. Prototyping tools for iOS app design: Part 4 - Vector based kits
  5. Prototyping tools for iOS app design: Part 5 - Applications

Friday
Apr082011

Prototyping tools for iOS app design: Part 6 - Libraries

Device reproductions
  1. iPhone 3G, 3GS PSD
  2. Apple iPad Fully editable PSD
  3. Apple iPhone 4 PSD
Icon sets
  1. Tapptics: one of the best kit to make your application prototypes professional. You'll be able to use the elements directly in your final product. Plus, you get a ton of other goodies. For a review of Tapptics, read Tapptics - another great resources for starters.
  2. Glyphish: This icons kit was one of the first to come on the market. The icons are great and covers a wide range of usage and subjects. Paid kit.
  3. Glyphicons: another great icons kit. Really and nice design. Paid kit.
  4. iPhone toolbar icons: a great collector of free tabbar icons. 
  5. iPhone Toolbar Icon Set: 64 free tabbar icons.
  6. Free iPhone Toolbar Icon: small free collection of icons. 
  7. 30 Free vector icons: these a gorgeous icons that can be scaled up and down as they are vector based. 
The series about prototyping tools was created based on research on the internet, user reviews and the following references:

http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/
http://www.henkwijnholds.com/sketching-prototyping-tools-iphone-apps/sketching/
http://surgeworksmobile.com/iphone/how-to-build-an-iphone-user-interface-prototype-that-follows-apple-guidelines
http://www.mobigeni.com/2010/02/10/iphone-mockup-wireframe-and-prototyping-tools-for-iphone-developers/
http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/
http://www.rainydaymagazine.com/RDM2010/Home/August/Week1/RDMHomeAug030.htm

Tuesday
Apr052011

Prototyping tools for iOS app design: Part 5 - Applications


    This blog post is all about software based prototyping tools. Here is a quick summary of what you kind find right now on the App Store. 
    1. Blueprint for iPad: the best prototyping tool right now for the iPad. I wrote a complete review a while ago: Review of Blueprint for iPad - the best prototyping tool.
    2. iMockups, iMockups HD: this one is nice but no longer a contender compared to Blueprint. Here is a small review I wrote: iMockups, a nice UI prototyping tool.
    3. App Layout: look kind of nice and weird at the same time. For iPad and cheap at 0.99$ compared to others. 
    4. Interface: nice app, only for iPhone or iPod touch. An iPad version of this app would make it a good competitor. 
    5. Live View: very basic tool. You download the viewer app on the iPhone. Then you open the "broadcaster" on the Mac. The latter is an iPhone screen that you position on the Mac screen to broadcast the content to the iPhone. That is it. So if you can animate something on the Mac, it will animate on the iPhone too. Kind of like a live screen caster from the Mac to an iOS device.
    6. Mockability: this app will link screen images together by defining hot spots. You then play the "presentation" to simulate actual app. Kind of like a small Keynote or PowerPoint. Very limited. Not cheap: 6.99$ for an iPhone only app. 
    7. Dapp: only for iPhone. Expensive. Include an Export to PDF that create a complete design sheet. 
    8. SketchyPad: this app can be used to prototype much more than iOS applications. Create very sketchy mockups. Support iPad. 
    9. Review: preview screens on your device. Same as importing screen images on the Photos.app. Useless. Move on.
    I'm  not done yet. There is one more to come. A very cool, sexy, well executed and with full of potential prototyping tool for the iPad is about to hit the App Store. A Blueprint killer? Look for a review in the coming days. Here is a teaser.

    Sunday
    Feb202011

    Prototyping tools for iOS app design: Part 4 - Vector based kits

    Previous post about iOS app design prototyping tools presented the classification of such tools:
    Here is the fourth part of my prototyping tools catalog: electronic templates. There are so many electronic templates that I had to create two different categories for them. The first one was bitmap based kits. The second one is vector-based kits.
    1. Ultimate iPhone Stencil
    2. Patrick Crowley Stencil
    3. iPhone 3G Stencil
    4. iPad and iPhone Design
    5. Freshbooks iPhone Application GUI
    6. iPhone GUI as Rich Symbols for Fireworks
    7. iPhone UI Vector elements
    8. iPad GUI Design template
    9. iPad Design Vector elements

    Wednesday
    Feb092011

    Prototyping tools for iOS app design: Part 2 - Pen & Stencils

    Previous post about iOS app design prototyping tools presented the classification of such tools:

    Here is the second part of my prototyping tools catalog: papers and stencils. The choices are not that many for traditional tools.
    1. UI Stencils: Very popular and high quality stencils. Very classy and attractive. iPhone and iPad stencils available. Pricing starts at 24.95$. Sketch Pads offered starting at 12.95$. Very well done and high quality. Highly recommended. One more thing, you can even get sticky versions of the sketch pad for drawing board sessions. 
    2. MobileStencil: iPad, iPhone models all supported with most of the UI basic elements. Prices starts at 9.99$ for iPhone version. iPad version sells for 14.99$. They are plastic stencils that you can use with model papers of iPad or iPhone devices. 
    3. Pocket Sketches: pocket sketchbooks, actual size of the device. Pricing is 20$ for a 5 pack of 16 double sided sheets or 8$ for a single sketchbook. Sketchbooks is of the same size of the device. iPad version not offered yet. 
    4. Finally, don't miss this: 10 Free Printable Web Design Wireframing Templates
    As you can see, traditional tools are not popular, but those two kits are the best on the market.