Download these free resources
We'll treat your email address with the utmost respect and won't sell it, rent it, or let it stay up past its bedtime watching horror movies.
Last updated: June 2019
This is one of a series of articles. In the first part of the series, we explain why these techniques are the most reliable way to grow hugely any business. The first part also contains an infographic that summarizes the whole series. In this part, we describe the best wireframe tools—and other tools for perfecting your designs before you turn them into code.
(None of the links on our website are affiliate links. We’re vendor neutral, and we don’t profit from recommending technology.)
As you are designing pages, it’s invaluable to get frequent feedback, as a sanity check that you are proceeding along the right lines. User-tests are useful for this (aren’t they always?).
The following wireframing tools and prototype tools make it easy to display your work-in-progress designs. They allow you to test your designs before they have been coded. Some of the tools go all the way to producing production-ready code, whereas others create wireframes, designs or working prototypes:
Adobe Brackets, AnteType, AppCooker (for iOS apps), Appery (outputs code for mobile and responsive apps), Atomic.io, Axure (a complex, sophisticated wireframe tool suite), Balsamiq Mockups, Canva, CanvasFlip, Craft, Creately, Draw.io, Fireworks, FlairBuilder (for apps, mobile-friendly), Flinto and Flinto Lite (mobile-friendly), Fluid (specializes in mobile), Framer X (allows you to prototype and code apps for desktop and mobile), Fuse, Gliffy, Handcraft, HotGloo, Indigo Studio by Infragistics, iPlotz, iRise, Justinmind (mobile-friendly), Keynote, Koncept App, Lucidchart, Macaw (outputs HTML and CSS), Mockflow (outputs HTML and CSS), Mockplus, MockingBird, Moqups, Naview, NinjaMock, Notism (works with video too), OmniGraffle, Origami Studio, Patternry (for designing style guides), Photoshop Wireframing Kit (templates for commonly used wireframing elements), Pidoco, POP (lets you upload your pen-on-paper prototypes and make them clickable), Principle, Power Mockup (a mockup and wireframe toolkit for PowerPoint), Proto.io, ProtoPie, Protoshare, Protosketch, Prototyp, Prott, RealtimeBoard, Sketch (very popular, a successor to Fireworks), Templates for paper sketches, UXPin, Visio, Webflow, Wireframe.cc, WireframeSketcher, and Wirify (a wireframing tool that lets you turn any existing website into a wireframe in one click). The following are tools for people who like to draw by hand: Apple Pencil for iPad Pro, iSketchnote, Livescribe pens, Paper and Pencil by 53, and Penultimate.
Once you have gathered your feedback, you’ll start to implement your ideas. In the previous section, we mentioned how useful user-testing can be. In addition, the following techniques can be useful.
Sometimes, you need a quick sanity check, to see whether you’re proceeding along the right lines. Verify (mobile-friendly) and Five Second Test allow you to get quick feedback on what you’ve created. Alternatives include PickFu.
You upload your designs or ideas, and then ask the panel for feedback in a variety of formats:
Regardless of how your designs were created, Invisionapp (mobile-friendly) allows you to easily turn them into functional prototype websites. You upload your page designs to Invision, and then link them together to make the site navigable. Then, you can carry out user-tests on what, to the users, appears to be a real website, even though it hasn’t seen a smidgen of code. Alternatives that have this functionality include Concept.ly and Marvel.
Invisionapp (mobile-friendly) also allows other people to give written feedback on your work-in-progress designs. You upload your designs, and then invite others to annotate them with whatever type of feedback you desire. Alternatives include Firefly and BugHerd. Composite connects to Photoshop files, turning them into clickable prototypes.
To gather feedback on your work-in-progress videos, you can use Frame.io, a fantastic web-based platform. Alternatives include Wipster, Symu, Vidhub, RemarkHQ and Kollaborate. Such services provide great benefits; it’s hard to gather and record such feedback even when everyone’s in the same room.
Optimal Workshop provides several tools (OptimalSort, Treejack and Chalkmark) to help you optimize your website’s navigation and information architecture. The tools are described in our article about card sorting. Alternatives for card sorting include SimpleCardSort, Usabilitest and Xsort.
A/B-testing software allows you to create different variations of a page, and then to measure which converts best. You can then promote the winning page to become your official new version.
A/B-testing doesn’t generate many insights. However, it does give the final word on whether your insights and intuitions were accurate. A winning A/B-test is your visitors voting with their feet (and often their credit cards).
For further information on A/B-testing, see a report we wrote entitled A/B-testing 101.
There are many software platforms for A/B-, multivariate- and split-testing. We created the industry’s first and most comprehensive comparison website for them, here. It compares software solutions for split-testing—A/B-testing and multivariate-testing—allowing you to see the differences easily.
Although it’s not our favorite technique, it can be useful to analyze the websites of your competitors, for two reasons:
You may wish to also carry out user-tests on your competitors’ websites, to get an independent view on how users perceive them.
Have we failed to include one of your favorite tools or techniques? If so, please let us know.
1. We have already grown companies just like yours. (We have helped to grow clients in 37 countries in 11 languages.) So wherever you are in the world, if you’d like us to work on your website—to dramatically increase its profits—then claim your FREE website strategy session. On this free phone consultation, one of our experts will discuss your conversion goals and suggest strategies to double your sales.
2. If you’d like to learn conversion for free, go to our “Learning Zone” page, where you can download templates of million-dollar winning pages. Or, if you’d like us to build your company’s in-house capabilities (not for free), then contact us and we’ll discuss your requirements.
3. If you’d like to work for us—or see why our team members love working for us—then see our “Careers” pages.
All of our articles are subject to our Testimonial Protocol, which is described here.