What is a wireframe? Part 3: Popular tools
Website wireframes help designers visualise ideas, present concepts and involve clients early in the development process, long before any coding happens. In our three-part blog series on wireframes, we’ve defined what are wireframes and why they are important in web design, and even discussed how wireframes and mockups differ.
In this final article we provide several popular wireframing tools and prototyping software, beginning with iFactory’s favourite Pidoco.
At iFactory, we use Pidoco for our wireframes. Pidoco is a powerful online prototyping program for rapidly creating clickable wireframes, mockups and interactive UX prototypes for web, mobile and enterprise applications. It’s easy to use with smart sharing and collaboration features, rich interactions, a smart template system, convenient specification generator, exports and much more.
Apart from its excellent features, we like Pidoco because sharing is made easy. It lets us send our clients a uniquely generated URL, which can be viewed in both high and low resolution versions on their phones, tablets and laptops.
Axure was one of the first professional-class wireframing/prototyping tools on the market. It’s a powerful tool that lets you build wireframes, mockups and prototypes. Using Axure, you can quickly create beautiful wireframes with boxes, placeholders, shapes, and text.
And, when you’re ready for more visual polish, add color, gradients, and semi-transparent fills, import images, use grids and guides for precise placement, or the many other tools designed to help you work at the right fidelity for your project.
Axure has a Standard edition for prototyping or go Pro to add documentation and collaboration features.
Balsamiq has a unique approach in that their wireframes resemble sketches, which makes it immediately obvious that it’s not the finished product. Balsamiq also has a huge library of reusable user interface (UI) elements that you can quickly drag and drop, making it possible to build an interface on the fly. This is perfect if you want to come up with a design and iterate in real-time during a meeting with say product managers, designers, developers and even clients.
There are plenty of other wireframing tools available, however, these three are a good place to start. All three tools are supported by strong community-generated components and widgets, so the range of work that you can do is quite wide. As with choosing any software, it’s about weighing up the cost, feature sets, learning curve and others.
We hope you’ve enjoyed our blog series on wireframes, including:
- What is a wireframe? Part 1: Overview
- What is a wireframe? Part 2: Wireframes vs Mockups
- What is a wireframe? Part 3: Popular tools (this article)
Read more insights
What is a wireframe? Part 2: Wireframes vs Mockups
Wireframing is a crucial phase of the web development process. Designing a website without a wireframe is like building a...