22 Good Prototype and Wireframe Tools for Mobile and Web Design

22 Good Prototype and Wireframe Tools for Mobile and Web Design

Wireframe and prototype resources are very helpful for designers when they need to create a mockup to show to their client in order to give them an idea of how their web or mobile design will look once it is designed completely. With the help of UI design kits, wireframe tools or prototype tools, designers can quickly create mockups of their designs and can communicate with their clients more effectively.

By creating wireframes and prototypes either for mobile or web design, designers can discuss in deeper detail with their clients about the different versions of their projects without investing hours.

22 Good Prototype and Wireframe Tools for Mobile and Web Design

Below, we have presented 22 good prototype and wireframe tools for creating mobile and web designs. We hope that you will like this collection and find these prototype and wireframe tools useful. Enjoy!

Useful Prototype and Wireframe Tools

Wireframe Tools For Web Design

Moqups
This is free to use tool for creating high fidelity, resolution independent SVG mockups and wireframes.

Moqups

JumpChart
With this wireframing tool, you can quickly create wireframes and prototypes. Free as well as pro accounts are available, and there is a JumpCharts export ability to export directly into WordPress.

JumpChart

Gliffy
With this tool, you can drag and drop boxes, buttons and lines from the web wireframe tool shape library to any place on the page. Using this tool is very easy, and you will not have any problem creating wireframes. Moreover, it’s free.

Gliffy

Frame Box
Frame Box allows you to create and share your mockups or wireframes with your clients easily. It is free to use.

Frame Box

Wireframe.cc
This free to use wireframe tool lets you create quick mockups of page layouts. You can create mobile as well as desktop templates.

Wireframe.cc

Pencil Project
This is a free and open source tool for creating GUI prototyping easily. It is an easy to use and install tool.

Pencil Project

Wirify
Wirify is an exceptional bookmarklet with which you can convert any web page into a wireframe just in one click. This is absolutely free to use.

Wirify

Axure RP
Another premium wireframe tool for creating more detailed and interactive HTML website wireframe and UI mockups. Android and iPhone apps interfaces can also be created with this tool.

Axure RP

ProtoShare
This is a premium online tool for creating collaborative, website wireframing or website prototyping tools.

ProtoShare

Mockingbird
With this tool, you can create, preview and share mockups of your apps and website. This is a premium tool.

Mockingbird

PowerMockup
With this premium tool, you can convert Microsoft PowerPoint into wireframe. It comes with a library that offers a nice collection of wireframe elements and icons that you can drag and drop onto your PowerPoint slide.

PowerMockup

ForeUI
This is another easy to use and premium prototyping tool that allows you to create mockups and wireframes for any web or mobile based app. There are UI themes to choose from so that you can easily customize your prototype project.

ForeUI

JustinMind Prototyper
With this premium tool, you will get control of creating excellent prototypes for web and mobile apps. Advanced options such as gestures, conditional rules, forms and others can also be used.

JustinMind Prototyper

JustProto
This tool comes with some rapid prototyping abilities to help you quickly do your job. It is a premium tool with drag and drop feature to create fully interactive prototypes.

JustProto

iPlotz
Create interactive prototypes with this tool that you can use for free and you can also opt for a premium account. This tool also boasts the capabilities of project management.

iPlotz

Pidoco
Another premium prototyping tool for you so that you can create your wireframes and prototypes quickly not only for web apps but also for mobile and enterprise apps.

Pidoco

FlairBuilder
FlairBuilder is another premium tool for creating interactive wireframes. Using this tool is very easy and the availability of loads of options makes this tool even easier to use.

FlairBuilder

Wireframe Tools for Mobile

iPhone Mockup
This is a free wireframe tool specially designed for creating mobile mockups. All the changes made are rendered in real time.

iPhone Mockup

WireframeSketcher
This tool helps you create mockups, wireframes and prototypes for mobile, desktop as well as web applications. This is a premium desktop app and a plug in for any Eclipse IDE.

WireframeSketcher

Proto.io
With this premium tool, one can easily create UI prototypes for mobile and tablet apps. You can create a project for iPad or iPhone.

Proto.io

iMockups
iMockups is a premium mobile wireframe tool that will allow you create mockup apps for your iPhone, iPad and web projects.

iMockups

Adobe Proto
Adobe Proto is another premium mobile wireframe tool that lets you create easy and interactive wireframes for your mobile and website apps. You can communicate and share your ideas with your team as well as with your clients.

Adobe Proto

Conclusion

In this collection, we have shared with you many excellent prototype and wireframe tools that will help you create mobile and web design mock ups easily and effortlessly. These tools will save you time and let you complete your design work in less time.

Have you use any of the mentioned tools before? Leave us a comment and let us know your opinion about this collection.

Jameel Khan is a web graphic designer and has been working in this field for 4 years. He also writes for other blogs and is also the founder member of webdesigncore.com. His biggest passion is blogging and vector illustrations.

