Best Wireframing + Prototyping Tools for Building Websites

My first post about wireframing design looked at conventional methods like pencil sketches and familiar software from Adobe, but it only scratched the surface. A wealth of tools exist, including web apps, to generate information architecture and layout opportunities.

Best Wireframing + Prototyping Tools, Part 2

Mockingbird

wireframingMockingbird offers a lot of the features that Adobe users have come to accept (including grids and guides), and its UI is extremely friendly.

Also, Mockingbird invites multiple collaborators to work on one project in real-time, rather than having to chop it into parts and delegate components across the team – which is a big advantage. But if you do need to export a file for emailing and reviewing, you can save as a PNG or PDF.

Hotgloo

hotglooBilled as “more than ‘just’ wireframing,” HotGloo has a nifty interface, robust toolkit and built-in feedback acceptance system for internal team reviews or user-testing. Like Mockingbird, HotGloo allows real-time collaboration on a project. And as an added bonus, it offers a wealth of pre-built elements for easy drag-and-drop construction. In terms of bragging rights, HotGloo has been used for prototyping the Academy Awards’ website.

Moqups

moqups; wireframingOf the prototyping tools reported on here, Moqups looks the simplest, and the web app continues to grow incrementally. If you like using Dropbox or Google Drive for file management, you can port your work there. Real-time editing, collaborating with team members, commenting and a bevy of template assets make it a well-rounded tool. There’s also the ability to export your projects in Retina-display resolution.

Justinmind

justinmindAlthough it’s not a web app, Justinmind deserves to be mentioned here for its all-in-one abilities: You can design web or app prototypes all from one place. Justinmind has the ability for implementing gesture support needed for touchscreens into your prototypes, and a toolkit for developing for iOS, Android and let’s not forget Windows Surface. Oh, and you want to prototype for the desktop? Use Justinmind’s desktop design widgets. It’s full service.

Sketch

wireframing; website construction
Sketch probably deserves a blog post unto itself because it’s more than just a prototyping tool. It’s become a replacement for Fireworks, Adobe’s erstwhile interface design program that was a holdover from Adobe’s Macromedia acquisition. Since Fireworks is not included in Creative Cloud, digital and interface designers have had to make the transition from Fireworks to Photoshop, Flash, or InDesign, and oftentimes begrudgingly.

But in a very short time, Sketch has become a go-to solution that has designers asking themselves how they got by without it for so long. And with Sketch Mirror, you can see your design across every viewport at once. It’s not a web app, and if you’re on a Chromebook or Windows PC, you’re out of luck: Sketch is Mac native.

The Web App Advantage

One of the biggest advantages to using web apps for web design is easily previewing your prototypes in a browser. There’s no need to export files, import them into a browser and then go back to the app for modifications. In a web app, it’s all in the browser, so your workflow stays within the context of the end product. Another advantage is pervasiveness: having the design online, within a web app that’s networked, allows you to preview the design in any other viewport, be it a phone, tablet, laptop, desktop, or television.

But that doesn’t mean you should avoid stand-alone apps, especially if you’re working in an environment that may not have an always-on Internet connection. There’s something to be said for the ability to work un-tethered, so you can get work done on a long flight, train or car ride.

When choosing what prototyping tool (or tools) to use, consider testing it across the entire team before committing, making sure to see if it’s within budget and the option jives well with your hardware and operating system. Finally, look at transitioning out of the application. If the app happens to disappear, will you be able to move your work from one platform into another one? Bottom line: have a back-up plan. Since new apps are always on the horizon, keep up with latest releases to ensure your options are the best, and most up-to-date fit.

Want more of Jason’s interactive expertise? Check out the Expert Guide on Agile Methodologies.

agile development;

COMMENT