Wireframes Made Easy

Courtesy of Richard




No matter how simple or complex the website, portal, cloud application or mobile app you are building, the process for designing & planning the user experience should be as straightforward as possible. If the tools you are using to put your ideas down are time consuming and cumbersome, it clouds your thought process; you spend longer trying to make something look like something than actually being productive and thinking about the navigation, the content flow, the information hierarchy.

A wireframe is a plan for your project, your client will want it - to be sure everything is covered. Your technical team will want it - to be sure what is being asked is achievable and makes sense. By adding interactivity to your wireframe you can create a compelling prototype that allows your client to ‘try it before you build it'.

Currently, I switch between PowerPoint and InDesign, depending on the level of detail I need to achieve.

PowerPoint is great if I have a lot of content to sort out because you can share and exchange the file with the client and add links within the content - the downside is that things don't look great (without spending an eternity drawing individual elements to represent e.g. scrollbars, nav bars etc.)

InDesign is overkill but allows you to make pristine artwork on a larger canvas - ideal for mapping out an iPad app with menu hierarchies. The PDF output is ideal for emailing and getting comments; again you can hyperlink the content to simulate the user experience. The downside to InDesign is that it is print artworking software, and requires a good level of competency to get you through.

So what is out there to help you wireframe your project - plenty!


Free Online Wireframe Tools

There are a number of free online tools to help you out there, some start off as limited versions, and others are the full thing but have limitations.

Pencil Project :: This Firefox plugin is simple to use, has some good templates available and gives you the flexibility to export to HTML, image formats and much more. Get it here http://www.evolus.vn/Pencil/Downloads.html


Freemium / Premium Wireframe Software

Again, there are plenty of subscription services out there with powerful tools to help assist rapid wireframe creation...try these...

Axure  :: An online service with a host of drag and drop functions, templates etc - very powerful. (http://www.axure.com/)

Mockflow :: Online and Offline, basic Free version and Premium version, real time collaboration productivity tools, template components and icons. (http://www.mockflow.com/)

And the winner is...

PowerMockup :: A wireframe kit for...POWERPOINT
Yes, you guessed it, i've gone 360 degrees and chosen a wireframe tool that sits inside PowerPoint. It's simple to use and has proven to be invaluable thus far. The only downside is that I can't publish to HTML to create a prototype, but by simply sending the file to the client, it can be run in slide show mode and prototyped on your desktop. Easy. It's not expensive either. (http://www.powermockup.com)


Wireframes are just part of the toolkit that have helped us to build technically complex websites and a number of exciting b2b mobile apps. Read more about what we do on the Signals today!