You can’t sit down and design a new app or site every time inspiration strikes. Even if you were going to actually make a new app, you need to plan it out before. You could just pull out a napkin and pen and start drawing, or you might want to use a prototyping app to get a more polished design a bit quicker. Prototyping and wireframing web apps are not exactly few and far between, but a fairly new release has enough notability to let us take a look.
Codiqa is a prototyping tool for mobile interfaces that, in a similar fashion to actual development environments like Xcode, lets you visually build up an interface for a mobile resolution and then export an interactive, useable, jQuery-powered prototype that you can load up on a device. Rather than just throwing together a mockup of your idea, you’re actually taking the first steps towards making your app a reality. Let’s take a look.
Getting Started
To get started with Codiqa, you’ll need to signup with an account which will give you your own Codiqa subdomain. You’ll need to head to produce your prototypes, much like the way many productivity web apps work. Once you have access to your dashboard, you’ll want to create a project to host your prototype.
When you’ve created a project, one of your first concerns should be size. You can adjust the resolution easily through the “Device Size” drop down in the top-right of the app. The presets cover a wide range of popular mobile resolutions, including ones for both iPhone and iPad, as well as popular Android screen sizes. Your device simulator can go all the way up to 800px x 1280px, or as small as 240px x 320px, so you can design for any device you need, even if it’s not an Android or iOS device.
The simulated device can also be rotated, so you can check out how your app will look like at all orientations, if that’s something you wish to support when you come to produce it natively. The process is incredibly easy, literally at the touch of a button.
The Codiqa editor, where you can see the resolution selection drop-down and some of the available UI elements (most of which resemble common iOS items).
Creating Your App
To add a new item to your app, it’s only a matter of dragging and dropping from the component pane on the left and dropping it into position in the simulated device. Some will be automatically aligned, such as the tab bar, where necessary.
The components can be both flexible or static in size. Elements in the latter will always be the same size, whatever the resolution, whereas flexible components will stretch out and automatically update if you switch the resolution at a later time. Therefore, it’s easy enough to preview the interface at varying sizes.
The included components range from varying form fields, list views, placeholder maps and buttons. When dragged into your project, each component has various properties that you can modify, such as uploading an image for an embedded image component or modifying the width.
Editing properties for a UI component in Codiqa.
You can have multiple pages in each prototype, with new ones created through the “Pages” pane on the left side of Codiqa. When you create a page, it can be inducted into your navigation (such as through the “Tab Bar” component by modifying the properties of such a component) easily by hooking up the page to a navigational property.
You can also create and install custom themes, which modify the presentation of the various interface components. This is all done external through the jQuery Mobile ThemeRoller, which can then be imported into your dashboard as a theme. Then, you can go ahead and opt to use the theme using the relevant dropdown in the editor.
Shipping Out
Naturally, one of the attractions of Codiqa is the ability to export your prototype as a useable, interactive prototype that’s powered by jQuery. This means you can actually load up your project onto a device and actually try it out, albeit in-browser.
You can preview the files by hitting the “Preview” button, which will take away your canvas and present the interactive, simulated version of your prototype. You can even jump into an inspector to view the source that’s powering it, all without actually needing to download the project.
A running prototype in the shareable preview.
Once you do want to try it out for yourself, however, simply head back to your main dashboard (i.e., the root of your custom subdomain) and hit the “Download HTML” button associated with the desired project. A folder will download, complete with everything needed to power the prototype.
You can also hit the “Share” button to generate an hosted version of your prototype, accessible by both URL and QR code. If you’ve got a scanner installed on your phone, this makes it super easy to get a running prototype on your phone in seconds, which is nice.
Final Thoughts
Codiqa is a great editor with an intuitive interface of it’s own. Very similar to native UI building tools, the drag-and-drop, WYSIWYG editor makes creating potential layouts a breeze and the ability to modify them without even needing to hook up a bit of your own code is impressive.
Certainly, it’s a fantastic tool to speedily mockup ideas too, and the ability to generate a hosted, QR-code accessible version is very convenient. We’d definitely recommend checking it out!