Wireframe / Mockup tools

[SiNNuT]

Up until now i've basically only done simple site conversions which didn't involve any design (on my part).

In the near future i've got a couple of projects where i do need to make some layout and design decisions.

I was wondering if you guys use any special tools/apps to create wireframes and mockups or just use Photoshop/Illustrator/Inkscape/GIMP/Fireworks. etc.

Ofcourse mighty Google shows a lot of results like http://www.balsamiq.com/products/mockups and https://gomockingbird.com/ but i'm interested in your input on this subject.

[arjen]

I use Lucidchart for diagramming and wireframing. It's fast and in general a great tool. I also used mockingbird, but that was in an early beta phase so no real input there.

[diogo]

I tend to design with code, and in PW, is actually very easy to organize the content because of the tree approach. I usually do a rough draft with Inkscape as a starting point. When I work with another designer, I usually get just a PDF from her. I actually prefer it like this, because there isn't much point on designing everything by the pixel these days

[geniestreiche]

i tried many of these tools and found for my opinion balsamiq is the best. its easy and fast. what i hate most time from the other tools is they are to complicated, to feature-rich. for an online tool you can try https://moqups.com. when you work with a mac keynote is a good tool too. there are several templates for different devices at http://keynotopia.com. in some situations http://www.wirify.com can be helpful...

[arjen]

For offline use I like Keynote as well as Omingraffle too. For the last one there are some excellent stencils available.

[teppo]

We used FlairBuilder a few years ago, but it always felt too complicated -- to the point where creating and/or modifying wireframes with Photoshop was actually faster (not a good situation IMHO, isn't this one of the things wireframing apps are supposed to help with?) The good thing about it was it's ability to handle interactions, but that's just about it. Unless they've made massive improvements I really wouldn't recommend going that way.

These days we're mostly using Balsamiq. Since the first time I gave it a try, it's been an inseparable part of my toolbox whenever I'm designing a new UI. Compared to more complicated tools like FlairBuilder, it's strong point is definitely ability to create high quality mock-ups super fast (not to mention that learning to use it takes about five minutes.) Highly recommended!

Slightly offtopic: HTML wireframing is a very nice technique to learn. I'd suggest using this method as often as possible, especially if you're going to design / develop applications and/or application-like sites etc. or generally any solution where UX is more important than (too often completely redundant) graphics. With interactive (HTML or not, though creating markup or even code at this point quite often makes things easier later on) wireframes you're not going to need much guesswork, since you can simply implement things and test -- or better yet have someone else test it for you..

[SiNNuT]

teppo, what exactly do you mean by HTML wireframing?

I kinda do this by working with existing front-end frameworks, like Twitter Bootstrap. It has all the basics, works on most browsers, solid grid including responsive defaults.

It's great for quickly putting together an actual working example and build from there.

[teppo]

SiNNuT: what I was talking about back there was probably more like HTML prototyping than just plain wireframing, though in my humble opinion HTML prototypes are rather straightforward evolutionary step of HTML wireframes -- or "HTML wireframes on steroids." Basics and reasoning behind these kind of techniques are discussed (for an example) in this Webdesigner Depot article, this Handcrafted post about how 37signals work on their designs and in this rather old but still valid blog post by 37signals about why they like to "skip Photoshop." I'm still hoping more people in our industry would take these techniques even further though.

What I'm currently most interested in (and experimenting with) is taking HTML wireframes to what I see as "the next level" by adding not only bones (wireframes / structure) but also as much meat (functionality) as possible before drawing / having someone else draw the skin (graphics) on top of it all.

Yeah, I really suck at metaphors. Sorry for that.

I'm actually working on a project right now that I'd love to see as close to being completed as possible before adding any distracting eye candy, though that's definitely not an easy task to achieve; lots of people still claim (I say claim because I'm not very satisfied with this answer) that they cannot really "get" the whole thing without seeing layouts. In my opinion keeping things as bare and clean as possible forces everyone to concentrate on what really matters: usability and user experience.

Long story short: what you're doing is probably very close to what I'm talking about here and I'm happy to hear that you've already implemented a method like this. I'm not a big fan of front-end frameworks myself and definitely not an expert on that subject, but if I've understood properly how they work (and why they exist in the first place) this is exactly what they're good at

[yellowled]

I tend to not do mockups at all, I just start by designing an HTML prototype in the browser. This probably why I prefer systems like PW which don't dictate any markup at all — makes it much easier to transfer the HTML prototype into templates.

If I do mockups, I usually use plain old pen and paper for a really quick scribble. It's just way quicker if you're not used to doing it in a graphics app.

[Adam Kiss]

I use whatever I can remember, so I have about 30 different accounts and apps here and there

Photoshop still beats all, for the design; Mockups seem to not work with clients I deal with usually; for the really big project we did (and are working right now), we at Bonetics are using HotGloo. Works rather well, basically 'balsamiq in cloud' (ahum)