Wireframe prototyping tips and tools

Get your app together

Prototype device showing a wireframe screenshot.
Download this handy prototyping slide deck, which contains all the wireframes you should need to mock up your app:
  • Blank device frames for all-touch and physical keyboard devices.
  • Components, menus, controls, fields and other UI assets, with editable labels.
  • Touch gesture hand illustrations for diagramming interactions.
  • Example screen mockups of common user interface contexts.

Simply add a blank slide, copy the elements you need, arrange, label, and share.

Wireframe Design Slides

Best practices for planning apps

Use the 80/20 rule. Try to define requirements and experiences around use cases that 80 percent of your users will encounter. This is especially vital when considering app settings. It's important to make sure the remaining 20 percent of experience and error scenarios are covered, but they should not guide the initial wireframes. Work on alternate flows once the primary flow is defined.

Group related requirements. Don't try to wireframe each requirement in isolation. They need to work with the application and with the platform.

Do your homework. How do other apps in your class or genre work? Can you learn anything that will make your app better?

Remember BlackBerry 10 design principles. Don't wireframe something that feels out-of-place with the platform. Things don't have to be exactly the same, but they must behave consistently to avoid confusing the user.

Start with the big picture. Create the key screens of the overall application. This will help you focus on the main structure and goals of the app.

Tackle the key use cases. Spend time thinking about the most common tasks and build these out in encapsulated end-to-end flows.

Align and adjust. Think platform, not application. Something may feel right for your app, but won't work with all of BlackBerry 10. Keep in mind that you might also have multiple devices and device types to accommodate.

Don't worry about the details. Exact label text and visuals can come later. Include enough detail to make things clear, but avoid the overhead of keeping the document 100% reflective of the final app.

Dare to share. Show your wireframes to someone whose opinion you trust. They may be able to point out opportunities that you missed because you have been too close to the designs.

Using Cascades Exporter as a design tool

Once you have planned out your app with wireframes, consider using Adobe Photoshop to help make your designs a reality. The Cascades Exporter plug-in for Adobe Photoshop helps you speed up the design and development workflow by exporting graphics from Photoshop for use in a BlackBerry 10 Cascades app.

Get started by taking a look at the Cascades Exporter install instructions and documentation.

comments powered by Disqus