March 28, 2024

Top 5 Design Tools for Wireframing

There are hundreds of wire-framing tools in the market, some online, some desktop-based, some free, and some paid. How do you sort the best from the rest? Below are my top picks:

Moqups

Moqups is my current favorite. What I like about Moqups is how easy it is to use, with plenty of drag and drop features and the ability to road test it from the get-go, with a minimal learning curve. It’s fast, easy to use and works without a browser plug-in. Screens and buttons can be linked so you can publish a demonstration for your clients to view and images can be exported for specification diagrams. Moqups has been created in standard HTML5 and JavaScript which makes it more impressive. Highly recommended.

Top 5 favorite design tools for wire-framing

Balsamiq

This program has a user-friendly interface that lets you drag and drop elements to create a mock web page or App; enabling rapid prototyping and getting your ideas across fast and without fuss. It comes with a lot of prebuilt controls commonly used in web design saving you time and speeding up your output. It is intuitive to use with almost no learning curve so you can get started straight away. Balsamiq’s only flaw is the wireframes can look a little childlike and unfinished. However it succeeds in being the missing link between the sketch pad and computer.

Top 5 favorite design tools for wire-framing

UXpin

A collaborative online design tool, UxPin is a design app specifically for User Experience and allows you to create wireframe and prototypes that are interactive. It provides users with a tool kit that contains common design elements and offers a huge library of custom UI elements. This is a supremely powerful tool which outputs very polished wireframes. UXpin will appeal to advanced users who want to spend more time creating beautiful full colour wireframes.
I haven’t used the collaborative element yet but with design studios becoming much more agile with remote workers, this function can only be a good thing moving forward.

Top 5 favorite design tools for wire-framing

Invision

Although not a traditional wire-framing App, Invision allows you to upload working designs and create interactions by using hotspots, just like any real application. Currently in the studio, we are working on designing and developing our own iPhone app. Invision App has been really useful for communicating the design transitions and journeys between screens to other team members. One of it’s standout features is the ability to send clickable designs to your phone via SMS, underlinining the importance of being able to test your designs yourself in context. Support for Android phones has also just been announced.

Top 5 favorite design tools for wire-framing

The old fashioned way!

Despite the plethora of software tools, drawing wireframes by hand still remains one of the best ways to get your idea across especially in meetings or in face-to-face scenario’s with work colleagues.
Sketching is fast, quick, cheap, and quite liberating! However, hand drawn wireframes can’t be shared easily – most designers like to start off drawing wireframes by hand first before moving onto digital wireframes that are easier to edit and share.

Top 5 favorite design tools for wire-framing

Bryan Werbinski is the founder of Styles Webbin, an London based web design agency with a passion for clear, creative and engaging design . Follow Styles Webbin on Twitter for more design tips.

11 Comments

  1. Kevin Carlson Reply

    The “unfinished” look of Balsamiq is actually a feature – it encourages end users to critique the early design stages.

  2. Peter Severin Reply

    Also take a look at WireframeSketcher wireframing tool. It’s an offline desktop app, but it also comes with a free service that lets you quickly share clickable wireframes online and then discuss them with your clients.

  3. Colin Eberly Reply

    I dunno what it is but something about the sketched look seems really overdone on Balsamiq. It’s just too much for me. Kinda takes away from the whole wireframing aspect, as when I do stuff the “old fashioned” way, I tend to use a ruler still to produce clean lines instead of looking at scribble. Good article though!

  4. InVision App Reply

    Happy to hear that InVision is helping with your mobile design development! If you have any ideas on what you’d like to see InVision do next, feel free to shoot me a note. 🙂 Lots of stuff in the works.

  5. Lee Reply

    Came across this interesting article. Been a lot of talks about inVision lately. A very useful realtime app…great for project collaborations. Thanks a lot for the share.

  6. Eileen Coyle Reply

    Hi Bryan if you get a chance try out fluidui.com for high and low fidelity mockups with libraries for all major platforms. With Fluid UI you can get mockups up and ready for preview on your own device in minutes, great for user testing and feedback. Here’s a link to the editor where you can try it out for free: https://www.fluidui.com/editor/live/

    Thanks,
    Eileen (from Fluid UI)

  7. Mina Reply

    Hi, thanks for sharing this nice and informative illustrated blog. There’s another great tool specialized in UI/UX design named Mockplus. It’s very simple and easy to use but without any experts’ requirements on coding or programming. With Mockplus, you can prototype rapidly within several minutes as it’s low learning curve. Personally, I think it should be included in this list.

    1. Mockplus Reply

      Hi, Mina! Thanks a lot for suggesting our design tool. We are always moving forward. The good news is that our new 2.1 version is just on the way and will be launched very soon. Please keep following us on Facebook/Twitter/Google+. We are always there to help. 😉

Leave a Reply

Your email address will not be published. Required fields are marked *