in Design / Development

Top 10 Wireframe Tools That Any Designer Must Know About

When you have an idea, you start sketching it in your mind in order to get a sense of how it would look like in reality; whenever you are dreaming with your eyes open, you create a kind of wireframe; whenever someone is telling you a story , you start visualise it and place elements in your imagination. Well, the same also happens in software development where you take a small concept and you help it evolve into something what is called “a prototype”. If you work as a designer, developer or even as a project manager you will need not only to visualise what your client is saying but you also need to simulate your solution. This can be made with wireframes.

Creating a wireframe is called “wireframing”; wireframing is a vital part in the design process because it helps you define both the hierarchy of your design and how the user interacts with the interface. You can compare a wireframe with the foundation of a building: in order to come up with a strong application or website you need to have a bullet-proof blueprint.

There are many wireframing tools available and in most cases it’s a matter of taste when it comes to the perfect solution but before jumping in and start searching for the most useful tool, you should check out this list.

It contains 10 wireframe tools which I believe they are the most important solutions in the market. Take for example PowerMockup with its perfect PowerPoint integration and seamless interface. It can help you create stunning wireframes so easy that you will never have to fear about others not understanding your ideas.

Editor’s pick: PowerMockup: Add-on for Microsoft PowerPoint

1

PowerMockup is one of the most useful wireframe tool that I have in my arsenal of applications because it helps me sketch user interfaces extremely easy and directly from Microsoft Powerpoint. Furthermore, whenever I work with new colleagues, I don’t need to make them learn a totally different application; they only need to open Powerpoint and start drawing their ideas. Furthermore, let’s not forget that in a corporate world, Microsoft Office is one of the most popular tool so the integration between PowerMockup and Powerpoint will give you a great leverage.

PowerMockup contains a great amount of elements that usually are needed when creating a website or an application: you have buttons, text boxes, menus, tabs, tables and so on. It also gives you the ability to use PowerPoint’s rich set of features when creating wireframes, such as: animation capabilities for creating storyboards, powerful drawing tools, many importing and exporting options such as PDF, PNG or EMF and also the possibility of creating reusable templates which will help you save a lot of time. Oh and let’s not forget about the perfect integration with other Microsoft Office applications such as Microsoft Word.

Armature: Extension for Adobe Illustrator

2

Armature is a great wireframing extension for Adobe Illustrator CC and CS5+ and contains a collection of commonly used objects for almost anything you need when building a wireframe such as headers, footers, tooltips, placeholders, form elements or content blocks. Armature is compatible both with Mac and PC but be careful because it doesn’t support versions of Illustrator older than CS5. Being an extension, you need to install it using Adobe Extension Manager which is a pretty straight forward process. All the objects from Armature are fully editable and resizable because they are in vector format (SVG).

Axure: Full-fledged Wireframing and Prototyping Suite

3

Axure RP comes in two flavors: Axure Standard edition for prototyping or Axure Pro which besides all the standard features it gives you collaboration features and the possibility to add documentation to your projects. Axure helps you quickly create wireframes with shapes, text, placeholders or boxes and other tools designed to help you fine tuning your project, such as visual polish, gradients, semi-transparent fills or importing images. Creating a mockup or a highly functional prototype is a simple click-through, so you won’t spend a lot of time learning how to use it. Furthermore, you can export your designs in HTML with a click of a button.

Wireframe.cc: Lightweight Web-based Wireframing Tool

4

Wireframe.cc is a free minimal wireframing tool which works in your browser. Each wireframe that you save generates its unique URL which you can bookmark or save so you will be able to resume working on your project in the future. Everything is super minimal so if you want to see toolbars and icons just like in a normal application, then you’ll be a little bit disappointed. Wireframe.cc has a clutter-free environment in order to help you focus on your ideas. Everything is made using “click and draw” on the canvas and the application will try to guess what you intend to sketch.

Jumpchart: Online Tool for Content Planning

5

Jumpchart is another good tool that offers you five features in one: build content, create mockups, store attachments, design the architecture and write notes. It actually works as a project planner because it helps you get all your member’s team in one single place where they can collaborate and share questions and ideas. With jumpchart you can create pages or subpages, you can sketch out the hierarchy of your website or plan the navigation of your application.

Creately: Online Diagram Software

6

Creately is a diagramming and collaboration tool with over 1000 ready made templates and 100.000 shapes. It has more than 50 types of diagrams with targeted features that will help you draw faster and better. Also, you can collaborate with your clients and colleagues wherever you are by inviting anyone with an email address. You will see in real time what other are changing using Creately online or Desktop. This tool requires a certain amount of knowledge about diagrams such as Gantt charts or Pie Charts but its simple interface will help you draw everything fast.

WireframeSketcher: Plug-in for Eclipse

7

If you use Eclipse for various development tasks such as creating Android Apps then this neat plugin will help you do wireframes in minutes. WireframeSketcher helps designers, developers and product manages to create mockups and prototypes for mobile, web and desktop applications. You can mockup everything by simply visiting their Mockup gallery from which you can get stencils for drawing Android, iPhone, iPad or Windows phone wireframes. You can use it with multiple monitors and share your work effortlessly using its version control.

Pencil: Open-Source Desktop Application

8

With Pencil you can draw different types of user interfaces for desktop and mobile platform. It has a list of built-in shapes, flowcharts, desktop/web UI shapes, Android and iOS GUI shapes. You can find a lot of collections created by the community so I’m sure there’s something available for any project. Pencil supports exporting the drawing document into different formats such as a rasterized PNG or a web page. Also you can export a compatible file with OpenOffice or LibreOffice.

Pentotype: Drawing App for iPad Wireframes

9

If you work at an iPad app and you need to create a wireframe for your project then Pentotype is a great solution. What I like at this application is that you basically draw your wireframe just like on paper. Everything is intuitive, for example if you want to make elements interactive you draw a connection between them or if you made a mistake, you simply use the undo. Pentotype automatically recognises your drawings so you’ll get an immediate experience of your project with functional interaction.

POP: App for Turning Images Into Prototypes

10

Pop is probably the most basic tool that you can have when creating wireframes. You design on paper then you use this app (available for iOS and Android) for taking a picture of your sketch and then you simulate it. Pop automatically adjust the brightness and contrast to make sure that your sketches are clear and then you create storyboards by linking your images together with something called “link spots”. When it’s ready you simply press play and your user interface is being simulated. Furthermore you can share your prototypes with your colleagues and friends.

Bogdan

Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.

Leave a Reply