Requirements and planning

Turning an idea into an app involves careful development. You can start writing code and see where that takes you. Or you can define your requirements and prototype your app first. Defining requirements at the start of a project helps reduce rework later on.

You can prototype your app using wireframes. Wireframes show the key screens within an app and how the user uses the app to complete specific tasks. You can explore the Wireframe prototyping tips and tools for some best practices for creating wireframes.

Prototyping tools

When it comes to prototyping and designing your app, there are a few different tools that you can use, including wireframe design slides, the Cascades Exporter plug-in for Photoshop and QML Preview in the Momentics IDE for BlackBerry.

Wireframe design slides

The wireframe slide deck contains wireframes you can use to prototype your app, including devices, UI components, menus, and some examples of common layouts. To download the slide deck, visit Wireframe prototyping tips and tools.

An example of a wireframe for an app.

Cascades Exporter plug-in for Photoshop

After you create your wireframes, you can use the Cascades Exporter plug-in for Photoshop to start designing your visual assets. By using the plug-in, you can cut and crop your images into layers and lay out core controls where you want them. When you're done with your design, you can export the assets to .tmz file that can be imported directly into the Momentics IDE. When you import the file, the IDE automatically generates the appropriate QML code for laying out all the assets.

The generated QML code uses an AbsoluteLayout to lay out the assets, which is not a good approach for building scalable apps. After you use the Cascades Exporter to design and import your assets, you'll need to update the UI to use a relative layout instead.

For more information about how to install and use the plug-in, see Cascades Exporter.

An image being reviewed using the Cascades Exporter.

QML Preview

If you decide not to prototype your app with wireframes, QML Preview provides lets you to mock up your application using QML.

As you write QML code in the editor, the QML preview is updated on the fly to reflect the new code. Although it might take longer than creating wireframes, prototyping using QML creates code that you can reuse when you begin developing your app.

The QML editor and QML preview, side by side.

What's next?

You have lots of components at your disposal. Take a look at Building the UI to learn about ways that you can structure your app and the components that you can use.

Last modified: 2013-12-21

comments powered by Disqus