Wireframing Tools
As web designers and web developers, we don’t always know what is going to work and what won’t for a client’s site. Sometimes, we just want to play with layout ideas before we start building a website. Wireframing a website before you build it is a super-common task, and it’s highly recommended for quality websites. There are tons of wireframing tools out there, but knowing what they are and where to find them can be tough. Below, I have listed 22 wireframing tools for web development, and their key features.
Knowing the features gives you an advantage, because you’ll be able to narrow the choices down to what you’re looking for. Also, you have to find the right wireframing tools that integrate well with your workflow. It can be one of the most popular wireframing tools out there, but if it doesn’t mesh well with your workflow, it can be counter-productive.
Moqups
Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes, etc. It’s free, fast, and works right in your browser. There are premium accounts available, which offer team member collaboration and image storage. you can also export as PNG files, too.
Proto.io
Proto.io is a dedicated app for mobile prototyping and wireframing with tons of mobile UI elements. Proto.io supports all the major mobile gestures and touch events like tap, tap-hold, swipe, pinch, and zoom. Interaction designers are not limited to a single ‘link’ transition anymore. Instead they can apply animated screen transitions like slide, fade, pop, flip, flow, and turn. There are also animations and transitions as well. you should check out the demo to see what I mean.
UX Pin
- A user experience design tool used by people from Google, IBM etc. It can convert paper prototypes into wireframes and demonstrate design process! Some of UXPin’s main features:
- Upload UX & Project Files easily.
- There are Images, Wireframes, User Profiles & More.
- Collaborate In Real Time
- Create Prototypes And Wireframes For Different Kinds Of Devices And Resolutions.
- See responsive previews.
- Create your own presets.
- See comments and chat in real time with others, which includes a history log.
Fluid UI
Features:
- Build connected multi-screen prototypes.
- Fluid UI comes with over 2000 ready-made iOS, Android, Windows 8 and wireframe UI widgets for phone & tablet prototyping.
- Add gestures and transitions between screens.
- Share mockups easily with your team and clients.
Invision App
Invision is a high-end, highly technical wireframing tool that focuses of quality collaboration. It has Retina support and recognizes mobile gestures. It also features hover states, scrolling and exporting your work to PDFs.
Balsamiq
Balsamiq offers sketches of your interface. This approach makes you focus more on layout and placement. I don’t care for the sketchy look, personally, and tend to lean towards more streamlined designs.
Devhand Sketchit
Devhand features:
- Create complex application wireframes.
- Create a smartphone app prototype.
- Create beautiful forms.
- It uses layers, just like photoshop.
ProtoShare
ProtoShare focuses on collaborative wireframing between a team. This is geared towards a design team to streamline the process of creating a website from start to finish. ProtoShare’s focus is on UX and allows the creation of mobile apps.
Adobe Fireworks
Fireworks is no longer being developed by Adobe, but is you have an older version, it’s still a great tool for creating mockups and wireframes. Wireframing and mockups have never become easier. With professional UI templates and wireframes built right in, Fireworks CS6 is geared towards web and mobile application creation, with a focus on getting up and running quickly and efficiently.
Pencil
Pencil is an open source GUI prototyping tool. It works in the browser as an add-on and is geared towards making user interfaces quickly and efficiently. Highlights include stencils, page linking and the ability to make simple website mockups.
Axure
Axure is great for rapid wireframing needs and prototype generation. You also have the ability to develop your wireframes and mockups to working prototypes.
JumpChart
JumpChart is another wireframing tool that boasts the ability to create rapid wireframes and prototypes. A unique aspect to JumpCharts export ability is to export directly into WordPress.
JustInMind Prototyper
Features:
- Take advantage of Mobile Device Emulators.
- There are gestures for mobile application prototypes.
- Create your own widgets.
- Define styles … and make it look great!
- Export your wireframes to interactive HTML.
JustProto
JustProto is a wireframing tool that boasts rapid prototyping capabilities. It also has drag-and-drop capabilities, and produces fully interactive prototypes.
Pidoco
Web based and used to quickly organize and create clickable prototypes and wireframes. Pidoco also has collaborative sharing capabilities.
Hot Gloo
Besides being able to collaborate with others and being web-based, which means that you can access your work at any time with any browser, Hot Gloo also boasts an auto-saving feature.
Gliffy
Gliffy is a free wireframing tool that contains a library of common elements so you can get up and running in no time. The ability to add in text to make notes and add descriptions really makes this a good option for designers on a budget. Although, it’s more of a sequential mind map.
WireFrameSketcher
WireFrameSketcher is a simple and easy-to-use tool that allows you to build wireframes quickly and share them with other team members. Their site shows many different examples of the types of things that you can create quick mock-ups for, including: iPhone apps, websites, Facebook, and more.
FlairBuilder
Flairbuilder is a great wireframing tool that has a UI component library and the ability to create multi-page wireframes and master pages, so you can save time by not having to rebuild your wireframes for each page.
MockFlow
Mockflow is interactive, allowing you to create working conceptual prototype. The unique feature is that Mockflow is hybrid, meaning that you can work online or offline. You can also create sitemaps, so that you can get through the planning process quickly and efficiently.
Frame Box
Frame Box is a tool that is browser based and features a click-and-drag layout system. This is fantastic for creating resizable, easily adjustable wireframes quickly.
Creately
With Flowchart wireframes and mind maps can be made quickly and easily with Creately. I like this one because of their built-in sharing and ready-to-go templates, Creately ranks right up there with other wireframing tools.
Conclusion
Which one of these woreframing tools is your favorite? I like Moqups, and to be honest, I have since it’s been around. it’s quick, it’s free, and it loads in the browser. I want to hear from you! If you have any thoughts on wireframing tools or any questions about them, let me know it the comments section below.