Comments

  1. / Reply

    I suggest you have to look at Mockup Builder http://mockupbuilder.com/

  2. / Reply

    Great list! I haven’t tried the others but I’m currently using Justinmind’s Prototyper Free. I like it so far and will def try the others :)

  3. / Reply

    excellent selection, I never used any of these (well, I didnt even know they exist to be honest). Thanks for sharing!

    • Tabetha Jansen,
    • March 2, 2013
    / Reply

    These days a lot of mobile websites are coming up that are high customized and attractive. Web Designers are working hard to incorporate new elements in websites without compromising on quality.

    • Bonnie,
    • March 3, 2013
    / Reply

    I thought Adobe Proto got axed. ?

    • Tump,
    • March 4, 2013
    / Reply

    very good……….

    • anthonydpaul,
    • March 7, 2013
    / Reply

    I’m surprised Balsamiq is not on here. It has been popular lately. Also, Blocks.js by EightShapes is nice.

    • Meghan,
    • March 8, 2013
    / Reply

    ProtoShare is also used for building mobile prototypes too. They also just released their new Stencils and Widgets Library that has a vast amount of component sets like Twitter bootstrap, IOS, Android, basic objects, Web & Desktop – to name a few.

    • VHDesign,
    • March 10, 2013
    / Reply

    MockFlow Wireframe (and its related Design Cloud apps) is another viable option. I’m a fan, at least. It has the added benefit of being a Google App, if you’re into that.

  4. / Reply

    very useful post! thanks)

    • Randall,
    • May 22, 2013
    / Reply

    Wirify is a pretty cool tool, though it seems like all development stopped on it a long time ago. Gliffy was too basic. Flairbuilder was a little confusing but nice. Ultimately Lucidchart was my pick for my mobile designs given their iPhone and iPad mockups.

    • Shirley Tan,
    • July 7, 2013
    / Reply

    I suggest Phototapper. Honestly it covered everything for me.

    Phototapper is a prototyping application with complete feedback loop. It turns an idea into a working prototype in just minutes. Share web link (passcode protected) with customers to simulate the app tappable on the browser. The app gets notified immediately when they feedback on the browser, no phone calls, no e-mails! Customers can use highlighter on the browser to visually tell exactly what they mean.

    Video for web link: http://youtu.be/gOiKrejjJQQ
    You can run sample here: http://goo.gl/APKZv

    • Anna I.,
    • August 6, 2013
    / Reply

    Really great selection of tools! Thanks! You also might be interesting in Real Pixels Android app which helps mobile UI/UX designers to evaluate the quality of your designs on any Android device, http://realpixelsapp.com/, http://www.youtube.com/watch?v=aBLClbDXORw

    • Dave Kearney,
    • August 27, 2013
    / Reply

    Hi folks,

    We’d love anyone who is interested to consider fluidui.com – it has full widget sets for iPhone, Android and Windows 8 or you can just include your own screenshots. Easily create fully linked prototypes with touch gestures and animated transitions – test on mobile device with a couple of clicks. Couldn’t be easier.

    Cheers

    Dave (from FluidUI)

    • John,
    • November 22, 2013
    / Reply

    thanks for the list, I have tried many of these tools. I am working with clients where time is important and controlling the proejct is important as well. I as well need some sharing and commenting possibilities. I just worked with a tool called ninjamock.com and I must say that it is, as far best tool that I have tried. it is vector based, with cool sharing and comment funcionality. just my opinion. :)
    proto.io is not bad, but not for the pro UI expert.
    Just wanted to share this with you

    Br

      • Herick Oliveira,
      • August 20, 2014
      / Reply

      I can’t thank you enough for this comment. NinjaMock seems to be exactly what I was looking for, but for some reason no blogs seem to be listing this one yet.

    • Tim at MockGen,
    • December 23, 2013
    / Reply

    Hi Jameel, you might be interested in MockGen – it creates wireframes from existing web pages, with a selectable range of fidelity. http://www.mockgen.com

    • Antonella Cachia,
    • October 27, 2014
    / Reply

    You may wish to add (or try) SnapUp by QuickFocus to the selection of tools available.

    Feel free to sign up for a free trialhttps://app.quickfocus.com/get-started?pId=SnapUp&freeTrial=basic

    SnapUp can benefit every aspect of your design project, mainly because:

    • It involves and empowers users with the hands-on approach – that is, the team can create physical mock-ups (offline) using cut-out elements downloadable from SnapUp. Then snap a picture and upload it to your project online. You can also opt to start a screen directly online.
    • You can generate requirements documentation with a push of a button.
    • Share and edits projects using real-time collaboration functions
    • See the bigger picture to deliver a better product
    • Save money by avoiding endless design iterations
    • Plus, SnapUp is available in the cloud so we manage all updates and upgrades for you.

    • Asmaa Gamal,
    • December 16, 2014
    / Reply

    I recommend codly.io

    You Can:

    slice your PHOTOSHOP design automatically.

    generate assets for all application screens.

    automatically generate the UI components of your application.

    organize, Export the UI source code,converting your Photoshop design to interactive, working prototype.

    save 40% of of the whole application development timeframe!

    • Anurag,
    • November 19, 2015
    / Reply

    Xiffe.com is an excellent prototyping tool for iOS, Android, Windows and Apple Watch

    • Helena,
    • December 17, 2015
    / Reply

    I can recommend Mockplus, another prototyping tool which is really easy to use and learn, especially for the new beginners. You can master this tool in a short period of time because of the clean interface. And there is a FREE version.

  5. / Reply

    Thank you for sharing these great tools for prototypes. I would also like to suggest another simple yet powerful UX prototyping tool, Mockplus. You guys could kindly give it a try!

Leave a Reply

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

Deals