What prototyping tools do you use?


#1

I’m interested to see whether there is an obvious ‘go-to’ tool, or whether everyone uses something different.
What prototyping tools do you use?


What are your favourite tools for wireframing or prototyping?
#2

While doing the HCI Course on Coursea they recommend using Prototyper Pro or Axure, I found Prototyper easier to get to grips with. But I feel now that Auxure is more widely used, is this correct? P


#3

For my current projects I’ve been bouncing back and forth between Visio, Omnigraffle and Balsamiq. They all have their strengths and weaknesses.

I’ve only worked with Axure on one short-term UX gig - I’d like to learn that tool better, especially its prototyping capabilities. I’m saving my pennies to get my own copy. :slight_smile:


#4

It depends on what I’m prototyping and what phase of the design but I find using HTML, CSS, image maps and a bit of jQuery can comfortably handle most prototyping situations. When it comes to responsive prototypes it’s very helpful. The prototype code/markup isn’t production quality though.


#5

I agree with the previous comment. Different tasks require different approaches and presumably different level of fidelity. When designing webpages, I personally always start with a sketch on a piece of paper (makes the flow of my thinking better, I guess) then I transfer the ideas to Photoshop or any similar application where I play around with colours and position of the various elements. I also use Fireworks CS6, Balsamiq and Axure, but I sometimes just skip those and go directly to a HTML/CSS/Jquery prototype which is (or should be) the same as the production version.


#6

I agree that different tasks require different approaches, but I’d be wary of jumping from low fidelity straight into Photoshop. I’ve done this in the past, but it doesn’t work well for quick iterations. No matter how many people say it works fine on paper, you will always find that changes need to be made as you go along the fidelity journey. Also, with Photoshop, you can’t really show interactions well.

What happens when I click this button?
What happens when I log in as an admin user, put to a regular user?

I generally go:

Pencil & Paper -> Paper prototypes -> Balsamiq -> Visual design (either in browser using a pattern lab, or Photoshop) or
Pencil & Paper -> Paper prototypes -> Axure -> Visual design or
Pencil & Paper -> Paper prototypes -> HTML

It depends on the complexity of the project, but unless it is a minor tweak or small addition, then I find that it is way more time consuming for the developer to be able to see something working, rather than something static.


#7

Just wanted to add a shout-out for presentation tools as prototyping/wireframing tools. I use PowerPoint A LOT for these. (But I also use Balsamiq, Indigo and am dabbling in Axure.)

While PowerPoint lacks dedicated tools and comes with a bunch of unnecessary stuff, it (and Keynote etc.) have some advantages too:

  • Easy to share with clients/colleagues who are able to edit or use the built-in review tools
  • Easy to make/download templates/widgets etc
  • Hotspots for basic clickable proto’s
  • You’ve probably already invested in learning (and paying for) it
  • Templates and master slides (poor man’s layers)

Two key disadvantages are:

  • can’t work in pixels
  • can’t effectively make scrolling pages

shane


#8

I have used Balsamiq (although not a huge fan). I love Axure (the ability to assign variables and mockup data fed functionality is invaluable with this tool), not to mention that you can build a prototype very fast and make annotations for your dev team, and build mobile mocks with different effects and there are some responsive templates as well for Axure.
For prototypes with a little more fidelity, I’ve used InVision, I would build static comps and put my prototype in InVision to gather feedback, incredibly efficient and pretty!
Lastly, I have prototyped small sites using the Foundation 5 framework. I actually like how I can go from idea to html prototype to finish product very quickly with this approach, but I couldn’t see myself working on a very large feature rich application with this.


#9

My general go to for prototyping is [B]first pen and paper[/B]. There is something about ironing out the kinks of a sketch that works wonders.
Next, I do [B]white-boarding with markers[/B]. This usually helps due to the big area as I can see the interactions work themselves out visually.
Followed by, [B]Omnigraffle[/B] - which is great for those interactions. Lately its been [B]UXPin[/B] due to its online collaboration flexibility. Its a bit buggy but it works for general use.
Those translate to [B]Fireworks [/B]for linking assets and visual graphics (now [B]PS[/B] due to Adobe no longer supporting Fireworks), then onto to [B]html/css[/B].

Once you create a process for prototyping, there is an endless amount of tools that will serve you just. Feel each one out to see what you prefer because as @Mortvia mentioned; they all have pros/cons dependent on your goals.


#10

