Table of contents

Child pages

Related pages

• ...

Software

• Moqups

Balsamiq

• This is great as a replacement for Windows Paint when doing visual brainstorming for math.  For example, I use it for planning out / visualizing math operations that I need to do for Rhymecraft.

Advice

Learning to use it

1. Create a project called something like "Practice - Simple mock-ups of the UIs of existing websites and software".
2. For each mock-up (page) within the project, you'll sketch out the UI of some website, app, or desktop software that you use.
3. Important: Only use the "Rectangle" element (look for it in the "Containers" group) to sketch the website.
   1. This includes using it to represent the browser and/or phone. Keeping it abstract will help keep you from getting sucked into the trap of trying to make everything pixel-perfect.
4. Use the elements you see in the "Markup" group to label what the different sections (rectangles) of the UI are for.
   • Specifically, use the "Comment", "Arrow", and curly brace elements.

Using it

1. Pre-Balsamiq:
   1. Determine what the desired output of the application is.
   2. Figure out what input you will need from the user to provide the desired output.
   3. Figure out if there are any groupings of inputs that should be together in the UI.
   4. Figure out the order in which you will want to ask for those different inputs.
2. Create a simple mock-up using only the "Rectangle" element to designate the major divisions of the UI (navbars, sidebars, main work areas, etc.).
3. If you want, then go in and create detailed mock-ups that are closer to being pixel-perfect.

Questions

• What real-world length, if any, do the sides of the grid squares represent?
  • A: The smallest square seems to represent 20px on a side.

Wishlist

• I wish the inspector would have a link for each element you select that would open up some quick help section on that element.
  • For example, I saw a "Callout" element in the "Markup" group and had no idea what it was.

My thoughts

• The big problem I see with it is that it seems focused on the "Photoshop but easier" features that involve manipulating visual elements, and doesn't really provide any guidance about how you should go about using it. It seems to be a tool developed for PMs working in a somewhat-large team who will already have a rough idea of what they want and just want to make it more real for the higher-ups to see. While working on Rhymecraft, I opened up Balsamiq and was like, "I have no idea how to even begin."
• I think what Balsamiq could do to help my use-case for Rhymecraft is to have a wizard that guides people through what their app does and what pages it needs, and then show the user what other apps have done to guide the user through the various actions they can take, and state the pro's and con's of the different choices, and then have the user click on a button to indicate their preference.
  • For a very simple example, the wizard could say "Do you need display Terms of Service? Here's how to decide if you do: XXX. And here's the different ways they're displayed: XXX. Click the option for how you want to do it."
  • More examples:
    • Do users need to be able to log in?
    • Do you need a Terms of Service?
    • Do you need a Privacy Policy?
    • Do you need an About page?
    • Do you need a splash page that explains what the app does?
    • Should users be able to navigate to the other pages regardless of what other page they're on? (Do you need a navbar?)

Others' thoughts on mock-ups

• 2008.06.03 - Signal v Noise - Why we skip Photoshop
  • This was before Balsamiq existed.
  • Summary
    1. You can’t click a Photoshop mockup. This is probably the number one reason we skip static mockups.
       
       • NW: You can do this in Balsamiq.
    2. Photoshop gives you too many tools to focus on the details, which aren't important when you're prototyping.
    3. The formatting of text in Photoshop often doesn't match how HTML / CSS work. It doesn’t wrap the same, it doesn’t space out the same.
    4. Photoshop leads people to focus too much on thinking about the appearance of the app and not enough on actually building the app, whereas with HTML prototyping you're actually building the app.
    5. If you prototype in HTML/CSS, you can use your prototype for the real version, but with Photoshop you always need to duplicate your work in HTML/CSS afterwards.
    6. It takes longer to make changes (like changing a font) than with HTML prototyping.
    7. Working with a pen and paper is quicker and easier than Photoshop's many buttons, even for people experienced with Photoshop.