10 Wireframing and Prototyping Tools for 2013

Creating a website or application is not limited to deciding what to put on the homepage or what photos to use to match the site’s subject. Visual designs are necessary to attract searchers and be user friendly. Therefore, project developers must first be able to visualize a good output and see how it could get the interest of people. Well, this requires lots of creativity and project managers, web designers, and developers need wireframing and prototyping tools to put up their proposed sitemaps and application flow.

Since it is already 2013, what are the latest prototyping and wireframing tools that can help designers and developers take their workflows and designs to the next level? Of course, technology does not stop advancing so there are really a lot of new tools out there – and here are some of them:

Generator

Generator

A cool new tool that will help you visually create a prototype of your future website using the blocks in the framework. Now, creating your site with Startup Framework will be even more fun.

InVision

InVision

InVision makes quick yet impressive prototyping possible for a higher level of design. With this tool, users can link their UX sketches, designs, and wireframes up in a short time and even share them with the rest of their team. InVision has also made design presentation easier as users can just present their project in an actual demo, load it in a browser, or even SMS it directly to a mobile device. This tool also allows tracking the rest of the team’s activities to check the project’s progress.

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

Solidify

Solidify

Another product of ZURB, Solidify allows the user to make clickable prototypes from mock-up, wireframe, or sketches. Through it, interface screens can be prototyped quickly. Moreover, these prototypes can be easily tested if they work on tablets, computers, or phones. Without much time investment, they can also be shared with testers to see if the directed flows are understandable enough and the feedbacks can be received anytime.

PowerMockup

PowerMockup

Another tool to watch for by designers is the PowerMockup which provides templates for wireframe building in PowerPoint. It got a Stencil Library which has a variety of templates for any app or website elements, such as menus, tables, text boxes, buttons, and tabs. These templates are easy to use since they can just be dragged into the PowerPoint slide. What is more, users can also add their own items to this library. By just choosing a shape on the PowerPoint slide, then clicking the “Add Stencil” tab, a custom stencil can be created already. These stencils can also be shared with others.

Antetype

Antetype

Antetype is perfect for those who have big and continuous projects because it allows developers to build their own set of widgets. Its widget library has a wide range collection of widgets that can be easily used in prototyping. Moreover, each widget has a number of customization and default states that can be edited individually or simultaneously. Therefore, the user does not have to use different copies when he has to edit states. Antetype is surely advantageous since its widgets can adapt to the needs of every project.

UXPin

UXPin

UxPin is perfect for those who are not that skilled in UX designing. The experienced UX designers of UXPin offer a full help by providing a complete tool kit of useful design elements and patterns. Everything that a user needs to come up with the best designs for their project can be found in UXPin. They got the needed templates for uploading UX and project files, such as Project Canvas, Project Kick Off, Business Model Canvas, Personas, and many more. Also, users do not have to be emailing their files back and forth because here, everything can be worked on altogether. It is UXPin’s goal to help project managers develop responsive wireframes and prototypes for any kind of resolution and device.

QuirkTools

QuirkTools

QuirkTools has made website building simpler and easier. They build web applications that can help their users build their own. An example of their works is Wires, which is an app that can help create wireframes on tablet, mobile phone, or desktop. QuirkTools apps allow developers to collaborate with their colleagues and clients too. Their tools are all polished and proven effective in creating the perfect designs for apps and webs.

Wireframe.cc

Wireframe.cc

Creating wireframes has been made easier with this very minimal tool, the Wireframe.cc. What makes it advisable to use is that it does not have a canvas cluttered with numerous icons and toolbars, unlike other tools. They believe that this can help users focus on sketching their ideas. They keep wireframes simple by offering limited options of colour palette and stencils. Moreover, they also have two templates to choose from: a mobile phone and a browser window. The first version has landscape and vertical orientations, while the latter comes in the portrait and horizontal styles. With Wireframes.cc, users can be able to produce clear outputs.

Easel

Easel

An in-browser web design tool, Easel allows its users to mock-up and sketch down their ideas easily. It has helpful and easy to use elements, such as buttons, tables, and text boxes. This tool also incorporates the Twitter Bootstrap library among other extra icons and elements. Moreover, Easel let users design in the web to guarantee perfect pixel execution. They can use advanced tools, like the CSS3 and web fronts, without the need to be going back and forth between the browser and the text editor. Easel also makes it possible to get elements from other websites or apps, create clickable prototypes, and have them tested even without an engineer.

Proto.io

Proto.io

Proto.io is a tool perfect for designers who are concentrating on touch screen gadgets. It supports major mobile touch styles and gestures, such as swipe, pinch, tap, zoom, and tap-hold. Moreover, they can also integrate animated screen transitions, such as fade, slide, turn, flow, and flip. However, this tool is not just limited to producing advanced screen transitions. It also allows its user to learn and apply basic animation skills, like fade, move, scale, and rotate, in their prototype creation. What is fun about this is that in just a few minutes, users can already complete their interactive interfaced prototype.

POP

Prototyping on Paper

