Wireframing is an absolutely essential part of the successful planning and design process of building a mobile website or application. Done well, it will save you money in the long run in terms of design and development costs, and you will be able to easily expand initial ideas, build extra functionality and structure into your apps, as well as gathering invaluable feedback a lot earlier as well.
Wireframing tools, fundamentally, make the process of creating an app much, much easier. They work by visually stripping the product down, so that all involved can focus purely on the app’s functions and user interactivity. They help especially when it comes to pitching a new app to a prospective client. Explaining verbally or textually exactly how you see the app working will inevitably leave a lot to the imagination. But, with the use of wireframing tools, you can demonstrate your idea much more effectively, without going too far into the development process so as you are already losing time and money.
There are literally hundreds of wireframing tools out there, and each of them offers a varying level of functionality. Some allow you to only produce very basic wireframes, whilst others will get you to the stage of creating a working prototype.
Choosing the right one for your project might seem like a bit of a minefield, but, if you visit the websites provided in the links below, then you should be able to take advantage of some free downloads so you can conduct a bit of trial and error as you work out exactly which one is right for you.
So, let’s take a look at some of the best wireframing tools out there, and how each might be useful to you as a developer.
Balsamiq Mockups can be used on Mac, Windows, Linux as well as on the web. Their ethos is that your wireframes should look rough in order to elicit honest feedback, which will end up creating happier users of the end product when you finally get there. Balsamiq Mockups incorporates several drag and drop elements, from lists, to menus, to buttons – and each are styled as a hand-drawing.
Penultimate is a great tool if you’re working purely for iPad design. With it, you can sketch out ideas directly onto the device’s screen itself, which is of course the perfect way to ensure that you’re working to the right ratio and are creating active areas to a useable size. The sketches you create can all be very easily saved and sent out to clients for feedback and approval.
A Mac favourite, OmniGraffle can also be used on the iPad. Effectively, OmniGraffle is an ideas tool that allows you to put wireframes (as well as diagrams, page layouts and process charts) together very quickly and with relative ease. After you’ve selected a document type, OmniGraffle joins separate elements in a ‘context-sensitive’ fashion, and automatically links lines in diagrams and aligns elements and shapes in wireframes and page layouts.
Axure allows you to create workable prototypes for apps without coding. This ability to add functionality to wireframe products means that you will be able to interact with it in this early stage of development, and of course your clients can too – ideal for generating some really meaningful early feedback. The tool also includes sitemaps and various widgets in the form of UI elements. If you utilize the built-in share function, then you can even view your app design on your phone to see how it’s all fitting together. Nice one.
Pidoco works quite similarly to Axure in that you have the ability to add multiple layers and pages, as well as including a library of various drag and drop interface elements. It also allows you to create functioning prototypes, which can be easily shared online with your clients, and, with the included functions for collaborative feedback and discussion, it really is one of the best wireframing tools out there. By downloading the Pidoco app you can also view your prototype on your phone as well, allowing you to see how everything is shaping up.
Available to use on both Mac and Windows, Fireworks is a great wireframing tool that also allows you to build functioning prototypes for mobile and tablet apps. Smoothly integrating with Photoshop, Illustrator and Dreamweaver, Fireworks also comes with some nifty in-built templates if you’re trying to throw something together in the most limited amount of time. With fantastic CSS support, including fonts, colours and corner radius, all of these can be extracted so that any styles that you implement throughout the wireframing process can be duplicated in the final build.