Browse By

User Experience: What’s the best tool for wireframing?

In the user experience toolbox, there are numerous programs that aid in arriving at a successful design. One of the most important aspects of being a user experience designer is the ability to carve out front-end user interfaces in the form of a wireframe. 

What is a wireframe?

Simply put, a wireframe is the architectural blueprint for a website. A wireframe stipulates where the foundational pieces of a website will live, for instance, the header, which contains primary and secondary navigation, the masthead, which could contain a marketing message or promotional material (e.g. seasonal eCommerce sale information or discounts), and other important elements on the page.

After crafting the overall layout of a page, designers work to add annotations, which are functional notes to explain to developers what every element on the page does. In addition, copywriters map their copydesks to annotation labels to make sure developers know where each line of copy is going.

While there are many UX (user experience) activities that occur prior to getting to the wireframe stage, you may skip personas or card sorting and head straight to the wireframing stage. Commonly, you already have enough information about the problem to get started. Designers need to arrive at solutions quickly because project timeline are usually short and deliverables are due imminently. 

So which wireframing tool is the best? Below is an examination of the most popular wireframing tools. There are many other tools on the market and it behooves a designer to examine them all. However, at the end of the day, designers need to produce and produce quickly, therefore fussing around with new software isn’t always ideal. Your favorite tool is your favorite tool, right? A hair stylist wouldn’t use a new, untested prototype pair of scissors on their most important client, would they?

So let’s get into it:

Sketch

Sketch 

Cost – $99

Sketch is a great tool if you’re a designer that works for a company in which you are BOTH the user experience and user interface designer. It allows you to carve out interfaces as individual dartboards, which you can see displayed on the same canvas. If you’re designing mobile applications it’s great to be able to visualize a progression of pages at the same time.

PRO:

The main benefit of Sketch is that it VERY easy to use. If you’re comfortable working in Photoshop, Dreamweaver or any of the Adobe Creative Cloud programs, learning Sketch will not take long. However, once you get past the basics, the power of Sketch is the integration with other programs, most notably InVision. Via InVision Sync you can automatically important Sketch artboards into InVision for easy prototyping. Better yet, you can use your InVision Sync folder as a cloud based repository (think Dropbox), which means anytime you save your file in Sketch, it automatically updates in InVision. Magic!

CON:

Sketch is not great if you need to provide annotations. If you’re working on a large information system or content rich site, it may not be the best for you.

Interested? Check out our 3 Reasons to Use Sketch or visit Bohemian Coding

Omnigraffle

Omnigraffle

Cost – 

$99.99 Standard License 

$199.99 Pro License

Omnigraffle has long been a standard tool in a designer’s kit. Why? It’s simple to use and amazingly fast. Designers can easily rip together wireframes of high or low complexity and provide detailed annotations to developers. In addition, there is a large community of designers supporting Omnigraffle, which means that there are a wide array of downloadable stencils to aid in any project.

For instance, if you’re working on a mobile project for iOS, you will find many design and device elements provided free of charge. Head over to Graffletopia to examine further. 

https://www.graffletopia.com

PRO:

  • Easy to use, fast, the best program if you’re designing a content-dense site.
  • Many downloadable stencils available to use in your designs.

CON:

  • Very limited prototyping features.

Interested? Visit https://www.omnigroup.com/omnigraffle to get started.

How many wireframing tools are on the market? A gazillion. Bookmark this page to read future reviews.