Prototyping on Paper (POP) is a tool that makes iPhone prototyping easier. This offers a traditional-made-hi-tech wireframing technique. Without the complicated software, all the user has to do is draw or sketch wireframes on a paper or notebook. Then, the wireframe is imported by just using a camera—yes it is just a shot of it. POP makes sure that the sketches are clear by adjusting the contrast and brightness automatically. Afterwards, the users can already design their storyboard by using “link spots” to connect the sketches. To assure everything is perfect, they just have to click “play” and simulate the interface.

With all these tools, prototyping and wireframing have been made simpler and easier. Even beginners can already design their own website or application using these. Well, expect that in 2014 there are more advanced tools to come and maybe that time everything is quicker and lesser complicated.

John Conor

I help online marketers and business owners to learn the insight tips and techniques of blogging. I'm the owner of Learn Blogging Tips.com and InternetMarketingStories.com Make sure to visit my wonderful blogs!

Newsletter

33 Comments
  1. Mike Earley Apr 1, 2:06 pm

    It’s disappointing that you’ve done a 2013 article but you haven’t included Indigo Studio from Infragistics, which is arguably the best tool of its kind currently available, and only came out in Nov 2012–making it a perfect introduction product for an article like this.

    Reply
    +8
    • Kevin Youkhana Apr 1, 4:34 pm

      One thing with Indigo Studio is that it uses Silverlight a technology that Microsoft is moving away from

      Reply
      +11
      • Ambrose Little Apr 1, 9:35 pm

        Indigo Studio has an HTML prototype viewer in beta today, and it will be released soon.

        Reply
        +5
    • Ronan Quinn Sep 3, 1:00 pm

      Hi Mike and John, there’s also another great prototyping tool you nearly missed out on – If you need a smarter, faster way to create hi and lo fidelity mobile prototyping apps using just a drag and drop tool and then try it on your own mobile check out https://www.fluidui.com/editor/live/ Also see our new how to get started easy to follow vid clips on our YouTube channel http://www.youtube.com/watch?v=uodln1GmrFM

      Hope this helps! :)

      Cheers,

      Ronan (Fluid UI)

      Reply
      +3
  2. George Abraham Apr 1, 5:05 pm

    Since the official MS support for SL ends in 2021, we don’t have a huge worry there. More importantly, it allows Indigo Studio to run well on both Win and Mac.

    If it helps, the prototypes you create will run in HTML so that you can evaluate prototypes on devices. More on it here: http://bit.ly/127El8V

    But none of this will matter if you feel that the tool is not serving the need it claims to address. That would be a bigger problem :). Here is a recent demo/presentation: http://bit.ly/13LeRTw

    Reply
    +1
  3. Vince @ Intuit Apr 1, 6:05 pm

    Wow, axure isn’t part of this?

    Reply
    +6
  4. David Apr 1, 9:05 pm

    Pencil.

    It’s free and multi-platform.

    Reply
    +13
  5. Pixelpatser Apr 2, 3:00 pm

    IvisionApp is the best tool for presenting design mockups these days! I’m using axure for wireframing.

    Reply
    +2
  6. cosmonova Apr 3, 6:06 pm

    There is also https://moqups.com/ which is also free and simple.

    Reply
    +5
  7. Shew Apr 5, 6:18 am

    Does no one use Balsamiq anymore?

    Reply
    +3
    • Nathanael Boehm Jun 27, 3:44 pm

      Yes, Balsamiq is still my № 1 tool five years on; just delivered a clickable prototype with 46 pages including screen states … although I’ve got a project now that I need something a bit more interactive for and don’t want to have to resort to hand-coding HTML/JS again. Tried Framer.JS but it’s not cross-browser compatible which is an issue for clients still running IE8.

      Reply
      +2
  8. Pablo D Apr 7, 11:33 am

    I also find Indigo Studio to be a great tool, plus it’s free!

    Reply
    +2
  9. Tiago Stutz Apr 8, 4:26 pm

    I’m using Moqups now, but have used Mockflow for a long time. I took a look at the presented options and one feature that all lacks, as far as I concern, is the possibility to position the elements directly in the grid. I don’t mean “snap to grid”, I mean the element having a property called “grid width” and “grid margin” that you can set the element width and position in terms of “gridness” instead of pixels.
    Well, if someone knows a tool that has this feature, please let me know!

    Reply
    +2
  10. John S Apr 8, 4:29 pm

    Brilliant examples indeed.I do love InVisions website. Have you guys been on http://www.dottedpaper.co.uk Free printable dotted paper for wireframing and mobile wireframing. It might be worth bookmarking

    Reply
    +6
  11. Pete Torres Apr 8, 8:36 pm

    I switched to Notism (http://notism.io) for prototyping and feedback. For quick wireframing i love using Hotgloo and Balsamiq.

    Reply
    +9
  12. Mike Apr 15, 11:24 pm

    You should ProtoTouch (prototouchapp.com). A prototyping tool for mobile devices really easy to use. You can import screenshots from DB, your iPhone Library or camera, link them, add transitions, share and install your prototype on any iPhone as a real app, or just see it online.

    Reply
    0
  13. Richard Pike Apr 20, 1:27 pm

    We use balsamiq and love it, but we were having a nightmare with client reviews of our mockups and HTML prototypes so we built webseam. It allows you share images and websites and then clients and team members can edit and markup the websites directly . We are in beta right now at http://www.webseam.com

    Reply
    0
  14. didibop Apr 30, 11:16 am

    Or u just can be creative and use Fireworks

    Reply
    0
  15. App Mockup Tools May 28, 9:52 pm

    I design iOS GUI Element Kits to easily create App Prototypes and wireframes. Just copy and past. http://www.appmockuptools.com

    Reply
    0
  16. Victor Jun 10, 2:04 pm

    O_o my goodness, Justinmind is not in this list? http://www.justinmind.com

    Reply
    +1
    • Jo Sep 25, 9:18 am

      Just in Mind was my first prototyping tool and I have tried Axure after that. But I prefer Just in Mind. Its very easy to use…

      Reply
      0
  17. Mike L. Jun 11, 2:26 am

    Good article, thankx,

    I have recently tried an prototyping tool done in HTML5 in cloud called http://www.NinjaMock.com and it is very good, easy to use, fast, and has super sharing possibilities and functionality to show the client or team, and be able easy to comment. It supports drag and drop from desktop due to HTML5 and it has all elements in vector graphics, and ability to import new icons and other elements. I used Balsamiq before,and tryed FluidUI, but Ninja tool is way better and easy to work with, and has great exporting possibility, and some other collaboration and project control stuff, at least for what I was doing it was just perfect.. You should check it out

    Br
    Mike

    Reply
    +1
  18. Mike Jul 6, 6:03 am

    Try Phototapper. Honestly the easiest and useful thing I saw..

    https://itunes.apple.com/us/app/phototapper/id662904215?mt=8

    The most attractive feature the feedback loop. The whole stage is setup to win the deal. You just build your prototype and Send. Thats all.

    The feedback with markers will come to you as a notification. all will happen in minutes.

    If you can hold a pencil, you can do it.

    More here: http://www.bytters.com

    Reply
    +1
  19. Dave O'Brien Aug 30, 9:31 am

    For Android users, Adobe Proto is no more.

    I couldn’t find a good alternative, so I created Quick Proto. It’s pretty basic so far – sketch pages, link them together, tap Play to try it out – but the price is right (free ;^)

    https://play.google.com/store/apps/details?id=net.dobrien.quickproto

    From there I usually go to Axure. Playing with the Axure 7 beta now – looks promising.

    Reply
    0
  20. Jason Karls Aug 30, 8:10 pm

    FYI for those looking for a cloud based clickthrough (axure knock off) check out protoshare:
    http://www.protoshare.com/

    I’m still using balsamiq/axure/fw for prototyping ;) But indigo certainly is solid and i’m about 1/2 way through checking out the adobe CC muse and edge products.

    -jason

    Reply
    0
  21. Mike Nov 21, 8:35 pm

    I agree with comment above, I just do not understand that ninjamock.com is not on this list. I have tried many tools but for me Ninjamock is best. It is fast, vector based, full HTML5, online in coud, has cool collaboration functions and superb comment funcionality.
    It is kind of super cool tool, and usability is top.
    Just my opinion.

    Br
    Mike

    Reply
    0
  22. Jim Dec 29, 1:28 am

    I’ve just spent a few days evaluating piles of mostly online collaborative wire framing tools and there is nothing I want to use. There are lots of great tools for designing for 2012 but none for 2014 with a fluid design breakpoint workflow.

    There are a couple of early frameworks for designing in a browser such as Wirefy and Goldilocks Approach. These aren’t designer friendly but since I know a little coding I’m going to try to make them work.

    All the existing tools are device breakpoint focused, if they do anything with responsive design at all. A fluid design breakpoint focus means that you can resize the container and as the design needs to be reworked then you set the breakpoint wherever it is needed, not where someone in Cupertino decided to make a screen width in pixels.

    While this very early project isn’t ready to use and uses device breakpoints workflow you can get an idea about fluid design breakpoint. I’ve asked him to redesign it and do a kickstarter project to fund the development.

    I don’t need another project but someone needs to build this tool.

    Jim Preston
    SV Startup Lab
    Silicon Valley, CA

    Reply
    +1
  23. lefime Feb 7, 12:52 pm

    For quick wire framing, try http://www.xiffe.com/
    Xiffe is a cloud based – iOS7, Android, Windows app prototyping tool, currently in beta.

    Reply
    +2
  24. Vladimir Feb 19, 6:20 pm

    I’m using Photoshop Wireframing Kit http://www.photoshopwireframingkit.com/ and I think is very valid tool.

    Reply
    0
  25. Craig Jun 10, 7:22 pm

    Hi,
    I am not looking for a wireframe/create a design tool. I am a designer who works in photoshop and I would like to take my final jpgs/pngs and import them to create working prototypes.

    I also would like to include real data if possible.

    Id like to present user flows with my final design’s before I hand off to our dev team.

    Any recommendations?

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters