7 Awesome Wireframing Tools You Should Be Using

SitePoint
7 Awesome Wireframing Tools You Should Be Using
Thu, 07 Feb 2019 18:00:40 +0000
A Roundup of the Best Wireframing Tools

Over the years, we’ve become so much more knowledgeable about the UX design process, especially in regards to wireframing — a highly useful design exercise that can significantly improve the overall user experience of the final product.

In this roundup, we’ll take a look at the best wireframing tools.

What is a Wireframe?

A wireframe is the skeletal mockup of a design — the unstyled, barebones foundation that exists before the addition of fonts, colors, and any other visual aesthetics. Wireframing often happens after ideation but before high-fidelity prototyping.

Wireframing is sometimes referred to as “mid-fidelity,” and what defines a wireframing tool is the fact that they allow designers to drag and drop ready-made design elements and components onto the canvas, so that they can experiment with ideas quickly in a non-destructive environment, collect feedback from stakeholders, and even conduct user testing.

How Are Wireframes Used in UX?

Wireframing offers designers a chance to carefully think about the core UX of their design, meaning the usability, accessibility, scannability, clickability, and so on (often with special focus on the navigation, form, and checkout UX).

While visual design contributes to UX as well, designing the “surface layer” alongside the core UX can quickly turn into a complicated mess, which is why we design these skeletal mockups known as wireframes before moving to high-fidelity.

Let’s take a look at the best wireframing tools that are currently available.

Balsamiq Platforms: Web, macOS, Windows Pricing: various options for web and desktop

Balsamiq is a major player in the wireframing space.

What makes it stand out from the rest is its (optional) sketch-like visual aesthetic, which reminds us that wireframes should be experimental, low/mid-fidelity, and even disposable — the kind of attitude that makes wireframing thrive.

An example of the Balsamiq interface

Balsamiq is ideal for lean, agile teams, with features that help designers test wireframes on real devices, as well as collaborate on feedback with stakeholders. With integrations that enable bug-tracking (for example, with Jira Cloud), Balsamiq suits both designers and manager types alike.

As for wireframing components, Balsamiq is one of the most-equipped, being one of the most-seasoned tools on the market today. As with all wireframing tools, these are used by simply dragging components onto the canvas to visualize ideas quickly.

Whimsical Platforms: Web only Pricing: Free Plan, $8, or $12 (/month)

Despite being relatively new to the industry, and thus having the smallest repertoire of wireframing components, Whimsical is the best looking, the easiest to use, the most fun to use, and finally, the cheapest wireframing tool on the market today (minus Justinmind, which is free for “wireframing only”).

An example of the Whimsical workspace

A major downside is that there aren’t any user testing features. However, other collaborators can at least add their feedback by commenting on wireframes, and even manage bugs, tasks, and improvements in a Trello-like, kanban-style board. So far, the feature set is gearing up to be massively useful in a design sprint-style workflow.

Also, mind-mapping features are on the way.

Axure RP Platforms: macOS and Windows Pricing: various options for teams and individuals

Axure RP, like Balsamiq, is another huge wireframing tool, modestly offering dynamic, data-driven content features, animation features, and also adaptive and conditional layouts. It’s no wonder that “87% of the Fortune 100 companies use Axure”.

The Axure interface

Axure has been around for a whopping 16 years. Its only downside is the lack of user/usability testing features.

Marvel Platforms: Web Pricing: Free Plan, $12, $42, or $84 (/month)

Marvel is known as being one of the easiest tools to master, which includes its wireframing features. Although the majority of the workflow happens in Sketch, where designs are then handed off to developers, Marvel’s lesser-known wireframing tools are both easy to use and nice to look at — much like Whimsical’s.

The Marvel workspace

Since Marvel integrates with user testing tool Lookback, you could say that Marvel is a more-seasoned Whimsical, albeit more expensive due to the addition of prototyping and handoff features, but nonetheless a very worthy addition to this list.

The post 7 Awesome Wireframing Tools You Should Be Using appeared first on SitePoint.

Comments

Post a Comment

Popular posts from this blog

Visual Studio Code: A Power User’s Guide

Image
In this guide, you’ll learn how to take advantage of Visual Studio Code to supercharge your development workflow. This article is written for beginners who may be using Visual Studio Code for the first time. VS Code, as it’s commonly known, is considered a "lightweight" code editor. In comparison with full integrated development environment (IDE) editors which occupy gigabytes of disk space, VS Code only uses less than 200MB when installed. Despite the "lightweight" term, VS Code offers a massive number of features which keep increasing and improving with every new update. For this guide, we'll cover the most popularly used features. Every programmer has their own tool set which they keep updating whenever new workflows are discovered. If you want to learn every tool and feature VS Code has to offer, check out their official documentation . In addition, you may want to keep track of updates for new and improved features. Prerequisites In order to follow alo
Read more

6+ Best Websites for Free Fonts in 2020

Image
I firmly believe that, in order to strike the optimal balance between minimalism and visual appeal, a user interface should display no more than what’s absolutely necessary while making those necessary elements look visually appealing. Keep it simple, but make the simple look amazing. But, what does simple look like exactly? Well, strip away all of the over-the-top marketing gimmicks, redundant features, and cluttering visuals, and most of what’s left is the UI copy and text content. As boring as this sounds, let’s be honest: this is the most important aspect of any app or website. Information and the ability to navigate it is the entire reason users are using our app or website. So with the right typeface coupled with the right font styles (see “ Font vs typeface: the ultimate guide ”), we can create designs that are quite simple and yet visually appealing at the same time. This emphasizes the most important aspects of the design while usin
Read more

How to Contribute to Open Source TypeScript Projects

Image
If you think of the ideas of open source applied to information in an encyclopedia, you get to Wikipedia – lots and lots of small contributions that bubble up to something that’s meaningful. – Matt Mullenweg One of my favorite aspects of open source is the fact that anyone can contribute! It’s like “productive volunteering” (if you’ll humor me). It’s a fantastic way to build something bigger than you, give back to the community, and level up your skills. In this article, we’re going to talk about practical ways for you to get involved in open source TypeScript projects. We’ll first cover assessing your level then jump into how you can find opportunities. Assessing Your Level Before you get started contributing to open source, you want to find your comfort level. Where are you at skill-wise? What level of complexity are you wanting to solve? How much time do you want to spend? These are important questions to consider before diving in. This
Read more