IDYeah had a Voice

UX, Usability and Design

Wireframe Design Tools Roundup

Wireframe Design

An important part of a UX process is generating wireframe design and lean mockups.

2007-08-17-wireframeThe early wireframe design helps in generating quick user feedback about envisioned user interface and user experience. Iterations are less expensive in this phase of the process (pre-production). In many engagements, this part of the process is often unpaid and is used heavily as a sales conversion investment. For the above reasons, it is very crucial that the toolsets you use complements your need of rapidly generating wireframe design.

If you’re a UX Designer, you may already be using few tools for generating design mockups; it still does not harm to explore what else is available and what tools other designers employ successfully in their process. Providing a Wireframe/Design Tools Roundup…in no particular order.

And let’s not forget the ever-reliable Paper and Pencil. It is said that all the existing things have been conceived twice – once in mind and second time in physical form. The closest you can get to doing justice to the concept in mind is free-form doodling with pencil on paper, before you get to semi-formalizing the concept using a software sketching tool…from the above list.

Hope this collation of tools proves to be useful. Since I haven’t used them all, I can’t offer a comparative view across the landscape. Feel free to add to the list and share personal experiences through “comments”. Happy wireframing!

Vishal Mehta

Vishal Mehta

Vishal Mehta is a UX professional, hands-on designer and coder. He is a consultant to product companies in San Francisco Bay Area. He loves to play chess and design solutions in spare time. He ran a UX company, IDYeah Creations for six years in India. His expressions can be found on popular platforms like UX Booth, Technorati and SAP Community Network.

More Posts - Website

Follow Me:


  1. Great list of tools there. Thank you for sharing.

    After creating the prototypes, you need to validate your ideas, designs and interactions with the real end users. This is extra critical for business applications (I ran the SAP Developer Network way before it changed its name) and business mobile applications.

    So, after you created the prototypes, you need to securely share them, manage versioning and collect feedback and analytics on how the end users actually used them to complete real tasks.

    We offer – a service that allows you to use all the assets (screen) you created, in any tool (including paper…) and transform them into interactive prototypes that can run on the web and on mobile devices. You can run studies and collect insights.

  2. Thanks for the valuable contribution.

  3. Really new by Adobe: Indigo

  4. Hey thanks Renee for adding another.

  5. Hello Vishal.
    Great list of tools and the fact that Protoshare comes first on your list is good. We are authorized representatives for Protoshare in Asia. A great tool for wireframing and prototyping with a very powerful collboration engine. The new version is currently 7 and the next version is soon to release this year.
    Please take time to sign-up for a 30-day (no strings attached) trial. Keep the good work going. Cheers!

  6. Thanks Mohammed.

  7. Henrique Baldy

    March 21, 2013 at 3:50 PM

    Another one, a very, very nice one to the list: Moqups (

  8. That’s great. Thanks for adding another resource to the list, Henrique.

  9. Microsoft Visio is still in use here (in North America, at least) for static wireframes, and more commonly for flow diagrams (such as swimlanes).

    Also, I am not sure of the value of Microsft Excel for *wireframe* design, I’ve never seen that before.

  10. Thanks Judah; you’re right about Visio. Regarding Excel, there’re some smart data entry things you can mimic using its power if the UI needs to be “played”; I had used it while employed at a company about a decade ago.

Leave a Reply

Your email address will not be published.


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Wordpress SEO Plugin by SEOPressor