8 Helpful UX Design Tools – Tools for Wire Framing and Prototyping

Posted 6/27/2014 1:04 PM by Michael Nelson

In user experience design, designers at some point generally perform the same few basic tasks: wire framing, prototyping, and the occasional image manipulation. For each task however, designers vary on the methods and tools they use to get the job done. As there are plenty of tools out there to perform each of these basic UX tasks, each with their own strengths and weaknesses, it can be confusing to know which tool or program to use. In an effort to alleviate the choices designers have when picking a tool, I have provided a list of eight great user experience design tools broken down into two parts: part one - wire framing/prototyping and part 2 - image editing.

1. Pencil and paper/White boarding

The most basic and useful tool in the UX designer’s arsenal is pencil and paper or a whiteboard. At the beginning of a project, ideas must be created and drafted before anything else can be done. The easiest way to do so is to sketch out ideas by hand. Not only does drawing get ideas out quickly but if something doesn’t work or needs to be changed, there is not a heavy investment of time as it can all be erased and edited quickly. In addition, paper/whiteboard prototypes can be easily shown to other people working on the project, allowing your ideas to be communicated fast and efficiently. Prototyping by hand however does fall short in two areas: sharing over the computer and high fidelity prototyping. Sharing a paper or whiteboard image over the computer is not impossible by any means, but it can be difficult in some situations. Unlike with your immediate coworkers, you cannot describe to someone over the computer exactly what you are thinking on the hand drawn draft without using a video or conference program (such as Skype or Google hangouts). Not to say that emailing images of paper or whiteboard prototypes is out of the question; text however always has the potential of different interpretations and verbal communication is generally more efficient for communicating ideas. For high fidelity prototyping, pencil and paper will not get the job done, unless you are an expert artist. Pencil and paper/whiteboard designs are meant for and highly efficient at the beginning stages of a project. Hands down, no matter what programs or other processes a designer uses in a project, using pencil and paper/whiteboards should absolutely be the UX designer’s first step towards a design on a new project.

2. Pencil Project

A great tool I discovered while looking for different wire framing and design drafting resources is Pencil Project. Pencil Project is a free program that allows you to craft graphical user interface prototypes. What I love about the program is that all of the elements are drag and drop, making wire framing and flow charting very simple. In addition, the library of drag and drop elements is quite sizable and emphasizes tablet and mobile aspects (both iPhone and android). Pencil project also allows you to link pages together and then export files in many different formats (including an html template), allowing you to share and demonstrate your prototypes easily. The only drawback I feel towards Pencil Project is that some of the program’s features are not as intuitive for the user and must be found. Despite having to search and play with the program to find all of its hidden gems and features, Pencil Project is a fantastic free program that allows the user to make quick prototypes, and is a great addition to any UX designer’s toolbox.

3. Wireframe.cc

Another wire framing tool I found while searching online is a website called wireframe.cc. Wireframe.cc is a free service that allows you to make basic wireframes online. The program purposely keeps is features simple so the user can make quick and dirty wire frames without getting distracted by tons of potential features. This idea is great for drafting designs as it forces the process to be quick and not overcomplicated. In addition, creating elements on the page is a breeze (click, drag mouse, then select element) and when you want to share your work, wireframe.cc gives your page a URL address so you can view it from any internet connection. This program is great for quick designs on the go as you can use this service from any computer for free. For an extended full version of wireframe.cc, the site does have a paid option with a complete set of features. As for the free version, it is a great tool for making basic design prototypes.

4. P.O.P. (Prototyping on Paper)

On the topic of sharing designs, wire frames, and drafts of projects, P.O.P app is a really cool and helpful free resource. Prototyping on Paper (P.O.P.), is an app that allows you to take pictures of your hand drawn wireframes, link them to other wire frame pictures via hotspots, and then share these rough designs as navigable low fidelity prototypes through email, drop box, twitter, Facebook, text messaging, and to other P.O.P. users. What I like about this app is that it really helps bring your paper designs to life in a quick, easy, and fun way. In doing so, P.O.P. can help people understand the flow of your design before it becomes a developed prototype. Nothing is worse than creating an intricate design that no one likes or can use. P.O.P. is designed to encourage idea sharing and initiate feedback on designs, which is vital in the early stages of a project as it will not only ensure you get it right but will also save you and your team time and resources in the long run. In addition, the flexible sharing options of P.O.P. allows the user to wire frame from anywhere and then share his or her design fast and efficiently. Overall, P.O.P. is great supportive tool for paper wire framing and sharing ideas.

5. Axure

My favorite tool by far for creating wire frames and prototypes is Axure. Axure is the top of the line program for creating graphical user interface prototypes. With Axure, you can create low or high fidelity working prototypes of your design that you can preview and show to your team members or client. Not only is Axure intuitive and easy to use, every feature a designer needs for creating a webpage or app layout is available in Axure, including drag and drop elements and additional libraries of elements and templates available for download. In addition, Axure even offers a FREE license to students with good GPA’s (a great opportunity for any design student). The only small gripe I have with Axure is that editing shapes can sometimes be a pain. This is really not a big deal however as any shape you need can be imported or found in additional download packages. Hands down, Axure is the best and most complete wire framing and prototyping tool around. If you have the resources, get yourself a copy!

Continue Reading -> Part II - Image Editing Tools