Show Me Your Wireframes! (my response to Andy Budd)

Hi there. I'm not sure if my comment over at Andy Budd's blog got trapped in a spam filter or what, but since it was pretty long and had a request at the end I figured I'd post it here.

You might want to read Andy's post first.

Andy! First of all thank you for moving the discussion over to your blog, Twitter was definitely not up to the job.

I also want to thank you for your feedback on Mockups, it's exactly what I need in order to make it better.

Let me try to address some of your points.

First off, Comic Sans. I don't like it either. I spent many hours trying to replace it with another font (see this for the full threads), and right now I offer users of the Desktop version a way to switch it with any other font of their choosing, but if you read those posts you'll hopefully agree with me that I have no other viable option at the moment. Flash Player 10 includes much better font embedding capabilities so I plan to switch to a different font when enough people have it installed for me to require it, hopefully by the end of the year. That said, I believe that in the same way that details have no place in a wireframe, the font choice shouldn't really matter in them as well.

Next, the Mockups skin (which is BTW based on my wife's hand-drawings). We have three goals, which I think you'll agree with: remove detail, encourage feedback and encourage iterations.

To remove details we use thick lines because that way you won't have room for too much detail (see this for instance).

To encourage feedback we use hand-drawn elements which were intended to look "rough", not stylized or like Big Bird drew them. Maybe it's because I don't have a trained eye, but when using Mockups I don't get distracted by the look of the elements...which parts of it exactly grab your attention so much? If anyone reading this can send me some annotated screenshots I'd love to see them!

The point here is to offer a look that no-one is afraid to criticize. Mockups is almost as fast as paper and pencil (I've been told it's faster for some tasks), and is designed for all those times in which you cannot sit in the same room and use pencil and paper (like in the case of your client doing some initial brainstorming on their own, for instance). Wireframes created with Mockups should also feel like "they are incredibly quick to produce and destroy." I will be sending you a license for Mockups for Desktop for you to try, hopefully you'll agree that at least they are fast to produce.

As for the stylized look, I actually don't mind that the app has a little character. I think it's part of the reason so many people think that Mockups is fun to use (see here), and I think it serves a purpose: if the app is fun people will spend more time on their wireframes and hopefully iterate and produce better results. Also, Mockups was mostly designed for non-technical users, people who don't already use Omnigraffle, Axure or other tools.

I think the issue is that while I designed mockups mostly for brainstorming, some people use it for project documentation as well. For that, I agree that a cleaner, more streamlined skin might be needed. Unfortunately I cannot seem to find a proper skin that IA / UX experts all agree to be "IT", the best one (Konigi's excellent Omnigraffle stencils are the closest thing I know about). I would love to see some of your wireframes, or anybody else's for that matter. They are really hard to find on the web.

So if anyone here is proud of their wireframes and is willing to share, please oh please email me at peldi@balsamiq.com, I promise not to share them.

I have to run out but once again thanks for this post, I am enjoying this discussion and everyone's comments.

Peldi


Get the Inside Scoop

We'll send you just one email a month and share a ton of information that you'll get before everyone else. More info about the newsletter here.

We'll never share your email address or spam you.

Leave a Comment

Your email is never published nor shared.

Comments (12)

  1. Having recently purchased Balsamic Mockups and started using it I can safely say that it is one of the more productive pieces of software I’ve seen for a long time.

    True that OmniGraffle is a great product also, and in conjunction with the Wireframe Stencils would product ‘prettier’ wireframes, but producing wireframes isn’t OmniGraffle’s primary function and is therefore not as intuitive or quick at producing wireframes as Mockups is.

    Now on to the ‘Designers’ view point. As a company we are very design focussed, I myself have a 1st Class Degree in Graphic Design and am also MD of our internet arm of the business. I really can’t understand people’s problems with the ‘sketchy’ look of Mockups, it’s no different than sitting around a table with the client and sketching out ideas with them, (which is always a good idea as the client gets involved in the design process and gains a sense of ownership of the designs and are therefore less likely to reject them πŸ˜‰ the upside of using Mockups is the freedom to move/edit/delete parts of your ‘sketch’.

    Lets get things into perspective, Balsamic Mockups is NOT a design tool, it is not meant to replace Photoshop.

    If you want to have access to all your fonts and you want things to be pixel perfect at a very (too) early stage of the design process, then use Photoshop from the off; as I did before using Mockups.

    If you want to be able to sit around with your client, getting them involved, discussing functionality, adding new ideas on-the-spot into your wireframes, then get Balsamic Mockups. Sure it might not be the prettiest wireframe tool but in a way that’s good because you don’t get too protective of your layout and are more open to experimenting at moving things around.

    I shall be taking my MacBook Pro and Mockups over to my client’s office this afternoon, and I’m sure it will be a productive meeting that will kickstart the project.

    Keep up the good work.

  2. Andy Budd’s post made me angry. I think he’s so advanced that he can’t understand what Balsamiq means to non-designers.

    Balsamiq has been a godsend for my organization.

    It’s a tool that’s helped us tremendously. We can be creative and try out many design ideas without having to be Photoshop experts or whatever.

    Peldi – God bless you man! Don’t let Andy Budd move you off course. πŸ™‚

  3. I believe that moving Balsamiq from a mock-up to wireframe is the wrong move. The sketch is powerful and creates a definite line between an “idea” and a “prototype”.

    The feedback I get from both designers and developers (of which I am that latter) is that mock-ups have a specific place. Let Flash be the wireframe generator from the mock-up.

    Peldi – I believe that your efforts should be focused on the many other ideas you have than to attempt to make Mockups a wireframe tool.

  4. Andy Budd’s post was more of an ridiculous rant. I remember when print designers thought that Adobe PageMaker would be the downfall of western civilization. Please…

    Bottomline, Balsamiq is an amazingly innovative tool that is opening design to more people (yes – even non-designers).

    Andy needs to chill – and be open to change.

    And… we need more Peldi’s in the world.

    Michael Rawlins
  5. Pingback: Wireframes - Wires and Frames | FlairBuilder - Interactive Wireframes and Software Prototypes

  6. Andy has valid points, though I think he might miss the market that, in my opinion, Balsamiq seeks to capture, namely people like me.

    I own a web development shop, and we work with clients all over the world. Balsamiq, used while sitting beside a client, or used via WebEx with a client in Switzerland, has helped us to quickly sketch out ideas, that we can then share. I want to start digital, and keep it digital. A few reasons for this include the ease with which you can create it, change it, and share it.

    In the past, when we have created html mockups with any color or styling whatsoever, for one reason or another, in a client’s mind, those mockups become written in stone. The combination of the hand-written look and the digital format makes Balsamiq a winner for us.

    Please keep up the great work.

  7. Whilst I don’t agree with Andy’s opinion (notably probably for the first time), I do wonder how mockups would look if it had a ‘straight’ or ‘pro’ mode which had exactly the same controls but with tighter, straight lines and less ‘comic’ feel.

    The templates linked by aaron above do look very nice (http://konigi.com/tools/omnigraffle-wireframe-stencils) and being able to switch between comic (or sketchy) and pro modes might be a nice feature. Perhaps replacing the ‘use system fonts’ option that is currently available which I don’t find is really in keeping with the rest of the UI elements.

    How much work would it be to have a version with non-comic components?

    I think a very useful exercise would be to take one of the existing sample mockups and re-do it without the comic feel.

  8. The beauty of Balsamiq Mockups is in the hand drawn feeling it provides. My creativity usually comes from a pad of paper and a marker, but Mockups is somehow even more fun than that. Layout shouldn’t be a chore akin to drawing out an org or flow chart, layout should be fun, flowing, and free.

  9. While Andy has the eye and feelings on his side, Peldi has the statistics. An enormous amount of people like and use Mockups. (It seems now that Peldi owns ‘Mockups’ as BMW owns ‘drive’). The feelings of those few thousands users can’t be wrong either. It is, I guess, a matter of perception. The market segment that Mockups addresses clearly buys everything that it has to offer.

    I personally, although not a designer but merely a software developer, have felt pretty much the same as Andy did. Lines are too thicker for me to get over. I like wireframes that people produce with OmniGraffle or InDesign. There is a certain language that those wireframes use and I can easily understand. The language of Mockups is harder for me to get. But again, I’m only a developer.

    Once, I actually wireframed an application with Mockups and showed it to a colleague. He got my point, he understood the message, we communicated efficiently. Mockups did its job extremely well and fast. Still, I had more in mind and no space in the wireframe. At this point you either have to think at a different scale, I mean, in wider pixels. Maybe people that have used it more often have also changed a bit the sense of proportions when working with Mockups. Or it was just the case that I needed a different tool, as easy to use but more HI-FI oriented.

    All in all, Mockups is a really good tool. It does what it was design to do and it does it pretty well.

    Cristian Pascu
  10. Peldi, there’s a mockup I’m proud of in your inbox. πŸ™‚

  11. I agree with both here. The solutions is to have the ability to upload
    your own ui symbols and icons.

    If the system had symbols on par with these

    http://konigi.com/tools/omnigraffle-wireframe-stencils

    we would of purchased 4 copies of balsamiq.

  12. Personally, I thought Andy Budd’s post was ridiculous; I thought he was making fun of hoity-toity designers at first.