Always pen/paper to start with. I’ve usually have gone from that to Illustrator since that was always available (we never had Axure, Omnigraffle, or anything else…since Creative Suite was there, I just used Illy). I’ve heard cases of InDesign working great as well. For my current responsive project, I’m sketching now which I will iron out with Balsamiq, and then will move into low fidelity functional wireframes w/ HTML & CSS using a grid framework (possibly the Semantic Grid system) to iron out layout and other minor interactive elements, modals, responsive tables, and other fun stuff. Thinking pattern library afterward. We’ll see.

I’ve never heard of half these services being mentioned here.

EDIT: Oh, before I forget, anyone giving MACAW a whirl? I was on the Beta, used it once, wasn’t convinced it was ready for primetime, but it just got released officially and haven’t had a chance to test it.


Master Your Craft with These Tools
#11

Pen and paper.
Axure - if I can use it.
Mockingbird - if I can’t use Axure and I need to do something fast and without a license fee.


#12

Simple stuff gets mocked up on paper, otherwise straight to Axure and then Photoshop or Foundation.

Axure is very powerful but it is still quite immature and lacks some basic features that drives me mad like lack of numbered lists and inability to edit instances of masters without breaking them away from the master. It also opens up a world of interactivity but then limits your options at times through it’s GUI. Also widgets are a nice feature but you can’t edit a widget and then update instances of that widget across your project.


#13

hi all,
I do love pen before pixel approach and I’ve to say that I don’t have a single tool but I use some combos:

for web apps (once the main user journey is more or less clear)

  • lo-fi wireframe - balsamiq+invision
  • hi-fi wireframe - sketch+invision
  • lo-fi prototype - sketch+invision
  • hi-fi prototype - html, css and JS - According the complexity of the project I use bootstrap and/or webflow

for native apps is more or less the same process but instead of InVision I use proto.io


#14

We also communicate a lot over the pen and paper sketches. I use a lot of paper prototypes since you can quickly communicate over it with everyone in a meeting for a general concept. I also use my own tool, which is a magnetic tool that I came up with in my master thesis. I use it mostly when I do collaborative wireframing with my team and want to have everyone included in the process (engineers like this tool a lot).

If we want to communicate our prototypes with outside users or stakeholders, I usually prefer to create rough wireframes in balsamiq and make a prototype for them as an invision project. When we have more details and hi-fi mock ups, we create detailed invision. IMHO there invision does an amazing job for those who want to get feedback and test their prototypes.

I personally don’t like Axure, it’s usually a lot of work to do and when you are in an agile environment, using Axure is just waste of time.


#15

I agree that pen and paper is the first tool I always go to, I do quite advanced aper prototypes - many post it notes!

I then go to Axure I found it had a very steep learning curve but the video tutorials they do are great. I’ve tried Balsamique and really didn’t like it as a tool. In the past I have also used something called Flairbuilder which I really highly rated, although found it a little bit buggy at times. Great piece of software, comparable to Axure and much much cheaper! Definintely worth looking into espeically for beginners.


#16

@jacquidow, thanks for letting us know about Flairbuilder, haven’t heard of this one before :slight_smile:

Regarding the Balsamiq, I don’t necessarily see that as a prototyping tool, if you want to use their clickable prototype I agree that it’s very bad (and confusing) and also hard to share. But I (and I’ve also seen a lot of my peers) use Balsamiq to just create a rough/clean wireframes and then I export PNG files and import them all into an invision project, so I can share it with my team and test the general concept in case if it’s needed.

I would actually like to know what didn’t you like about Balsamiq?


#17

For ideation, I use pen and paper and to make basic wireframes and static prototypes I use Adobe XD.


#18

hi @jaisonjustus
I tried for few days XD and I was not fully satisfied by the features and the compatibility with my other design tools.

Which feature(s) do u like most?
Which feature(s) do u miss most?


#19

Currently, I don’t have any favourite feature in XD. The only reason I switched is because of Adobe - whatever Adobe make even if it’s an alpha version it will be a robust. They have a decade of knowledge in computer graphics, building stable software and Best professionals. This is the only reason why I switched to XD. And I frequently track the feature request and its progress, which give me enough confident that the product is going on the right track.

My current benefit using XD is - “one tool for wireframing, static prototyping and visual design”


#20

I had to try out a few different tools and rate them for a previous company so they could decide which to buy and I found Balsamiq quite clunky and it didn’t have the right features for us. We needed quite high fidelity wireframes more advanced interactions than it could offer us.

Flairbuilder is a great little tool but when I moved companies the bugs showed me up a few times in demos and so I switched over to Axure in the hope it was slightly more professional. There are some features from Flairbuilder which I do miss though - especially some of the widgets, which were really good!